If you read this site purely on a feed reader, this is probably irrelevant to you, but I recently made some changes to this blog and thought I’d post about how I worked with Serendipity to achieve them, mostly involving some template hacking and using a plugin to make a particular area of the site editable through the admin interface.

The Aim of the Game

This website has, since I began it in 2001, been a blog, full of whatever came to my mind while I was drinking my coffee, and it was pink. In fact, it is less pink today than it was then, and I started with a tool called textpattern (which I hated) using textile markup (which I loved).

When I began blogging, I had just landed my first PHP job. Now I’m a freelance PHP consultant and this blog is the closest thing I have to a resume or a portfolio. I dislike and entirely fail at all things HTML/CSS so I’ve spent the last few years ignoring the problems at hand and just swearing at the fact that I had a content area that was 400px wide. Taken all together, it was time for an update.

The aims were to make the site more of a landing page, make it easier to find information about what I do and how to contact me, and to reduce the blog aspect a bit. The changes I made this time are probably just the first iteration of what needs to happen.

Serendipity Plugins

Serendipity has a number of plugins, and I use them to populate the sidebars on the site. It autogenerates the category and page listings, shows the latest comments, and has a search box. I removed the feeds widget, because it didn’t look attractive.

Instead I make good use of the HTML Nugget plugin. This drives the “of interest” block on the left, and also the twitter and rss icons on the right hand side. If you do not set a title for a widget, serendipity doesn’t show the title bar, which helped a lot with getting the formatting right. The main advantage of using plugins for these is that a) I can move them around in the side bar between the other elements and b) it is easy to edit them – I can just go into the admin system and change the HTML through there.

A Template Hack

I knew that I wanted to add a section at the top of the page above the blog content, and I got some help on changing the styles to make some space there, but I didn’t know how to add something which would be editable through the admin system. I think it is much easier to change content through the web interface than directly on the server, production server access is only for upgrades or major surgery, in my opinon.

To do this, I added another HTML Nugget plugin, and put it in the “hide” sidebar list in the config screen. This means that it doesn’t appear on my frontend, but it is available to hook into. Reading around the serendipity docs, I came across this helpful page showing how to put plugin content into the template at an arbitrary point.

I used this to add the hidden plugin into the template – annoyingly I couldn’t get the “side” parameter to play ball so I ended up referring to the plugin by it’s id – which I found by doing “select * from serendipity_plugins” and picking the id of the hidden one from the results. I then opened index.tpl and added this where I wanted the new content to show up:

{serendipity_showPlugin id="@serendipity_html_nugget_plugin:c3d643718db1704a47ed3fb8bc66adc8"}

I’m pretty happy with the outcome, I have easily-editable header section on the blog and I hope that everything is easier to find than before. Hopefully I’ll remember how it all went together for next time now I’ve written it down! If you have any thoughts on the new look or how I implemented the changes, leave a comment.