How You Should Add JavaScript and Styles in WordPress

How You Should Add JavaScript and Styles in WordPress

Andy Holland

Are you looking to learn how to correctly add CSS stylesheets and JavaScripts to your WordPress website?  If you are, it’s important for you to take the time to do this properly.  Many ‘DIY’ WordPress users can make the mistake of calling both their stylesheets and scripts in themes and plugins.  Here, we’ll take the time to show you how to properly add your stylesheet and Javascript to your WordPress site.  If you’re just starting to learn about plugin and theme development in WordPress, then this article will be particularly useful.

Common Mistakes When Adding Stylesheets and Scripts

A large number of theme and plugin developers can make the mistake of directly adding scripts or inline CSS into themed and plugins.  Often, you can mistake the wp_head function for loading scripts and stylesheets.  Using the wp_head may seem like an easy option, but this way is incorrect.  Also, using this option will often cause more conflicts.  A good example of this is if you choose to load the jQuery manually whilst another WordPress plugin loads jQuery using the proper method.  This makes the jQuery load not once but twice.  If this happens on every page on your site, then this can have a negative impact on the speed and performance of your site.  In some cases, it’s also possible that two different versions will be created, leading to further conflicts.  We’ll now take a look at the correct way to add your stylesheets and scripts.

Enqueue Scripts and Styles for Your WordPress Site

If you are new to WordPress, this system has a strong developer community.  Thousands of different people help to create new themes and plugins.  To make sure that everything runs smoothly, WordPress offers an enqueuing system.  This means there is a programmable way of loading both CSS stylesheets and JavaScripts.  If you choose to use wp_enqueue_script and the wp_enqueue_style functions, you’ll be able to tell WordPress where to load a specific file, when you want the file to be loaded and what its main dependencies are.

This type of system enables developers to use the built-in JavaScript libraries, rather than having to load the same third-party script again and again.  This will help to reduce the load time for your different WordPress pages.  Also, this helps limit any potential conflict with other plugins and themes.

When it comes to using enqueue scrips, you’ll need to provide all the parameters in wp_register_script and then use the action hook to load the script.

Enqueue Styles in WordPress

Here, instead of using the wp_enqueue_script, you’ll be using wp_enqueue_style yo add your stylesheet.

We hope that this article has given you a better understanding of the importance of enqueuing both your scripts and styles.  If you’re interested in this as a novice developer, you may also want to take the time to study the different source codes attached to the top WordPress plugins.

Already know how to add JavaScript and styles to your site?  Let us know about your experience in the comments below.