How to Add JavaScripts and Styles in WordPress

Knowing the best possible approach to incorporate JavaScript and CSS records in your WordPress subjects and modules is essential for designers and developers.

Numerous DIY clients regularly commit the error of specifically calling their contents and templates in modules and subjects. On the off-chance that you don’t stick to best practices, you risk clashing with different topics and modules and possibly making issues that could have been effortlessly maintained a strategic distance from.

Many new WordPress modules and theme designers commit the mistake of specifically including their contents or inline CSS into their modules and topics.

They usually tend to add the code in wrong way that this leads to more conflicts in the future.

In this article, I will demonstrate the best practices to legitimately include JavaScripts and template CSS in WordPress. This will be especially valuable for the individuals who are simply beginning to learn WordPress subject and module improvement.

So, let’s take a look at the right way of adding scripts and stylesheets.

To ensure that everything works appropriately, and nobody is venturing on another’s toes, WordPress has an enqueuing framework that gives a programmable method for stacking JavaScripts and CSS templates. This system also allows developers to utilize the built-in JavaScript libraries that come bundled with WordPress rather than loading the same third-party script multiple times.

When you download WordPress, a determination of regular JavaScript libraries are as of now incorporated that you can use for your JavaScript advancement. A rundown of included libraries can be found in the WordPress Codex wp_enqueue_script article.

By using wp_enqueue_script and wp_enqueue_style functions, you tell WordPress when to load a file, where to load it, and what are its dependencies.

So, let’s see how you can properly Enqueue Scripts in WordPress:

The following code that you would incorporate into your plugins file or in your theme’s functions.php file to legitimately stack contents in WordPress.

Adding Styles in WordPress

// Adding Styles in WordPress
function infophilic_enqueue_style() {
 if ( is_child_theme() ) {
 // load parent stylesheet first if this is a child theme
 wp_enqueue_style( 'parent-stylesheet', trailingslashit( get_template_directory_uri() ) . 'style.css', false );
 }
 // load active theme stylesheet in both cases
 wp_enqueue_style( 'theme-stylesheet', get_stylesheet_uri(), false );
}
add_action( 'wp_enqueue_scripts', 'infophilic_enqueue_style' );

Adding JavaScript in WordPress

//* Adding Javascript in WordPress
function my_javascript() {
 wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/my-script.js', array( 'jquery' ) );
 wp_enqueue_script( 'my-script' );
}
add_action( 'wp_enqueue_scripts', 'my_javascript' );

Let me explain the code.

In the above code, We started by registering our script through the wp_register_script() function that has 5 parameters. The parameters are as follows:

• $handle: The unique name of your script.
• $src: the location of your script.
• $deps: an array containing the $handle for any other scripts your script needs to run (i.e. a dependency).
• $ver: the version number for your script, which can be used for cache-busting. By default, WordPress will use its own version number.
• $in_footer: do you want your script to load in the footer? Set this to true or false. It is false by default, so it loads in the header where wp_head() is, and if you specify true it will load where wp_footer() appears in the theme.

So this is how you can add JavaScript and CSS styles to your WordPress.