Do you wish to discover how to properly add JavaScript and CSS stylesheet in WordPress? Many DIY users make the omission of directly calling their scripts and stylesheet in plugins and themes. In this article, we will show you the Adding JavaScript and CSS Stylesheet in WordPress.
Some Mistakes of Adding JavaScript and Styles in WordPress
The function named as wp_head helps you to load everything in the header section of the website. Add the given lines of code in your script file, and the entire thing will show in the header. This is a shortcut to add things but it is not the best way. You have to follow proper standard discarding the shortcuts.
| <?php
add_action(‘wp_head’, ‘wpb_bad_script’); function wpb_bad_script() { echo ‘jQuery goes here’; } ?> |
For example, you load JQuery manually in your plugin and other developer loads the same JQuery manually. If any person has activated both of your plugins then JQuery will be loaded twice in the memory which is a waste.
If JQuery loaded differs in version, then there would be a lot of error in the plugins due to conflicts. You should know how to perfectly add JavaScript and Styles in WordPress before writing any code.
How To Get Rid of Such Mistakes – The Concept Of Enqueue Function?
WordPress developer community is a huge and strong one. There are thousands of developers developing new themes and plugins each day.
- This is the function responsible to properly add JavaScript and Styles in WordPress so that there is never any conflict and worthless blocking of memory.
- It secures a correct way of loading JavaScripts and Styles. The function qp_enqueue_function questions WordPess when to load JavaScripts and Styles, where to load them and under what circumstances.
- Using these you do not have to load JQuery manually and therefore, there will never be a situation of memory blockage due to the loading of same files again and again.
- The cause for that is the fact that Enqueue function allow you use the built-in libraries that come with WordPress itself. It will also minimize the burden of slow page load time due to the absence of manual loading of JavaScripts.
Steps to correctly add JavaScripts and Styles in WordPress
1. Enqueue Scripts In WordPress
Loading scripts in WordPress is very simple. Below is an example that you would paste in your plugins file or you can paste in theme’s functions.php file.
| ?php
function wpb_adding_scripts() { wp_register_script(‘my_amazing_script’, plugins_url(‘amazing_script.js’, __FILE__), array(‘jquery’),’1.1′, true); wp_enqueue_script(‘my_amazing_script’); } add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ ); ?> |
Explanation:
We initiated by registering our script through the wp_register_script()function. This function accepts 5 parameters:
- $handle – It is the unique name of your script.
- $src – It is the location of your script. We are working with the plugins_url function for getting the proper URL of our plugins folder. After WordPress find that then it will view for our filename amazing_script.js in that folder.
- $deps – deps stands for dependency. WordPress will load jQuery automatically if it is not being loaded already on the site.
- $ver – ver is the version number of our script. This parameter is not actually requisite.
- $in_footer – As we want to load our script in the footer, so we have set the value to be true. If you want to load the script in the header, you would make it false.
After suggesting all the parameters in wp_register_script, we can call the script in wp_enqueue_script() which causes entirely.
The final step is to use wp_enqueue_scripts action hook to literally load the script. As this is an example code, we have added that right below everything else.
If you were adding this to your theme or plugin, then you can place this action hook where the script is mainly required. This allows you to reduce or minimize the memory footprint of your plugin.
2. Enqueue Styles in WordPress
You can also enqueue your stylesheet. See the example below:
| <?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’ ); ?> |
- We are using wp_enqueue_style to add in our stylesheet. We have used wp_enqueue_scripts action hook for styles and scripts. Although the name, this function works for both.
- In the above example, we have used plugins_url function for pointing the location of the script or style we need to enqueue.
- If you are using the enqueue scripts function in your theme, then simply use get_template_directory_uri(). If you are functioning with a child theme, then use get_stylesheet_directory_uri().
Below is an example code:
| <?php
function wpb_adding_scripts() { wp_register_script(‘my_amazing_script’, get_template_directory_uri() . ‘/js/amazing_script.js’, array(‘jquery’),’1.1′, true); wp_enqueue_script(‘my_amazing_script’); } add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ ); ?> |
WRAPPING UP
We hope that the above article helped you to properly add JavaScript and Styles in WordPress as you can easily add the styles and JavaScript if you follow the above given steps carefully.
You can talk to our WordPress Technical Support Team, dial +1-888-738-0846(Toll-Free). We have a team of good professional who will help you to resolve all queries related to WordPress. So, feel free to contact as we will be pleased to help you.