OceanWP is now faster, slicker and more stable! With modernized and object-oriented codes, it executes functions swiftly, using far less resources and far less dependencies.
To everyone who had their hopes high we’ll be handing over delicious vanilla ice cream – we’re sorry! Though, it’s still a refreshment 😉 We’re talking about Vanilla JavaScript and the new OceanWP 3.0 version.
Before we explain the upcoming changes and improvements, we’d like to go over some basics with you. This will help users – primarily those who aren’t code savvy – understand the benefits of the upcoming changes.
What is JavaScript?
JavaScript is a front-end (coding/programming) language. Its primary purpose was to create animated effects, especially for the so-called moving parts, like sliders or responsive navigation menus.
We are positive each and every one of you has experienced a situation where you were prompted by the browser whether or not to enable JavaScript functionality. JavaScript has always been a part of all website browsers, therefore you don’t have to include it separately into your website using plugins or scripts.
WordPress and JavaScript
JavaScript is a part of the WordPress CMS.
JavaScript exists in many forms, so it’s not a surprise WordPress comes bundled with many JavaScript libraries. However, it’s safe to say that the main ones being used are:
- jQuery,
- JSON,
- Underscore and
- Backbone.
Why are we boring you with these details?
Countless times we have received requests for assistance where a user would ask us to help them remove jQuery from their website because “some speed/optimization tool suggested that it’s slowing the website down”.
These situations made us realize it will take some time for users to understand such assessment tools are anything but accurate and perfect. It also gave us an insight that there are a lot of WordPress users who are unfamiliar with the “under the hood” functionality of WordPress, therefore WP themes and plugins as well.
In order to get a better grasp of (online) assessment tools, essential knowledge of the overall WordPress functionality is necessary. Even if you don’t plan to learn any programming languages or become a WordPress developer, this information will assist you in determining whether a “report” from a specific tool is accurate or false. Eventually, you’ll instantly know whether you are able to do something about the report or not.
In plain English, out of all JavaScript libraries, jQuery is the one most commonly used. Not only by WordPress itself, but also by themes and plugins.
And to summarize, you cannot remove jQuery from WordPress websites.
What is jQuery?
Would it surprise you to learn that out of 1 million top websites on the internet (not only WordPress sites), 80% of them use jQuery?
jQuery is a very lightweight, flexible, highly extendable and (from developers’ point of view) very easy-to-use JavaScript library.
jQuery helps creating and handling complex tasks, such as AJAX requests, events, animations, CSS manipulations and the overall website’s front-end functionality. Compared to other JS libraries, a complicated task is easier to achieve with jQuery because it requires minimal coding.
After all, the jQuery motto is “write less, do more”.
OceanWP and jQuery
Of course, by now you’ve probably guessed.
OceanWP has been using jQuery. Even some of your most favorite plugins, like Elementor and WooCommerce run jQuery.
For those of you just starting out with OceanWP or at least considering it – OceanWP is one the best themes to use for WooCommerce and/or Elementor. Check out all OceanWP features or preview our full-website demo templates.
Since 2016, with the help of jQuery, we were able to help our users do and achieve more with one single WordPress theme and without the use of additional unnecessary plugins. Needless to say, we’re talking about OceanWP 🙂
Compared to the jQuery motto, our own isn’t that much different at all. OceanWP aim is to enable everyone – from beginners to pros – to build amazing websites of all types (eCommerce, blog, portfolio) fast and in a smooth and user-friendly way. Judging by the feedback and reviews we get from our users, we were successful.
Most importantly, we plan to continue with this tradition, but in an improved way.
That is the reason we are switching from jQuery to Vanilla JavaScript.
What is Vanilla JavaScript?
Vanilla JavaScript or Vanilla JS is a popularized term used for the plain JavaScript.
Unlike jQuery or Underscore JS, Vanilla JS means coding from the scratch, without the use of frameworks or libraries as dependencies.
In plain English, Vanilla JS is NOT a special type of JavaScript – it IS the JavaScript in its purest form. As such, and as we already mentioned at the beginning, it’s already being used and supported by all browsers.
Where did the term Vanilla JS come from then?
It’s actually a fun fact, and, believe it or not, it’s related to the real vanilla ice cream. Vanilla ice cream represents the first form or ice cream flavor. So, if you’re in a pastry shop and order ice cream without specifying the flavor, you’ll get vanilla.
OceanWP and Vanilla
Why did OceanWP not use Vanilla JavaScript from the beginning?
Sadly, there is no such thing as a rulebook or a guidebook to specify when it’s best to use one or the other.
Programming languages, especially PHP and JavaScript, (among CSS mostly used in WordPress) evolve constantly. It’s the developers’ job to determine which language will do the job best without bloating the code unnecessarily.
When it comes to JavaScript or its “children”, for us here at OceanWP that perfect choice has been jQuery for many years now.
Eventually, JavaScript has matured enough in terms that it can be used to perform the same tasks as jQuery and at the same time execute them faster. And that’s exactly the moment we’ve been waiting for.
Does using jQuery make my website slower?
Like mentioned earlier, jQuery is one of the fastest and most-widely used JS script.
Scripts alone do not make any website slower – it’s the quality of codes that influences a website’s performance (among other internal and external factors).
And it’s the exact same code quality that made feature-rich OceanWP websites perform just as fast or even better compared to other themes with the least amount of features.
Will OceanWP completely remove jQuery?
The short answer to this question is – no.
The long answer, and without involving complicated developer terminology, there are still tasks that only jQuery can perform. Or, better yet, there are no Vanilla JS code substitutes for these jQuery codes.
That being said, OceanWP will still use jQuery in its codes within the theme and all our plugins, but at the minimum level.
Will Vanilla JS in OceanWP have an impact on plugins that run jQuery?
OceanWP switching to Vanilla JS won’t have any negative impacts and will not cause conflicts with plugins that use jQuery.
In fact, your overall website experience and especially the experience of your website visitors will be significantly improved. With improved coding, OceanWP now relies on a lot less dependencies, which ensures stability and minimizes chances for a possible JS conflict. Most importantly, it executes functions faster using far less resources.
When is OceanWP 3.0 going to be released?
The era of using Vanilla JS in OceanWP starts with the version 3.0.
You can expect the official release on July 20th – the exact day the new WordPress 5.8 version is expected.
And that brings us to the most important part – preparing for the update.
Besides the OceanWP theme, the following Ocean extensions have also been upgraded to Vanilla:
- Ocean Posts Slider,
- Ocean Stick Anything,
- Ocean Modal Window,
- Ocean Social Sharing,
- Ocean Product Sharing,
- Ocean Sticky Header,
- Ocean Sticky Footer,
- Ocean Popup Login,
- Ocean Woo Popup,
- Ocean Full Screen,
- Ocean Elementor Widgets,
- Ocean Side Panel,
- Ocean Cookie Notice, and
- Ocean Portfolio.
The Ocean Extra 1.7.8 update is released as well, however this plugin does not contain any Vanilla changes.
How to Prepare for the OceanWP Vanilla JS Update
Along with OceanWP, all plugins with the Vanilla JS version will be released the same day.
The correct update order is:
- Update OceanWP via Appearance > Themes, then
- Update all Ocean plugins via Plugins > Installed Plugins.
Before you update, make sure you have taken necessary precaution measures.
Test the new release on localhost or staging website first
Remember, this is a major update.
The best practice is to test new changes on localhost, test or staging environments.
If you don’t have the option to test the updates anywhere, do not update immediately. Wait for a couple of days or even a week, until we’ve gathered feedback and made sure it’s safe for you to update.
Remember, even if everything is fine, something can always go wrong during updates. After all, the bad thing about software is – it’s software.
Make sure to backup your websites properly. Do not rely on hosting backups alone, take manual backups as well and store data in a safe place. If you’re using the WordPress Reset plugin (not to be confused with WordPress Database Reset), you can also create website snapshots.
Important: remember to purge cache thoroughly after the update, multiple times if necessary. The same goes for the CDN (cloud) cache.
How to Use Vanilla JS with OceanWP
In order to take full advantage of the Vanilla JS, all scripts via Theme Panel > Scripts & Styles must be ENABLED at all times.
Short explanation: disabling any script creates an entirely new file which is then placed in your website’s installation folder, then applied on the front-end of your website instead of using default OceanWP theme scripts.
Long explanation: at the time when the Scripts & Styles (part of Ocean Extra plugin) option was introduced, good (and free) caching plugins weren’t accessible to everyone. Over time, the situation has changed. If you’re running good optimization and caching plugins, disabling any script is completely unnecessary.
Important: remember to purge cache thoroughly, multiple times if necessary. The same goes for the CDN (cloud) cache.
Will enabling all scripts have a negative impact on my website?
No, it will not.
That’s also one of the main reasons we have introduced Vanilla JS. However, we don’t plan to stop there.
Although we use conditional script loading in our codes (load scripts on the front-end only when necessary), after the Vanilla release we plan to enhance this functionality even more. Basically, we plan to automate the functionality previously provided by the Scripts & Styles feature.
What’s Next?
The next step is to enjoy your website’s enhanced performance 🙂
If you notice any bugs or problems, please provide us with thorough and in-depth feedback either on our GitHub page, or by submitting a support ticket or a prepurchase ticket.
We are committed to constant improvement. Our goal is to make yours and your website’s visitors experience with OceanWP the best as possible. When it comes to future updates, our main focus will be on performance, further improved accessibility, new features and styles, as well as existing codes revision.
OceanWP was built for the WordPress community. If you would like to contribute with your ideas, let us know how you believe we could get and do better. Share your ideas about features and improvements using our feature requests form.
LOS; INR. (Long or Short, I Never Read):
We are releasing major updates.
Take website backups, including manual backup, before updating OceanWP and Ocean plugins.
The best practice is to test all updates on test, localhost or staging environments. If you don’t have the opportunity to test the updates, do not update immediately. Wait with the updates a couple of days until we’ve gathered feedback.
In case of any problems or issues, inform us about possible bugs or submit tickets.
