This repository has been archived by the owner on Sep 3, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 118
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #39 from synapticism/develop
Develop updates
- Loading branch information
Showing
8 changed files
with
88 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,6 +17,7 @@ | |
| "supernew": true, | ||
| "globals": { | ||
| "_": true, | ||
| "jQuery": true | ||
| "jQuery": true, | ||
| "svg4everybody": true | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,88 +1,82 @@ | ||
| <?php // ==== ASSETS ==== // | ||
|
|
||
| // Now that you have efficiently generated scripts and stylesheets for your theme, how should they be integrated? | ||
| // This file walks you through the approach I use but you are free to do this any way you like | ||
| // This file walks you through an approach I use but you are free to do this any way you like | ||
|
|
||
| // Enqueue front-end scripts and styles | ||
| function voidx_enqueue_scripts() { | ||
| // Load header assets; this should include the main stylesheet as well as any mission critical scripts | ||
| function voidx_assets_header() { | ||
|
|
||
| $script_name = ''; // Empty by default, may be populated by conditionals below; this is used to generate the script filename | ||
| $script_vars = array(); // An empty array that can be filled with variables to send to front-end scripts | ||
| $script_handle = 'voidx'; // A generic script handle used internally by WordPress | ||
| $ns = 'wp'; // Namespace for scripts; this should match what is specified in your `gulpconfig.js` (and it's safe to leave alone) | ||
| // 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 | ||
| $file = 'x-header'; | ||
| wp_enqueue_script( 'voidx-header', get_stylesheet_directory_uri() . '/js/' . $file . '.js', $deps = array(), filemtime( get_template_directory() . '/js/' . $file . '.js' ), false ); | ||
|
|
||
| // Figure out which script bundle to load based on various options set in `src/functions-config-defaults.php` | ||
| // Note: bundles require fewer HTTP requests at the expense of addition caching hits when different scripts are requested on different pages of your site | ||
| // 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! | ||
| // Register and enqueue our main stylesheet with versioning based on last modified time | ||
| wp_register_style( 'voidx-style', get_stylesheet_uri(), $dependencies = array(), filemtime( get_template_directory() . '/style.css' ) ); | ||
| wp_enqueue_style( 'voidx-style' ); | ||
| } | ||
| add_action( 'wp_enqueue_scripts', 'voidx_assets_header' ); | ||
|
|
||
|
|
||
|
|
||
| // == EXAMPLE INTEGRATION == // | ||
| // Load footer assets; a more complex example of a smooth asset-loading approach for WordPress themes | ||
| function voidx_assets_footer() { | ||
|
|
||
| // 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 | ||
| $script_vars_page_loader = ''; | ||
| // Initialize variables | ||
| $name = 'voidx-footer'; // This is the script handle | ||
| $file = 'x'; // The beginning of the filename; "x" is the namespace set in `gulpconfig.js` | ||
| $vars = array(); // An empty array that may be populated by script variables for output with `wp_localize_script` after the footer script is enqueued | ||
|
|
||
| // 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) | ||
| // This approach allows for conditional loading of various script bundles based on options set in `src/functions-config-defaults.php` | ||
| // Note: bundles require fewer HTTP requests at the expense of addition caching hits when different scripts are requested on different pages of your site | ||
| // 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! | ||
|
|
||
| // Example integraton: WP AJAX Page Loader (similar to Infinite Scroll); this script is only loaded when the conditions below are met | ||
| // 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 | ||
| if ( VOIDX_SCRIPTS_PAGELOAD && ( is_archive() || is_home() || is_search() ) ) { | ||
|
|
||
| // The script name is used to specify the file that the theme will serve to users | ||
| // 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 | ||
| $script_name .= '-pageloader'; | ||
| // 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 | ||
| // Have a look at `gulpconfig.js` to see where these script names are defined | ||
| $file .= '-pageloader'; | ||
|
|
||
| // 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? | ||
| // This chunk of code provisions the script with vital info: What page are we on? And what is the page limit? | ||
| global $wp_query; | ||
| $max = $wp_query->max_num_pages; | ||
| $paged = ( get_query_var( 'paged' ) > 1 ) ? get_query_var( 'paged' ) : 1; | ||
|
|
||
| // 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` | ||
| $script_vars_page_loader = array( | ||
| // Prepare script variables that will be output after the footer script is enqueued | ||
| $vars['PG8Data'] = array( | ||
| 'startPage' => $paged, | ||
| 'maxPages' => $max, | ||
| 'nextLink' => next_posts( $max, false ) | ||
| ); | ||
| } // WP AJAX Page Loader configuration ends | ||
|
|
||
|
|
||
| } | ||
|
|
||
| // Default script name; used when conditional blocks (above) aren't triggered | ||
| if ( empty( $script_name ) ) | ||
| $script_name = '-core'; | ||
| // If none of the conditons were matched (above) let's output the default script name | ||
| if ( $file === 'x' ) | ||
| $file .= '-footer'; | ||
|
|
||
| // Load theme-specific JavaScript bundles with versioning based on last modified time; http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/ | ||
| // 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 | ||
| 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 ); | ||
|
|
||
| // Pass variables to JavaScript at runtime; see: http://codex.wordpress.org/Function_Reference/wp_localize_script | ||
| $script_vars = apply_filters( 'voidx_script_vars', $script_vars ); | ||
| if ( !empty( $script_vars ) ) | ||
| wp_localize_script( $script_handle, 'voidxVars', $script_vars ); | ||
|
|
||
| // 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`) | ||
| // 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) | ||
| if ( !empty( $script_vars_page_loader ) ) | ||
| wp_localize_script( $script_handle, 'PG8Data', $script_vars_page_loader ); | ||
|
|
||
| // Register and enqueue our main stylesheet with versioning based on last modified time | ||
| wp_register_style( 'voidx-style', get_stylesheet_uri(), $dependencies = array(), filemtime( get_template_directory() . '/style.css' ) ); | ||
| wp_enqueue_style( 'voidx-style' ); | ||
| 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 | ||
|
|
||
| // Pass variables to scripts at runtime; must be triggered after the script is enqueued; see: http://codex.wordpress.org/Function_Reference/wp_localize_script | ||
| if ( !empty( $vars ) ) { | ||
| foreach ( $vars as $var => $data ) | ||
| wp_localize_script( $name, $var, $data ); | ||
| } | ||
| } | ||
| add_action( 'wp_enqueue_scripts', 'voidx_enqueue_scripts' ); | ||
| add_action( 'wp_enqueue_scripts', 'voidx_assets_footer' ); | ||
|
|
||
|
|
||
|
|
||
| // Provision the front-end with the appropriate script variables | ||
| function voidx_update_script_vars( $script_vars = array() ) { | ||
| // Load assets on single content; useful for conditional loading of the core comments script, for example | ||
| function voidx_assets_singular() { | ||
| if ( !is_singular() ) | ||
| return; | ||
|
|
||
| // 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 | ||
| if ( 1 == 1 ) { | ||
| $script_vars = array_merge( $script_vars, array( | ||
| 'ajaxUrl' => admin_url( 'admin-ajax.php' ), | ||
| 'nameSpaced' => array( | ||
| 'test1' => __( 'Testing 1, 2, 3!', 'voidx' ), | ||
| 'test2' => __( 'This is easier than it looks :)', 'voidx' ) | ||
| ) ) ); | ||
| } | ||
| return $script_vars; | ||
| // Load core WordPress script for handling threaded comments where appropriate | ||
| // This isn't really useful since comments aren't a feature of this simple theme but you get the idea | ||
| if ( comments_open() && get_option('thread_comments') ) | ||
| wp_enqueue_script( 'comment-reply' ); | ||
| } | ||
| add_filter( 'voidx_script_vars', 'voidx_update_script_vars' ); | ||
| add_action( 'wp_enqueue_scripts', 'voidx_assets_singular' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| // ==== HEADER ==== // | ||
|
|
||
| // A simple wrapper for all your custom jQuery that belongs in the header | ||
| ;(function($){ | ||
| $(function(){ | ||
| // Initialize svg4everybody 2.0.0+, which is supposed to be done in the header | ||
| svg4everybody(); | ||
| }); | ||
| }(jQuery)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters