A Cost-Effective Progress Panel

Let’s get the disclaimer said first: I didn’t realise it until finishing this work but WordPress (basic-free) doesn’t allow you to replace media files: every new image file you upload gets a number added on the end. (e.g. image2.png, image3.png). Which isn’t very helpful, but that’s what it is. Consequently, the below method is not as painless as I was hoping.

Note if you do have a plugin-enabled WordPress you can use Overwrite Update, a free plugin (untested by me).


A progress bar is a useful thing – it shows progress towards completion. Used accurately (and regularly) it can be used to build anticipation towards something.

You’ll see I’ve added a progress panel on the right which is cost effective because it’s free. It is actually an image, and to make it as easy to update as possible it’s driven by a spreadsheet which you can use.

To add an item

progressbar-select rowsSelect the rows of an existing item, by clicking on the row-numbers on the left of the screen. (Make sure you also select the really short row afterwards as a border/buffer). Right click the mouse and select “Copy”. Select a new row and “Paste”.

To remove an item

Select the row, right-click and “Delete”.

Alternatively, and possibly better just select the rows, right-click and “Hide”. (This means they are there later if you want them).

To change the values

If you want to change the categories (i.e. Novels, Short Stories or In-Progress Blog Posts) just over type the cells (column C). If you want to change the label, or the percentage complete edit the area shaded in pinky-red-something.

progressbar-xlsYou can specify the progress (or percentage complete) in increments of 5. If you don’t supply a “Stage” for the item, nothing will be displayed in brackets next to the label.

To upload/update on WordPress

In two reasonably easy but tedious steps.

  1. Then using the Snipping Tool or another graphics program copy that section of the screen with the panel in Excel and save it as an image.
  2. Upload the file into WordPress (My Sites > Add Media).
  3. In an ideal world that would be the end of it. But because of the no-replacement-capability mentioned in the disclaimer you will have to update the image reference. Edit the details of the uploaded image, and copy the URL (select and ctrl+c).
    porgressbar-copyurlurl
  4. Update the image details by going to My Site > Customise > Widgets > Image and change the URL (ctrl+v to paste).

I hope you find it useful.

Advertisements

Got thoughts?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s