Giraffe Theme


Supports: WordPress 1.5

This is a fluid-width theme that attempts to split the front page of a blog into three sections:

  • Lead posts. The latest posts, with full-width and a large font
  • Recent posts. Slightly older, with shorter width, smaller font
  • Older posts. Everything else, displaying just the titles



The theme is fully localized. This means it can be translated into other languages without having to modify and hack the theme to bits. The list of available translations is:

To install a translation, download the .MO file and upload it to the theme directory. You should ensure that the setting of the WPLANG value in the wp-config.php file matches the translation.

The theme contains a .PO so anyone can translate the words using a tool such as poEdit. I would greatly appreciate if any translations could be sent to me so that I can include them here for everyone else.

Support Plugin

adminThe theme has a support plugin that provides an administration interface and the capability to configure the theme:

  • Change colour scheme
  • Change font and font size
  • Change whether to have a full-width lead post, or more traditional two-column layout
  • Change page dimensions
  • Configure number of lead posts, recent posts, random posts, and latest comments
  • Switch logo on or off
  • Compress CSS by reducing unnecessary comments, spaces, and returns. Shrinks the file by about 2K – not a lot, but every little helps.

This plugin is optional and the theme will work without it, although obviously you miss out on any configuration. Note that if you want Gravatars displayed then you will need to install the separate Gravatar plugin.


Installation of the theme is just like any other theme:

  1. Download
  2. Unzip
  3. Upload the ‘giraffe’ directory to your /wp-content/themes/ directory
  4. Enable the theme from the administration screen

You must make the theme directory and the files style.css, index.php, single.php, and page.php writeable. If you do not, you will receive an error in the admin interface when updating any details.

Installation of the plugin is also just like any other plugin:

  1. Download
  2. Unzip
  3. Upload the ‘giraffe’ directory to your /wp-content/plugins/ directory
  4. Enable the plguin from the administration screen

Please delete any pre-1.3 Giraffe plugin.

You can change the logo by either disabling it from the administration plugin, or by uploading a new image called ‘logo.png’ or ‘logo.gif’ to the theme directory. The theme will serve a PNG to all non-IE browsers, and a GIF to IE. You can use fancy alpha-blending with the PNG, yet still keep a decent image for IE users.

Modifying the top navigation menu

By default the Giraffe theme will display a list of WordPress pages in the top navigation menu (the bar just below the logo). This means that to modify entries in this menu all you need to do is to change your WordPress pages.

If you want to customize the list further, or you want to create your own list, then you can do so by editing giraffe_functions.php in the theme directory and adding a function:

function giraffe_top_menu () {
... your code

The function should output the menu as a series of HTML list elements <li>…</li>. For example, if you want to directly enter the menu:

function giraffe_top_menu () { ?>
<li><a href="">First choice</a></li>
<li><a href="">Second choice</a></li>

Other details

To get Gravatars working you will need to download and install the WordPress Gravatar plugin.

The number of ‘older posts’ is determined by the WordPress configuration option ‘Options/Reading/Blog/Show at most’ and the Giraffe options ‘Number of lead posts’ and ‘Number of recent posts’. If you have WordPress configured to display 10 posts, and the Giraffe theme configured to display 1 lead and 3 recent posts, then the number of older posts will be 6.

145 thoughts on “Giraffe Theme”

  1. […] I ran across the UrbanGiraffe created by John Godley.  He was explaining a bit how to do that type of thing on there somewhere.  Since it would take me forever to edit a theme to my liking on my own, I decided to take the easy way out.  I downloaded his Giraffe theme, along with the corresponding plugin.  Seems to work fairly well (after I got the permissions set right – thought I had the ftp client chmod multiple files at once but it only did one of them).  And the plugin lets you do a bunch of stuff without editing the files manually – like changing the width of the pages or a few of the colors of the theme. […]

  2. Hello, I am new to wordpress themes but think I’m pretty proficient at editing them and figuring out what to do. I very much enjoy your theme and your tutorials. However, I am having difficulty with the giraffe plugin. I have unzipped it and copied it to my plug-in folder via an ftp program. For some reason, the plug-in does not show up as an option on my plug-in page in the admin area. Do you have any idea what I could be doing wrong?

  3. Hi Candace, did you upload the plugin as a directory? Inside your /wp-content/plugins directory there should be a ‘giraffe’ directory, inside which are all the plugin files.

  4. No matter… I got it OK now…It was just a matter of permissions 🙂 I edited the permissions to un-readable =_= Sorry for the inconveniece 🙂

  5. Hey, a suggestion for your next version : When the options are edited using the plugin, all files are overwritten, and all things that I configured(eg. : ads on the post page, custom cursor via css) etc. were lost.
    So, if theres some mechanism to edit the current files, without overwriting, it would be cool. One way to do it would be to just take the source from the file itself.

  6. Awesome, awesome, awesome.

    Can’t get the RANDOM feature to work.I get no error messages or anything it’s just me images in the logo folder don’t show up at all.




  7. Liste deutschsprachiger WordPress Themes

    In diesem Beitrag findest du eine Liste deutschsprachiger WordPress Themes. Die Liste wird kontinuierlich aktualisiert. Sofern nicht ausdrücklich gekennzeichnet funktionieren die Themes mit WordPress 1.5+ und 2.0+
    Letzte Aktualisierung: 12. Feb. 2…

  8. Probably best to leave the random feature for the moment. It was a nice idea that turned out to cause a lot of problems. Maybe in the next version!

  9. i realize that there must be a simple fix for this, but i can’t seem to figure it out…

    i’d like to remove my links from my sidebar, but keep them visible on my links page that i’ve created using a plugin on a static page. i can’t figure out how to cut them out of the sidebar. there doesn’t seem to be a “get links” function in sidebar.php, so i’m not sure what i need to remove to stop them from showing up there.

    any help would be much appreciated!

  10. The links are in this bit of code:

    <?php if ( is_home()) { ?>
    <?php get_links_list(); ?>
    <li><h2><?php _ge(‘User’)?></h2>
    <?php wp_register(); ?>
    <li><?php wp_loginout(); ?></li>
    <?php wp_meta(); ?>
    <?php } ?>

    Delete that line and they will disappear.

  11. Hey All,

    How do I get the author of the post to show up? I realize there are various bits of code for this but I am unsure which one to use and importantly where in my theme/giraffe/index.php to put it?



    PS: I have tried several times unsuccesfully….should have paid more attention in class.

  12. I have put the code in various places but no matter what I do my formatting gets messed up. Additionaly if I update anything on the options page anything I have done manually disapears. The format being messed up isn’t the end of the world so I have left it as is for now. Feel free to check it out.



  13. […] I’ve said it before and I’ll say it again there is no better WordPress theme on the web. Further to that the author John is a genious and deserves all of the credit for making this blog possible. Those of you who started this journey when we were on Blogspot understand what we mean. This is at least the third rendition we’ve had and the only one I’ve been happy with to date. If you have any interest in themes of blogs check these out Johns page here.   […]

  14. Hi John,

    two questions:
    (1) Additional CSS
    I’m using additional CSS to format parts of my pages. Everytime I update the options using your giraffe management plugin, the CSS changes in style.css are lost.
    I’m quite new and unexperienced in css, so do you have a quick-tip how to keep my own css?

    (2) Language Switch
    This does not seem to work in my staging environment (WAMP 1.6.1, I’m using it based on your great tutorial! Thanx & kudos for that!!).
    Am I right that the user is supposed to switch the theme’s (and thus the blog’s) language by one click? I don’t care about the post/page content, as I will write in English and German, but changing the UI would be great!!

    The second issue is more important to me, I can live with the current css management as I won’t update giraffe too often in production.

    Either way, my two (maybe three) websites will sing out loud the “urbangiraffe is great” message! :-)))

    Many thanx for your help!!
    With kind regards,

  15. […] Das nächste, was ich vor der Überarbeitung von “Slatystain” unbedingt angehen will, ist die Internationalisierungs-Funktionen von WordPress. Nun, wie fängt man an? OK, einen Editor für die .po .mo und .pot Dateien runterladen und los gehts. Die nötigen WP-Template Tags, also _e(“schreib mich in deiner Sprache”); und __(“gib mich an php zurück”); sind schonmal die Vorraussetzung, dass WordPress überhaupt einmal einen zu übersetzenden Text findet und im WordPress-Codex genauer beschrieben. Aber darauf, dass ich bei der Erklärung zur load_plugin_textdomain(‘myplugin’); bzw der zugehörigen load_theme_textdomain(‘myplugin’); Funktion Durchblick bekam (zehnmal Lesen, sowie intensives bis aggressives Starren brachten mich nicht weiter) konnte ich dann doch nicht warten und hab mir kurzer Hand an das Referenz-Theme in Sachen Übersetzung und Flexibilität “Giraffe” rangewagt. Und siehe da: Es ist alles noch viel komplizierter als ich dachte…, was aber auch daran liegen könnte, dass dieses Theme einfach vielzu raffiniert geschrieben wurde und zudem auch noch mit einem kleinem Plugin versehen wurde mit dem man es im Admin-Bereich anpassen kann. Wie es aussieht steht da noch einiges an “Draufstarren” auf dem Programm… … aber immerhin verstehe ich nun schonmal die Funktionsweise und so sind schoneinmal zwei Übersetzungen entstanden: zum Einen eine deutsche Sprachdatei für das Giraffe-Theme. Download auf der Giraffe Theme-Seite von John Godley. […]

  16. Hi Volker, thanks for the message! You can put your CSS in ‘extra.css’. This is not touched when you update the options.

    As for the language switch, I might not have made this clear at all, but you need to modify wp-config.php – this is explained in another post.

  17. I love this them, but I too cannot make the external link icon go way via the admin menu. Can you point me to where that function is or is there a way to make the admin work? WP 2.02, everything else works great.

    Oh, when I make any changes via the theme admin, it resets the Stylesheet back to Giraffe defaults. I would love to play with this more, but everytime I do anything I have to manually edit the Stylesheet again. Any ideas on that?


  18. Hi, I found this theme and it look great and is just what I need. There is one thing I would like to add: a black color schema (something like My question: is there an easy way to add another colour scheme ? If I try to create that, would you add it to the theme ?

  19. TourPro: If you are modifying the core styles then there is no way to stop the stylesheet being overwritten. The only thing you can do is make your changes in the administration section first, and then your changes after. However, if you want to add your own CSS then you can put it in extra.css and it won’t be touched at all.

    If you do want to hard-delete the external link icons then you can modify style.css and delete the lines that start ‘.entry p a[href ^=”http://’ (but remember to do this after making your admin changes!)

    Matthijs: It is possible to add colour scheme’s, although not in a very nice way just yet. If you edit giraffe.php in the plugin directory you will find a section of code that looks like this:

    $colours = array
    “blue” => array (
    ‘$pageborder’ => ‘#5b5a61’,
    ‘$lightbar’ => ‘#b8d2da’,
    ‘$midbar’ => ‘#aac8d0’,
    ‘$darkbar’ => ‘#8db8c3’,
    ‘$fontcolour’ => ‘#2f3b4f’,
    ‘$subfontcolour’ => ‘#6c64a8’,
    ‘$brightlink’ => ‘red’,
    ‘$link’ => ‘#13076b’,
    ‘$quote’ => ‘#f0f0f0’,
    ‘$sidebarback’ => ‘#dbe6e9’,
    ‘$pagenav’ => ‘#5a7095’,

    It should be pretty straightforward to copy and paste one of these and change the values for a black scheme. If you send me the colours I can then add them into the main theme for other people to use.

  20. Excellent, I’m only slightly intelligent when it comes to this stuff. I use the ‘trial and error’ method of programming. I’ve deleted the appropriate lines and the result is what I needed. Thanks!

  21. John, thanks for your reply. I tried, but changes the colors in the array doesn’t make it possible to change e.g. the background color. It looks like these are fixed images ….

  22. I’ve been using the Giraffe theme, and noticed that it suffers from the the IE “Peekaboo” css bug.

    I remedied this in my blog by using the “Holly Hack” to tell IE to set the .entry class height to 1%. IE conveniently ignores height, and other browsers don’t see the Holly hack, so this is a safe fix.

    /* Hides from IE5-mac \*/
    * html .entry{height: 1%;}
    /* End hide from IE5-mac */

    If you encounter disappearing text elsewhere, apply this hack to the appropriate container that has a float in it…

  23. I’m releasing a new version very soon, which will include WordPress widgets, offer an easy way to add colours, and will include the ‘Holly Hack’. Thanks for the suggestions!

  24. hi, this is a very nice template…. i would like to test it, but but after the update
    the browser show me this error
    ” Fatal error: Call to undefined function: get_header() in D:\Inetpub\webs\nextlyorg\giraffe\giraffe\index.php on line 1 ”

    how can solve this problem???

  25. I love the giraffe popping up with and blinking his eyebrow. I am a single man and send it to ladys saying that it is me when i first saw their picture, but i’m now having trouble copying it and it won’t send in yahoo emails or IM. How do i fix that to make sure it goes out and is delivered ?

    Thanks a bunch for this guy, he’s made me a big hit with the girls…..

Leave a Reply

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