- Toolset - Its new Toolset Blocks allows you to add custom features to your websites including custom post types, a search and dynamic content.
- GeneratePress - A lightweight and fast theme that is easy for beginners to use.
1. You Can Create Dynamic ContentAn advantage it has over page builders is that Gutenberg comes with a number of block extensions to enhance your websites. One of those is Toolset which offers dynamic content capabilities. Dynamic content means you can create an element (such as an image) that will draw the correct content from the database. So when you create a list of posts you only need to add each block for each element once, but that block will display different content for each post. For example, I’ve created a list of tours posts - later I’ll go into how you can do this with Gutenberg. Do you notice something strange about the headings below? The heading is exactly the same for each of my tours. That’s because the headings are static, the opposite of dynamic. It means when I add my blocks, whatever text I enter in the heading will be displayed for each of the posts. However, when it is dynamic, you will see the correct heading on every tour. To illustrate, here is my tour post about visiting the West Bank on the back-end. You can see the post title at the top. I want to display this tour post with the correct heading in my list of content. All I need to do thanks to Gutenberg and Toolset is the following:
- Select Toolset’s heading block — unlike the normal Gutenberg blocks, Toolset’s allows you to make your content dynamic;
- Select the dynamic option;
- Choose the source for your heading;
- Confirm that the heading is correct.
2. Display Custom Lists of ContentOn a custom website, there will be times when you will want to list your content from a particular post type on different parts of your website. For example, a list of properties for sale on your real estate homepage. Each of these properties uses the same layout, displaying the same information such as the price, number of bedrooms and number of bathrooms in the same way. This information is added using custom fields which are pieces of information you can add to WordPress content. Page builders on their own can’t build custom fields. However, you can create them using Gutenberg and its blocks plugins. Below for my travel website, I displayed a slider with a list of featured tours. The list includes a number of custom fields including the price, rating and duration. I used Gutenberg and Toolset to create the custom fields which you can see in my list above. Here are all of the custom fields I created. I’ve highlighted the price field as an example. On the back-end I can use Toolset’s View block to create a list of posts. I can choose what posts I want to display and how I want to display them. For example, below you can see that I am able to select which content I want to display. I can also decide how I want to display my list, whether it is in the form of a grid, ordered list, unformatted or much more. I can now select which fields I want to display. Many of these fields will be the custom fields that I created previously. Each of my tours will display the fields in the same layout. Once again, I’ve highlighted the price custom field below. For each field I create a block and then choose the source of the content (such as the price) on the right hand sidebar. Once I have arranged the layout for my posts I can decide exactly which posts I display and in what order. Using Gutenberg and Toolset I can select:
- The order I display posts such as the most recent blog post;
- The number of posts I display;
- If I want a filter on my posts, for example display only the tours that cost less than a certain amount.
3. Create a Template For Your ContentA template is your blueprint for your post types that provides each of your posts with a structure. For example, I’ve created a template for my tours post types which means each tour post will have exactly the same structure when you look at it on the front-end. As you can see, both posts are from the same template. You know this because each post has the same layout, with the content following the same structure. All I needed to do to create my template on my Gutenberg Editor was insert my blocks and add dynamic content. As I’m adding the content I can use the drop-down at the top of the page to switch between the posts to see what the template looks like with different post content.
4. Create a Custom SearchOne of the most important features on a custom website is a search. If you are designing a directory website which sells items, for example, you will want to make it as easy as possible for potential customers to find your products. The best way is with a search that contains filters so they can narrow the results down and find exactly what they’re looking for. Below you can see the custom search I created using Gutenberg and Toolset for my tours. It contains a number of filters. One of the filters is to only show those tours with a rating of 3-5 stars. Creating a custom search consists of two steps. First, creating the search (which you can see above) and second, designing the results. I created the search using Toolset’s View block on a new page. Below are the options to enhance the block. I can select the search option, add front-end sorting so that the user can sort the results when they appear (lowest to highest price, for example) and pagination to split the content into pages. Once I add the block I can proceed to add additional filters such as the maximum price. I can also include a map and markers to display the results. Once again thanks to Gutenberg and its extensions I do not need to use coding. I just select the blocks and adjust the options on the right-hand sidebar. For the results, I added blocks just like I did for the template and custom list of content. And just like that, I have a custom search for my tours. I can now enter searches using the filters on the front-end.
5. Create an Archive of Similar PostsAn archive makes it easier for users to find all the posts you have published. If you want an archive with standard fields such as a heading and post content then a page builder such as Elementor is a great option. However, if you want to include custom fields with dynamic content then you will need to use Gutenberg, I built an archive for all of my tours on my travel website. When someone clicks on the archive they will see every tour I have created. You can create a tour for any of your posts. Just like with the custom list of content I can add the blocks for the content and arrange the posts how I want. I can also style the blocks by changing the text color, adding a padding/margin, add the background color, and much more.
You Do Not Need to be a Professional Developer to Create Professional WebsitesNow that you have seen how even a coding beginner can build complete custom websites it is time for you to try it out yourself. Here are some tutorials and documentation worth going through:
- If you are new to Gutenberg, Colorlib offers a good WordPress Gutenberg tutorial which will introduce you to how you can create blocks.
- The plugin I used with Gutenberg, Toolset, offers a training course on how you can use the two tools to build WordPress directory websites. It is a great way to understand exactly what features you can build and how for any type of website.
- To keep up to date with any changes to Gutenberg it is also worth keeping an eye on the block editor handbook.
Joe Lobo is a WordPress designer and marketing expert who enjoys discovering new plugins to speed up the website building process. He can be contacted on Twitter.
Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…
By Robert Reeve
As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…
Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…
By Max Walton
Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…