Last active
July 27, 2017 12:56
-
-
Save ccurtin/75741314aeb54d7de262 to your computer and use it in GitHub Desktop.
: WORDPRESS : auto-enque scripts
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Wordpress Auto-Enque Scripts</title> | |
| <link rel="stylesheet" href="_project_files_/highlight/styles/monokai.css"> | |
| <script src="_project_files_/highlight/highlight.pack.js"></script> | |
| <script>hljs.initHighlightingOnLoad();</script> | |
| <?php include('_project_files_/markdown/parsedown.php'); ?> | |
| <style> | |
| body{font-size: 1.3em; } | |
| body,h1,h2,h3,h4,h5,h6{ font-family: 'open sans'; font-weight: 100; background: #EEE; color: #000;line-height: 1.25;} | |
| h1,h2,h3,h4,h5,h6{text-align: center; border-bottom: 1px solid #CCC; padding-bottom: 1em; text-shadow: 0 1px 0 #FFF;} | |
| .container{max-width:100%; margin: 0 auto;} | |
| .tree{ font-size: 1em; color: #666; font-weight: 100 !important;} | |
| .tree code {border: 1px solid #CCC;padding:0 2em;} | |
| .tree * {background: #F3F3F3; color:#000;} | |
| .tree-folder {font-weight: 100;} | |
| .tree-move-left{position: relative; margin-left: -.5ex} | |
| .tree-var *{font-weight: 100; letter-spacing: .05em; color:#008E08 !important;} | |
| .double-and{color:#890C36;} | |
| .link a { | |
| color: #333; | |
| font-weight: 700; | |
| text-shadow: 0 1px 0 #FFF; | |
| text-decoration: none; | |
| border-bottom: 1px solid #C64B46; | |
| font-size: 1.1em; | |
| height: auto; | |
| margin: 0; | |
| line-height: 1; | |
| display: inline-block; | |
| top: -1px; | |
| padding-bottom: 1px; | |
| transition: background 0.1s, color 0.1s; | |
| } | |
| .link a:hover { | |
| background: #C64B46; | |
| text-shadow: none; | |
| color: #FFF; | |
| padding: 0 0em; | |
| font-weight: 100; | |
| border-bottom: 2px solid #C64B46; | |
| transition: background 0.1s, color 0.1s; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <?php | |
| ob_start(); | |
| ?> | |
| # Automatically Register and Enqueue Scripts in Wordpress based on the Folder Structure | |
| ## _for dev use_ | |
| - ` Refactor using ` [`RecursiveDirectoryIterator`](http://php.net/manual/en/class.recursivedirectoryiterator.php) | |
| - `Extend to let user declare which page(s) to enqueue on by (ID/pagename?)` | |
| - `EXPLODE the source file to get which page(s) to load, set to ALL by default ----- if ( is_page( 'careers' ) ){wp_enqueue_script()}` | |
| <hr> | |
| `consider creating a Class so it can be used with plugins, themes, etc: EX: Plugin Folder - something like` **`new autoEnqueueScripts($plugin/$theme, $jsFolderLocation);`** | |
| <hr> | |
| - Our goal is to use PHP to iterate through our javascript directory and grab the (*carefully crafted*) foldername paths and use those paths as variables | |
| in our <span class="link">[`wp_enqueue_script`](http://codex.wordpress.org/Function_Reference/wp_register_script "Function Reference/wp register script « WordPress Codex")</span> | |
| and <span class="link">[`wp_enqueue_script`](http://codex.wordpress.org/Function_Reference/wp_enqueue_script "Function Reference/wp enqueue script « WordPress Codex")</span> functions. | |
| ```php | |
| add_action( 'wp_enqueue_scripts', 'enqueue_and_register_scripts' ); | |
| function enqueue_and_register_scripts(){ | |
| wp_register_script( $handle, $src, $deps, $ver, $in_footer ); | |
| wp_enqueue_script($handle); | |
| } | |
| ``` | |
| - Below shows the order of the directory structure we will be creating to define our variables. | |
| It's very important to follow hierarchy, the whole gist of this depends on it! | |
| ``` | |
| JAVASCRIPTS_FOLDER > $in_footer > $deps > $handle > $ver > $src | |
| ``` | |
| <hr> | |
| <pre class="tree"> | |
| <code> | |
| <span class="tree-folder">JAVASCRIPTS_FOLDER</span> | |
| | | |
| |<span class="tree-move-left">———</span><span class="tree-folder">header</span> | |
| | | |
| |<span class="tree-move-left">———</span><span class="tree-folder">footer</span> | |
| | |<span class="tree-move-left">———</span><span class="tree-folder">depends-on-----<span class="tree-var">$dep</span></span> | |
| | | | |
| | |<span class="tree-move-left">———</span><span class="tree-folder">depends-on-----<span class="tree-var">$dep</span><span class="double-and">&&</span><span class="tree-var">$dep</span><span class="double-and">&&</span><span class="tree-var">$dep</span></span> | |
| | | |
| </code> | |
| </pre> | |
| <br> | |
| <hr> | |
| ## Step 1 | |
| #### Will the script be enqueued in the header or footer? | |
| ```php | |
| // Javascript Directory | |
| const JS_SOURCES = "./js/"; | |
| // Iterate through the dir | |
| $script_locations = new DirectoryIterator(JS_SOURCES); | |
| ########## JS_SOURCES > HEADER/FOOTER ########## | |
| foreach($script_locations as $script_location){ | |
| if($script_location->isDir()){ | |
| if (!$script_location->isDot()){ | |
| $script_location = $script_location->getBasename(); | |
| // If in the header folder | |
| if ($script_location == 'header') | |
| { | |
| $in_footer = "false"; | |
| } | |
| else | |
| { | |
| // If in the footer folder | |
| if ($script_location == 'footer') | |
| { | |
| $in_footer = "true"; | |
| ``` | |
| <?php | |
| const BASE_DIR = "get_template_directory_uri() . "; | |
| // Javascript Directory | |
| const JS_SOURCES = "./js/"; | |
| // Iterate through the dir | |
| $handle; | |
| $src; $deps; | |
| $ver; | |
| global $auto_enqueue_footer_output; | |
| $auto_enqueue_footer_output = array(); | |
| $script_locations = new DirectoryIterator(JS_SOURCES); | |
| ########## JS_SOURCES > HEADER/FOOTER? ########## | |
| foreach($script_locations as $script_location){ | |
| if($script_location->isDir()){ | |
| if (!$script_location->isDot()){ | |
| $script_location = $script_location->getBasename(); | |
| // If in the header folder | |
| if ($script_location == 'header') | |
| { | |
| $in_footer = "false"; | |
| } | |
| else | |
| { | |
| // If in the footer folder | |
| if ($script_location == 'footer') | |
| { | |
| $in_footer = "true"; | |
| print " ##### Our First Iteration Will Output: \n <pre><code>" . htmlspecialchars('<?php wp_register_script( $handle, $src, $deps, $ver, '. $in_footer .' ); >') . "</code></pre><hr>"; | |
| ########## JS_SOURCES > FOOTER > DEPENDENCIES ########## | |
| // Iterate through the footer folder to get dependencies | |
| $dependencies = new DirectoryIterator(JS_SOURCES . $script_location); | |
| // Get the name of each foler | |
| foreach($dependencies as $dependency){ | |
| if($dependency->isDir()){ | |
| if (!$dependency->isDot()){ | |
| // Store Dependency folders for next iteration | |
| $footer_dependency_folder = $dependency->getBasename(); | |
| $dependency = $dependency->getBasename(); | |
| // ECHO EACH DEP FOLDER print $footer_dependency_folder . "<br>"; | |
| // Create an Array from the folder (2 indices); | |
| $dependency = explode("-----", $dependency); | |
| // Remove prefixed "depends-on-----" from the folder | |
| $clean_array_0 = array_shift($dependency); | |
| // Loop through all the dependency folders | |
| foreach ($dependency as $dep) | |
| { | |
| // If multiple dependencies exist, break them apart for use in $dep | |
| if (strpos($dep,'&&') !== false) { | |
| $dep = str_replace("&&", "', '", $dep); | |
| } | |
| $handle_names = new DirectoryIterator(JS_SOURCES . $script_location . "/" . $footer_dependency_folder ); | |
| // Get the name of each foler | |
| foreach($handle_names as $handle_name){ | |
| if($handle_name->isDir()){ | |
| if (!$handle_name->isDot()){ | |
| $handle_folder = $handle_name->getBasename(); | |
| $handle_name->getBasename(); | |
| $handle_name = explode("-----", $handle_name); | |
| $clean_array_0 = array_shift($handle_name); | |
| foreach ($handle_name as $handle) | |
| { | |
| // ECHO EACH HANDLE FOLDER echo $handle; | |
| // Print output : STEP 2 | |
| //print '<pre><code>' . htmlspecialchars('<?php wp_register_script( '. "'" . $handle . "'" .', $src, array('. "'" . $dep . "'" . '), $ver, '. $in_footer .' ); >') . '</code></pre>'; | |
| $version_numbers = new DirectoryIterator(JS_SOURCES . $script_location . "/" . $footer_dependency_folder . "/" . $handle_folder ); | |
| // Get the name of each foler | |
| foreach($version_numbers as $version_number){ | |
| if($version_number->isDir()){ | |
| if (!$version_number->isDot()){ | |
| $version_number = $version_number->getBasename(); | |
| $source_names = new DirectoryIterator(JS_SOURCES . $script_location . "/" . $footer_dependency_folder . "/" . $handle_folder . "/" . $version_number ); | |
| // Get the name of each foler | |
| foreach($source_names as $source_name){ | |
| if($source_name->isFile()){ | |
| if (!$source_name->isDot()){ | |
| $source_name = $source_name->getBasename(); | |
| $source_name = BASE_DIR . "'" . $source_name . "'"; | |
| } | |
| // LAST ONE | |
| //print '<pre><code>' . htmlspecialchars('<?php wp_register_script( '. "'" . $handle . "'" .', '. $source_name .' , array('. "'" . $dep . "'" . '), '. $version_number .', '. $in_footer .' ); >') . '</code></pre>'; | |
| //global $auto_enqueue_output; | |
| $auto_enqueue_footer_output[] = ' | |
| wp_register_script( '. "'" . $handle . "'" .', '. $source_name .' , array('. "'" . $dep . "'" . '), '. $version_number .', '. $in_footer .' ); | |
| wp_enqueue_script("'.$handle.'"); | |
| '; | |
| //echo sizeof($auto_enqueue_output); | |
| } | |
| } | |
| } | |
| } | |
| } // $VERSION_NUMBERS | |
| } | |
| } | |
| } | |
| }//$HANDLE_NAMES | |
| // Print output : STEP 2 | |
| //print '<pre><code>' . htmlspecialchars('<?php wp_register_script( $handle, $src, array('. "'" . $dep . "'" . '), $ver, '. $in_footer .' ); >') . '</code></pre>'; | |
| } | |
| } | |
| } | |
| //print_r("<pre>" . $auto_enqueue_footer_output . "</pre>"); | |
| }//$DEPENDENCIES | |
| // Print output : STEP 1 | |
| //print "<pre><code>" . htmlspecialchars('<?php wp_register_script( $handle, $src, $deps, $ver, '. $in_footer .' ); >') . "</code></pre>"; | |
| // | |
| }//IF $in_footer == FOOTER | |
| } | |
| }// $script_locations - only get child folders | |
| }// is $script_locations a DIR? | |
| }// $script_locations | |
| echo "<pre><code> | |
| add_action( 'wp_enqueue_scripts', 'enqueue_and_register_scripts' ); | |
| function enqueue_and_register_scripts(){ | |
| "; | |
| print_r(implode("\n ", $auto_enqueue_footer_output)); | |
| echo " | |
| }"; | |
| echo "</code></pre>"; | |
| print '<br><br><br><br>'; | |
| ?> | |
| <?php | |
| /* | |
| echo "<pre><code> | |
| add_action( 'wp_enqueue_scripts', 'enqueue_and_register_scripts' ); | |
| function enqueue_and_register_scripts(){ | |
| " . ' | |
| print_r(implode(" \n ", $auto_enqueue_footer_output)); | |
| '; | |
| echo "</code></pre>"; | |
| print '<br><br><br><br>'; | |
| */ | |
| ?> | |
| <?php | |
| // Render Out Markdown | |
| $content = ob_get_clean(); | |
| $Parsedown = new Parsedown(); | |
| echo $Parsedown->text($content); | |
| ?> | |
| </div> | |
| </body> | |
| </html> | |
| <?php | |
| /* | |
| 1) Header or Footer // (footer) | |
| 2) What Dependecies // (array('jquery')) //implode | |
| 3) Handle Name // my-awesome-script | |
| 4) Version # // 0.0.1 | |
| 5) Src // template_directory_uri() . FULL-PATH . FILENAME | |
| ### User can change dependencies/version #'s, handle-names, etc, then run 'gulp update scripts'to update those variables. | |
| <?php// wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?> | |
| <?php// wp_enqueue_script( $handle, $src, $, $ver, $ ); ?> | |
| <?php /* | |
| if($dir == "js") { | |
| $dir2 = new DirectoryIterator("js"); | |
| foreach($dir2 as $file){ | |
| echo $file . '<br>'; | |
| } | |
| } | |
| # 1) Get all of the Directories | |
| Header + Footer ($in_footer) | |
| Break --- implode() get all $deps and store in array *** pass an empty array if no $deps // if $file->idDir() == 'no-dependencies' $cc_deps = 'array('')' | |
| # 2) Get Dependecies 'depends-on---NAME---NAME---NAME' and store breaks in array for $deps variable | |
| */ | |
| ?> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment