No Cowboy Coding: Using WordPress’s Register and Enqueue Functions

Let’s say that you own a WordPress sit and you areYou know about enqueuing but would rather stick to your rebellious side. Why would you want to enqueue styles in a functions.php file? Just hard code it into the header or footer; besides, isn’t the old-fashioned way the best?

WordPress has millions of users and thousands of plugins. Let’s say you install a plugin and it tries to use the same CSS or Javascript file(s). Or the fact that your javascript/CSS files will be loaded on every page which will only make your website slower. Instead, you can specify which pages will load the javascript file. Note that this is the recommended approach by WordPress itself; you need to make

Step 1: Registration

The code must be placed in the functions.php file; you can also place it in another PHP file and include it in your functions.php file if you wish.

Register Style

The first step is to register your styles in WordPress; this function allows you to use the style or script later on. This step is optional but should be used. According to the WordPress Codex, the function has the following parameters:

<?php wp_register_style( $handle, $src, $deps, $ver, $media ); ?>

• $handle: The name of the script (Required)
• $src: The location of the script   (Required)
• $deps: Use handles from other CSS scripts that you need (Optional)
• $ver: The version of your script, You can use this parameter to force the browser to download a newer version of your file. This is called cache-busting. If a version number is not assigned, WordPress will use its own number (Optional)
• $media: The CSS media type (e.g. “all”, “screen”) (Optional)

For example:

wp_register_style( 'css-stylesheet-example', get_stylesheet_directory_uri() . '/css/all.min.css', array(), '', 'all' );

You can read more about the wp_register_style function on the WordPress Codex.

Register Script

To register a script, use the following function

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

The wp_register_script() function is very similar to the wp_register_style function but differs on the parameter: $in_footer

• $in_footer: A boolean value, “true” or false”. If true, the script will be loaded where wp_footer is located in, otherwise, it will be loaded in the header (Optional)

So, for example:

wp_register_script( 'js-stylesheet-example', get_stylesheet_directory_uri() . '/js/all.min.js', array(), '', true);

Step 2: Enqueue

Enqueue Style

To enqueue a stylesheet:

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

$handle is the only required parameter, so you can write a function like this:

wp_enqueue_style('example_stylesheet');

Enqueue Script

The same applies when you would like to enqueue a script:

<?php wp_enqueue_script( 'example_js'); ?>

Step 3: The Action Hook

Finally, you will need to add an action hook so that WordPress will run the function:

<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

The parameters:

• $hook: The hook that you would like to use – String (Required)
• $function_to_add: The function that you would like to add to your post – Callback (Required)
• $priority: A number value, the lower the number the higher it will appear – Number (Optional) Default is 10.
• $accepted_args: Any arguments that you would like to add – Integer

<?php add_action( 'wp_enqueue_scripts', 'example-styles' ); ?>

Step 4: Check Page

You can also check for a page, for example:

function nyuu_styles() {

  if (!is_admin()) {

		// register main stylesheet
		wp_register_style( 'example-stylesheet', get_stylesheet_directory_uri() . '/dist/css/all.min.css', array(), '', 'all' );

                // enqueue stylesheet
		wp_enqueue_style( 'example-stylesheet' );

	}
}

Step 5: All Together Now

Let’s put it all together now. Remember, this should go into your functions.php file:

 function example_scripts_styles() {

  if (!is_admin()) {

  // register main stylesheet
  wp_register_style( 'example-stylesheet', get_stylesheet_directory_uri() . '/dist/css/all.min.css', array(), '', 'all' );
 
  // register a script
  wp_register_script( 'example-script', get_stylesheet_directory_uri() . '/dist/js/all.min.js', true );

  // enqueue style
  wp_enqueue_style( 'example-stylesheet' );

  // enqueue script
  wp_enqueue_style( 'example-stylesheet' );
	
  }
 }

 add_action( 'wp_enqueue_scripts', 'example_scripts_styles' );

There you have it! Your styles and scripts should have been loaded by now, not only that but you have also done it the WordPress way. Good job!

Resources

How to Include Javascript and CSS In Your WordPress Themes and Plugins