Adding CSS and JavaScript to Your WordPress Theme

One of the very first areas that needs attention when creating a theme inside WordPress is to add, or include, your style sheets and JavaScript files inside of your template files. Without those, your theme development is going to be quite difficult. In this post, I’ll cover exactly how to go about attaching those types of files to the proper templates.

Importing Code To Your style.css File

It’s really up to you how you want to go about developing your WordPress theme. Some people (myself included) prefer to work live, meaning, code CSS directly inside the style.css file that lives in the WordPress theme folder from the beginning. I prefer to see exactly what each and every change looks like inside WordPress.

Other folks prefer to create an entire template in static files first and then move their code over to include inside the WordPress theme files. If you’re working on a team, this is most likely the preferred approach. Also, if you need approval from a client or are using a framework, such as Bootstrap or Foundation, you might want to take this approach as well.

In this post (and the following posts), we’re going to take the route of creating a static template first and then move the code over to the dynamic WordPress template system.

The first thing we need to do is to include the CSS code into our style.css file. This is a simple copy/paste task. Simply copy what you already coded inside your static template CSS file and paste it inside your WordPress template file. The only tricky part is linking to additional CSS files via the functions.php file.

Linking To CSS Files

If you have additional stylesheet files that you’d like to include in your theme, you would need to create a new folder inside of the theme folder and place those stylesheets inside of it. So your structure would look something like this:

/wp-content/my-theme/css/normalize.css
/wp-content/my-theme/css/foundation.css

Once you have those files inside of your CSS folder, you can insert some code into the functions.php file that will tell WordPress that they exist and that it should use them.

This section involves some code, so I’ll try to explain things as clearly as I can and give additional details as to where you can find supporting documentation for each function used.

First, I’ll show you what the finished CSS include code looks like inside the functions.php file:

<?php
function myt_theme_styles() {

  wp_enqueue_style( 'foundation_css', get_template_directory_uri() . '/css/foundation.css' );
  wp_enqueue_style( 'normalize_css', get_template_directory_uri() . '/css/normalize.css' );
  wp_enqueue_style( 'googlefont_css', 'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' );
  wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

}
add_action( 'wp_enqueue_scripts', 'myt_theme_styles' );
?>

Okay, the first line in the PHP code block is a function with a unique name. You can name this whatever you want, but you should be sure it represents what it’s about. In this case, the “myt” represents the theme name and the “theme_styles” represents what the function is about. The reason you want the name of the function to be unique is to differentiate it from all other functions in your WordPress install. If you’d like to learn more about the functions file, please view this page in the WordPress Codex.

In the next few lines, we use the WordPress “wp_enqueue_style” function. This function is a safe way to add/enqueue a stylesheet file to the WordPress generated page. For documentation on this function, please visit this page or this page.

Now, inside this function, we need to use a few parameters that indicate exactly what the function is going to do. For the first parameter, we use the handle ($handle), “foundation_css” to give a name to the stylesheet we’re interested in attaching. The next parameter is the source ($src) of the stylesheet. To gather the path of where the CSS file is located, we use another function (get_template_directory_uri()) and concatenate the beginning part of the path to the location of the actual CSS file (/css/foundation.css).

The “get_template_directory_uri” function is use to retrieve the template directory URI for the current theme. For more information on this function, please visit this page in the WordPress Codex.

Now, just by simply writing the myt_theme_styles() function, it doesn’t necessarily mean anything is going to happen. It’s similar to creating any function in programming – it sits idly until it’s called. With that in mind, let’s go over the “add_action” function that’s written below the function.

First, what is the add_action function? Basically, the add_action function triggers an event when the hook inside the function is acted upon. So, in this case, we have included the hook, “myt_theme_styles” so when that hook is called, the myt_theme_styles function will execute. Now, I realize we haven’t included the hook in any pages yet, but we will later. It’s important to lay the groundwork by creating functions before calling any hooks.

Linking To JavaScript Files

Linking to JavaScript files via the functions.php file is much like linking to CSS files. We need to first create a /js/ directory to hold our files. In this case, we’ll have three files and the directory structure will look like this:

/wp-content/my-theme/js/modernizr.js
/wp-content/my-theme/js/foundation.min.js
/wp-content/my-theme/js/app.js

Below, I’m going to show you a function that’s similar to the one we used for the stylesheets, but this one’s for use with JavaScript files. Like I did above, I’ll go over what everything means below.

<?php
function myt_theme_js() {

  wp_enqueue_script( 'modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', false );  
  wp_enqueue_script( 'foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '', true );
  wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true );    

}
add_action( 'wp_enqueue_scripts', 'myt_theme_js' );
?>

I’m sure you can see the similarities. The “myt_theme_js” is the name of the function that will hold the specifics of our JavaScript files. The handles, the paths, etc… The first difference that we can see though is the use of the function, “wp_enqueue_script.” While this function links the script file to the proper page, it can also link to it at the proper time, according to its dependencies.

And like the wp_enqueue_style function, the wp_enqueue_style function needs to use parameters as well. Again, I’ll use the first line of the function as an example.

In this case, the handle is called, “modernizr_js” and the path uses the get_template_directory_uri() along with the location of the specific file. While the two enqueue functions do look alike in many ways, the JavaScript enqueue function (in this case) needs a few additional parameters. If you check out the wp_enqueue_style page over at the WordPress Codex, you can see that the additional parameters are the $deps for dependencies, $ver for version and $in_footer for whether or not this script is included at the footer of the page, right before the closing body tag. Here’s what the function can look like:

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

In the first wp_enqueue_style function, we use the $handle, $src and the $in_footer parameters and leave the others blank. If you look at further functions a few lines down, you can see that we take advantage of those additional parameters.

Before we finish up this section, let’s take a quick look at how the $deps (dependencies) parameter works. If you’ll notice in the last function:

wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true ); 

We use the $deps parameter. The way to take advantage of this parameter is to create an array of files that the file we’re currently calling is dependent upon. In the case above, the “app.js” is dependent upon the jquery (included in WordPress) and the foundation.min.js files, we’ll include those two handles in the parameter. This is important because by doing this, you’re ensuring the dependencies get loaded on the page before the file in question.

Below this, we again use the “add_action” function that I went over above.

——

If you’re interested in more post about creating templates in WordPress, be sure to check out my WordPress category. I’ll be writing more posts covering similar topics in the future.