WORDPRESS : auto-enque scripts

12/11/2014 - 9:12 PM
WORDPRESS : auto-enque scripts

<!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 &laquo; WordPress Codex")</span> 
and <span class="link">[`wp_enqueue_script`](http://codex.wordpress.org/Function_Reference/wp_enqueue_script "Function Reference/wp enqueue script &laquo; 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">&mdash;&mdash;&mdash;</span><span class="tree-folder">header</span>
|
|<span class="tree-move-left">&mdash;&mdash;&mdash;</span><span class="tree-folder">footer</span>   
|   |<span class="tree-move-left">&mdash;&mdash;&mdash;</span><span class="tree-folder">depends-on-----<span class="tree-var">$dep</span></span>
|   |
|   |<span class="tree-move-left">&mdash;&mdash;&mdash;</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&nbsp;&nbsp;&nbsp;", $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("&nbsp;&nbsp;\n&nbsp;&nbsp;", $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
*/

?>
Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

WORDPRESS : auto-enque scripts
