Theme Hacking – Part 1

newThemeTE As you can see by the screenshot (and site itself) I’ve found a theme! And after only 2 days of searching! I actually found this theme early in my hunt but I wasn’t about to deny myself 48 hours of agonizing searching anyway. :)

Why I chose this theme…

  • Clean look. (Who wants a dirty blog?)
  • Supports Widgets.
  • Valid CSS and XHTML. (A must!)
  • Table-less design. (Also a must!)
  • Right Sidebar.

The Right Sidebar was a primary criteria in my search. Likely no real advantage to it but I like the idea of rendering content before anything else. I suspect Search Engines prefer it too.

But with all themes there are some things I wanted changed. So, with my trusty code editor on standby I started hacking.

First up was the XHTML validation. The theme dictated XHTML1.1. Unfortunately, this presents a problem for me. I use Windows Live Writer to compose my posts and I always use images. For some reason WLW will break strict XHTML (and in this case XHTML1.1) validation. It has something to do with image parameters but I won’t go into that in any detail here.

Changing this was simple.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The above line appears at the top of index.php. A simple change to XHTML Transitional will solve my problem.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Now I can use WLW to my heart’s content without fear of breaking validation.

Next on my to-do list was to include author information to the post header info.

Theme Hack 1

Previously this theme only included date and comment links. It may just be my sick need to see my name in lights, but I’m thinking ‘recognition’ is a big key in blogging. Be it a picture or a name you want something to stick in peoples minds. The more people see it, them more likely they’ll remember it later.

By changing this line…

<span class="date"><?php the_time(__(‘F jS, Y’, ‘inove’)) ?></span>

 

… to …

<span class="date"><?php the_time(__(‘F jS, Y’, ‘inove’)); echo ‘. Posted By <a title="author" href="’; the_author_url(); echo ‘">’; the_author(); echo ‘</a>’; ?></span>

I was able to easily insert the author info.

With my name in lights I pushed on. Time to insert my FeedBurner Chicklet.

themeHack2

The RSS feed link was hard coded into the theme so back to our trusty editor. I needed a new CSS style for this. I created the following element in style.css:

#burner {
float:right; /* make the box look full */
padding: 5px; /* so chicklet image would line up with RSS image
}

Then in sidebar.php i added this line…

<div id="burner"><a href="http://feeds.feedburner.com/TornElements"><img src="http://feeds.feedburner.com/~fc/TornElements?bg=E1E1E1&amp;fg=000000&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></div>

… just after the RSS code but within the same display element. Tucked in nicely. :)

Pretty basic stuff here. I hope I’m not boring too many people. Hopefully it’ll help out some of the newer people entering into blogging.

  • Pingback: Torn Elements » Theme Hacking – Part 2

  • http://www.drumsnwhistles.com/ Karoli

    Thank you for writing this blog. It's really helpful to me. I am working on a multi-author blog right now and want the author's gravatar image to appear next to the title of the post. For some reason I'm having the hardest time makign that happen…any suggestions?

  • http://www.drumsnwhistles.com/ Karoli

    Thank you for writing this blog. It's really helpful to me. I am working on a multi-author blog right now and want the author's gravatar image to appear next to the title of the post. For some reason I'm having the hardest time making that happen…any suggestions?