Add Custom JavaScript and CSS to WordPress

Adding plugins in WordPress may be child’s play, but unfortunately the same can’t be said for adding external JavaScript and CSS to the CMS. That’s a shame, as a lot of really awesome functionality can be found in external JavaScript and CSS code repositories, whether on Github, Codepen, or yours humbly.

In this short post, I’ll show you 3 easy ways to add JavaScript, CSS, and frankly any HTML code to your WordPress site, in turning giving you new ways to enhance the user experience. I’ll start from the most general, down to adding scripts and CSS codes to a specific post or page and even at a specific location.

#1 Add Custom JavaScript and CSS Across All Pages In WordPress (Head or Footer Section)

Lets start with the most general- adding JavaScript or CSS to either the HEAD or Footer section across all pages on your site. This is usually required for analytics code, such as Google Analytics or Facebook Pixels. For that we recommend the following plugin:

There are simpler, more streamlined plugins for this, though we recommend SoGo for the fact that the same plugin can also be used to insert code into a specific post or page as well (see the next section). It’s better to have one plugin do as much as possible, rather than one for each task.

Advantages

• Lets you add both embedded (<script>) and linked (<script src=””>) JavaScript and CSS to the site’s HEADER and FOOTER
• Code insertions can be limited to just posts, pages, or certain post types
• Code insertions can be limited to a specific post or page.

Disadvantages

• Free version displays ads inside the admin panel

Instructions

Once you’ve installed the SoGo Header and Footer plugin via the admin panel, go to “Settings” -> “Header Footer Script”  to add your desired code site wide:

The text boxes accept any arbitrary bits of code, which we really appreciate. Note that if you’re embedding a linked JavaScript or CSS file, you still need to upload those files to your site manually first via FTP (such as myscript.js or mystyle.css).

Use the checkboxes to limit the code to certain sections of your site, such as only “posts”, or the “blog” post type etc.

#2 Add Custom JavaScript and CSS to a Specific Post or Page (Head or Footer Section)

Sometimes, you just want to add a piece of JavaScript or CSS code to a specific post or page, such as a landing page. Location wise we’re still talking about either the HEAD or Footer section. For example, the Interstitial Content Box script calls for you to insert some code in the HEAD section of the target page. We don’t want the code added to all pages, since it’s not only redundant (and slows things down), but results in the content box popping up on every page.

For cases like this, the plugin we suggest is the same as in the first section, and that is SoGo Header and Footer Script Plugin.

Instructions

Assuming SoGo Header and Footer is installed already, just navigate to the post or page in question inside WordPress admin panel, and scroll down to see two INPUT boxes you use for adding code to that page:

Here you also have the option to disable any site wide external code you may have specified in Section #1 above from being embedded. That’s pretty handy.

#3 Add Custom JavaScript and CSS to a Specific Post or Page (Within the Content)

And finally, many times the external code to add has pieces that should be embedded directly within your content, such as a slideshow. While you can do this using the WordPress wysiwyg editor, there’s the risk the added code will mess with the formatting of the rest of the content, and even render the editor unusable.

So what’s the solution? A better way is to insert any external HTML and JavaScript code into its own little container first, and add the snippet as a shortcode inside the editor. There are two awesome plugins you can use to accomplish this:

• Insert HTML Snippet (xyzscripts.com) OR
• Reusable Content Blocks (loomisoft)

Either of the above plugins accomplishes what we need.

Going with the first xyzscripts plugin, once installed, click on the “XYZ Html” link inside WordPress Admin, and input the desired code to embed anywhere on your site:

Once you’ve saved a snippet, use the generated shortcode to add it anywhere inside a post’s wysiwyg editor without risking Armageddon:

When you combine the xyz html Snippet with the sogo plugin mentioned earlier, you can pretty much embed any JavaScript code out there you like to your WordPress site.

Real World Example

Just to see how this works in real life, lets say you want to add the nifty Before and After Image script to the current blog post:

BEFORE

AFTER

If you follow along with the instructions on the script page, the code of Step 1 should be added to the HEAD section of the page, while Step 2 asks for some HTML snippet to be inserted where you wishthe Before/After image to appear on the page.

For Step 1, I use the SoGo Plugin to add the code into HEAD section of this specific blog post. Since the script also references two external files (ddbeforeandafter.css and ddbeforeandafter.js), I make sure to upload these two files via FTP to a directory on my server first.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

For Step 2, I turn to the xyz html Snipplet plugin to first add the HTML markup into a container, then inside the wysiwyg editor, use the provided shortcode to inject the markup into the wysiwyg editor and exactly where I wish the Before/After Image to appear.

And just like that, we now have a lovely Before and After Effect inside this blog post!

Conclusion

WordPress has risen to become the most popular CMS online, thanks in no small part to its large ecosystem of plugins and ease of installing them. However, you can now expand that ecosystem even more by adding external JavaScript and CSS to your site, which with the above plugins and methods can be done easily and safely.

To further customize and differentiate your WordPress blog from the herd, try using a WordPress Page Builder plugin. These add-ons bring drag and drop capabilities to WordPress for modifying the look of your posts and content.