Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Add JavaScript and CSS to WordPress

How to Add JavaScript and CSS to WordPress

Do you want to learn how to properly add JavaScripts and styles in WordPress? Adding code in WordPress can be avoided most of the time by using plugins, but writing the code has its own advantages. The major advantage is that coding is lightweight in comparison to installing a plugin. This will also help you maintain the speed and performance of your website.

Of course, although it is minimal, installing a lot of plugins will eventually have a negative effect on your site’s performance and speed. A slower site can be very annoying to your visitors plus speed is one of the many SEO factors that determines your rankings on search engines like Google and Bing. Many smaller WordPress plugins can be eliminated by writing or finding a few lines of code that can do what those plugins do. Today, I will demonstrate how to properly add JavaScripts and styles into WordPress.

Do I Really Need to Use JaveScript and Styles in WordPress

The simple answer is no. It’s absolutely possible to create a website that runs great without ever writing a single line of code. In fact, that is one of the reasons why the WordPress platform thrives. Anyone can create a website without having a coding background. Now, just because you can make a website without writing any code does not mean that you should. You can optimize your website by writing code that does common plugins’ tasks. This can improve your website’s performance and can ensure your website provides a better experience to your visitors.

Common Mistakes Made When Adding JavaScripts and Styles In WordPress

Now, if you are not knowledgeable about code, then it is very likely that you could make a mistake, but most of those mistakes are very simple to fix. The biggest issue for new coders on WordPress is the placement of code. There are a lot of files in the wp-content folder and it is very simple to click on the wrong one and place some code in there. Problems can range from nothing important to your website not running, which is why it is strongly recommended you create a back up of your website before inserting any code anywhere.

One of the most common problems that slows a website is the use of jQuery. Although this type of coding is necessary in many plugins to work correctly, it causes issues by calling a JavaScript library more often than it needs. This is often due to inexperienced coders inputting code that is redundant. Perhaps one of the best ways to test for duplicate JavaScript is using tools like Pingdom Website Speed Test or Google’s PageSpeed Insight. Either of these will show you which JavaScript is causing slow reaction of your webpages.

How to Safely Add JavaScript and Style Code to WordPress

Today, I will demonstrate how to properly add JavaScripts and styles into WordPress. Not only can you write or find the code that certain plugins do and get rid of the plugin entirely, but you are sometimes asked to add lines of code to your WordPress theme’s functions.php file. You need to know how to safely add code, which is very easy. WordPress has a very large development community and this is because of the Enqueue Scripts system. By using this code you can tell WordPress when to load a file, when to open a file, and what the files dependencies are.

You will need access to all of the files that make your website run. These are located on the cPanel and your web host will give you the login information when creating an account. Once you have logged into your cPanel click on the File Manager option.

click on the File Manager option.

You now need to locate where you want to paste or write code. Generally, all of your code writing will take place in your theme’s functions.php file. Click on the public_html directory. Click on the wp-content folder. Click on the themes folder. Click on the folder of the theme you are currently using. Right-click the functions.php file and select the “Edit” option.

select the "Edit" option.

Inside of the functions.php file, you will see a lot of code for the various things on your website. One of the most important rules of thumb is to make sure you are not inserting code into another code block. This is a very big no-no and will not only cause the code you inserted to not work, but also break the code of whatever you inserted it into. To be safe, I always recommend going to the bottom of the page and inserting the code above where you see the “Include Files” section like shown below.

Insert code here.

You now need to add the required code to call scripts to load using the jQuery library. Copy and paste the following example code:

function call_scripts() {
wp_register_script(‘new_script’, plugins_url(‘new_script.js’,
__File__), array(‘jquery’),’1.1′, true);
wp_enqueue_script(‘new_script’);
}
add_action( ‘wp_enqueue_scripts’, ‘call_scripts’ );   

This is again an example code, it will not work in its current state. Let’s explain each piece of the code. The first line of any code you place will always be “function “name”()” and you should always try to either create a name that is easy to identify and adding a comment can help you stay organized. Inside of the wp_register_script lines is where all the magic happens.

The structure is made to be $handle, $src, $deps, $ver, $in_footer. In this example:

Script Name: $handle = ‘new_script’

Location: $src = plugins_url(‘new_script.js’, _File_)

Dependencies: $deps = array(‘jquert’)

Version: $ver = ‘1.1’ (optional)

Load in Footer: $in_footer = true (false if you do not want it in the footer)

Replace all of the information with what you need or want to do on your website. If you use the wrong information you may get an error code. Whenever you want to call the script simply type wp_enqueue_scripts().

Now, very similar to adding JavaScripts you can also create Enqueue Styles:

function call_styles() {
wp_register_style(‘new_stylesheet’, plugins_url(‘new-stylesheet.css’, __File__));
wp_enqueue_style(‘new_stylesheet’);
}
add_action( ‘wp_enqueue_scripts’, ‘call_styles’ );   

It is very similar and even uses the same call convention, wp_enqueue_scripts().

Congratulations, you have learned where to add the calling code and how it works. As long as you insert the correct information inside, you will have no problem calling scripts or styles in WordPress.

Get Comfortable With Code in WordPress

You may not need code to make a website and there are plenty that don’t, but utilizing code in WordPress is a great way to boost your website’s performance and gain an advantage over competition by having faster page loading. Being faster is not only good for visitors but can help you increase your SEO performance as well since speed is one of the many factors used to determine your search engine ranking.

There are many resources online to help you learn how to code and YouTube is a great place to watch lectures for free on coding. There is no need to rush because as I have said you can definitely run a website without coding, but you can run a better one with coding.

What coding level were you at when you started using the WordPress platform? Do you think the performance increase of your site is worth learning good code etiquette?

Author: Ron Helms

I currently work for GreenGeeks as a Support Technician. My primary roles are supporting our VPS and Dedicated server clients, as well as performing site migrations. With experience in the web hosting industry since 2009, there is rarely a question I can’t help answer. In my spare time, I enjoy gaming and working on cars as an automotive enthusiast.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.