Load Styles and Scripts with Enqueue on WordPress the Right Way

Load Styles and Scripts with Enqueue on WordPress

In this guide, we are going to see how to Load Styles and Scripts with Enqueue on WordPress the right way. Many developers out there tend to load their styles and scripts on the head section of their website. This and some other methods out there is the wrong way to add styles and scripts to our website. Follow along as I show you the right way of doing this.

But before we continue, let us add our header and footer section of the website to WordPress.

Go to your business-site folder on WordPress => wp-content => themes => martins_business_one and create two files called header.php and footer.php in it.

add header and footer to wordpress

 

Now, locate the business-one HTML template and open the index.html with your text editor of choice. Copy out  <!DOCTYPE HTML> till </header> and paste in header.php on your WordPress theme folder. Your header.php should now look like this:

the header file

Notice that this file starts at the top with <!doctype HTML> and ends here with </header> as can be seen.

You should also try to remove all links in the head section because we will be loading our stylesheets and any css from a file called functions.php

Do the same for the footer. Since the code in these files will be reusable. It makes sense to keep them in their header.php and footer.php and include them on all pages where they are required.

For the footer.php page, copy all from <section class=”first-footer”> till </html> in your business-one HTML template and paste it in footer.php in your WordPress theme. Your footer.php should now look like:

footer file in wordpress
footer file in wordpress

You should also try to remove any script tags used for loading javascript files from the footer since we will be loading javascript scripts from a file called functions.php

Now go to Appearance => Themes => And click on activate on your theme to start using your theme.

activate our theme

Now lets try to visit http://localhost/business-site. We are supposed to see the header and footer designs right? No.

To display the header and footer, we need to include the header and footer files in the page we want it to appear. Use this wordpress function to add them in the index.php file in wordpress theme folder.

<?php get_header(); ?>

and

<?php get_footer(); ?>

The result is

no styles on index page

But this doesn’t look like our site, right. Right! It is actually our site but we have not done something very important and that is to Load Styles and Scripts with Enqueue on WordPress.

This brings us to the subject proper.

SIDENOTE: Please add this comments to the top of the header.php file

<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <section class=”banner-image”>
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package Martins Business One

?>

comment to header file

Also, add this to the top of footer.php

<?php
/**
* The template for displaying the footer
*
* Contains the closing of the banner section and all content after.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package Martins Business One
*/

?>

comment in footer.php

Load Styles and Scripts with Enqueue on WordPress.

 

In a very abbreviated nutshell, what happens here is that instead of adding a link to the stylesheet and scripts on the head and footer areas respectively, in WordPress, these styles and scripts are added in a file we will create called functions.php.

How does WordPress know how to load the styles and scripts?

WordPress looks into a file called wp-settings.php. This file includes another file called script-loader. In this script-loader file we have the enqueue hook – more of hook concept later. With this hook, WordPress is able to load the stylesheet from the functions.php file into your website.

enqueue script in script loader

Without wasting time, let’s create a file in our theme(martins_business_one) folder called functions.php.

In functions.php, add this code:

<?php

function martins_business_one_scripts(){

wp_enqueue_style(‘martins_business_one_style’, get_stylesheet_uri(), array(), ‘1.0’, ‘all’);

}

add_action(‘wp_enqueue_scripts’, ‘martins_business_one_scripts’);

add style to function file

 

A brief explanation of the wp_enqueue_style function.

The handle should be the name of your theme. No hard rule here, but, at least that’s how I do mine. I usually use the theme name to load custom styles and scripts.

get_stylesheet_uri – retrieves the stylesheet used to provide information about a theme. Thus, any styles in this stylesheet will be displayed on the page.

If you create a folder, say, css folder, where you create your own stylesheet, then use get_template_directory_uri instead of get_stylesheet_uri.

1.0 is the version

array() indicates that this style does not depend on any other style.

The ‘all’ shows that you support all media types like screen and print.

What the add_action does is that it takes our function(martins_business_one_scripts) and hooks it up with wp_enqueue_scripts that we discovered in script-loader earlier.

Now lets create a style in style.css

body {

background-color: green;

}

 

Go back to your web page and see the effect in action.

No effect? Oh no! No effect. Well, I did this on purpose.

Remember, that I asked you to remove all the <link> to css in the header.php? Yes, now go back to header.php and before the closing head tag </head>, add :

<?PHP wp_head(); ?> and save.

add-wp_head-to-header-file

Now, the page should load with the correct styles.

test

Our theme is still not rendering half correctly, as we have it in the HTML template. Time to load our bootstrap css and javascript files.

Load Styles and Scripts with Enqueue on WordPress- All Bootstrap and Javascript Files

 

Please go to the HTML template and copy out the assets folder, css folder and js folder to your WordPress theme directory where you can paste them.

my theme assets folder

Now in functions.php, we should add the code below to our martins_business_one_style function.

wp_enqueue_script(‘bootstrap-js’, get_template_directory_uri(). ‘/js/bootstrap.min.js’, array( ‘jquery’, ), ‘4.3.1’, true);

wp_enqueue_style(‘bootstrap-css’, get_template_directory_uri(). ‘/css/bootstrap.min.css’, array(), ‘4.3.1’, all);

add bootstrap styles and scripts to functions file

Notice that I added bootstrap javascript and css files to the functions.php. Since bootstrap javascript depends on jquery, I used array(‘jquery’)

Also, a true indicates that we will place our bootstrap javascript file at the footer.

In case you have not already done this, remove all the script tag at footer, and before the closing </body> tag, add

<?php wp_footer();  ?>

One final thing. I will like to remove all the styles.css codes from the HTML template and paste it in my WordPress themes style.css.

Our final result should be as shown under:

the theme shows

We now have our header and footer displaying correctly.

For more information on enqueueing files, read this wordpress developer documentation.

Review these posts for a better understanding of the entire process:

Step by Step Guide To Making WordPress Theme in 2020

Install WordPress On Xampp Server

Next up, we will work to make our theme menu dynamic.

Till then, stay safe and keep learning!

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top