Skip links

Properly Adding Scripts and Styles in WordPress

While adding Scripts and styles in WordPress, mostly WordPress beginners make a common mistake. They either hardcode script and stylesheet URLs into respective files or use a wrong hook in themes and plugins.

WordPress already have enough hooks for properly adding JavaScripts and styles. Here, we will tell what are disadvantages of loading them in improper ways. Also, you will learn WordPress enqueuing system for proper implementation of CSS and JavaScript files.

Common Mistake When Adding Scripts and Stylesheets in WordPress

Some plugins and theme developers directly add external stylesheet and JavaScript URLs. Some others make mistake by using the wp_head function.

function tr_add_bad_script() {
	echo '<link rel="stylesheet" href="SOME_URL_GOES_HERE" type="text/css" media="all">';
	echo '<script src="ANOTHER_URL_GOES_HERE"></script>';	
add_action('wp_head', 'tr_add_bad_script');

While they both seem easier, it’s the wrong way of adding stylesheets/JavaScripts in WordPress. Also, it leads to conflicts and negatively affects performance.

Suppose you manually add jQuery Color Picker. Another WordPress plugin also adds the same using the proper method. Then the jQuery plugin is loaded twice. So it will impose a bad impact on WordPress speed and performance. There are chances of conflict as well if both files have different versions.

The right way to add scripts and styles is to use WordPress enqueuing system. Let’s elaborate it.

Why WordPress Enqueuing System

WordPress is the most popular platform to build websites. Thousands of programmers around the world develop themes and plugins for it. WordPress has an enqueuing system to ensure that everything works properly. The system also ensures that script/style loading is in proper order.

A person can easily add scripts and styles using these enqueuing functions. You inform WordPress when and where to load a file along with its dependencies.

WordPress comes with a rich set of JavaScript libraries. Rather than adding the same script from other sources, you can just call its handle. This avoids multiple loading and conflicts as well as reduces page load time.

Properly Adding Scripts and Styles – The Functions

The wp_register_style and wp_enqueue_style are functions to add stylesheets in WordPress. Similarly,  wp_register_script and wp_enqueue_script are there for scripts. The following code snippet will assist you to understand their uses.

function tr_load_css_js() {
	//Adding a plugin script file which is dependent on jQuery
	wp_register_script('my_plugin_js', plugins_url('my_plugin_script.js', __FILE__), array('jquery'), '1.5', true);
	//Adding a parent theme stylesheet which is dependent on Bootstrap
	wp_register_style('theme_bs_js', get_template_directory_uri().'bs/bootstrap.css', array(), null);
 	wp_enqueue_style('my_theme_js', get_stylesheet_uri(), array('theme_bs_js'), '1.2.4');
add_action( 'wp_enqueue_scripts', 'tr_load_css_js' );

Further, explaining, either function accepts 5 parameters.

  • $handle – Handle is the unique name of your script or style. We have “my_plugin_js” for the plugin script.
  • $src – It’s the location of the script. The plugins_url function gives the proper URL of the plugin folder. There’re many handy functions to obtain template paths in WordPress. You can check a few at bottom of this link.
  • $deps – This parameter defines dependency. WordPress will automatically load the dependency file first if it’s already registered previously.
    We have used this mechanism to add theme’s stylesheet. First, we’ve registered Bootstrap CSS. Then enqueued the theme stylesheet. It’s not mandatory to register than enqueue a file. But following this process has its own advantages.
  • $ver – This is the version number of the resource file. You can either pass a version number or false as well as null. Passing false will append WordPress version number as a query string to the resource. The null value won’t allow WordPress to append any version. Also, this null value has a strong positive impact on your website’s speed.
  • $in_footer –  Pass true to load the script in the footer. Otherwise false is the default value and loads the file in the header.

Finally, we’re using wp_enqueue_scripts action hook to actually load the script and style. Despite the name, this hook works equally for both. You can replace this hook with another one where scripts and styles are actually required.

We hope this article helped you learning properly adding scripts and styles in WordPress. You can also get in touch with us on official Facebook, Twitter and YouTube pages.

Join the Discussion

Return to top of page