|
1 | 1 | <?php // ==== ASSETS ==== // |
2 | 2 |
|
3 | 3 | // Now that you have efficiently generated scripts and stylesheets for your theme, how should they be integrated? |
4 | | -// This file walks you through the approach I use but you are free to do this any way you like |
| 4 | +// This file walks you through an approach I use but you are free to do this any way you like |
5 | 5 |
|
6 | | -// Enqueue front-end scripts and styles |
7 | | -function voidx_enqueue_scripts() { |
| 6 | +// Load header assets; this should include the main stylesheet as well as any mission critical scripts |
| 7 | +function voidx_assets_header() { |
8 | 8 |
|
9 | | - $script_name = ''; // Empty by default, may be populated by conditionals below; this is used to generate the script filename |
10 | | - $script_vars = array(); // An empty array that can be filled with variables to send to front-end scripts |
11 | | - $script_handle = 'voidx'; // A generic script handle used internally by WordPress |
12 | | - $ns = 'wp'; // Namespace for scripts; this should match what is specified in your `gulpconfig.js` (and it's safe to leave alone) |
| 9 | + // Header script loading is simplistic in this starter kit but you may want to change what file is loaded based on various conditions; check out the footer asset loader for an example |
| 10 | + $file = 'x-header'; |
| 11 | + wp_enqueue_script( 'voidx-header', get_stylesheet_directory_uri() . '/js/' . $file . '.js', $deps = array(), filemtime( get_template_directory() . '/js/' . $file . '.js' ), false ); |
13 | 12 |
|
14 | | - // Figure out which script bundle to load based on various options set in `src/functions-config-defaults.php` |
15 | | - // Note: bundles require fewer HTTP requests at the expense of addition caching hits when different scripts are requested on different pages of your site |
16 | | - // You could also load one main bundle on every page with supplementary scripts as needed (e.g. for commenting or a contact page); it's up to you! |
| 13 | + // Register and enqueue our main stylesheet with versioning based on last modified time |
| 14 | + wp_register_style( 'voidx-style', get_stylesheet_uri(), $dependencies = array(), filemtime( get_template_directory() . '/style.css' ) ); |
| 15 | + wp_enqueue_style( 'voidx-style' ); |
| 16 | +} |
| 17 | +add_action( 'wp_enqueue_scripts', 'voidx_assets_header' ); |
17 | 18 |
|
18 | 19 |
|
19 | 20 |
|
20 | | - // == EXAMPLE INTEGRATION == // |
| 21 | +// Load footer assets; a more complex example of a smooth asset-loading approach for WordPress themes |
| 22 | +function voidx_assets_footer() { |
21 | 23 |
|
22 | | - // An example integration using WP AJAX Page Loader; this script requires a bit more setup as outlined in the documentation: https://github.com/synapticism/wp-ajax-page-loader |
23 | | - $script_vars_page_loader = ''; |
| 24 | + // Initialize variables |
| 25 | + $name = 'voidx-footer'; // This is the script handle |
| 26 | + $file = 'x'; // The beginning of the filename; "x" is the namespace set in `gulpconfig.js` |
| 27 | + $vars = array(); // An empty array that may be populated by script variables for output with `wp_localize_script` after the footer script is enqueued |
24 | 28 |
|
25 | | - // This conditional establishes whether the page loader bundle is loaded or not; you can turn this off completely from the theme configuration file if you wish (or just remove the code) |
| 29 | + // This approach allows for conditional loading of various script bundles based on options set in `src/functions-config-defaults.php` |
| 30 | + // Note: bundles require fewer HTTP requests at the expense of addition caching hits when different scripts are requested on different pages of your site |
| 31 | + // You could also load one main bundle on every page with supplementary scripts as needed (e.g. for commenting or a contact page); it's up to you! |
| 32 | + |
| 33 | + // Example integraton: WP AJAX Page Loader (similar to Infinite Scroll); this script is only loaded when the conditions below are met |
| 34 | + // This script must be provisioned with some extra data via the `wp_localize_script` function as outlined in the documentation: https://github.com/synapticism/wp-ajax-page-loader |
26 | 35 | if ( VOIDX_SCRIPTS_PAGELOAD && ( is_archive() || is_home() || is_search() ) ) { |
27 | 36 |
|
28 | | - // The script name is used to specify the file that the theme will serve to users |
29 | | - // Script names are designed to be additive (meaning you can append more script names to the end in other conditional blocks using `.= '-anotherscript'` etc.) to allow for multiple feature toggles in the theme configuration |
30 | | - $script_name .= '-pageloader'; |
| 37 | + // Script filenames are designed to be additive (meaning you can append more script names to the end in other conditional blocks using `.= '-anotherscript'` etc.) to allow for multiple feature toggles in the theme configuration |
| 38 | + // Have a look at `gulpconfig.js` to see where these script names are defined |
| 39 | + $file .= '-pageloader'; |
31 | 40 |
|
32 | | - // This chunk of code provisions the WP AJAX Page Loader script with some important information it needs: What page are we on? And what is the page limit? |
| 41 | + // This chunk of code provisions the script with vital info: What page are we on? And what is the page limit? |
33 | 42 | global $wp_query; |
34 | 43 | $max = $wp_query->max_num_pages; |
35 | 44 | $paged = ( get_query_var( 'paged' ) > 1 ) ? get_query_var( 'paged' ) : 1; |
36 | 45 |
|
37 | | - // Prepare script variables; note that these are separate from the rest of the script variables as the WP AJAX Page Loader script requires everything in a specific object named `PG8Data` |
38 | | - $script_vars_page_loader = array( |
| 46 | + // Prepare script variables that will be output after the footer script is enqueued |
| 47 | + $vars['PG8Data'] = array( |
39 | 48 | 'startPage' => $paged, |
40 | 49 | 'maxPages' => $max, |
41 | 50 | 'nextLink' => next_posts( $max, false ) |
42 | 51 | ); |
43 | | - } // WP AJAX Page Loader configuration ends |
44 | | - |
45 | | - |
| 52 | + } |
46 | 53 |
|
47 | | - // Default script name; used when conditional blocks (above) aren't triggered |
48 | | - if ( empty( $script_name ) ) |
49 | | - $script_name = '-core'; |
| 54 | + // If none of the conditons were matched (above) let's output the default script name |
| 55 | + if ( $file === 'x' ) |
| 56 | + $file .= '-footer'; |
50 | 57 |
|
51 | 58 | // Load theme-specific JavaScript bundles with versioning based on last modified time; http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/ |
52 | 59 | // The handle is the same for each bundle since we're only loading one script; if you load others be sure to provide a new handle |
53 | | - wp_enqueue_script( $script_handle, get_stylesheet_directory_uri() . '/js/' . $ns . $script_name . '.js', array( 'jquery' ), filemtime( get_template_directory() . '/js/' . $ns . $script_name . '.js' ), true ); |
54 | | - |
55 | | - // Pass variables to JavaScript at runtime; see: http://codex.wordpress.org/Function_Reference/wp_localize_script |
56 | | - $script_vars = apply_filters( 'voidx_script_vars', $script_vars ); |
57 | | - if ( !empty( $script_vars ) ) |
58 | | - wp_localize_script( $script_handle, 'voidxVars', $script_vars ); |
59 | | - |
60 | | - // Script variables specific to WP AJAX Page Loader (these are separate from the main theme script variables due to the naming requirement; the object *must* be `PG8Data`) |
61 | | - // This appears here and NOT in the conditional block (above) because these variables will be attached to the main script handle (which may be modified after the page loader block) |
62 | | - if ( !empty( $script_vars_page_loader ) ) |
63 | | - wp_localize_script( $script_handle, 'PG8Data', $script_vars_page_loader ); |
64 | | - |
65 | | - // Register and enqueue our main stylesheet with versioning based on last modified time |
66 | | - wp_register_style( 'voidx-style', get_stylesheet_uri(), $dependencies = array(), filemtime( get_template_directory() . '/style.css' ) ); |
67 | | - wp_enqueue_style( 'voidx-style' ); |
| 60 | + wp_enqueue_script( $name, get_stylesheet_directory_uri() . '/js/' . $file . '.js', array( 'jquery' ), filemtime( get_template_directory() . '/js/' . $file . '.js' ), true ); // This last `true` is what loads the script in the footer |
68 | 61 |
|
| 62 | + // Pass variables to scripts at runtime; must be triggered after the script is enqueued; see: http://codex.wordpress.org/Function_Reference/wp_localize_script |
| 63 | + if ( !empty( $vars ) ) { |
| 64 | + foreach ( $vars as $var => $data ) |
| 65 | + wp_localize_script( $name, $var, $data ); |
| 66 | + } |
69 | 67 | } |
70 | | -add_action( 'wp_enqueue_scripts', 'voidx_enqueue_scripts' ); |
| 68 | +add_action( 'wp_enqueue_scripts', 'voidx_assets_footer' ); |
71 | 69 |
|
72 | 70 |
|
73 | 71 |
|
74 | | -// Provision the front-end with the appropriate script variables |
75 | | -function voidx_update_script_vars( $script_vars = array() ) { |
| 72 | +// Load assets on single content; useful for conditional loading of the core comments script, for example |
| 73 | +function voidx_assets_singular() { |
| 74 | + if ( !is_singular() ) |
| 75 | + return; |
76 | 76 |
|
77 | | - // Non-destructively merge script variables if a particular condition is met (e.g. `is_archive()` or whatever); useful for managing many different kinds of script variables |
78 | | - if ( 1 == 1 ) { |
79 | | - $script_vars = array_merge( $script_vars, array( |
80 | | - 'ajaxUrl' => admin_url( 'admin-ajax.php' ), |
81 | | - 'nameSpaced' => array( |
82 | | - 'test1' => __( 'Testing 1, 2, 3!', 'voidx' ), |
83 | | - 'test2' => __( 'This is easier than it looks :)', 'voidx' ) |
84 | | - ) ) ); |
85 | | - } |
86 | | - return $script_vars; |
| 77 | + // Load core WordPress script for handling threaded comments where appropriate |
| 78 | + // This isn't really useful since comments aren't a feature of this simple theme but you get the idea |
| 79 | + if ( comments_open() && get_option('thread_comments') ) |
| 80 | + wp_enqueue_script( 'comment-reply' ); |
87 | 81 | } |
88 | | -add_filter( 'voidx_script_vars', 'voidx_update_script_vars' ); |
| 82 | +add_action( 'wp_enqueue_scripts', 'voidx_assets_singular' ); |
0 commit comments