Are you facing trouble incorporating JavaScript and CSS Stylesheets on your WordPress website? If yes, then you have come to the right place. We are presenting a step-by-step guide to walk you through the process of including JavaScript and CSS Stylesheets into your WordPress correctly.
Additionally, our article provides plenty of examples that will make the process easy! Our guide is particularly useful for those who are WordPress beginners or self-taught WordPress coders. Before we walk you through the process, we would like to highlight some common mistakes that people make when coding in WordPress.
Common Mistakes Made When Adding A Script In WordPress
One of the most common mistakes that developers make when coding for stylesheets is that they add the scripts directly into the WordPress plugins and themes. Some even use the wp_head function to load their stylesheets, which is not suitable at all in this case.
This function might create conflicts as you try to integrate more themes and plugins into your WordPress. The wp_head function used in this context will most likely cause your WordPress site to slow down, and the performance to deteriorate as well.
Let’s look at the right way to include JavaScript and CSS stylesheets in WordPress.
Why Enqueue Scripts And Styles In WordPress?
If you have been working on WordPress for a while, you should know that enqueuing the javascript and CSS code is the correct approach. The enqueuing system provides a way to load JavaScript and CSS stylesheets in a programmable way. By using the two functions mentioned below, you can direct WordPress on details regarding which file to load, when to load it and where to load it along with its dependencies.
- wp_enqueue_script function
- wp_enqueue_style function
Moreover, you may also use the built-in WordPress libraries that enable JavaScript through this tool. This will save you the hassle of going loading a third-party script repeatedly onto your system, which may result in conflicts as well.
How To Enqueue Scripts In WordPress?
You will need to understand the “wp_enqueue_script” function before you can get to loading stylesheets. Luckily, loading scripts in WordPress is super easy. All you need to do is add the code (or a similar one) into the WordPress theme’s function.php file or in your plugin file.
Example 1:
<?php
function wpb_adding_scripts() {
wp_register_script('my_script', get_template_directory_uri() . '/js/my_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
//
The code above allows you to register your script through the wp_register_script() function. The function “wp_register_script()” will take in 5 parameters that are listed below:
- $handle: A unique name for your script, in our case it is called “my_script”
- $src: This parameter dictates the location of your script.
- $deps: Deps stands for dependency. The code above uses jQuery; therefore, jQuery is added in the dependency part. If jQuery has not been loaded, WordPress will automatically load it through this.
- $ver: You may use this parameter if you are adding a new version number.
- $in_footer: If you want to load the script in the header, you need to make the value of this parameter “false.” If you want to load it in the footer, then “true.”
Once all the values have been provided, all you need to do is call the function “wp_enqueue_script(),” and the whole script will be called. The last line of example code shared above is an action hook to load the script. Therefore, this needs to be placed where the script is required to save memory footprint.
The extra step that you need to undergo to register is an added security layer for your script. Other site owners will have to de-register without changing the main plugin code.
How To Enqueue Stylesheets In WordPress?
Similar to enqueuing scripts, you can enqueue stylesheets in WordPress as well. Follow the example below to get a clearer idea.
Example 2:
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', FILE));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
//
Notice that we are now using the function “wp_enqueue_style” to add stylesheets. However, the action hook for both styles and script is the same. If you are using the enqueue scripts function, use get_template_directory_uri() to call the function to be enqueued. Otherwise, you can use get_stylesheet_directory_uri() if you are using a child theme.
Why Use the Enqueuing Approach?
It is essential to follow the best practices for WordPress for several reasons. Most importantly, unless you enqueue the code, you can end up causing conflict in between the other plugins and themes. This can cost you major compatibility issues; your webpage may not load slowly or not at all, and the style sheet may appear on all web pages.
Therefore, it is best to follow the standard procedures when coding for WordPress. If you are still unsure about some of the steps, you can consult an expert software developer or hire a software development company to help you walk through the process of building Stylesheets in WordPress.
Conclusion
When you code for WordPress, make sure you follow the standard procedures, and you code methodologically to avoid any compatibility issues later. Hopefully, our article helped give you valuable insight into the world of JavaScript and CSS coding and helped with the process of adding styles to your WordPress.
Top comments (0)