A theme to call my own

So after all the articles about creating themes I finally got round to finishing my own. After much pulling of hair I also made it work in Internet Explorer. Really, the pain that browser puts people through is unreal. Roll on IE7.

Anyway, I’ve tried to rearrange the layout so as to make it not look like Kubrick. The front page has a full-width lead article, followed by three smaller articles, and finished off with a list of titles. A single page post uses the full-width of the page. This was all designed to give maximum space for long articles. The CSS is also print-friendly.

The comments have been filtered so all ‘real’ comments are grouped separately from pings and trackbacks. A little bit of JavaScript hides the pings until clicked open. I think having many pings on a page really puts people off from commenting, not to mention looks really ugly.

I’d really appreciate any feedback, especially with regards bugs and problems. I’ve tested it in Firefox, Internet Explorer, and Opera, so I hope this means it will carry through to Mac browsers.

Oh, and there’s a giraffe at last!

12 comments

  1. Your new theme looks really nice and it works very well. What I’d like to know: How do you count the trackbacks and “real” comments separately?

  2. Wow, John, this is really nice! All your hard work has paid off handsomely with a design that is well thought out and uniquely your own.

    Have you thought about releasing a version of this layout under (cc) to the wp community? I’ll bet you’ll start to see lots of emulation on this page structure, and you’d be more likely to get credit, I think, with an attribution license. Just a thought. – ‘course, I’d be your first customer 😉

  3. Thanks. Yep, I’m currently ironing out a few problems (I’ll won’t say what they are!) and tidying up some of the less pleasant parts of the theme. Once I’m satisfied I’ll release it for anyone to use.

    I’ll also explain some of the extra features, such as filtering the trackbacks and comments. It might be suitable for a plugin.

  4. Very nice, John. This is perhaps the best organized WP theme i’ve seen so far. I love the way the index page is laid out with the most relevant posts and older ones smaller at the bottom. In case you’re still wondering, by the way, it does come out right on Macs… I view it with Safari 2.0 and it looks great. I’m working on my own theme (using your guide) at the moment, but once I teach myself how this all works by doing that, I may end up customizing this theme instead. Keep up the good work!

  5. I have browsed through every theme I could find, and this is the best I’ve seen. I really like the layout, it is a very functional design. I’m planning to use it on my own site, at least until I get better at doing it myself.

    One problem though I’m getting this error, and being new to this, I don’t know how to fix it.

    Fatal error: Call to undefined function: giraffe_latest_comments() in /mnt/web_f/d36/s13/b024fd4b/www/wordpress/wp-content/themes/giraffe/index.php on line 20

  6. Hi Dave,

    Did you install and enable the support plugin? I probably didn’t make that very clear in the installation, so I’ve explained it better on the themes page – you need a support plugin to provide some of the extra functions that are not in the default WordPress.

  7. Dear John,
    First off – let me thank you for your book. I bought it on lulu.com and it served me well. You can see your work in action on our blog site http://www.wels.net/imprint. Actually, I don’t know what I would have done without your guidance. Thanks!

    But, nothing goes totally smooth without a few issues, not in the tech world anyways. I have a mystery to solve, and the answer is most likely between the keyboard and the chair 😉 but I could use some help.

    When visiting our site, (only in IE) if you click on the bottom “disclaimer” link or the top right “Welcome visitors” link the screen will display the post/page but suddenly a white block overlays it. This happens only on these two pages and on the “finance” category left nav link. I’ve spellchecked them, recreated them and still the error occurs. Anyone’s wisdom is welcome!
    j

  8. Hi jd,

    I had a quick look at your problem and indeed the page does disappear behind a white box. Even more strange is that if you move the mouse over certain links then the same thing happens (e.g after you refresh the screen in the disclaimer screen and then mouse over an author, it disappears)

    The problem seems to be caused by the a:hover statements. I’m not really sure why they are causing the problem, but when I deleted the hover elements on my downloaded page the problem disappeared. This is probably caused by some combination of HTML and CSS that makes IE behave badly, but Firefox is fine.

    I noticed a lot of border-left-widths and similar attributes which are not necessary in the hover elements. Also there are a lot of invalid HTML tags which you could fix. It might be a combination of all this that is causing the ‘freak out’.

    You can check the validity of your HTML easily at the W3C validation service.

    Hope that’s some help

  9. How come the rss feeds do not work. When I click on them I get “feed is not a registered protocol” Is this only happening to me. I use Firefox.

  10. The RSS feeds do work, just not in your browser. Apparently the ‘feed:’ protocol has not propagated to all browsers (although I would have expected Firefox to understand it). You can remove the ‘feed:’ part by following these instructions in the WordPress support forums.

Leave a comment

Your email address will not be published. Required fields are marked *