Toolset plugins and OceanWP theme work well together. OceanWP is custom types ready which allows you to customize its options for each template you design including archive pages and of course, custom post types.

What to install

The basic setup will include:

  • The OceanWP theme
  • Toolset Types
  • Toolset Views
  • Toolset Layouts

Depending on the kind of site you want to build, you will need additional Toolset components.

How to use OceanWP to build sites with custom types

OceanWP is a fast and lightweight theme which gives you convenient control over the page frame and styling.  You may want to choose OceanWP for many reasons:

  • Create the design of your choice with extensive options
  • Customized Header and footer areas
  • Suited for Elementor and WooCommerce users

OceanWP is custom types ready, meaning that you can control different theme features for each post types you have in your sites. For example, you might want your regular Pages to display a sidebar and a navigation, but you want your custom posts to stretch to the full page width, without having a sidebar neither a menu.

Besides this integration with OceanWP, Toolset enables you to:

  • Create custom types, fields and taxonomies.
  • Set up custom searches with personalized filters based on several parameters.
  • Design forms for front-end submission.

And much more.

For inspiration, this is how a complete page looks like with the OceanWP theme and our sample design:

Using Toolset and OceanWP
A site with custom search and custom types built with Toolset and OceanWP

Using the OceanWP premium extensions

If needed, you can enhance your OceanWP features with OceanWP premium extensions. They add an array of customization features and pre-made demos. Some of these premium extensions might overlap Toolset, however, they principally work with standard WordPress Pages and Posts.

 

It’s great if this is enough for your development project! Nonetheless, if you need to create some custom content, especially with fields and custom post types, Toolset may be your choice.

How to design the “interior” with Toolset

Now it’s time to create your own design with Toolset. Toolset plugins let you do a lot.

If you’re new to Toolset, we recommend that you follow the getting started guide.

Controlling OceanWP theme options for templates and archives

For designing your templates and archive pages, we recommend using Toolset Layouts drag-and-drop editor.

Below the Toolset Layouts editor, you can see a Theme Options section. Use the controls to define the theme options for the layout you are editing. Each template you design has its own setting. It gives you great flexibility and you can choose how each custom post types look on the front-end.

OceanWP and Toolset
Controlling OceanWP theme options for each layout individually

 

Please consider that theme options for custom post types are only editable using Toolset. They will not appear on the regular Appearance -> Customize page from OceanWP settings.

Using OceanWP with Toolset and WooCommerce

Combined together, OceanWP and Toolset allow you to create custom templates for your single WooCommerce Products and the Product Listing pages.

Read more about how to develop custom WooCommerce sites with Toolset or follow our tutorial explaining how to create a template for your single Products.

 

Using OceanWP with Toolset
A custom WooCommerce site built with Toolset and OceanWP

Using Toolset with OceanWP and Elementor

A lot of people enjoy using OceanWP with Elementor. Amongst the premium add-ons of OceanWP, you can even find a few Elementor widgets. If you’re looking for how to design with Elementor and Toolset, have a look at the video here:

 

Watch the video

 


Important Toolset settings

By default, Toolset will use the correct settings and you don’t need to make any change. If you are moving to OceanWP from a different theme or are updating an existing site, make sure that the following are set:

On the Toolset -> Settings page, click the General tab. There, under the Bootstrap loading section, select the Toolset should load Bootstrap 3.0 option.
When editing layouts, make sure that all rows are set to Row as wide as post content.

Solving Bootstrap CSS conflicts

When using the OceanWP Theme some Bootstrap CSS styling that is loaded by Toolset can be overwritten. If you encounter the situation where theme.css CSS definitions override bootstrap.css you can use a simple workaround to fix this issue. All that you need to do is to add styles that get overwritten to the Toolset Forms with an !important rule.