Wordpress so far. I …">

Customizing Wordpress: Failing SK2 Captchas and a Clickable Logo

Well, I must say I’m quite pleased with Wordpress so far.

I did some customizations, and ran into some minor problems:

Spam Karma

I didn’t want to enable comments and pingbacks before I had some good spam protection. I have that now: Jeroen pointed me to Spam Karma 2. Although the installation and configuration were easy enough, I ran into one snag: it did not display captcha images correctly.

Using the old ‘telnet localhost 80’ trick, followed by ‘GET /wordpress/wp-content/plugins/SK2/sk2_captcha_graphic.php’, I discovered that the PHP script was generating the following error: ‘Call to undefined function: imagecreate()’. This turned out to be caused by the fact that my server (Ubuntu 6.06 LTS) did not have the PHP bindings for the GD2 library installed. A simple ‘apt-get install php5-gd’ solved the problem.

I added a note about this on the SK2 FAQ Wiki page (link broken because of spam problem) which, rather ironically, seems to be plagued by spam (it’s sneakily hidden using some CSS tricks, so that people won’t see it but the links still contribute to the spammer’s PageRank). I took the liberty of removing the spam a couple of hours ago, but it has been added again already.

Clickable logo

And speaking of CSS tricks.. I used The Gimp to create a nice custom logo for my blog. OK, so it’s not particularly creative: I used the fractal renderer plugin to create a background, and then pasted the text on top of it using a couple of the standard “alpha to logo” plugins. The result is not too different from hundreds of other blogs out there, but at least it’s a change from the standard Wordpress default theme.

However, now that the text is part of the image instead of HTML-ed on top of it by Wordpress, it was no longer possible to get back to the main page by clicking on the logo! At first, I thought I could live with that, but it rapidly annoyed me more and more. And because the logo is technically a background image rather than an ordinary img element, putting a link on it was not completely trivial.

Fortunately, I found a nice CSS trick to make the logo clickable again, by setting the size and position of the invisible element so that they overlap the image exactly. This required some minor changes to my stylesheet file and to the header.php file of the Wordpress theme.

The relevant part of my header.php file now looks like this:

<div id=“header”>
  <a xhref=“<?php echo get_settings(‘home’); ?/”>
    <div id=“headerimg”>
      <p>
        <h1><?php bloginfo(‘name’); ?></h1>
        <div class=“description”></div>
      </p>
    </div>
  </a>
</div> 

And here’s the relevant part of my style.css file:

#header {
  background: #73a0c5
  url('images/kubrickheader.jpg')
  no-repeat bottom center;
  position: relative;
}

#header a {
  position: absolute;
  margin: 7px 9px 0;
  height: 192px;
  width: 740px;
}

#headerimg      {
  margin: 7px 9px 0;
  height: 192px;
  width: 740px;
}

#headerimg p {
  display: none;
}