From 6b742c459266b18e2b375b35205ce8a6c02f0452 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Thu, 6 Jun 2024 08:05:12 -0400 Subject: Initial commit --- build/wp-enqueue-for-beginners/index.html | 106 ++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 build/wp-enqueue-for-beginners/index.html (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 new file mode 100644 index 0000000..96ccb68 --- /dev/null +++ b/build/wp-enqueue-for-beginners/index.html @@ -0,0 +1,106 @@ + + + + + + + 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

+

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

+

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', '');
+
+

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

+

The default script to enqueue an external JS file:

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

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 );
+
+

In this example we have rendered the following:

+ +

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
+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 );
+}
+
+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!

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf