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.
Update was done easy and smooth. Did that for two different websites and no problems until now.
By the way, I found the new SEO options for Customizer. Found no helpful description or examples. Hopefully it will come in the future or maybe some more options?
Hello Andyt, thank you so much for the positive feedback 🙂 we’re really thrilled everything went smooth. Of course, in case you or anyone else notices any problems, kindly reach us with details so that we can check them as soon as possible.
For the SEO options in the Customizer: we have often received requests from users on how they can use the original image alt text on those specific images, in order to improve SEO scores. The current settings return the image or blog post title (depending on the image). In case you would like to use the alt text you can add via the Media Gallery for each image, it’s necessary to check the boxes for images where you want that to happen. We also plan some other SEO and Accessibility settings in future updates, among other features.
If there’s something you’d like to suggest, we’re here to listen 🙂
Hello MarkoS,
Thank you for your fast response and the explanation. It gave me a better understanding of the options.
At the moment I don’t have a good detailed feature request for SEO. However, there is some other for “Sticky Footer” and Smartphones. I use it and like it. It work on PC very good. However, on Smartphone it don’t work. That isn’t a problem if the “Going to Top” would work like without “Sticky Footer”. If I enable “Sticky Footer”, the “Going to Top” is only on the “Sticky Footer”. On Smartphone it should be seperate to appear before scrolling completly to bottom…
Hello Andyt,
That’s actually not a bug 🙂 The Ocean Sticky Footer gets disabled automatically on responsive mode and the regular footer is in use in order to avoid content coming from the sticky footer covering users screens (which would be inevitable). We will definitely check the scroll to top in combination with smartphones when sticky footer is in use, thank you for pointing that out
Hello MarkoS,
I have an additional feature request for SEO options. It is according to Open Graph Tags. It would be fine if such would be included. It should be possible to set them seperate (I mean global or special for twitter, facebook and similar).
For better understanding. I know it is already available. However, I use an additional plugin (Twitter function) and that plugin also includes Open Graph, but only for Twitter. Therefore it would be fine, if I would be able to disable only some Open Graph elements in OceanWP.
Hello Andyt, understood! Added it to our features request list so we’ll see what can be done about this in the future, regarding enhancements 🙂 Thank you for suggestions and for helping us make OceanWP better for everyone 🙂
After the updates, my anchor tags are no longer working. Any ideas? Absolutely nothing changed except the update.
Hello Zach, thanks for reaching out. I see you are referring to anchor links inside Elementor web page. Are all CSS ID’s added correctly (for each heading that is supposed to represent the anchor link)? Do these function if you switch themes? Are all scripts enabled via Scripts & Styles (Theme Panel) and cache cleared on all levels? If yes, then kindly submit a prepurchase ticket with all relevant details so that we can check your page. Thank you
Estou com o mesmo problema os links âncoras pararam de funcionar após a atualização, sem nenhuma mudança a não ser a atualização mesmo. (https://prnt.sc/1k0uk5z)
Hello Carlos, thank you for reaching out. Yes, there are some issues with anchor links in specific situations, but the update will be released this week and issues resolved entirely 🙂
buonasera ho eseguito l’aggiornamento del tema alla versione 3.0 ma in basso compaiono dei simboli che prima non erano visibili ma si presentano solo sul tema figlio se attivo il genitore questi simboli non sono più presenti riattivando la versione precedente del tema anche il figlio funziona correttamente come mai?
Hello Fabio,
Thanks for reaching out. Kindly follow the recommendations in this article. Enable ALL scripts via Theme Panel > Scripts & Styles, then clear caching on all levels (browser, website, cloud). That should resolve the problem. If you continue to experience issues, kindly open a prepurchase ticket with us, because we’re really not in the position to provide support via the Blog. Thank you
ho verificato e tutti gli Scripts & Styles sono attivi ma passando al tema child il problema rimane cortesemente potrete girarmi il link per aprire un biglietto di preacquisto con voi
Really glad that OceanWP is updated. Always loved this theme. Great speed and customization options.
Hello Lasha, thanks for stopping by and especially for your kind words and positive feedback. We have more things planned this year and hope you’ll love them 🙂 If there’s anything you’d like to suggest, we’re always hear to listen
A big improvement on the most beloved delicious vanilla ice cream. Vanilla JavaScript and the new OceanWP 3.0 version
Hello Talley, thanks for stopping by and taking the time to provide us with feedback. We hope you enjoy the improvement and that you’ll like the upcoming features even better 🙂
Hey there. With 3.0 you broke the embedded video post header again. My site features video posts and I can’t update until this is resolved. If you search google this seems to have been an issue, then fix, then issue, then fix thing for you guys. The header is keeping the vertical dimension of 315, but ignoring the horizontal dimension, and just scaling the space to fit the width, resulting in a small narrow cropped YT thumb (instead of retaining the 16:9) proportions scaled appropriately. it’s a post header and should scale the same as a featured image. Retain the proportions and scale to fit the width. BTW I followed all the update instructions. Updated everything else first, woo, ep, plugs, and even OceanWP plugs and WP, and left Ocean 3 for last. Checking along the way. This feature broke with the OceanWP 3 update. Was working fine before.
This was once fixed over a year ago in 1.8.0. You just need to fix it again.
### *2020.03.26* – 1.8.0:
* **Fixed** – Huge space on YouTube video embedding.
Hello Bret, thanks for sharing the feedback. It’s quite possible we’ve missed something because it’s really impossible to recreate all the thousands of conditions, even though we have not had tickets nor Facebook Community threads with similar complaints. Indeed, there were issues with embeds in blog posts / pages (the changelog you are referring to) and that problem was also addressed now. Kindly open a ticket or a prepurchase ticket, or you can start a thread on GitHub. We require all details from you, including links, and WP admin and FTP login details (even better if you have a staging site where this can be replicated). We are thankful for your understanding it’s impossible for us to troubleshoot or anything or provide support through the blog comments. We’ll be waiting for you to reach us. Thank you.
Glad to hear about the update. I´m using it at a staging website with a child theme. Do I have to renew the child theme completely? Thanks in advance.
Hello Michael, thanks for stopping by. It really depends, did you add some files/templates to your child theme to override default theme files and/or templates? If yes, then you need to copy those templates again and apply your changes to them. If not, all you need to do is update the parent theme because the child theme is receiving all info and updates through it. If you used a plugin to create a child theme, I would however recommend using the original child theme instead. In some cases, the plugin would “lock” the child theme to a specific parent theme version, which can sometimes cause issues because the child theme is not getting the new updates from the parent theme as it should.
Hope this helps
Hello MaroS, that really helps al lot. Thank you for you inmediate and detailed answer. Great Support!
You are most welcome! Always a pleasure
I updated to version 3.0.1 and now I updated again to version 3.0.3 which is the newest of OceanWP and in both I had to return to the old version 2.0.8 because it does not show embedded YouTube video publication. Any solution?
Thank you and sorry for the English is that I used the google translator, just in case I leave the same written in Spanish.
Actualice para la versión 3.0.1 y ahora volvi actualizar a la version 3.0.3 que es la mas nueva de OceanWP y en ambas tuve que volver para la vieja version 2.0.8 porque no muestra publicación de video incrustado de Youtube. Alguna solucion?
Gracias y disculpen por el Ingles es que utilize el traductor de google, por las dudas dejo el mismo escrito en español.
Hello Richard, this problem was already resolved. If you’re still experiencing issues, you can create a staging site where you’ll update everything, then submit a prepurchase ticket with all necessary login details for us to inspect the problem on your end. Thank you
Hello, after last update I have an issue with gallery in a post. The lightbox doesn’t work at all and images are shrinked or spread to one (incorrect) size. Can you give me an advise how to fix it? Thank you
Hello Katerina, if you followed our recommendations from the article and are still experiencing problems, kindly submit a prepurchase ticket with all relevant login details and we would be happy to check out everything for you.
Hello, thank you for the update and making my site a bit faster 🙂
However, I have one small problem: the mobile menu that was scrolling down nicely when opened before the update now just pops up. No more that sweet scrolling down… Couldn’t find any way to fix that minor problem.
Hello and thanks for stopping by. We’ll definitely try first to replicate this on our end. If we’re able to, we’ll fix the problem with next updates. If not, we’ll get in touch with you for more details about troubleshooting 🙂 In the meantime, if you notice anything else, kindly let us know about it
Thanks a lot for the reply 🙂
And I will!
Hello, I just wanted to inform you that we were indeed able to replicate this, so we’re already on it. Thank you once again for bringing it to our attention 🙂
Thank you so much, you’re amazing!
Fixed!
Great work!!
Really glad to hear that! 🙂 and once again, thank you for taking the time to report the problem, and especially for your patience and understanding. And the biggest thank you is for being a member of the OceanWP family 🙂
I have lost my mobile menu and cannot find a solution
Hello Rob, thanks for stopping by. Not exactly sure what you mean by “I’ve lost my mobile menu”, but open a prepurchase ticket with all necessary login details so that we can check your site out: https://oceanwp.org/pre-purchase-question/
Amazing update. I started use your theme today on my new website. I’ve take some reseach and seem Oceanwp is the best choice.
Thanks for the free version, I may upgrade soon
Hello Tom, thanks for stopping by! We hope you enjoy building with OceanWP 🙂
My blog icons are showing as squares after recent update.
How to enable ocean Icons with font awesome icons
Please help me
Hello Jagrut, thanks for reaching out. Your icons are shaped as a square but that’s not a bug that’s the style you’ve chosen. “Showing up as squares” means icons are not being displayed at all and/or replaced by empty squares or symbols. You can change the icons via Customize > General Options > Theme Icons. Note, you may need to reselect icons that require manual selection (like scroll to top, etc) or re-add some widgets in sidebars or other areas. Hope this helps
Thank you for sharing this great article
This is a very well-written and informative post. In my opinion, this is one of the very best posts that has ever been published. Your work is outstanding, and it motivates me to do better. Please accept my sincere gratitude.