Linking correctly in WordPress

If you are a web developer and build websites using HTML and CSS, you already know how to attach css and js files in the head of your webpage. Well there is a completely different way to link scripts and stylesheets correctly in WordPress. This is what we are going to solve today!

The Solution

Hopefully you already have a good grasp on the page template hierarchy in WordPress, but if you don’t you can learn about it in the WordPress Codex. We need to access the functions.php file because we need to add some code into it to “enqueue” or call the styles and scripts. We will not be adding the below code into the head of our webpage:

<link href="/css/style.css" rel="stylesheet" />

Instead, you have to go into the functions.php file and add a code that looks like this:

function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js' );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Let’s break this code down so you can not only use it but understand how it works. First, we declare a function by writing the work “function” then we give the function a name. In this case we wrote theme_name_scripts and we must end that with “()” with no space. You can literally change this to say whatever works best for you. However, you have to understand that it is used twice in the full code above, so don’t forget to change it in both places. Next we open the function with a set of curly braces “{ }” and inside we add the rest of the code to be run. Inside we add wp_enqueue_style if it is a stylesheet or wp_enqueue_script if it is a script file. Both of these end in “()” just like the first function we named. This time we need to add a few things inside the “()”. First thing to add is the name…this can also be whatever you want it to be. However, there are some standard names used by WordPress to call styles and scripts included in their download so you want to make sure the name you use is very specific to you or your project. Best practice is to use your initials before whatever you choose. Don’t forget to add a comma “,” after the name and before you declare the path. Ok, now we have named the style or script function…let’s point it in the right direction.

Add Your Main Stylesheet

In WordPress, you must have your main stylesheet in the root of your theme, instead of having it inside of another folder like css/style.css. So there is a quick function in WordPress to call your main style sheet and that is get_stylesheet_uri(). Literally that is all you have to do…simply follow the example above.

Add Additional Stylesheets

Now you need to add other stylesheets that may be in another folder. We know that we have to point our script to the folder where the files are sitting. There is a built in function in WordPress that allows us to quickly get to the root of the theme we have built and that is get_template_directory_uri(). Then we have to add the folder and then file name onto this function so that it points correctly. We have to use something called concatenation. I love saying concatenation! Concatenation is simply a big word for adding functions and strings together. Let’s get concatenating! After the get_template_directory_uri() function we need to add a space then a period “.” then another space followed by a set of single quotes ”. Inside the single quotes we add a forward slash followed by the path to the stylesheet we want. An example would look like get_template_directory_uri() . ‘/js/example.js’. And you’ve done it!

Add Script Files

The process of adding script files is exactly like the above process for adding additional stylesheets. The only difference is that you have to make sure that you use the wp_enqueue_script() funtion and not wp_enqueue_style().

Using a CDN

I highly recommend using a CDN to call any if not all of your scripts and styles. CDN stands for Content Delivery Network and refers to a quick way to get content to the end user. If you know you are going to need a large js library like Twitter Bootstrap for example, you can pull it from a CDN instead of pulling it from a file on your server. Why do this? Well when content it transferred from a CDN it actually comes from a bunch of different servers and therefore downloads to your viewers web browser faster. This is very helpful when building mobile friendly websites because the website will load faster over what possibly could be a slow internet connection. Here is how you would enqueue a cdn:

function theme_name_scripts() {
	
        wp_enqueue_script( 'bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js' );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Looks familiar right! All we did was name it and place the href inside of the single quotes. THAT’S IT.

Almost Done

Now you know what needed to go inside of the “()” for each script or style call. After each call you need to add a semi-colon to the end as shown above. Finally, we have created our function but we must now tell our function to run. We do this by using another built in function in WordPress which is add_action(). Inside the “()” we need to tell it what we are doing. In this case we are enqueueing the styles and scripts so we add wp_enqueue_scripts in single quotes, followed by a comma, followed by the name we gave our entire function. If I lost you at any point in this, just simply copy and paste the codes above and you will get it working.

Go forth and link scripts and stylesheets correctly in WordPress!

HERE IS A GREAT RESOURCE TO FIND CDN LIBRARIES YOU MAY NEED