Sebastiano Bellinzis

Hi and welcome to this tutorial where I am going to show you how you can combine “static” graphical headers with widget ready themes, until now some people prefer non-widget-ready-themes because they can simply have smooth looking sidebox titles with graphical headers that pop out of the team and add great value to their website presentation. The major downside of this is that you have to edit your themes manually and therefor need to have basic/to/advanced html skills, after reading this tutorial thats all history! I’m going to show you how you can add nice graphical headers on your widget ready themes.okay, to apply these changes you don’t really have to know any programming language just make sure you stick to this guide!

Requirement

in order to make this modification work your server should :

1. run apache 4.3 or higher.
2. have the GD library installed
3. have FreeType Library installed (normally bundled with GD library.)

if you have any doubts contact your provider

Step 01

This is tho most important steps of ALL steps, this applies to all tutorials where you have to modify something: make a backup of the files you are about to change! Always.. even simple formatting errors can lead into disasters! In this case just copy-paste the whole folder of your theme to your desktop, this way you cant loose it! Ready? okay go to step 2.

Step 02

Look in your orriginal theme folder and open functions.php if this file does not exist create it. if you are running windows XP, make sure you can see the extensions for all file types, otherwise XP hides .txt after your newly created file and that is wrong.

Now look for some lines of txt that look like this:

<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
?>

this piece of code are the original lines that handles the widgets or sidebox, we are going to change to code in order to make it call another file (that we are going to create in step 3).

<?php
if ( function_exists('register_sidebars') ) {
register_sidebars(4,array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<img class="widgettitle" src="'.get_template_directory_uri().'/sideboxheader.php?txt=',
'after_title' => '"/>',
));
}
?>

As you can see there is a change in the before_title and after title. also that the image source is not just an image but an php file that will render the header with the right title. continue to step 3!

Step 03

Now that the we are done with step 1 and step 2 you can close the file functions.php and create a new file and name it sideboxheader.php open it and enter the following:

<?php
//	Variables these you can change in order to make the headers look appropriate to you!

//  The background for the header | located in the yourtheme/images folder
$header_background = "sbhead.png";
//the size of the font
$font_size = 12;
//the type of font | fonts are located in the yourtheme/font folder
$font_type = "fbsbltc.ttf";
// the color we use for the font "000000" => black , "FFFFFF" => White and anything in between is different
$font_color = "000000";
//the position from the left, default is 10
$font_left = 10;
//the position from the top, default is 30
$font_top = 30;

// dont change anything below this line

/*
If you are a theme designer and are going to apply these modification please link
back to to me in your theme description to : http://sebastiano.ezion.cc/

Requirement needed for these changes to work on your server :
*GD2 Library
*FreeType library   http://www.freetype.org/
Ask your hosting company if these changes are supported.

** NOTE **
Remember that if you change the values you have to empty all the images present in yourtheme/images/headers
*/

function ImageColorAllocateHex( $image, $hex ) {
for( $i=0; $i<3; $i++ ) {
$temp = substr($hex, 2*$i, 2);
$rgb[$i] = 16 * hexdec( substr($temp, 0, 1) ) + hexdec(substr($temp, 1, 1));
}
$rgb = ImageColorAllocate ( $image, $rgb[0], $rgb[1], $rgb[2] );
return $rgb;
}

$txt = $_GET["txt"];

if ($txt != '' || $txt != ' ') {
$txt_array = array();
$txt_array = explode(" ",$txt);

$i = 1;

$locale_file = "images/headers/";
$txt_new = "";
foreach ($txt_array as $piece){
if($i == 1){
$locale_file.= $piece;
$txt_new.= $piece;

}else{
$locale_file.= "_".$piece;
$txt_new.= "_".$piece;
}
$i++;
}
$locale_file.= ".png";
$txt_new;
// if the image does not exists, create it!
if( !file_exists($locale_file)) {
$im = imagecreatefrompng("images/".$header_background);
$px = (imagesx($im) - 6 * strlen($txt) ) /2 ;
$color = ImageColorAllocateHex( $image, $font_color );

imagettftext($im, $font_size, 0, $font_left, $font_top, $color, "font/".$font_type, $txt);
imagepng($im, $locale_file);
imagedestroy($im);
header("location:".$locale_file);
}else{
header("location:".$locale_file);

// no header is given or empty, so fill it with a blank image
}else{
header("location: images/blank.gif");
}
?>

minimalize sideboxheader.php and goto step 4 (we have to change some values in this file soon)

Step 04

All the major steps are complete .

Now you have to create a folder inside your themes folder named font.
Also you have to create a folder named headers in the yourtheme/images folder.

Step 05

Final step is to find a font that you like to use for your headers, place this font in the recently created folder font. Switch back to sideboxheader.php and look for the line $font_type = ” “; between the brackets enter the name of the font.

Step 06

All main setting are done now. it is time to test it, open your browser and point it to your wordpress installation, if you followed the steps correctly then it should work correctly. if you are not happy with the font you have to repeat step 05 and you have to delete all the images that are located in the yourtheme/images/headers folder , done that call your wordpress installation again.

Step 07

The are some values you can alter in order to change the appearance of the header, you can set the font_size, color, and position. play with it until you’re happy!

Some Resources

Here are some headers you can use for your theme:

Quick Help

Problem: I can’t see the headers!
Answer: make sure the background image does exists,and that it is in the right place.

Problem: I can see the header but there is no text.
Answer: Make sure the font-name is correct and that your server meets the requirements.

If you still have problems or need help applying these changes to your theme, leave a comment and we will work something out…

Please add this article to digg/stumble technorati ! and show me some gratitude!! ty

Tags: modification, themes, Widget, wordpress