How to build advanced websites based on custom post types with Toolset and OceanWP?
Toolset allows you to create custom post types, and design content templates. OceanWP theme is now custom types ready, meaning that you can control theme settings for each template, individually.
In this tutorial, we will cover the best of Toolset and OceanWP when they are used together. For each possibility, no extra PHP is needed, Toolset generates it for you.
We have set-up some reference sites for you to test the integration for free. Simply activate OceanWP and start the discovery.
- Getting Started - Installing Toolset plugins
- Add custom post types, taxonomies and fields to OceanWP
- Create templates for custom post types using Toolset Layouts
- Assign different OceanWP theme options to each template or archive you create
- Create advanced custom searches and display results as a list using pagination, sliders and on Google Maps
- Front-end forms for submitting content and registering users
- Control access to your content built with OceanWP: membership sites, personal accounts.
- Using OceanWP, Toolset & Woocommerce: design single product templates, comparison, sliders and much more
- Try Toolset for 30 days for free.
1. Getting Started - Installing Toolset plugins
Toolset comes with several components. Download and install the following plugins from your Toolset account.
- Types – lets you create custom post types, custom fields, and custom taxonomies.
- Views 2.5 – helps you display the lists of your contents and archives on the front-end, including custom search for your visitors.
- CRED – lets users submit content via front-end forms.
- Layouts 2.1 - drag-and-drop who lets you build your content templates.
- Access – lets you add custom user roles and control where each user role can visit on the front-end.
- Maps – lets you display your contents on Google Maps.
Note that depending on the kind of site you want to build, e-commerce for example, you will need to download additional Toolset component plugins.
2. Add custom post types, taxonomies and fields to OceanWP
|Create your custom post types||In our example, we focus on “houses”|
|Add some custom fields||Number of bedrooms, rental price, post relationship etc.|
|Add custom taxonomies||Property features or Property types such as “For sale”,”Swimming Pool” etc.|
Read the full Toolset documentation to learn more about how to set up more options for custom post types, taxonomies and custom fields.
3. Create templates for custom post types using Toolset Layouts for OceanWP
Toolset comes with a drag-and-drop builder allowing you to create a template for your custom post types. Your design is built using cells you insert into it and each of them provide different features. As an example, all the houses will be automatically updated using the same content template:
|Final Content Template built with Layouts drag-and-drop||House on the front-end using my content template||Another house using automatically the same template|
4. Assign OceanWP theme options for each template or archives you create
Under the layout we just created for our “houses”, you will find the Ocean Theme Options section. Use Toolset to control the theme options for each template, indivually.
In our example, we will add the top bar only for our “houses”:
|OceanWP theme options displayed under your the layout of your custom post type:||Front-end result, my houses with the top bar:|
5. Create advanced custom searches and display results of the search as a list, pagination or on Google Maps.
Toolset allows you to easily build custom searches based on custom post types. Visitors can use the parametric search to filter results find exactly what they are looking for. You’ll find below two examples of custom searches built with OceanWP and Toolset.
The parametric search form using custom post types and fields.
Geographical search on Google maps built with Toolset.
Learn more about how to build custom search with Toolset and OceanWP.
6. Front-end forms for submitting content and registering users
Another possibility is to allow users to submit content from the front-end of their site built with OceanWP For example, you can allow visitors to submit their property:
The user registration functionality is ideal to create membership sites for example.
Of course, you can select the status of each submission: published, pending review, etc.
To learn more, visit Toolset getting started page about publishing contents from the front-end.
7. Control access to your content built with OceanWP: membership, personal accounts and role privileges.
Toolset allows you to have complete control over who can access the contents. This includes custom fields, front-end pages, forms, and much more.
Learn more about how to control what user access according to his role, privileges and login status.
8. Using WooCommerce, Toolset and OceanWP
OceanWP works very well with WooCommerce. Combined with Toolset, it gives you a total power to design the templates for single WooCommerce Products as well as custom Product Listing pages.
You can create comparison products, advanced custom search, slider for products and much more.
Visit our dedicated page to learn more about developing custom WooCommerce sites with Toolset.