In the previous part of our Toolset post, we covered the plugin’s functionality and all the individual plugins that make up the Toolset suite. In this part, we will focus on seeing the plugin in action by showing you how to create a custom post type, use Views to display the post, and how to create a front-end submission form using CRED.
Setting up the Toolset Plugin
As mentioned before, Toolset is available as a premium plugin for $149. However, it’s worth mentioning that they also offer a free stand-alone version of just the Types plugin which is available on the WordPress repository. Installing the free version is a good way to get familiar with the plugin before buying the full version.
However, the free version of the Types plugin will not allow for the full extent of customization such as controlling the display of custom post types, creating custom layouts for your custom post type, nor can you define the custom Access levels.
If you would like to test the Toolset plugin with all of its functionality, you can demo the plugin package on your very own pre-made test site. You can register for the demo site on http://discover-wp.com by clicking on the Get Started button. You can choose what type of site you’d like to demo the Toolset with. Example sites include: Company, Classifieds, WooCommerce, Magazine, Real Estate, a blank site, and others. Using a pre-made site like this allows you to see the plugin in action and is a great way to learn.
If you’d prefer to learn on your own, though, you can always go the traditional route and purchase and install the plugin yourself by downloading it from your account area as a zip file and then installing it through your WordPress dashboard and uploading the zip file.
How to Create Custom Post Types
After installing and activating the plugin, navigate to Dashboard and click on Add New Custom Post Type.
Fill out the Name and Description form. For the purposes of this tutorial, I’ll use Movie Reviews as an example. You can set a custom icon for your post type to differentiate it from the regular posts. Make sure the slug doesn’t include any capital letters or punctuation other than “-“. In the sidebar, you can choose the position that your custom post type will appear in the Dashboard sidebar menu. Which position you choose is completely up to you and has no real impact on the custom post type itself. I chose to set it immediately after the regular posts so it’s easier to find.
Most of the other fields won’t require changing but you should look over them to get familiar with all the options. Once you made sure everything is the way you want it, go ahead and click Save Post Type. Your custom post type will now be visible in the main admin menu on the left. It will function like the regular WordPress posts but is completely separate from them.
Once your custom post type is created, you need to add some custom fields to it.
Navigate to Toolset > Post Fields and click the blue Add New Group button. Enter a name for the group, save it, and then click Add New Field.
For this tutorial, I’ll be adding a single field type for the movie name, the director, and the genre. I’ll also add the URL field for the IMDB website and multi-lines field for a brief summary and the cast. Once you’ve created the custom fields, you can now assign them to your custom post type. In this case, I’ll assign it to the Movie Reviews post type I’ve just created.
Once all of that is done, you need to create a template for your new post type so you can re-use it every time you add this type of content.
Navigate to Toolset > Content Templates and click on Usage for Single Pages. Once there, select Create Content Template for Single Movie Reviews.
In the template editor, click on Fields and Views and add the fields you created for your custom post types. In my example, I’ll select all of the fields and I’ll add regular post editor field so I can provide my own review of the movie.
You can also place HTML code for styling purposes such as bolding the text and inserting line breaks.
How to Display Custom Post Types Using Views
To customize the display of your custom post type on the front-end, click on Edit Views. After that select Loop Wizard which will guide you through the rest of the process. You will be able to choose how you want to display your custom post type and select fields.
I selected an Unordered List and inserted the Post Title, Content Template for Movie Reviews, and finally, the Post Body.
Once you are happy with your changes, you can click on Finish. Now every time you add a new custom post type, they will all look the same on the front end.
Finally, you can also use Views to style the archive pages for your custom post type and to create a custom archive view. To do that, navigate to Toolset > WordPress Archives and then find the name of your custom post type and click on Create a WordPress archive for this loop.
On the following screen, you can customize which loops will display this post type. If you want your custom post type to show up on your Home/Blog page click on it to select it, otherwise leave that one blank and just select Movie Reviews.
The next section is where you can customize the loop output, similarly to what we’ve done before. I chose the same options as before, only this time, I opted for a post excerpt instead of the entire post body.
How to Create a Form Using CRED
For the final section of this tutorial, let’s use CRED to create a form. CRED API is very powerful and can do much more than just creating simple forms. But for the majority of users, creating a simple front-end user form will be more than enough. This functionality is especially useful if you want to enable user registrations on your website.
To get started, navigate to Toolset > User Forms and then select Add New.
The CRED form creation is fairly simple and very user-friendly. The wizard guides you through the entire process and creating a form is a matter of filling out a form name and selecting what the form will do.
You can choose between allowing users to register or to edit users; as well as what should happen after the form is created. You can also use reCAPTCHA in your form which helps you prevent SPAM on your site.
Once you’ve selected all the options, you can then display your form as you deem fit. Your custom form can be displayed on posts, as well as on pages and custom post types.
The Toolset plugin offers a powerful set of tools which allow end users to create completely customized websites without having to ever touch the code. On top of being user-friendly for non-coders, it’s also a useful addition to any developer’s toolset for client work, allowing developers and designers to add custom functionalities to their client’s websites.
Toolset is an all-around useful plugin that is worth the price tag if you anticipated needing to add these functions repeatedly snd want to minimize the time spent to do it.