OceanWP Theme Tutorial

In this OceanWP tutorial, we will explain why you can build professional WordPress websites with the OceanWP theme.

OceanWP WordPress theme is a responsive theme and comes with many WP plugins that enables small businesses to quickly build fully functional websites.

A company website, an online ecommerce site, or other types of websites can be developed using the OceanWP theme with WordPress plugins and Elementor web page builder.

The OceanWP theme is mobile-friendly which helps your WordPress website to fulfill the mobile SEO best practices on Google.

This OceanWP theme tutorial will go into more details with the following topics.

• OceanWP Free Plan and OceanWP Premium Plan
• Install OceanWP Theme on a WordPress Website
• Elementor Page Builder
• Install OceanWP Free Extensions (Plugins)
• Install OceanWP Premium Extensions (Plugins)
• Ocean Extra
• Ocean Elementor Widgets
• Ocean Sticky Header
• Ocean Sticky Footer
• Ocean Modal Window
• Ocean Demo Import
• Ocean Sticky Anything
• Ocean Hooks

You can use OceanWP theme for free, or upgrade to the paid plan OceanWP Premium (with one of the licenses).

The free plan lets you install and use a limited number of OceanWP extensions which are sufficient to build basic WordPress websites.

The price of the OceanWP Premium is based on the number of licenses you choose to buy. The different plans include:

Single year licenses

• Personal license: 1 site for US$ 39 per year
• Business license: 3 site for US$ 79 per year
• Agency license: 25 site for US$ 129 per year

Lifetime licenses

• Personal license: 1 site for US$ 159 for lifetime (one-time payment)
• Business license: 3 site for US$ 319 for lifetime (one-time payment)
• Agency license: 25 site for US$ 519 for lifetime (one-time payment)

Within all the paid licenses, you will get:

• 8 free extensions and 13 premium extensions (where the extensions come as WordPress plugins)
• 13 free demos and 60 premium demos i.e. Elementor page templates

For the lifetime plans, you make a one-time payment, and will get OceanWP theme and extension updates for lifetime.

OceanWP theme can be installed quickly.

Install WordPress on Siteground, or the web hosting service of your choice.

Log in to your WordPress account.

Your website currently is activated with the default WordPress theme.

In your WordPress admin area, click Appearance (from the left side menu), and then click Themes.

Click the Add New link at the top of the Themes screen.

Search Oceanwp in the search box.

Click the install button, and it will start installing the OceanWP theme.

Click the Activate button, and the newly downloaded OceanWP theme will be installed.

Visit your WordPress website on a web browser (e.g. Google Chrome), and you will see your site now appears with a basic layout of the OceanWP theme.

In your OceanWP theme WordPress website, you can use Elementor, a visual web page builder.

Go to Plugins, and Add New on the left side menu in your WordPress account.

Search Elementor and click install. Click activate.

Now you have the free version of Elementor available.

Elementor has a paid version Elementor Pro. But if you are to buy the Premium (paid) version of OceanWP, you will get the Ocean Elementor Widgets which give you plenty Elementor elements.

The OceanWP theme can be used as a free plan with a few extensions (or plugins) that come with the free plan.

Install the free OceanWP extensions, including:

• Ocean Extra
• Ocean Demo Import
• Ocean Stick Anything
• Ocean Custom Sidebar
• Ocean Modal Window
• Ocean Posts Slider
• Ocean Product Sharing
• Ocean Social Sharing

To install the plugins (or extensions), go to Plugins, and Add New at the left side menu in your WordPress admin area.

Search the names of each extension. Click Install.

Go to Plugins. Click Activate to activate all the free OceanWP extensions.

To enhance the functions of your WordPress website, buy the OceanWP premium extensions by choosing from one of the paid plans.

You will receive an email with the login and password for your OceanWP after your successful purchase. Or login at:

• https://oceanwp.org/

Once you have logged in, download the OceanWP premium extensions, including:

• Ocean Sticky Header
• Ocean Elementor Widgets
• Ocean Hooks
• Ocean Popup Login
• Ocean Portfolio
• Ocean Side Panel
• Ocean Sticky Footer
• Ocean Footer Callout
• Ocean Instagram
• Ocean Woo Popup
• Ocean White Label
• Ocean Cookie Notice
• Ocean Full Screen

After activating the premium version of OceanWP, go to Theme Panel and enter the license key in the WordPress admin area.

To upload all the paid extensions to your WordPress site, go to Plugins, and Add New at the left side menu in your WordPress admin area.

Click the Upload Plugin link at the top of the screen, and upload the extensions as files one after one.

Activate all the premium extensions.

Ocean Extra is the first plugin that is required for you to use the OceanWP theme’s many powerful features.

When using Ocean Extra with your free theme, you will get OceanWP Settings enabled under each WordPress page, or blog post. The settings under each page or blog post are for making changes to the individual page or post which include Main, Shortcodes, Header, Logo, Menu, Title, Breadcrumbs, and Footer.

When using Ocean Extra with the premium theme, it adds features to the OceanWP theme Customizer, including Site Identity, Menus, Widgets, Homepage Settings, General Options, Typography, Top Bar, Header, Blog, Sidebar, Footer Widgets, Footer Bottom, Custom CSS/JS, Side Panel, and Sticky Header.

The Ocean Extra extension enables the use of the Theme Panel. The Theme Panel includes My Library, Scripts & Styles, Import/Export, Sidebars, Hooks, Install Demos, Account, and Add-Ons.

The Ocean Elementor Widgets make at least 46 additional drag-and-drop elements available for use, including:

• Accordion
• Advanced Heading
• Alert
• Animated Heading
• Banner
• Blog Carousel
• Blog Grid
• Brands
• Business hours
• Buttons
• Button Effects
• Call To Action
• Circle Progress
• Countdown
• Divider
• Flip Box
• Google Map
• Hotspots
• Image Comparison
• Image Gallery
• Info Box
• Instagram Feed
• Link Effects
• Logged In/Out
• Logo
• Member
• Modal
• Navbar (a vertical navigation menu)
• Navigation (a horizontal navigation menu)
• Newsletter Form
• Off Canvas
• Price List
• Price Table
• Recipe
• Scroll Up
• Ajax Search
• Search Icon
• Skillbar
• Table
• Tabs
• Timeline
• Switch
• Login Form
• Lost Password Form
• Register Form
• Contact Form 7

When you are in the editing mode of an Elementor Canvas, the widgets that are in blue color are provided by the Ocean Elementor Widgets extension.

The Ocean Sticky Header extension enables you to build a WordPress website that has a sticky header section.

On each page’s header section, usually it displays the site logo and navigation menu. The plugin enables the header section to always stay on top of the user’s screen when he/she scrolls down the page.

The Ocean Sticky Header plugin works on the desktop and mobile versions of your website.

The Sticky Footer lets you add a menu and/or text in the footer bar.

You may hide the menu (in the footer bar) for mobile users.

The Modal Window extension lets you create a child window (i.e. modal) that pops up in front of the user’s current web page.

When the modal window is active, the clicking of the elements on the web page is disabled, but the web page is visible to the user.

The modal window will disappear when the user clicks outside of the modal window area, or clicks the Close button at the top right corner.

The modal window can be used as a website login form, a registration form, or a message alert.

Through the Ocean Demo Import extension, you can import 13 free Elementor page templates.

When you have OceanWP premium, you can import all (i.e. 60) paid Elementor page templates.

Your two-column page may have a sidebar or side menu on the right hand side, but when the user scrolls down the page, the side menu will disappear and does not follow the scrolling action.

With the Ocean Stick Anything extension, you can keep the side menu visible on the screen when the user scrolls down your two-column page.

The Ocean Hooks extension enables you to display a piece of content, section or element at a specific location of your selected pages on your WordPress site.

Location: You can activate the hook to show on a specific location on a specific page including:

WP Head
Before Top Bar, Before Top Bar Inner, After Top Bar Inner, After Top Bar
Before Header, Before Header Inner
Before Logo, Before Logo Inner, After Logo Inner, After Logo
Before Navigation, Before Navigation Inner, After Navigation
After Header Inner, After Header
Before Page Header, Before Page Header Inner, After Page Header Inner, After Page Header
Before Outer Wrap Content, Before Wrap Content, Before Content Wrap
Before Primary Content, Before Content, Before Content Inner
Before Page Entry
Before Blog Entry Title, After Blog Entry Title, Before Blog Entry Meta, After Blog Entry Meta
Before Blog Entry Content, After Blog Entry Content, Before Blog Entry Read More, After Blog Entry Read More
Before Single Post Title, After Single Post Title, Before Single Post Meta, After Single Post Meta
Before Single Post Content, After Single Post Content, Before Single Post Author Bio, After Single Post Author Bio
Before Single Post Next/Prev Links, After Single Post Next/Prev Links
Before Single Post Related Posts, After Single Post Related Posts
After Content Inner, After Content, After Primary Content
Before Sidebar, Before Sidebar Inner, After Sidebar Inner, After Sidebar
After Page Entry
After Content Wrap, After Main Content
After Wrap Content, After Outer Wrap Content
Before Footer, Before Footer Inner
Before Footer Widgets, Before Footer Widgets Inner, After Footer Widgets Inner, After Footer Widgets
Before Footer Bottom, Before Footer Bottom Inner, After Footer Bottom Inner, After Footer Bottom, After Footer Inner, After Footer
WP Footer

Under Conditional Logic, choose from one of the options or page types to show the hook: All Pages, Home Page, Front Page, About, Blog, Contact, Home, Ocean WP Elementor Widgets, Photography, Portfolio, Services, Videography, Webdesign, Single Post, Category Page, Archive Page, Logged In User, or Logged Out User.

You can apply multiple conditions. One example of using Conditional Logic is that you can hide the hook from a specific page such as About page, and have the hook displayed on all other pages.

You can display the hook based on User Roles (of WordPress) including Administrator, Editor, Author, Contributor, Subscriber, SEO Manager, or SEO Editor.

You may enable the use of PHP codes for the hook or disable PHP.

Regarding the OceanWP theme, I have written a Chinese version article of this topic.

• Woocommerce Setup Tutorial (WordPress)
• Elementor Form Builder Tutorial
• Switch to Classic Editor (WordPress Plugin)
• All-in-one WP Migration Plugin
• Deactivate WordPress Plugins