Correctly enqueue javascript and css in WordPress

Many web developers using WordPress probably think it is best and easiest to add scripts and stylesheets directly into the header.php file of the theme. Another variant could be to load the script and stylesheet into the site header using the wp_head action. These options can work, but they can also cause problems:

• Firstly, these applications are disadvantageous because many websites use plugins and these plugins use jQuery. Therefore, there is a high probability that a script will be executed twice. It can also happen that you load a different jQuery version than the plugin and then there can be conflicts in the code.
• In addition, the files are then loaded on every page of the website (unless they are wrapped in conditional statements) and this is not always necessary.

Now that you know how not to include scripts and stylesheets in WordPress, let’s have a look at how to do it properly.

 

How enqueue scripts in WordPress works

The enqueue script function is there so that the WordPress core and the plugins and themes can all work together without problems. The plugins and themes request the scripts and the function then loads the scripts, but ensures that they are only loaded once. WordPress also has some JavaScript libraries built in that the web developers can use, so there is no need to use third party sources. This has the advantage that less code has to be used and thus loading times are shorter and there are fewer problems with the code.

 

How to enqueue scripts properly

To load enqueue scripts or stylesheets, you only have to do two things:

1. Registering the script
2. Enqueue the script

 

Enqueue scripts example

function arrowDesign_enqueueScripts(){
	wp_register_script( 'my_arrowDesign_script', plugins_url( 'script.js', __FILE__ ), array( 'jquery' ), '1.0', true );
	wp_enqueue_script( 'my_arrowDesign_script' );
 
	wp_enqueue_style( 'my_arrowDesign_styles', plugins_url( 'styles.css', __FILE__ ), '', '1.0' );
}
add_action( 'wp_enqueue_scripts', 'arrowDesign_enqueueScripts' );

wp_register_script

The wp_register_script function consists of five parts:

1. Handle: The first part is the unique name of the script. This must only be used once, so it helps ensure that the script is only loaded once. In the example it is the my_arrowDesign_script part.
2. Source: This part specifies the location of the file to be loaded. In the example, it is the file script.js. The plugins_url function is used here because with this function you do not need to know the exact URL of the file.
3. Dependencies: The dependencies can specify JavaScript libraries that the script to be loaded is dependent on. This instructs WordPress to load the library, which in this case is the jQuery library included with WordPress.
4. Version: The version can be specified in the function. This helps to save the script file, because when the plugin is updated, you can also change the version number and thus make the browser use the new version of the file. The advantage of this is that the user of the website always sees the latest version.
5. In Footer: In the last point you can specify whether the script should be loaded in the footer or in the header. If true, it is loaded in the footer, if false in the header.

 

wp_enqueue_script

The wp_enqueue_script function is used to allow WordPress to output the script where it should be used. This has the advantage that other plugins or the site owner can remove the script without changing the code.

 

wp_enqueue_style

Stylesheets are added with the wp_enqueue_style function. This is structured similarly to the wp_register_script function. There is a unique handle, the location of the file, dependencies (there are none in the example) and the version of the stylesheet.

 

Conditionally loading styles and scripts

The scripts and stylesheets should only be loaded in the plugin when they are needed. This is because the loading times could otherwise increase and it can also prevent conflicts with other plugins or themes.

 

Admin only conditional loading

In order to load the scripts and stylsheets conditionally only on the admin pages, the following code is used:

add_action( 'admin_enqueue_scripts', 'the_function_name' );

Front end only conditional loading

To conditionally load it on the front end only (not on an admin page), we would use the following code:

add_action( 'wp_enqueue_scripts', 'the_function_name' );

Certain pages only conditional loading

You can also load scripts and stylesheets only on individual pages. In this example, it is only loaded on the home page (and not on other front end pages and not on the admin pages):

function arrowDesign_enqueueScripts_homepage(){
	if( the_home_page() ) {
		wp_enqueue_style( 'the_homepage_styles', plugins_url( 'styles.css', __FILE__ ), '', '1.0' );
	}
}
add_action( 'wp_enqueue_scripts', 'arrowDesign_enqueueScripts_homepage' );

 

If you want to read more details on this topic, you can have a look at the WordPress post about wp_enqueue_script.

…We do more, so you can do less 🙂