About 5 years ago Mindstorm was asked to design Head Start of Washington County, Inc’s first website. This was one of our first projects as a young company.  Just recently, we updated the site with a fresh design.  The redesign went live Wednesday, Sept. 10 2008.

Head Start of Washington County, Inc. is a private, nonprofit, agency dedicated to making a difference in the community by providing comprehensive child and family development services to low-income, at-risk populations throughout Washington County.  We are proud of our talented staff and grateful for the opportunity to help this organization.

Click on the image below to visit their new site.

If you’re like me, someone who likes to write PHP tutorials on a Saturday night, you may have wondered if there’s any way to include PHP or any server-side programming into your blog.

Sorry, you can’t just write lines of php into a WP blog and expect them to compile

Let me demonstrate by trying by trying to echo $_SERVER['PHP_SELF']

If you look at the source code, above this line you will see a failed attempt to write a line of php code into the blog. Not that simple. Now observe below:

/blog/index.php

You should see the server name above this line. What’s the secret? It’s a simple process of including a php file and adding some code into WP. Then, with a little string manipulation you can ‘include’ files in your blogs. Just follow these few simple steps

1. Write an include file.

The file should contain one function with the same name as the file which returns a string. The value of that string is what will appear in your blog.

//code in include file called /blog/index.php.php
function /blog/index.php()
{
	return $_SERVER['PHP_SELF'];
}

2. Add some code into wordpress

In the file wp-includes/post-template.php, find the function the_content(). Replace with the following function:

function the_content($more_link_text = '(more...)', $stripteaser = 0, $more_file = '')
{
	$content = get_the_content($more_link_text, $stripteaser, $more_file);
	$content = apply_filters('the_content', $content);
	$content = str_replace(']]>', ']]>', $content);

	if(strpos($content, "BEGIN*_INCLUDE") !== false)
	{
		$startindex = strpos($content, "BEGIN*_INCLUDE") + strlen("BEGIN*_INCLUDE");
		$endindex = strpos($content, "END*_INCLUDE", $startindex);
		$length = $endindex - $startindex;

		$fileName = substr($content,$startindex,$length);
                //change the path to the location of your include file
		$filePath = "wp-content/themes/mytheme/includes/". $fileName . ".php";

		if(file_exists($filePath))
		{
			include_once($filePath);
			$code = $fileName();
		}
		else
			$code = "ERROR 404: File ".$filePath." Found!";

		$content = str_replace($fileName, $code, $content);
		$content = str_replace("BEGIN*_INCLUDE", "", $content);
		$content = str_replace("END*_INCLUDE", "", $content);
	}
	echo $content;
}

3. In your blog, write BEGIN*_INCLUDEfilenameEND*_INCLUDE

‘filename’ must be the name of the include file, as well as the function within.

There’s many ways to extend this sort of functionality but this is a good start for anyone trying to hack into wordpress and insert their own code.

Scalable boxes with soft rounded edges, buttons with smooth unique fonts, varying transparency, drop shadow, gaussian blur and many more effects can be generated on the fly by utilizing the tools in the powerful PHP GD Package!

These tricks are extremely useful for web designers who want to retain the quality of photoshop compositions but have the flexibility to change titles of pages and navigation buttons

How It Works:

Advantages:

Flexibility

Use any font you want, change text any time, even based on user input. Fonts are smoothly antialiased as well.

Load Time

Rather than having 10 nav images and 10 rollover image, you simply load three small image slivers and a font one time keeping your image size minimal

Stability

Unlike the thousands of Complex CSS Hacks that attempt similar feats, everything is server side so there’s no worries about browser compatibility.

The Code:

This is the code used to generate the button.

$leftImagePath = "btn_left.png";
$midImagePath = "btn_middle.png";
$rightImagePath = "btn_right.png";

//be sure to upload your font
$font = "LithosPro-Regular.otf";

$fontSize = 12;

$leftSize = getimagesize($leftImagePath);
$midSize = getimagesize($midImagePath);
$rightSize = getimagesize($rightImagePath);

$btnTitle = (isset($_GET["text"]) ? $_GET["text"] :  “My Button”);
$btnTitle = urldecode($btnTitle);
$btnTitle = str_replace(”\\”, “”, $btnTitle);

$height = $fontSize * 2 + 1;
//calculate text width by creating a dummy image
$dummy = imagecreatetruecolor(1, 1);
$black = imagecolorallocate($dummy, 0, 0, 0);
$bbox = imagettftext($dummy, $fontSize, 0, 20, 18, $black, $font, $btnTitle);
$textWidth = ($bbox[2] - $bbox[0]);
$totalWidth = $textWidth + $leftSize[0] + $rightSize[0];

$leftImageSrc = @imagecreatefrompng($leftImagePath);
$midImageSrc = @imagecreatefrompng($midImagePath);
$rightImageSrc = @imagecreatefrompng($rightImagePath);

$button = imagecreatetruecolor($totalWidth, $leftSize[1]);

//background color
$rgb = array(255, 255, 225);
$bgc = imagecolorallocate($button, $rgb[0], $rgb[1], $rgb[2]);

imagefilledrectangle($button, 0, 0, $totalWidth, $leftSize[1], $bgc);

 //draw left cap
imagecopy($button, $leftImageSrc, 0, 0, 0, 0, $leftSize[0], $leftSize[1]);
//draw middle sliver, stretch to text width
imagecopyresized($button, $midImageSrc, $leftSize[0], 0, 0, 0, $textWidth, $leftSize[1], $midSize[0], $midSize[1]);
//draw right cap
imagecopy($button, $rightImageSrc, $leftSize[0]+$textWidth, 0, 0, 0, $rightSize[0], $rightSize[1]);

$textColor  = imagecolorallocate($button, 255, 255, 255);
$padding = $leftSize[0];
imagettftext($button, $fontSize , 0, $padding, $height, $textColor, $font, $btnTitle);

//this header makes the image get cached for 1 hour
header(’Expires: ‘ . gmdate(’D, d M Y H:i:s’, time()+60*60) . ‘ GMT’);
//this header makes the file act like an image
header(”Content-Type: image/png”);

imagepng($button);

imagedestroy($button);
imagedestroy($leftImageSrc);
imagedestroy($midImageSrc);
imagedestroy($rightImageSrc);

The Image Code:

This is the code used to call the button.

This is the beautiful part, the image tag writes the text right into the image, with no server scripting required!

< img src="../test/php/img/btn.php?text=Type whatever you want in here" / >

I’m still relatively new to this area of PHP. I’m trying to figure out how to make the image transparent. It seems easy enough, there’s plenty of functions that reference alpha, but none have seemed to work. Once I get it working I’ll append this post.

Until next time, happy coding.

We can now be found on Facebook!

Like Wesley Snipes in the movie The Fan ::vom:: you can become our fan too! Just click on the image below to be taken to our Facebook page.

We are proud to announce that we have just completed a new site!

Pop History Dig is a WordPress powered site that is a unique collection of short stories about popular culture - its history, its people, and its power (yes we stole that from PHD).

Click on the image below to see for yourself.