In this tutorial, I will guide you on how to let your website authors or editors pick different template layouts for their blog posts. This way, each author can have more control over how their blog looks.
As you can see in the video above, when a user finishes writing their blog and selects a template options, the blog header changes to match their choice. This feature allows editors or admins to change the post template easily without needing to go into the bricks template and change it manually.
Creating Field Group
First, we will create a field group and set the location to posts.
We will name this field group “Post Layout.” For the metabox, we will label it “Post Layout Control.” Inside the “Post Layout Control” metabox, we will add a meta field (or field box) and name the field label “Template.” Finally, we will choose the field type as “Radio.” Next, we need to create options for the radio buttons. We will add the radio options: “Template 1,” “Template 2,” and “Template 3.”
Make sure to set one of the radio options as the default value. This way, if the editor or admin forgets to choose a template, the default option will automatically show.
Creating Bricks Template
Now, let’s create a Bricks template. First, give your template a name. Then, set the template type to “Single.” This tells the system that this template will be used for individual blog posts.
After creating the template, click on “Edit with Bricks.” Ensure that the template condition is set up properly so that it only shows for the intended posts.
Once you have everything set up, you can start designing your layout as you want. In this tutorial, we will focus on changing the blog heading layout, but you can also use this for a complete layout change.
We created three different sections and changed the labels for each one to match our template options in the backend, this helps you easily identify which section is which, making it simpler to manage your layout later on.
Now that everything is set up, we need to use Bricks Display Conditions. This will allow us to show each layout based on the radio template options we created for posts. When the editor or admin selects one of these template options, the corresponding template will be displayed on the front end for that specific post.
setting up the conditions
This step is crucial for your templates to function as intended. To configure the conditions, first, click on the “Template 1” section. Then, look for the condition icon and click on it. This will allow you to set the rules for when this template will be displayed.
This will open the condition configuration panel. After that, click the “+” button to add a new condition. This is where you can set the rules for displaying the template.
After you’ve set all the rules correctly, go to your post page. From there, change the option to either Template 1, Template 2, or Template 3. Preview each one as you switch between them. If everything is set up correctly, they should all work just like shown in the video tutorial.