I earlier posted about how to modify the layout of the excellent xHanch My Twitter plug in for WordPress (http://xhanch.com/wp-plugin-my-twitter/). Once I had the Twitter feed for that particular project looking the way I wanted, there was one last customization I wanted to make — a new header image for it.

The xHanch plugin comes with a number of Twitter badges and other options that you can choose to put a “Follow Me on Twitter” graphic at the top of your Twitter feed. But what if you want to use something custom, maybe a badge that is styled to reflect the rest of your site’s design? Easy enough with just a couple of quick edits.

First, open up the setting.php file in the admin folder within the xHanch My Twitter plugin folder. At line 12 you’ll see:

Code block

<?php
$arr_header_style = array(
	'' => 'No Header',
	'avatar' => 'Your avatar + display name',
	'default' => 'Elegant Twitter bird + display name',
?>

This is what generates the select menu on the My Twitter configuration page where you can choose which header (if any) you want. Simply add in a new option for your custom header at the top of the list after the No Header option, like so:

Code block

<?php
$arr_header_style = array(
	'' => 'No Header',
	'new-option' => 'My Custom Header',
	'avatar' => 'Your avatar + display name',
	'default' => 'Elegant Twitter bird + display name',
?>

In the above example, My Custom Header is new item that will show up in the select menu, and new-option is the value that will get passed when you select it.

Next open up the header-style.php file in the inc folder and go to line 22 where you’ll see this:

Code block

<?php
	switch($sty_type){
		case '':
		break;
		case 'bird_with_text':
		echo '<div class="header_48"><a href="'.$twitter_url.'" '.($new_tab_link?'target="_blank"':'').'><img src="'.$img_url.'twitter-bird-'.$sty_var.'.png" class="img_left" alt="'.$username.'"/></a><a '.($new_tab_link?'target="_blank"':'').' class="header_48 text_18" href="'.$twitter_url.'">'.$name.'</a></div>';
		break;
?>

If you’re not familiar with PHP’s switch/case syntax, it’s a simplified way of doing multiple if/else statements. A key difference is that with switch/case, it will evaluate each case statement to see if it is true, and if so do whatever follows. Hence the break after each case — that way it will evaluate each case in order and when it hits one that returns true, it will execute the code then hit the break statement and exit the switch loop without evaluating any if the remaining case statements.

So, all you need to do is add in a new case for your custom graphic. Here’s an example:

Code block

<?php
switch($sty_type){
	case '':
	break;
	case 'new-option':
	echo '<div class="header_48"><a href="'.$twitter_url.'" '.($new_tab_link?'target="_blank"':'').'><img src="'.$img_url.'your-custom-twitter-header.png" class="img_left" alt="'.$username.'"/></a><a '.($new_tab_link?'target="_blank"':'').' class="header_48 text_18" href="'.$twitter_url.'">'.$name.'</a></div>';
	break;
	case 'bird_with_text':
	echo '<div class="header_48"><a href="'.$twitter_url.'" '.($new_tab_link?'target="_blank"':'').'><img src="'.$img_url.'twitter-bird-'.$sty_var.'.png" class="img_left" alt="'.$username.'"/></a><a '.($new_tab_link?'target="_blank"':'').' class="header_48 text_18" href="'.$twitter_url.'">'.$name.'</a></div>';
	break;
?>

So, when you select your new custom header from the select menu, it stores the option value “new-option” and when the plugin looks up the type of header to display, the new case you just added matches. Then it generates a link to your image which…

You simply save in the images folder in the My Twitter plugin folder. Or you can store it somewhere else in your theme and change the link in the code above if you like.

At the end, here’s what you get:

(This particular graphic comes via http://wefunction.com/2009/05/40-free-twitter-badges/ and was designed by Pasquale D’Silva — he’s provided a variety of badges with PSD files as well).