How to Add Custom CSS and JavaScript to your Divi Website with a Plugin

How to Add Custom CSS and JavaScript to your Divi Website with a Plugin

One of the great things about using the Divi framework is that you don’t need to be a code loving developer to make a unique and lasting WordPress website.

While Divi certainly caters to the more intricate needs of developers, non-coders and newbies can also enjoy the process of creating a website by simply using the various styling and design options already present in the theme.

For those who find themselves curious about code, learning the ins and outs of CSS and its relationship to HTML will only grow your Divi web design skills from strength to strength.

Another amazing aspect of the Divi framework is that its users have plenty of options when it comes to how they’d like to design their websites. This also extends to how they’d like to add CSS to their Divi website.

Last week we shared a blog post that detailed 5 different ways that Divi users can add CSS to their websites. These five options include:

  1. Inline CSS added to the content section of a module
  2. Custom CSS Box in the Divi Theme Options dashboard
  3. Advanced options tab of the sections, rows and individual modules
  4. Divi Builder Page Settings of an individual page
  5. Divi child theme style.css file

This week we’ll be showing you another way to add CSS to your Divi theme, this time by using a very handy plugin.

What is the Custom CSS and JavaScript WordPress Plugin?

Created by Jonathan Hall of Potent Plugins, Custom CSS and JavaScript is a super powerful plugin that will help you make CSS and JavaScript edits to your website incredibly easily.

With the Custom CSS and JavaScript plugin, you’ll be able to achieve the desired look, feel and function of your WordPress website by adding in CSS and JavaScript code that’ll reflect sitewide.

Effective, engaging and fun to use, the Custom CSS and JavaScript plugin comes with a range of features all geared to help WordPress designers such as yourself build better websites.

First things first, the plugin is extremely easy to use. It has a minimalistic interface that is neither cluttered nor complicated, and there is no need for setup or configuration to begin.

Custom CSS Editor of Custom CSS and JavaScript Plugin by Potent Plugins
  • Facebook

After installation and activation, the plugin adds two new editor consoles – Custom CSS and Custom JavaScript – to your WordPress website.

At the same time, the plugin will automatically create new files on your behalf to store these changes (named custom.css and custom.js). Any CSS or Javascript code added to either of these respective consoles will see your site edits served saved in these files, and not on your website’s database, (such is the case if you add CSS to the Custom CSS box in the Divi Theme Options dashboard).

With this, adding CSS and JavasScript code via the plugin will end up reducing the load put on the database and will increase your website’s performance.

Next, the plugin ships with a number of incredible features, including:

  • An awesome code editor. Helping WordPress users write code correctly and quickly, the Custom CSS and JavaScript plugin includes automatic text formatting and syntax highlighting. Similar to an IDE such as Brackets or Sublime, the plugin includes color queues, bracket highlighting, line numbering, automatic indentation and spelling assistance. Formatting of the Editor was only very recently introduced to WordPress. Previously, the old Editor console used to be completely stark with not even color coding as a guide let alone spelling assistance. Even though the editor has since changed, the Custom CSS and JavaScript plugin was a godsend for developers who were using it before the latest WP core update.
  • Minification of CSS and JavaScript files. Minification is the process of removing unnecessary characters and spaces from code and compiling the script in a such a way that it reduces in size. As a result, with minification enabled, the website can serve its stylesheet quicker, thus reducing page load time and increasing the overall website performance. At this point in time, the Divi theme comes complete with minification of code files already integrated into the theme, however, not too long ago, this feature was only available through caching plugins.
  • Preview and publish states. One of the most amazing features of the Custom CSS and JavaScript plugin is the fact that CSS and/or JavaScript edits can be previewed before they are published. Unlike scripting in the Editor console, where and saved changes are set in stone, the Custom CSS and JavaScript plugin allows logged in users to preview changes, offer suggestions and make tweaks, before they are finalized. After writing code, clicking the Save button will allow the edits to reflect sitewide as a preview, while clicking the Save and Publish button will hardcode the edits to the site.
  • Revision history. Last but not least, the Custom CSS and JavaScript plugin comes with one final, incredible feature: revisions. Each time that your either Save or Save and Publish the CSS or JavaScript edits, the plugin will save a history of sorts right within its console. With this, if you ever make a mistake while you’re writing code, you can simply return to an earlier version of your scripting and avoid messing up your website completely.

Custom CSS and JavaScript is available as a free plugin ready for download via the WordPress repository, or as a premium, developer edition plugin for purchase at only USD 14.99 from the Potent Plugins website.

How to Install the Custom CSS and JavaScript WordPress Plugin

To start using Custom CSS and JavaScript, download the plugin from the WordPress repository.

Download Custom CSS and JavaScript Plugin by Potent Plugins from WordPress Repository
  • Facebook
Once the file has finished downloading, head to your WordPress website and navigate to Plugins > Add New.

Once you have arrived at the plugin menu, click the Upload Plugin button and select the plugin .zip file from your download folder. Next, click Install and wait for the installation to run its course. Then, click Activate.

When complete, you’ll find two new menu items, Custom CSS and Custom JavaScript, in the Appearance menu.

Activate Custom CSS and JavaScript Plugin
  • Facebook


Using the Custom CSS and JavaScript WordPress Plugin

To start using the Custom CSS and JavaScript plugin, head over to either the Custom CSS or Custom JavaScript menu items. Here, you’ll find a blank screen wherein which you can start adding your custom code.

Scrolling down, there’s a small ad from Potent Plugins that encourages users to either make a donation or write a review about the plugin, and to like the related social pages. The Custom JavaScript console looks exactly the same.

Extremely straightforward, users can start entering their custom CSS code right into the editor.

Using the Custom CSS Editor
  • Facebook

Mentioned above, the Custom CSS and JavaScript plugin includes automatic text formatting and syntax highlighting. This is particularly useful for users that are new to CSS and who may make a mistake from time to time.

Automatic text formatting and syntax highlighting of Custom CSS and Javascript Plugin
  • Facebook

Custom CSS and JavaScript WordPress Plugin Developer Edition

Mentioned above, the plugin comes in a premium version, available for purchase starting at USD30 directly from Aspen Grove Studios

While the free plugin is great, the pro version comes with even more incredible features that seasoned developers will love. In the developer edition of the plugin, you’re able to:

  • Use multiple files. Helping you navigate all of the code on your website, with the premium version, you’ll be able to use multiple files (i.e. header.css, footer.css, style.css etc.) all within the same code editor interface. This extremely organized system sees the multiple files structured by tabs, so they’re ridiculously easy to access, move between and edit.
  • Use SCSS. For advanced developers who are already well versed in CSS, the premium plugin allows the use of the Sass CSS extension, a more robust and efficient way of writing CSS, within the editor.
  • Import and export files. To save time and speed up development, users of the pro plugin can easily import and export their various .css and .js files between sites. The premium version includes the option of batch exporting multiple files, seeing each and every file in the editor console included and downloaded into one single .zip file.
  • Live CSS preview. The pro version of the Custom CSS and JavaScript WordPress Plugin includes an incredibly handy live preview to help developers make CSS alterations extremely quickly.


If you’re looking to make changes to your Divi website, look no further than the Custom CSS and Javascript plugin for WordPress.

The plugin is super easy to use, it’s free, and when the need justifies its price, the premium Developer Edition of the plugin ships with incredibly useful features all geared to help you write code better and faster.

If going the plugin route is not for you, and you’d still like to explore other CSS options, be sure to read our previous blog post which discusses 5 Ways to Add CSS to Divi.

We want to hear from you!

How do you add CSS to your Divi website? Would you consider using a plugin to assist your CSS and JavaScript coding? Please feel free to share your comments or questions below. We love receiving your feedback!

Thanks for reading!


Featured Image via Unsplash

Lisa-Robyn Keown

Lisa-Robyn is a qualified copywriter and brand strategist from Cape Town, South Africa.