How to enqueue scripts or stylesheet in your PHP application
How to enqueue scripts or stylesheet in your PHP application
In this tutorial, I will show you how to make your own simpler version of wp_enqueue function. This function is very useful for PHP development as it makes adding new scripts or stylesheets much easier.
Let's start building our functions. We will first start by creating our enqueue function. The main purpose of this function is to append new scripts or stylesheets either to the header or the footer. We will name it _enqueue. Below is what the code looks like.
function _enqueue($footer=TRUE){
if($footer){
global $enqueue_footer;
echo $enqueue_footer;
}else{
global $enqueue_header;
echo $enqueue_header;
}
}
This function simply echoes the global variable to their respective location: either to the header or the footer. It only has one parameter and that tells it the location to append the HTML tag in.
So now we need another function to set these two global variables. Let's name that function _add(). This function will need two parameters: one providing it the html element and the other one telling it the location to append it.
function _add($tag,$footer=TRUE){
if($footer){
global $enqueue_footer;
$enqueue_footer.=$tag;
}else{
global $enqueue_header;
$enqueue_header.=$tag;
}
}
Notice that the second parameter is set to TRUE. This means when call _add('HTML TAG') without setting the second parameter, it automatically append the tag to the footer but if we want to append to the header we must set to FALSE.
Alright so now that we our two functions set up, you might be wondering how to use them. So let's check out an example below.
<?php
// You can add your functions in a seperate file but for the demo we will add it here
function _add($tag,$footer=TRUE){
if($footer){
global $enqueue_footer;
$enqueue_footer.=$tag;
}else{
global $enqueue_header;
$enqueue_header.=$tag;
}
}
function _enqueue($footer=TRUE){
if($footer){ // Should we append to footer?
global $enqueue_footer;
echo $enqueue_footer; // Output to footer
}else{ // Output it to the header?
global $enqueue_header;
echo $enqueue_header; // Output to header
}
}
// Add to header
_add("<link rel='stylesheet' href='http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css' type='text/css' media='all' />",FALSE);
// Add to footer
_add('<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>');
_add('<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>');
?>
<html>
<head>
<title>PHP is awesome</title>
!-- Append to header -->
<?php _enqueue(FALSE) ?>
</head>
<body>
<!-- Append to footer -->
<?php _enqueue() ?>
</body>
</html>
In the example, we have added the functions in the same file just for the demo purpose but you can basically have it separate and include it. What essentially did above is that we injected the two scripts into the footers and the CSS stylesheet into the header. Notice that when we want to inject something to the header, we must set the second parameter of _add() function to FALSE, otherwise we just ignore it. Also in your template file, to echo the headers, we must call _enqueue() and set the first parameter to FALSE.
This might be simple but when you are developing a PHP application this could be very useful. Feel free to customize it to your needs.