After 48 hours of sleepless, tutorial marathon, I am finally done with my first WordPress theme. It’s not so much to look at, but like I said it’s my first and I’m proud of it. Learning is quite easy, it’s how to get around the messy codes that almost made me pulled my hair-off. I say, I’m just lucky to see tons of tutorial in the web; really saved a few days of tail chasing.

When I got started, I was planning for a dark and loud colored theme with lots of images that depicts various video game characters but then a bit of mind changing and I’ve come up with a clean-minimalist look, few pastel colors + bright gradients to accent the logo and an animated Flash banner. I’m just so glad I finished it, so glad that I would like to share some pointers from what I learned.

To make the theme:

1. Create a template design then slice the necessary image using Photoshop
2. Copy and rename the folder of the Default Theme by Michael Heilemann of Binarybonsai in the themes folder.
3. Modify necessary CSS, PHP pages and images. Since I’m doing basic revision, I only edited 5 files from the default theme:

a. index.php - contains the sidebar, header and footer and the primary page of your website;
b. sidebar.php - this contains functions that shows different components/stats of your blog;
c. footer.php - located at the bottom of the page, contain links.
d. header.php - located at the top of the page. This contains the header image. You can also put the nav buttons here.
e. style.css - where you can control the design and layout of your WordPress.

Remember you must have a mid-level knowledge on how CSS and PHP works and it will also help if you read the tutorials and roam around the wordpress forum for a day or two.

Customizing WordPress header - animated Flash banner:

1. Open header.php
2. Locate and remove this code:
1. <style type="text/css" media="screen"><?php
2.  
3. // Checks to see whether it needs a sidebar or not
4. if(!$withcomments &amp;&amp; !is_single()){
5. ?>
6. #page {
7. background: url("<?php bloginfo(’stylesheet_directory’); ?> /images/kubrickbg-<?php bloginfo(‘text_direction’); ?>.jpg") repeat-y top; border: none;
8. }
9.  
10. <?php } else { // No sidebar ?>
11. #page { background: url("<?php bloginfo(’stylesheet_directory’); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
12. <?php } ?>
13. </style>

This is a part of the kubrick Default Theme that determines the location of the sidebar or if it really needs one. We’ll not use that one, so we can just discard it.

3. Now locate this code:
1. <h1><a href="<?php echo get_option(‘home’); ?>/"><?php bloginfo(‘name’); ?></a></h1><div class="description"><?php bloginfo(‘description’); ?></div>

and replace it with:

1. <?php
2.  
3. if (is_home()){
4.  
5. echo ‘
6. <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
7. codebase = "http://download.macromedia.com/pub/sh … ash/swflash.cab#version=6,0,0,0"
8. WIDTH="955" HEIGHT="200" id="homePage" ALIGN="">
9.  
10. <PARAM NAME=movie
11. VALUE =
12. "http://YOURWEBSITE.COM/wp-content/themes/YOURTHEME/flash/index.swf">
13. <PARAM NAME=quality VALUE=high>
14. <PARAM NAME=bgcolor VALUE=#FFFFFF>
15. <EMBED src = "http://YOURWEBSITE.COM/wp-content/themes/YOURTHEME/flash/index.swf"
16. quality=high bgcolor=#FFFFFF WIDTH="955" HEIGHT="200" NAME="homePage" ALIGN=""
17. TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflash … r"></EMBED>
18. </OBJECT>’;
19. }
20. ?>

In this code I named my swf file “index.swf” and placed it on the themes folder under “YOURTHEME/flash/index.swf”. Now this displays the Flash header on the index page only. If you want to show it on all pages, just remove this code:

1. if (is_home()){}

And that’s it. You now have an animated Flash banner as a header for your WordPress.

Tags: customized, Flash, header, theme, WordPress

This entry was posted on Monday, March 24th, 2008 at 1:34 pm and is filed under WordPress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.