WordPress offers two types of themes, one is free and the other one is a premium (paid themes). WordPress themes that offer incredible features, speedy page load times, and assurance of extraordinary features. Some of the features are free and others usually need a premium subscription. In this article, we are talking about OceanWP, how we use it and what its features are, how we can make our website looks incredible as others.
It has both free and premium plugins available.
We’ve deployed this WordPress site using the WordPress Manager
Before digging deep into the article, I will give you a brief overview of the benchmarks we performed on OceanWP in two scenarios.
Scenario 1 – Plain OceanWP
Note: Without any cache plugin or CSS/JavaScript optimizations:
Scenario 2 – With LSCache Plugin for WordPress:
Note: With CSS/JavaScript combined and minified
At the end of this article, there are detailed instructions on what we did (optimizations wise) and results from Google Console are also added.
OceanWP theme is a completely customizable WordPress theme with a lightweight code base where any person who wants to make its website, can do so easily by using ready-made demos plus it also allows to add custom code/design changes. The developers designed the OceanWP theme with a strong purpose on both usefulness and style. An important reason for this popular theme is the availability of a large number of demos that you can modify in a couple of clicks. In this theme, the quality is very much high (in terms of speed as well) and interesting. It offers multiple demos that can be utilized for any kind of website, such as, a full-fledged WooCommerce store, corporate site, or a simple blog. Everything is covered in demos and easily extensible as well.
If you build websites already, you will definitely understand that page speed is a central piece of the achievement of any page.
Users expect pages to load quickly and seamlessly on any device and will quickly go elsewhere if your pages don’t. Google also gives a ranking boost to your website if your page speed is good (among its other metrics) so it is even more important that your site loads fast.
There are detailed performance benchmarks available at the end of this article.
OceanWP is highly rated for its availability. OceanWP is very user-friendly that any new developer can easily understand its features, it is not difficult to use, it’s easy to set up with page builders that are also user-friendly.
As we know there are multiple themes where they apply restrictions to their widgets like we cannot make our custom header or footer but in OceanWP there are no restrictions. In this theme, we can add as many menu items in the header to make our header as we want. That’s why OceanWP is beginner-friendly. Most developers use this theme instead of others.
We already mentioned before that the OceanWP loads quickly that’s why it is one of the fastest loading WordPress themes we see on the list.
If you want to make a WooCommerce site, OceanWP has a lot of support for the eCommerce plugins and will enable a WooCommerce menu section within the customizer. It’s a fully-featured edition with upsells, cross-sells, different checkout options, and the ability to control a wide range of selling options. If you’re launching an online store, the OceanWP theme integrates with WooCommerce like no other theme in the market does.
Sign in to the admin dashboard of your WordPress site, your dashboard screen will look something like this:
and go to Appearance in your sidebar of the dashboard then hover on appearance and click Themes.
Now you can see your theme window here you can add a new theme.
As you can see in the image below,
Click Add New button,
Click the search bar, and search for oceanWP, as you can see in the below image there is a blue button of install, now you can click on it (install button).
After installing the theme you can see in the below image there is a blue button of activate, now you can click on it (activate button).
Once installed and activated, it will look something like this:
To utilize the maximum power of OceanWP, they recommend you to install some plugins, click Plugins from the left side-bar as you can see in the image:
After clicking on the plugin, you can see the plugin section where you find the Add New button at the top of the plugin section. As you can see in the image below;
Click the search bar, and search for the ocean extra plugin, as you can see in the below image there is a search on the top right side,
then you find some plugins but we have to install the Ocean Extra plugin as you can see in the below image. Now click on the install now button.
After successfully installing the Ocean extra plugin, and there’s a blue button of activate, now you can click on it to activate the plugin as you can see in the below image,
PAGE BUILDERS
OceanWP theme supports many page builders like Elementor, WPbakery, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, and so much more, these are very popular page builders. In this article, we will briefly describe OceanWP integration with Elementor.
Elementor Integration
Elementor is an incredibly powerful page builder and can work with OceanWP to create unique designs and you can easily build any section you want in your website with the help of Elementor page builder.
First, we have to Install the Elementor plugin.
Once again click on Plugin, as you can see below the image. Search for elementor website builder then you can see the install now button in below image, Click on the install now button
You will need to activate the plugin by clicking on the blue button of Activate. As you can see below image
WooCommerce integration
WooCommerce integration is another strong point of OceanWP and ideal for implementing eCommerce elements to a standard website or building an entire online store using the OceanWP theme.
First, we have to Install the Woocommerce plugin.
Similarly each for Woocommerce plugin from the plugins section then you can see the install now button in below image, Click on Install Now button
You will need to activate the plugin by clicking on the blue button of activating. As you can see below image
OceanWP theme is free and not paid. You only have to pay for premium extensions that too if you want to add extra functionalities to the theme. There’s absolutely nothing OceanWP has left (features/design-wise). The moment you install this theme, it appears to be a premium theme that can be reshaped and transformed the way you want. This theme provides most of the features which you only find in premium themes.
The Ocean Extra plugin adds new ways to customize your website and makes it simple to change any installed theme in any way you want. If you open OceanWP from your WordPress dashboard, you will see the Theme Panel with the main site-wide customization options.
OceanWP presents a basic wizard to edit your website and make it exactly how you like. From adding panels to the ability to change the typography, add logos, add color schemes, top bar options, and more, you can control the general aspects of your website design from this single panel.
The top section includes checkboxes where you enable features within the page and post-editors. The lower panel opens up further options for logos, favicons, colors, fonts, and all the things that will make the website yours.
Header design is a central part of both WordPress and OceanWP. You can control all aspects of header design and behavior from here.
Select Upload Your Logo from the theme customizer panel or Header and Logo from the main OceanWP menu. Upload your logo, resize if necessary and you’re good to go.
Click on the select logo, here you can also edit your site title and a tagline of the website, as you can see in the below image
After clicking on the select logo, you find this window where you can add or drag your image or logo for your website then select it and click on blue select button which is situated at the right bottom of the window. As you can see in your below image.
If you want to change your logo then there’s also a button to change the logo.
If you want to display or hide your site title, you can check or uncheck the checkbox of the display site title and tagline. In the below image the checkbox is checked, here you can see the site title and a tagline of your page.
In the below image the checkbox is unchecked, here you cannot see the site title and tagline of your page.
If you want to create your menu, here is an option in the customize window
In the sidebar, we have a menu option, click on it
After clicking on the menu option there are two option one is a primary menu which is the header menu and the other one is a secondary menu which is the footer menu
Now click on the primary menu as you see in the below image
After clicking on the primary menu you can add or create (pages, posts, custom links, etc).
First, we have to click on Add items then we can add or create (pages, posts, custom links, etc) by adding items on the menu.
After clicking on the menu option there are two option one is a primary menu which is the header menu and the other one is a secondary menu which is the footer menu
Now click on the secondary menu as you see in the below image
After clicking on the secondary menu you can add or create (pages, posts, custom links, etc).
First, we have to click on Add items then we can add or create (pages, posts, custom links, etc) by adding items on the menu.
If you want to add a blog to your website or manage it there’s a very easy way to add a blog and manage it
First, go to the dashboard for your WordPress website as you can see in the below image. Here is the post option in the sidebar of your dashboard. Click on the post option
After clicking the post option you get the post section where you can find additional new button at the top of the post section, as you can see in the below image. Click on the add new button.
After clicking on add new button you get this window, where you can add your post
\
You can use the Typography menu in the customizer to control every little thing of text on your website. It covers headers, menus, body text, top bar, navigation, dropdown menus, sub-headers, and even breadcrumb fonts. If you’re building a website, you will likely already know the power of a good font and you can integrate the core WordPress fonts with those from Google and other sources.
PROs
The positive elements of OceanWP include:
CONs
At the end of this article, we are going to do a small test for the OceanWP theme to test the speed and performance of the site. Pre-conditions for the test.
Lingerie eCommerce demo
Tests case for OceanWP theme.
NOTE: We imported this demo and this is an eCommerce heavy demo if you want a lite one you can import any other.
In our first case, we simply install the OceanWP theme and then import the demo stated above, To check the speed and performance of the site we use a simple Developer tool of chrome you can use any, we checked the following things that we needed for the performance test. Just open your site on the browser and press CTRL+SHT+I. Go to the Network tab and reload.
These are some statistics that we got when we load the page without any cache plugin or optimization.
Loader.io Test Results (Without any Cache Plugin or optimizations):
In the second case, we only did some CSS configuration from the LS cache plugin. Go to Page Optimizations -> CSS Settings enable all CSS optimizations and then test the thing we checked above.
In the third case, we only did some JS configuration from the LS cache plugin. Go to Page Optimizations -> JS Settings enable all JS optimizations and then test again.
Now at the last we enabled cache, optimize CSS and JavaScript, and also done some configurations on LS Cache (activated full-page caching).
After enabling all these you can see the change and effect after and before caching.
2 Comments
Somesh Z
oceanWP theme is good enough and I am now thinking to switch to it. Presently I am using Genesis themes and they are quite light but does not have that cool look. I will surely update my comment once I try OceanWP theme. Thanks for the blog!
cyberpanel
Indeed and thank you for stopping by. 🙂
Do let us know when you plan to use the theme.