Premium Mod

WooThemes Modding Series Part 4: Adding the Extra Features

Posted on 30. Nov, 2009 by admin in Tutorials | 2 responses

In the final part, we are going to finish off our series by adding extra feature to our Moviestar theme. Nothing fancy, we will be adding a header banner to the theme (with zero margin, you will see), which comes with a theme options to change it.

Adding Extra Theme Options

We will call our new feature ‘Custom Banner’. And we will add the theme options under ‘General Settings’, just below ‘Custom Favicon’.

1. Go to ‘includes/theme-options.php’.

2. On line 61, just below the ‘Custom Favicon’ options array. Insert the below code:

61
62
63
64
65

$options[] = array( "name" => "Custom Banner",
					"desc" => "Upload a 980 x 400 banner",
					"id" => $shortname."_custom_banner",
					"std" => "",
					"type" => "upload");

3. The code is basically similar with the options array (’$options[]) for the previous item (’Custom Logo’ and ‘Custom Favicon’). We just changed the ‘name’, ‘desc’, and ‘id’. The existing theme framework will automatically add this item into the theme options.

*Image courtesy of Pixmac.

Adding Banner into Header

Now that we got the backend theme options working, it’s time to display the banner on the header.

1. Go to ‘header.php’.

2. Just before the #wrapper div, insert the below code:

41
42
43
44
45

	<?php if( is_home() && (get_option('woo_banner') <> "")) { ?>
	<div id="feature">
		<img src="<?php echo get_option('woo_banner'); ?>" />
	</div>
	<?php } ?>

3. The PHP code basically says if we are at the front page and the value for variable ‘woo_banner’ exists, then display the value of ‘woo_banner’ inside the HTML image tag’.

If you wish to further your learning on PHP, there is nothing better than the tutorial: PHP for Absolute Beginner.

The code also make use of WordPress Conditional Tag (is_home) to check if we are at the front page. You can learn more about WordPress Conditional Tag here.

4. Last but not least, we need to define the #feature div in our stylesheets. Insert the below CSS code into ‘custom.css’:

25
26
27
28
29

#feature {
	width: 980px;
	margin: 0 auto;
	position: relative;
}

The Final Result

Make It Your Own

Before you proceed to upload the theme and release it, don’t forget to change the theme information, which can be located in style.css.

1. This is what we put for the theme information in style.css:

1
2
3
4
5
6
7
8
9

/*  
Theme Name: Moviestar
Version: 0.0.1
Description: Turning Rockstar into Moviestar. Modded by <a href="http://premiummod.com">Premium Mod</a>. Designed by <a href="http://www.woothemes.com">WooThemes</a>.
Author: Premium Mod
Author URI: http://www.premiummod.com
Author: WooThemes
Author URI: http://www.woothemes.com
*/

2. Replace ’screenshot.php’ with your the logo or image of the theme. Here’s the result:

3. Lastly, don’t forget to change the directory from ‘Rockstar’ to ‘Moviestar’.

Success!

If you have followed us this far, you’ve succeeded in changing a ‘Rockstar’ into a ‘Moviestar’. Congratulation!