WordPress: A Story Progress Widget How-To

There have been a few inquiries about the Story Progress widget that I have displayed on my website and where to download the plugin for it. To be frank, this isn’t a plugin for WordPress, but a hand coded snippet of HTML plus CSS. I mostly did this because I couldn’t find a plugin that I liked and all the generated progress bars I found online were bloated… but I digress.

There is a plugin that I use for all my widgets that use custom code or scripts: Flickr, Twitter, and Story Progress. The plugin is called HTML Javascript Adder. This is an awesome plugin and has cut down on the number of plugins I have had to run by being able to insert my scripts and HTML into the widgets themselves.

The code I am about to share is an example. You can modify the CSS or even the HTML as you see fit.

First is the HTML snippet that I insert into the text box of the HTML Javascript Adder widget:

Obviously, the variables to change here would be the text to signify how many words completed of your goal and the percentage done. In the case of this example, the two bars are 40% and 100% respectively. You do not have to signify a percentage in your text… I only do this for myself. Nevertheless, it is important that you adjust the width by percentage for each bar, as denoted with a style attribute, or your progress bar will never grow.

Here is the CSS:

If you notice, I am using a font called PT Sans Narrow, which is a Google Font. To add this, go to your header file for your theme and add this within the <head> …</head> tags.

You can also download the header image in various colors. I’ve also included the background image I used in the zipped archive as well, but you are free to use any background that you want in place of the one that I use on my site. Here is a preview of the included ribbons (not to actual size):

ribbons

Just make sure to update the path in your HTML and CSS to reflect which file you are using when uploadng it to the server.

If you would like to change the gradient CSS for the bars, you can use this excellent online generator to do so.

Overall, I like this layout. It doesn’t bother me that I have to enter manually and adjust the percentages and text. It is a minor inconvenience in the scope of things. I am using one less plugin that may potentially slow WordPress down.

Next, I’ll be writing a How-To on customizing your Twitter Timeline Widget for your site without a plugin.

Angela

About The Author

is a blogger, writer, self-proclaimed geek & nerd, and the gyrl behind Ramblings of a Gyrl. A few cats shy of 'crazy cat lady' status and fully embraces her love of video games, films, cooking, and literature. She is currently writing her first novel for publication.

Leave a Reply