InfoPhilic WordPress How to Add JavaScripts and Styles in WordPress

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.

SEMrush

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() . 'https://cdn.infophilic.com/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.

Amit Malewarhttps://www.infophilic.com/
Amit Malewar has been the tutorial writer since 2013. His passion for helping people in all aspects of technology flow through the expert coverage he provides. In addition to writing for InfoPhilic, Amit loves to read and try new things.

Comment Policy: Your words are your own, so be nice and helpful if you can. Please, only use your real name and limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

GET STARTED

POPULAR NOW

Get almost 100% PageSpeed on Newspaper theme

The newspaper theme is the most popular premium theme for a self-hosted WordPress blog. The theme is developed by team tagDiv. You can buy...

How to Remove jQuery Migrate in WordPress?

Learn how to remove jQuery Migrate from your WordPress site.

How to Delete Multiple Images in WordPress Media Gallery

Hey, guys, today, one of my friends asked me a question, How can I delete Multiple Images in WordPress? I replied, "It's very simple." Yeah,...

WP Super Cache Plugin: Best Settings & Configuration Guide

A cache plugin serves static contents to the visitor, which improves page load speed. There are so many cache plugins available in the WordPress plugin...

How To Reduce Admin-Ajax Server Load In WordPress

To increase better user experience, we always end up by increasing site speed. After clicking a website link seems like a simple thing. But...

DEALS

WP Rocket

Get 30% discount on WP Rocket plugin Now!

FREE E-BOOK