One thing that never ceases to amaze me is how incredible is the simplicity WordPress gives to developers to build themes. There are a lot of great functions and constants to help you, not only to develop but also to keep your theme code flexible and clean.

Today I will share with you a little tip to keep in mind. If your theme requires to have more than one stylesheet file, or include external javascript files the best way to point to those files is by using these two functions that are given by WordPress wp_enqueue_script and wp_enqueue_style .

The first time I built a theme for testing I made the big mistake of typing the whole fixed address to my theme folder which is a horrible practice! but then I didn’t knew that there were these functions, so to make it more accessible I started using this code and keeping files all together in their correct places:

WP_ENQUEUE_SCRIPT

If you want to include a JavaScript file, the best way is to use the wp_enqueue_script function. This function is a safe way to ensure you, that your theme and plugins wont load the same script more than once. As you can see in the codex pages WordPress ships with a varied list of javascript libraries. In case you want to add a custom script or one that is not on the list you can simply add it to your theme with this function. Be sure to place this on the functions.php file of your theme folder.

<?php
wp_enqueue_script(
      'Name of the script, lowercase string',
      'path to the file .js',
      'array of scripts it depends on',
      'version of  the script',
      'boolean value to select whether you want to print the script in the footer or in the header'
);
?>

An example would be:

<?php
wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/js/scriptname.js',array('jquery'),'1.0',true);
?>

For this to work correctly you have to call it inside the action wp_enqueue_scripts:

<?php
function mv_my_theme_scripts()
{
   wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/js/scriptname.js',array('jquery'),'1.0',true);
}
add_action('wp_enqueue_scripts','mv_my_theme_scripts');
?>

WP_ENQUEUE_STYLE

If you want to include a CSS file it’s very similar and it’s done by using the wp_enqueue_style function. This function is also a safe way to ensure you that your theme and plugins wont load the same style more than once. Be sure to place this code too on the functions.php file on your theme’s folder.

<?php
wp_enqueue_style(
      'Name of the style, lowercase string',
      'path to the file .css',
      'array of stylesheets it depends on',
      'version of  the file',
      'value to select the type of media you want to assign to your stylesheet'
);
?>

An example would be:

<?php
wp_enqueue_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css',false,'1.1','all');
?>

And inside an action all:

<?php
function mv_my_theme_styles()
{
   if (!is_admin())
   wp_enqueue_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css',false,'1.1','all');
}
add_action('wp_enqueue_scripts','mv_my_theme_styles');
?>

I hope you find this article useful, if you have any other tip you would like to share please feel free to leave it in the comments. cheers!