add javascript to wordpress

How to Properly Add JavaScripts and Styles in WordPress

Novice webdevelopers are attempting to know how to work with CSS and way to add JavaScript to WordPress. A lot of DIY users are mistaken often when use JS and sheets of style. We will tell you about the most simple way of putting JavaScripts and sheets of style in WP-space. Some tips will be interesting for people, who is gradually studying the theme of plug-ins for WP.

The most common misconceptions of installation JavaScript and CSS in WordPress

Plugins as and themes should not have added scripts or stylesheets. This is one of the common mistakes of site creators. Incorrect use of the function ‘wp_head’ is fail way to load scripts and styles.

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

The code is quite simple, but its implementation in practice leads to errors in the site later. Unfortunately, the error is easier to prevent than to fix. For instance, you should install jQuery. Automatic loading through plugin and manually adding will lead to the emergence of conflict between the duplicates of one app. Because of this, the created on base of WP site will function slower. Performance will decrease and users will feel discomfort.

Two versions may be different too. That will reduce the speed of response too. Let’s look at how insert JavaScript into WordPress and CSS to avoid problems with them.

Perhaps you will also be interested in our article on How to Disable RSS Feeds in WordPress

Why scripts and styles are queued?

A large number of people around the world are in the community of WordPress. A lot of plugins and themes are developed at the moment by webmasters.

For the system working without failures, you must ensure the quality of the created software products. The unique queue system was created by WordPress to do this. This approach is provided by a programmable load system. The most part of JavaScripts and stylesheets of CSS are loading this way.

You should use ‘wp_enqueue_script’ and ‘wp_enqueue_style’ to define loading parameters. Because of this, WordPress is come complete JavaScript libraries. Scripts are already built.

You don’t need to load them every time, when you use website development platform. Created webpages are more quickly loading. Conflicts do not happen with other WP-themes and apps.

Putting the scripts in the queue: right way

It is very good ask about adding JavaScript in WP. We propose to use the following code. It can be placed in special file of WP-theme. You add JavaScript to WordPress functions.php.

?php
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' );  
?>

Let’s consider the code in detail.

  1. The code was started with ‘wp_register_script()’. Its characteristics:
  • $handle – how script will be called.
  • $src – where script will be located. You should select correct place to insert a JavaScript.
  • $deps – for apps, which will be loaded automatically.
  • $ver – what is last version of script.
  • $in_footer – the indicator of the script location on webpage.
  1. You should set ‘wp_enqueue_script()’ after setting up the above. Our actions are written in the code above. You can read them easy. Also you can make smaller size of plug-in with a special action hook.

But you can ask why we registered JS and only then enqueued? Web developers may change registration and the code of JS will not be changed.

Ways of loading CSS in WordPress correctly

You have the opportunity to get style what you want. It is easy as answer for question how to add JavaScript in WordPress too. Look at these:

<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

Command ‘wp_enqueue_script’ has been replaced by ‘wp_enqueue_style’. Now stylesheet will appear in the system of your website.
In part about problem where to insert JavaScript we use ‘wp_enqueue_scripts’. It works for loading styles too. This feature makes the function universal.

There is one nuance associated with the WP-theme. If it belongs to you and you choose command ‘enqueue scripts’, you also need to use ‘get_template_directory_uri()’. Now let’s look at another situation. If you work with a modify theme of another developer, you should take ‘get_stylesheet_directory_uri()’. Pay attention to this. Many mistakes can be avoided if you carefully read the instructions.

An example is the code, which is placed below:

<?php
  
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' );  
?>

The use of JS and styles causes a lot of problems. We tried to show you it most simply. We will be glad if this material will help to you. We have interesting examples of high-quality plug-in code on our website. You can read and study them.

1 Star2 Stars3 Stars4 Stars5 Stars (5.00 / 5, votes: 1)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>