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 Responses to Giraffe Theme

  1. 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?


  2. 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 ?

  3. 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.

  4. 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!

  5. 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 ….

  6. 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…

  7. 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!

  8. 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???

  9. 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…..

Pings | | | | | | |

Leave a Reply

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