Sometimes, you need to show the data in a graphical design. Well, the progress bar might be the solution. Commonly, the progress bar is used to visualize the progression of an extended computer operation, such as a download/ upload file transfer, disk memory, processor, installation, and so on. Today, a progress bar is not only for showing a computer operation. With your creativity, the progress bar can be used for many things you can apply to your website.
The uses of the progress bar on the website following are below:
- Reviews
- Tabulation of Data
- Indicator of Improvements
- Indicator of Project Progression
- Etc.
With Brizy, you can create a progress bar very easily. With the ability to display custom fields data, you can dynamically add custom elements to your content, including a progress bar. This article will show you how to create a dynamic progress bar in Brizy.
How to Create a Dynamic Progress Bar in Brizy
Step 1: Create the Custom Fields
First, you must create the custom fields and set the field type to a number. By default, WordPress doesn’t have a custom field feature. So, you need to download and install it first. There are many WordPress custom fields plugins on the WordPress directory. In this tutorial, we use ACF as our custom fields WordPress plugin. If you don’t like ACF, you can use Pods or other ACF alternatives that support the number field.
Once you’ve downloaded and installed the ACF plugin into your WordPress, on your WordPress dashboard, go to Custom Fields -> Add New to create a new custom fields group. Give your custom fields group a name and click the Add Field button to add a new field.
Next, you can set the field label and field name on the Field Label and Field Name fields. On the Field Type field, set to Number, and then you can set the minimum value and maximum value on the Minimum Value and Maximum Value fields. In this example, we set the minimum value to 1 and the maximum value to 100.
Click the Add Field button to add more fields and repeat the steps above. This example will create a dynamic progress bar for sneakers review. So, we added some fields relevant to sneakers rating.
Once you’ve added the custom fields, go to the Location section to set where the custom fields group is to be assigned. You can use the default rule if you want the custom fields group to be given to blog posts. Click the Publish button to publish the custom fields group.
Step 2: Create the Custom Template for Blog Post
The feature to create a custom template is available on the free version of Brizy, but we recommend you upgrade your Brizy to the pro version, it allows you to access all the elements on the elements panel. With Brizy Pro, your custom template can be maximized.
Okay, once your custom fields are ready, you can create the custom templates for the article types you want to add to the dynamic progress bar. If you already have a template/s, you can directly go to your existing template and edit it. In this tutorial, we will edit our current template. But, if you are new to Brizy and want to learn how to create a custom template, you can read the article “How to Create a Custom Single Post Template in WordPress Using Brizy.”
Go to your existing template, and click the Edit with Brizy button, which brings you to Brizy editor.
Alright, it’s time to add the progress bar to your template. On your Brizy editor, select the Progress element from the elements panel and then drag and drop it into the canvas area. You can place the Progress element anywhere you want. We will place the Progress element under the Content element in this example.
Next, it’s time to edit and style up the progress bar. First, we want to edit the width of the progress bar. On the options toolbar of the progress bar, go to the Settings and click on it. In this example, we set the Width to 60%.
Once you’ve edited the width of the progress bar, go to the leftmost of the options toolbar and click on it. There are some settings that you can set here. There are Style, Fill, Title, and Percentage. First, go to the Fill settings, click the hamburger icon (see the GIF), and assign a field label to the custom fields you’ve just created.
As we mentioned, we will create a dynamic progress bar for sneakers review. So, we want to disable the percentage option by sliding the Percentage toggle to the left.
Next, edit the title of the progress bar according to the field label you assigned on the Fill settings. Once you’ve edited the title, you can duplicate the progress bar by clicking the Duplicate button. Because we have four field labels of custom fields, so we duplicate the progress bar three times.
Now, you can edit for the other progress bars as you did on the first progress bar (assigning a field label on the Fill settings and editing the title of the progress bar). Once you’ve edited and styled up those progress bars, update your single post template by clicking the Update button.
Step 3: Create a New Blog Post
Alright, you can create a new blog post once everything is ready. Make sure to add the values on the custom fields you have created in step one above. The given values will be used to set the fills of the bars.
Last but not least, make sure to set the category according to the category of the custom template it is assigned to (step 2).
The Bottom Line
This article shows you how to create a dynamic progress bar in Birizy. Brizy is one of the easiest tools to create websites, blogs, and online shops. The integration between Brizy and custom fields WordPress plugin makes us possible to create a dynamic progress bar for our site. Besides the progress bar, we can add dynamic content to any Brizy elements that offer an option to set the value dynamically. Rating element is another example whereby you can use it to create a dynamic star rating.