Replacing jQuery with Vanilla JavaScript

One thing that has been on my to-do list for a very long time was replacing jQuery with pure JavaScript, also called Vanilla JS. With the latest updates for themes and Pro version plugins, we now have this feature largely implemented. More insight about the advantages of the updates can be found in this short blog post.

jQuery is a JavaScript library and makes it very easy to access and manipulate the HTML code. With it, animations and scripts such as dropdowns, tabs or slideshows can be implemented very quickly and compatible with all browsers. For this reason, jQuery is used by almost every WordPress theme and also a variety of plugins.

We use jQuery among other things here:

  • Navigation menus – now in Vanilla JS
  • Scroll-to-top button – now in Vanilla JS
  • Header Search dropdown – now in Vanilla JS
  • Post Sliders
  • Tabbed Content Widget
  • Infinite Scroll in the Toolkit Plugin
  • Theme Options in the Customizer

In the past, many things were not possible without jQuery. In the meantime, browser support for modern JavaScript functions and standards is so good that jQuery is not necessarily needed anymore. The end of Internet Explorer also contributed significantly to this.

But what advantages does Vanilla JS have now? There are two main things:

  • Better performance
    No need to include the huge jQuery library saves valuable KiloBytes on every page load.
  • No dependencies and conflicts
    Our scripts don’t have to wait if and until jQuery is fully loaded.
    Any third-party script ultimately increases the risk of conflicts with other WordPress plugins.

With the latest updates, we’ve now removed jQuery from all navigation menus, Scroll-to-top buttons, and Header Search dropdowns and replaced it with Vanilla JS. In total, we’ve customized several dozen scripts. For the Post Sliders, Tabbed Content widget and Infinite Scroll we are still looking for solutions. However, if you are not using these features, you can now run our WordPress themes without jQuery.

For the theme options in the Customizer it is not worth it to implement them without jQuery. Here, the library is already loaded by WordPress Core and also the performance plays less of a role in the WordPress backend, because normal website visitors do not have access to it.