How to add Custom Js and Css in wordpress (as per the way of wordpress coding style)

When we want to add custom Js in wordpress:

You have to use your custom js(or)css Whenever try to implement your custom code in wordpress.If you add your js(or)css then your HTTP request also increase.If request is increase then your website will get delay while loading. Due to this, we have to merge as a one or two(is appreciated) js(or)css file for custom script.Then your HTTP request will get reduce, then automatically loading time of your website is reduce.

Adding of Custom Js/Css in wordpress:

We can add the custom JS/CSS in two ways.

1. Normall way of the coding style

2. As per the way of wordpress coding style

Normally will add a custom Js file(s) in wordpress:

This is the easiest way to call (or) add Js file in a wordpress.

<script type=”text/javascript” src=”<?php bloginfo(‘stylesheet_directory’); ?>/js/YOURSCRIPT.js”></script>

we can call like above way in header.php (or) footer.php. Adding a custom js in header (or) footer file is appreciated.

Way of WordPress coding style:

Above method is an normal way to add JS. Instead of this, bettery try to add a wordpress coding style format.It will helpful to when you use custom plugin for merging a js(or)css files in wordpress.Otherwise you have to merge manually js script.

Add below sample code in your function.php

1. First we need to register and de-register(de-register is appreciated) our custom script in wordpress.

            Ex: wp_register_script, wp_enqueue_script

2. Call custom function in function.php

            Ex: YOUR_FUNCTION_NAME (You may changes this function name as per your custom script)

3. Call add_action before your function or after your function.

4. Inside add_action you need to call your function.

5. YOURCUSTOMNAME :: is name of your custom script(you can use as per your scirpt. It will unique)

6. $scriptURL :: is path of your script URL

7. true :: this is like a flag. If you mention “true” then this script will load in footer section. False, then the script will load in header section.

Example:

function YOUR_FUNCTION_NAME()

{

            $scriptURL = get_stylesheet_directory_uri().”/js/YOURSCRIPT.js”;

            wp_register_script(‘YOURCUSTOMNAME’, $scriptURL,true);

            wp_enqueue_script(‘YOURCUSTOMNAME’);

}

add_action( ‘wp_enqueue_scripts’, ‘YOUR_FUNCTION_NAME’);

Change your custom JS order while loading:

If you are using more than one custom js as per the way of wordpress coding style. Then sometimes conflict will happen due to order of loading a Js files.So that time what we need to do, we have to mention the order of the script load.

Example:

            1. Script1.js

            2. Script2.js

Here if you add above way of style then the script will load in front one by one order. which means first script1.js will load after that script2.js will load. If necessary to load script2 first and then next script1, we need to follow the below way of coding style

Use array(‘YOURCUSTOMNAME2’). Here “YOURCUSTOMNAME2” is your unique name of script2. So the script1 will load after the script2.

Script1:

function YOUR_FUNCTION_NAME1()

{

            $scriptURL1 = get_stylesheet_directory_uri().”/js/YOURSCRIPT1.js”;

            wp_register_script(‘YOURCUSTOMNAME1’,     $scriptURL1,array(‘YOURCUSTOMNAME2’),true);

            wp_enqueue_script(‘YOURCUSTOMNAME1’);

}

add_action( ‘wp_enqueue_scripts’, ‘YOUR_FUNCTION_NAME1’);

Script2:

function YOUR_FUNCTION_NAME2()

{

            $scriptURL2 = get_stylesheet_directory_uri().”/js/YOURSCRIPT2.js”;

            wp_register_script(‘YOURCUSTOMNAME2’, $scriptURL2,true);

            wp_enqueue_script(‘YOURCUSTOMNAME2’);

}

add_action( ‘wp_enqueue_scripts’, ‘YOUR_FUNCTION_NAME2’);

Adding custom CSS in wordpress:

Adding a custom css is same as the the JS coding style (with little changes of js code)

Normal Way of adding a custom Css in wordpress:

<link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘stylesheet_directory’); ?>/css/YOURCUSTOMSCRIPT.css” />

Way of wordpress Coding style:

Same as js code with little changes.

Example:

add_action( ‘wp_enqueue_scripts’, ‘YOUR_FUNCTION_NAME’ );

function YOUR_FUNCTION_NAME() {

            $cssURL = YOURCUSTOMCSS.css;

            wp_register_style(‘UNIQUE_NAME_OF_YOUR_STYLE’, $cssURL);

            wp_enqueue_style(‘UNIQUE_NAME_OF_YOUR_STYLE’);

}