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.

ALSO READ

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

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

Start WordPress Blog: Ultimate Guide For Beginners

Here is our step by step guide for beginners to start a WordPress blog.

Top 6 Best WordPress Theme Frameworks

There are many websites themes which are created by using a framework. Likewise, WordPress Theme frameworks also becoming so popular. The framework allows you...

The Most Essential WordPress Plugins

Here, I have listed some excellent plugins which will surely add more features and new functionality to your WordPress blog.

Tips to Speed Up WordPress Performance

Here, I am sharing some tips to speed up WordPress performance. All you need to modify .htaccess file on your server and add some plugins.

The Ultimate Guide to Harden WordPress Security

Learn how to improve WordPress security. Here are some basic security concepts that will help you to harden WordPress security.

How to Setup CloudFlare Free SSL for WordPress Blog

Google has announced that they will count HTTPS as a ranking factor which means if you using HTTPS you will get a higher position...

DEALS

MyThemeShop

MyThemeShop builds the fastest WordPress themes on the market!

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...

How to setup CloudFlare CDN for WordPress blog

In today's world website speed is a crucial element to getting good ranks on the web. Website speed also aids for indexing your site...

How to Remove jQuery Migrate in WordPress?

jQuery Migrate greatly simplifies the process of moving older jQuery code to a higher jQuery version by identifying deprecated features. It then restores deprecated...

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...

How to configure WP-Rocket plugin for WordPress site

When it comes to optimizing your website, the role of caching in WordPress can never be underestimated. What exactly is caching all about?...

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,...