Creating a Simple Progress-bar

As you can see, in the homepage, I added a small bar which shows the current progress of my projects, I though of coding a plug-in and make it available to everyone but using a PHP function is much more simple !
Maybe, when I no longer have projects which need my attention, I might waste sometime coding the plug-in version.

In this tutorial I’ll guide you through the simple process that is to create a progress-bar, using PHP combined with HTML (and some CSS).

For WordPress Users

1. Download the necessary plug-in

First of all you need a plug-in which allows to use PHP code on a widget, the best is the one shown below:

Name: PHP Widget
Download: http://wordpress.org/extend/plugins/php-code-widget/

2. The CSS

Follow the steps in the image:

(In step two you must scroll-down a little to find the “Styles” group.)

After click the “Stylesheet (style.css)” link, you should see a big white box, just add at the bottom of it the following code:

/* warps the whole progress-bar */
.progress_contain_phpBar{
	background-color: #dbd4ba;
	padding: 5px;
	padding-bottom: 2px;
	padding-top: 2px;
}
/* it's the progress-bar background */
.progress_back_phpBar{
	background-color:#9a8e76;
	border:thin #999;
	height:15px;
	padding:0px;
	margin-bottom:10px;
}
/* here it is our poor bar */
.progress_phpBar{
	position:inherit;
	background-color:#534d3e;
	height:100%;
	margin:0px;
}

Save it.

3. The PHP

Now that we finally added our CSS code we can finally add the code which will make the machine work:

Copy the code below into a new TEXT file and save it as “progbar.php”

function CreateBar($total, $done, $width, $project) {
/* Calculates the progress, La Place Probability Theory */
$progress = ($done / $total) * $width;
/* Let's do a nice lookin title */
$title = '<strong>' . $project . '</strong> progress: <strong>' . (($done / $total) * 100) . '%</strong>';
$html .= ' <div>';
/* Outputs the title */
$html .= $title;
/* Forces the bar to use the given width value */
 $html .= ' <div>';
$html .= ' <div>';
$html .= '</div> </div> </div> ';
echo $html;
}

$total -> Max Progress
$done -> Progress so far
$width -> Progress-bar width (insert only integer values, no ‘px’ or ‘%’, etc)
$project -> Name of the project which will appear in the title

After creating the file, access your website FTP, create a new directory in the main folder called “extras” and then put the “progbar.php” inside it.

Now go to your WordPress administration panel and where it says “Widgets” on the “Appearance” tab, click it and you should see a widget called “PHP code”

Drag this widget to the bars on the right and then enter the following info:

CreateBar( Total Progress, Done so far, Progress-bar Width, Project Name)

Hit save and voila! It’s done!

Bookmark It

Hide Sites