add progress bars to WordPress

Progress or skill bars enable you to convey data in a way that’s far more engaging than simply displaying some numbers. However, this isn’t a feature that’s built into WordPress by default. That means you have to figure out a way to add progress bars to WordPress on your own.

As you might imagine, there are plenty of plugins that can help you add this functionality to WordPress. However, you can also create stylish progress bars using simple Cascading Stylesheets (CSS), which is usually the most straightforward option. On the other hand, there are also some themes – such as Zelle – that enable you to add progress bars to WordPress as part of their feature set.

In this article, we’re going to talk about why you should consider using progress or skill bars on your website. Then we’ll teach you how to add these bars to WordPress, using both CSS and our own Zelle theme. Let’s get to work!

Why you should consider using progress bars on your website

Progress or skill bars are very recognizable features. They’re usually displayed in the form of horizontal bars that are filled up to a point, indicating a certain level of progress or ability:

An example of horizontal skill bars.

However, you can also play around with this element’s design, and create circular bars or even 3D ones. The only ‘rule’ is that it should be easy for users to understand what each bar represents at a glance, and they should fit in with your site’s overall style.

Of course, there are other ways to indicate progress aside from using bars. For example, you could implement tables, plain text, and even pictures. Still, we’re partial to this technique for a couple of reasons:

  1. Progress bars are easy to implement. Anyone can add progress bars to WordPress with a few lines of CSS. As long as you’re open to doing a little tweaking, you’ll be able to make them look just right.
  2. They’re more compelling than tables or plain text. Plain progress bars look interesting already, and CSS makes it so you can customize yours in any way you want.

Many people use progress bars on business or portfolio sites, as a way to list their abilities and proficiencies. Take another look at the example earlier in this section, for example. If you take away the progress bars, it’s just a list of skills, but the creative design makes them stand out. You can also use bars on any site where you want to display progress on your latest projects or initiatives.

Two ways to add progress bars to WordPress websites

In this tutorial, we’re going to introduce you to both horizontal and circular progress bars. We’ll use simple CSS for the former and a theme to create the latter. Let’s get to work!

1. Create horizontal progress bars using CSS

To design some horizontal progress bars, you first need to designate the markup for those bars using the WordPress text editor. Then you’ll need to add the necessary CSS to the WordPress Customizer.

To add progress bars to WordPress, simply open the page or post where you want to add your progress bars, and then navigate to the text editor:

add progress bars to WordPress using the WordPress text editor.

Next, scroll down until you find the section where you want to add your progress bars. Add the following code snippet there:

<div class="progress-bar blue">
<span style="width: 90%"></span>
<div class="progress-text">90%</div>
</div>
<div class="progress-bar orange">
<span style="width: 40%"></span>
<div class="progress-text">40%</div>
</div>

In this example, you’re placing two progress bars on the page. You’ll notice that they both share the progress-bar class, but not the second class. That first class refers to the ‘container’ for the bars and the second (blue or orange) stands for the color of the “progress” within.

You can change the progress within each bar by editing the width: XX% option inside the span tag. And you’ll also want to update the value within the progress-text so it matches that of the progress bar’s width.

When you’re ready, save the changes to your page. Nothing will show up on the front end just yet since you still need to add the corresponding CSS using the WordPress Customizer.

To do that, go to Appearance → Customize and navigate to the page where you added the HTML. Now, open the Additional CSS tab in your customizer:

The Additional CSS tab.

Inside, you’ll want to paste the following CSS snippet:

.progress-bar {
background-color: #1a1a1a;
height: 30px;
padding: 5px;
width: 500px;
margin: 5px 0;
border-radius: 5px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: inline-block;
float: left;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;
}
.blue span {
background-color: #34c2e3;
}
.orange span {
background-color: #fecf23;
}
.progress-text {
text-align: right;
color: white;
margin: -25px 0px; 
}

If you want to change the length of each bar’s container, you can alter the width value for the progress-bar class. Similarly, you can change the height by changing the value for height.

You can also adjust the hex codes for the colors used for the blue and orange classes if you’d like to use different tones. You can also replace them altogether by using different color codes under background-color, in which case you’ll want to rename the classes and update your HTML.

Finally, you can also play around with the color of the text within your containers as well as the text’s margins.

Tweak anything you want until you’re happy with the results and then save your changes:

Some examples of horizontal progress bars.

You just created your first two horizontal progress bars using CSS. Now, you can add as many as you want by copying the same code. Just remember to use new colors to avoid confusion!

2. Customize circular progress bars using the Zelle theme

Zelle is a powerful, multi-purpose theme that’s perfect for portfolio and business sites thanks to its many features. Among them, there’s a stylish pre-built About Us section, which includes up to four circular progress bars for you to use. See here:

zerif

To access this feature, you’ll need to return to the WordPress Customizer. Go to Appearance → Customize → About us section, and this is what you’ll see:

Zerif's About Us section.

Each progress bar corresponds to a different tab within the About us section, called Feature #1, #2, and so forth. Clicking on any of them will enable you to change their titles, description text, and color, and to determine the progress for each bar:

Tweaking Zerif's circular skill bars.

After changing all of them, you’ll have a brand new About us section featuring your own skill set. Plus, you can even change the background color for the entire section by going into the Colors tab. It’s that easy!

Conclusion

Progress bars are a very popular element in web design.

From a technical standpoint, it’s easy to add progress bars to WordPress. Plus, they provide you with a fun, visual way to show off your skills.

These are our two favorite ways to use progress bars in WordPress:

  1. Create horizontal progress bars using CSS.
  2. Customize circular progress bars using the Zelle theme.

Do you have any questions about how to add progress bars to WordPress? Ask away in the comments section below!