Last active
August 29, 2015 14:07
Used to easily and dynamically add scripts and styles into a WordPress application.
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
<?php | |
/** | |
* These are all of the files (both javascript and css) that needed to be registered and enqueued. | |
* | |
* In order to use this system, create an array similar to this example and create a new "DynamicScripts" class, passing | |
* that array into it (like done below). Your files should use the naming convention of "{filename}.css|js" for development | |
* files and "{filename}.min.css|js" for the minified production files (though feel free to modify the class below | |
* to suit your file naming convention needs). | |
* | |
* This system will do something really cool. If WP_DEBUG is off, it loads the production files, but if WP_DEBUG is on, | |
* it loads the development files. This is EXCELLENT for debugging purposes. | |
*/ | |
$args = array( | |
'pre' => 'dynamic-files', | |
'version' => '0.1.0', | |
'path_to_css' => plugins_url( 'assets/css/', __FILE__ ), | |
'path_to_src_css' => plugins_url( 'assets/css/source/', __FILE__ ), | |
'path_to_js' => plugins_url( 'assets/js/', __FILE__ ), | |
'path_to_src_js' => plugins_url( 'assets/js/source/', __FILE__ ), | |
'files' => array( | |
'frontend' => array( | |
'css' => array( | |
array( | |
'name' => 'main', | |
), | |
), | |
'js' => array( | |
array( | |
'name' => 'navigation', | |
'deps' => array( 'jquery' ), | |
'footer' => true, | |
), | |
), | |
), | |
'backend' => array( | |
'css' => array( | |
array( | |
'name' => 'backend', | |
), | |
), | |
'js' => array(), | |
), | |
), | |
); | |
new DynamicScripts( $args ); | |
// Feel free to take everything below the example above and include it in a separate file. | |
/** | |
* Class DynamicScripts | |
* | |
* Dynamically adds all scripts and styles determined by the arguments given. Also deals with loading production vs | |
* develompent scripts dependent on WP_DEBUG. | |
* | |
* @author Joel Worsham <joelworsham@gmail.com> | |
* | |
* @version 0.1.0 | |
*/ | |
class DynamicScripts { | |
/** | |
* All files to load. Must be a very specific format. | |
* | |
* @var array { | |
* @type array $frontend Frontend files. { | |
* @type array $css Frontend CSS files. { | |
* @type array Properties about the file. { | |
* @type string $name The file name / handle. | |
* @type array $deps Optional. An array of dependency handles. | |
* }, | |
* @type array $js Frontend JS files. { | |
* @type array Properties about the file. { | |
* @type string $name The file name / handle. | |
* @type array $deps Optional. An array of dependency handles. | |
* @type bool $footer Optional. If true, will load in footer, otherwise in the header. Default | |
* false. | |
* } | |
* }, | |
* @type array $backend Backend files. { | |
* @type array $css Backend CSS files. { | |
* @type array Properties about the file. { | |
* @type string $name The file name / handle. | |
* @type array $deps Optional. An array of dependency handles. | |
* }, | |
* @type array $js Backend JS files. { | |
* @type array Properties about the file. { | |
* @type string $name The file name / handle. | |
* @type array $deps Optional. An array of dependency handles. | |
* @type bool $footer Optional. If true, will load in footer, otherwise in the header. Default | |
* false. | |
* } | |
* } | |
* } | |
* | |
* @since DynamicScripts 0.1.0 | |
*/ | |
private $files; | |
/** | |
* URI to the css directory. | |
* | |
* @since DynamicScripts 0.1.0 | |
* | |
* @var string. | |
*/ | |
private $path_to_css; | |
/** | |
* URI to the css source directory. | |
* | |
* @since DynamicScripts 0.1.0 | |
* | |
* @var string. | |
*/ | |
private $path_to_src_css; | |
/** | |
* URI to the js directory. | |
* | |
* @since DynamicScripts 0.1.0 | |
* | |
* @var string. | |
*/ | |
private $path_to_js; | |
/** | |
* URI to the js source directory. | |
* | |
* @since DynamicScripts 0.1.0 | |
* | |
* @var string. | |
*/ | |
private $path_to_src_js; | |
/** | |
* Constructs the class. | |
* | |
* @since DynamicScripts 0.1.0 | |
* | |
* @param array $args { | |
* @type string $version The version of whatever application this resides in. | |
* @type string $pre The prefix to the file handles. | |
* @type string $path_to_css The complete uri to the css directory. | |
* @type string $path_to_src_css Optional. The complete uri to the source css directory (typically un-minified). | |
* Default $path_to_css. | |
* @type string $path_to_js The complete uri to the js directory. | |
* @type string $path_to_src_js Optional. The complete uri to the source js directory (typically un-minified). | |
* Default $path_to_js. | |
* @type array $files The files to load. { | |
* @type array $frontend Frontend files. { | |
* @type array $css Frontend CSS files. { | |
* @type array Properties about the file. { | |
* @type string $name The file name / handle. | |
* @type array $deps Optional. An array of dependency handles. | |
* }, | |
* @type array $js Frontend JS files. { | |
* @type array Properties about the file. { | |
* @type string $name The file name / handle. | |
* @type array $deps Optional. An array of dependency handles. | |
* @type bool $footer Optional. If true, will load in footer, otherwise in the header. Default | |
* false. | |
* } | |
* }, | |
* @type array $backend Backend files. { | |
* @type array $css Backend CSS files. { | |
* @type array Properties about the file. { | |
* @type string $name The file name / handle. | |
* @type array $deps Optional. An array of dependency handles. | |
* }, | |
* @type array $js Backend JS files. { | |
* @type array Properties about the file. { | |
* @type string $name The file name / handle. | |
* @type array $deps Optional. An array of dependency handles. | |
* @type bool $footer Optional. If true, will load in footer, otherwise in the header. Default | |
* false. | |
* } | |
* } | |
* } | |
* } | |
*/ | |
public function __construct( $args ) { | |
// Check existence of necessary args | |
if ( ! isset( $args['files'] ) || | |
! isset( $args['path_to_css'] ) || | |
! isset( $args['path_to_js'] ) || | |
! isset( $args['pre'] ) || | |
! isset( $args['version'] ) | |
) { | |
echo '<pre>ERROR: Missing necessary arguments.</pre>'; | |
return; | |
} | |
// Setup properties | |
$this->pre = $args['pre']; | |
$this->version = $args['version']; | |
$this->files = $args['files']; | |
$this->path_to_css = $args['path_to_css']; | |
$this->path_to_src_css = isset( $args['path_to_src_css'] ) ? $args['path_to_src_css'] : $this->path_to_css; | |
$this->path_to_js = $args['path_to_js']; | |
$this->path_to_src_js = isset( $args['path_to_src_js'] ) ? $args['path_to_src_js'] : $this->path_to_js; | |
// Register all files on front and backend | |
add_action( 'init', array( $this, 'register_files' ) ); | |
// Enqueue our files dependant on whether we're in the frontend or backend | |
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_frontend_files' ) ); | |
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_backend_files' ) ); | |
} | |
/** | |
* Register all of our files. | |
* | |
* This function will loop through all of the files supplied and register them dynamically. | |
* | |
* @since DynamicScripts 0.1.0 | |
*/ | |
public function register_files() { | |
foreach ( $this->files as $section => $types ) { | |
foreach ( $types as $type => $files ) { | |
foreach ( $files as $file ) { | |
if ( $type == 'css' ) { | |
if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) { | |
wp_register_style( | |
"{$this->pre}-$file[name]", | |
"{$this->path_to_src_css}{$file['name']}.css", | |
isset( $file['deps'] ) ? $file['deps'] : null, | |
time() | |
); | |
} else { | |
wp_register_style( | |
"{$this->pre}-$file[name]", | |
"{$this->path_to_css}{$file['name']}.min.css", | |
isset( $file['deps'] ) ? $file['deps'] : null, | |
$this->version | |
); | |
} | |
} elseif ( $type == 'js' ) { | |
if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) { | |
wp_register_script( | |
"{$this->pre}-$file[name]", | |
"{$this->path_to_src_js}{$file['name']}.js", | |
isset( $file['deps'] ) ? $file['deps'] : null, | |
time(), | |
isset( $file['footer'] ) ? $file['footer'] : false | |
); | |
} else { | |
wp_register_script( | |
"{$this->pre}-$file[name]", | |
"{$this->path_to_js}{$file['name']}.min.js", | |
isset( $file['deps'] ) ? $file['deps'] : null, | |
$this->version, | |
isset( $file['footer'] ) ? $file['footer'] : false | |
); | |
} | |
} | |
} | |
} | |
} | |
} | |
/** | |
* Enqueues all of the files for the frontend of the theme. | |
* | |
* @since DynamicScripts 0.1.0 | |
*/ | |
public function enqueue_frontend_files() { | |
foreach ( $this->files['frontend'] as $type => $files ) { | |
foreach ( $files as $file ) { | |
if ( $type == 'css' ) { | |
wp_enqueue_style( "{$this->pre}-$file[name]" ); | |
} else { | |
wp_enqueue_script( "{$this->pre}-$file[name]" ); | |
} | |
} | |
} | |
} | |
/** | |
* Enqueues all of the files for the backend of the theme. | |
* | |
* @since DynamicScripts 0.1.0 | |
*/ | |
public function enqueue_backend_files() { | |
foreach ( $this->files['backend'] as $type => $files ) { | |
foreach ( $files as $file ) { | |
if ( $type == 'css' ) { | |
wp_enqueue_style( "{$this->pre}-$file[name]" ); | |
} else { | |
wp_enqueue_script( "{$this->pre}-$file[name]" ); | |
} | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment