From dcfb172704f3afb68a30425029ec834be2883274 Mon Sep 17 00:00:00 2001 From: bt Date: Sat, 8 Jun 2024 13:22:19 -0400 Subject: More content porting, on-going markdown changes for lowdown support --- build/wp-enqueue-for-beginners/index.html | 78 ++++++++++++++++++++----------- 1 file changed, 51 insertions(+), 27 deletions(-) (limited to 'build/wp-enqueue-for-beginners/index.html') diff --git a/build/wp-enqueue-for-beginners/index.html b/build/wp-enqueue-for-beginners/index.html index 96ccb68..bc795a6 100644 --- a/build/wp-enqueue-for-beginners/index.html +++ b/build/wp-enqueue-for-beginners/index.html @@ -1,36 +1,43 @@ - + WP Enqueue for Beginners - - + + +
-

WP Enqueue for Beginners

+

WP Enqueue for Beginners

+

2020-05-05

-

Throughout my career designing, developing and auditing WordPress themes, I've come across many that include their custom styles / scripts as static HTML elements inside their respective header and footer templates. This is perfectly fine, but there is a cleaner way to include these files.

-

This post is purposefully catered for WordPress beginners, so if this seems overly simple, then you're probably already developing WordPress themes that utilize these techniques. (Which is awesome!)

-

Introducing WP Enqueue

+ +

Throughout my career designing, developing and auditing WordPress themes, I’ve come across many that include their custom styles / scripts as static HTML elements inside their respective header and footer templates. This is perfectly fine, but there is a cleaner way to include these files.

+ +

This post is purposefully catered for WordPress beginners, so if this seems overly simple, then you’re probably already developing WordPress themes that utilize these techniques. (Which is awesome!)

+ +

Introducing WP Enqueue

+

The description of Wp Enqueue from the WordPress documentation:

-

-

- Registers the style [script] if source provided (does NOT overwrite) and enqueues -

-

+

In a nutshell: Placing a wp_enqueue_script or wp_enqueue_style script in the functions.php of your custom theme tells WordPress to pull external files into the header or footer of your website. Best practice being: styles into the header, scripts into the footer.

+

I suggest you read the official documentation for more details: wp_enqueue_script and wp_enqueue_style.

-

Enqueue Stylesheets

+ +

Enqueue Stylesheets

+

The default script to enqueue a CSS stylesheet:

+ 
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
+ +

So, with all those parameters in mind, here is what a standard default enqueue of a CSS stylesheet looks like:

-
wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900', '', '1.0', '');
+
+
wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900', '', '1.0', '');
 

+
 
In this example we have rendered the following:

+
 
+
 
Important: Keep in mind that the wp_enqueue_style script will render the stylesheet link into the WordPress header automatically.

-
Enqueue Scripts

+
+
Enqueue Scripts

+
 
The default script to enqueue an external JS file:

+
 
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
 

+
 
    
 
  • $handle - the name associated with your script
    • 
 
  • $src - URL pointing to the directory of the script itself
    • 
 
  • $deps - An array of any other scripts needed as dependencies
    • 
 
  • $ver - The version number of the script (used for cache busting)
    • 
-
  • $in_footer - Set whether the script is loaded in the <head> or just before the </body>
    • 
+
  • $in_footer - Set whether the script is loaded in the <head> or just before the </body>
    • 
 

+
 
With all those parameters in mind, here is what a standard default enqueue of a Javascript file looks like:

-
wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true );
+
+
wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true );
 

+
 
In this example we have rendered the following:

+
 
    
 
  • $handle: bxslider
    • 
-
  • $src: get_template_directoryri() . /js/bxslider.js'
    • 
-
  • $deps: array(jquery')
    • 
+
  • $src: get_template_directory_uri() . /js/bxslider.js’
    • 
+
  • $deps: array(jquery’)
    • 
 
  • $ver: 1.0.0
    • 
 
  • $in_footer: True (places script before closing body tag)
    • 
 

-
Packaging Everything Together

+
+
Packaging Everything Together

+
 
Now that we have the custom stylesheet and script ready to be loaded into our custom WordPress theme, we just need to properly package them together as a function in our functions.php file:

-
// Add styles and scripts to the header/footer
+
+
// Add styles and scripts to the header/footer
 function custom_enqueue_scripts() {
-        wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900');
-        wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true );
+        wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:200,300,300i,400,600,700,800,900');
+        wp_enqueue_script( 'bxslider', get_template_directory_uri() . '/js/bxslider.js', array('jquery'), '1.0.0', true );
 }
 
-add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
+add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts');
 

-
That's it! Hopefully this helps prevent WordPress newbies from statically rendering their external CSS and JS files directly in template files. Let WordPress do that for you!

+
+
That’s it! Hopefully this helps prevent WordPress newbies from statically rendering their external CSS and JS files directly in template files. Let WordPress do that for you!