From 07e4a2dafe248280b5610f8c7d09b0f30b530f54 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 10 Jun 2024 09:41:25 -0400 Subject: Initial modifications to rebuilt only changed files based on mod date, performance updates --- build/wp-enqueue-for-beginners/index.html | 103 ------------------------------ 1 file changed, 103 deletions(-) delete mode 100644 build/wp-enqueue-for-beginners/index.html (limited to 'build/wp-enqueue-for-beginners') diff --git a/build/wp-enqueue-for-beginners/index.html b/build/wp-enqueue-for-beginners/index.html deleted file mode 100644 index a74b8c1..0000000 --- a/build/wp-enqueue-for-beginners/index.html +++ /dev/null @@ -1,103 +0,0 @@ - - - - - - - - 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:

-

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