How to Properly Add JavaScripts and Styles in WordPress

Add JavaScripts and Styles in WordPress

The use of the plug-ins in WordPress has been very common. There are so many developers who want to write their own codes and they go along with adding it to various platforms so that others can use them.

These are sold on the platforms for a fee which helps them make money. The codes can be written in various ways but the ways of write these codes effectively are only limited.

The coders who can write the codes in two lines instead of 10 with the same results are saving a lot of memory and at the same time will ensure quick processing.

This is something which the heavy website owners will understand, the light websites will not care much about the heavy coding but the website which is already heavy requires simple and light codes.

The codes should be written in a crisp manner for many reasons and another reason in the list is to avoid conflict with other programs.

This is a serious situation, there are many ways to load an externally ready JavaScript but when you do not follow the process and accepted standard then the activated plug-in may get affected and they might get jammed badly.

This article is designed to help these developers to develop codes and styles in WordPress following the standards which are required so that your code will be popular amongst the users of WordPress.

Common Mistake When Adding Scripts and Stylesheets in WordPress

When the developers create codes and develop stylesheets they make a lot of mistakes in WordPress. The new developers should think about these mistakes and make efforts to avoid them at all costs.

JavaScript: It is common knowledge that WordPress has a wp_ function which allows the users to add things in the header section. You can use the function and the below-mentioned code to add things in this section.

“add_action(‘wp_head’, ‘wpb_bad_script’);
function wpb_bad_script() {
echo ‘jQuery goes here’;
}”

This is a popularly used shortcut but not the best way to it. The coders should always use the proper standard rather than using the shortcuts.

This will be clear from an example: Now think of a situation where you added JQuery manually in your plugin and there is another developer who has loaded JQuery using proper standards.

Now if both these versions manually and through proper standards are loaded on the WordPress site then JQuery will be loaded twice and this will affect the WordPress speed and performance negatively along with creating many hiccups in the functioning.

This means that the users should know how to properly add JavaScript and Styles in WordPress before they write the codes.

WordPress is a strong community which has many developers all over the world that contribute to it. They develop themes and plug-ins and also make sure that the users get the required support they want.

The chances of recreation of data and the replication are common in such cases as one of the developers will not be aware of what the others are doing as they cannot keep a track of others work.

There is a proper way to ensure that there is never a conflict with the coding method and this is b the enqueue script function. This function ensures that there is never an unnecessary clocking of the memory on the platform.

This is a way in which the JavaScript and styles are loaded in a systematic way. The qp_enquque_function tells the users when to add the JavaScript and styles and where to load them, the added advantage is it also shares under what condition these must be loaded.

This will mean that you do not have to load the JQuery or anything manually and thus there will be no such situation like memory blockage which happens when the files are loaded again and again.

There are built-in libraries which helps the process to go on smoothly. There will be an absence of manual loading which also solves the issue of slow page load time.

There is simple code which can be added to the themes or the plug-ins. When you are creating plug-in use in the file and you should include it in the function.php file when you are developing themes. The code lines are:”

“ 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’ ); “

There are five different parameters which are a part of the script:

1.$handle: This is the unique name for the script.

2.$src: This is the location of the script. The library plugins_url fetches the URL of the plug-in folder. Once it is done it will start looking for amazing_script.js file inside it.

3.$deps: This is the dependency. When you are loading the library script then you will need to add this.

If the scripts are already a part of the memory then this will not load again and no new loading will take place. Thus there will be no conflict and no memory issues and thus no time wastage.

4.$ver: This is the version of the script and is a mandatory part of the code.

5.$in_footer: This is used for the script footer. This load the script in the header and you should keep that false.

Like we have the JavaScript there are stylesheet. The codes which can be used here are:

For Plug-in
“function wpb_adding_styles() {
wp_register_script(‘my_stylesheet’, plugins_url(‘my-stylesheet.css’, __FILE__));
wp_enqueue_script(‘my_stylesheet’);
}
add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_styles’ );”

For Themes: The rest of the things will remain the same but for themes, the Plug-in URL will be changed to the template directory URL. All the other codes will be the same.

“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’ );”

Following the standard way of Javascript and styles sheets in WordPress the coders will enjoy a lot of benefits.

The above mentioned are the standard ways which will help you in the creation of the best themes and plug-ins. This standard procedure will help you to be at par with the rest of the developers.

Sonnal S Sinha

Sonnal S Sinha shares exciting Web development, Web designing, HTML, CMS, WordPress themes, plugins and other WordPress related articles and news for our readers. He also posts selected WordPress developers interviews from time to time.