Make Your Own Custom Writing Progress Meter

Make Your Own Progress Meterv1A lot of readers come to author websites — especially to those authors writing a series they like — to get a snap shot of writing progress.

Seriously, I think those trying to get a status update probably make up 90% of George R. R. Martin’s site traffic.

ThirdScribe author sites have a progress meter widget built in, and many use it. However, not everyone is on ThirdScribe and, sometimes even those who are may want to make something a little more special out of the writing progress meter.

This post teaches you how to make a nice one that you can place anywhere in your site.

Ready? Let’s get started.

First: Use the Text Editor

This tutorial requires you to enter some HTML and CSS code. Not a lot, and we have snippets, but to do so you’ll need to enter it into the text editor of wherever you want to put the progress meter. If you are in a WordPress page or post, that means you need to toggle the “Text” editor option, like so:
text editor

Second: Copy Past this Code

This code snippet will place the actual progress meter. Just copy/paste it directly from here to wherever you want it to show. To adjust the meter, you change the percentage value (set here at width: 25%). This particular snippet shows the progress for two books. Only want one? Delete the extra. Want more? Then copy a few more. Totally up to you.


Third: Style the Meter

The code snippet above to place the meter will just load a placeholder for a meter, so it won’t look like much. It won’t even look like a meter. As a matter of fact, it will just look like this:

Writing Progress

Book Title

Not that impressive, huh?

Well, we want impressive, so we’re going to add a bunch of styling via CSS to make it look awesome. That CSS is included in this code snippet:

This code will style the meter and provides for three colors — the default color (green), orange, and red. Again, if you want to change those colors, or add colors, just alter that section of code. Remember to change both the name of the color (orange) and the HTML color code for the color (#f1a165).

Where do you paste this CSS styling? That depends. If you have access to your site theme’s style sheet, that is a great place to put it. If not, a plugin like Simple Custom CSS is a great option. You can also insert it directly inline to that page or post if you know exactly where you want to put it.

Fourth: Step Back in Awe!

Once the CSS has been added to your site, this is what the meters will look like:

Writing Progress

Book Title (Default Color 25%)

Second Book Title (Orange 50%)

Second Book Title (Red 75%)

You can now place this code anywhere you want a progress meter to show — page, post, or widget.

Armed with this, don’t be like George R. R. Martin — let your readers know how your progress is going.

About Rob McClellan

Rob is the founder of ThirdScribe, a unique author services platform and social network. As a naval officer and diver, he spent a majority of his career doing a lot more than you would think with a lot less than you can imagine — a skill that has proven extremely valuable in the start-up world. You can follow him on Facebook, Twitter or Google+.

2 Responses to Make Your Own Custom Writing Progress Meter

  1. I’m confused. Is there a place in the first text box where we copy in the second example? How much of the second example do we copy in? It looks like it is includes orange and red, but I only want to do it for one book. Sorry, totally confused.

  2. Profile Cover Art


    The two code snippets are for different functions — the first is to place the meter, and it goes in your page or post. The actual meter is the line that starts with < div class="meter"... That is the meter, and if you only want to place one meter, just place one of those lines in the page or post via the text editor. The color of the meter is the span color in that line -- < span class="orange"... for example If you don't specify a color, it will be green. Other options are orange or red. You can change or add to those in the CSS (the 2nd, styling part snippet above) as you wish by adjusting the HTML color hex code. The second snippet -- the styling snippet -- needs to be placed in your theme's stylesheet or injected in another way (plugin, inline, etc). As your site is a TS site, it has an area under Appearance in your dashboard where you can insert custom CSS: Appearance->Custom CSS. And, since you are a TS author, we’ve already taken care of that for you.

    Hope that helps.

Leave a reply

Your email address will not be published. Required fields are marked *