Website powered by Wordpress - Website in a blog

6 December 2009

I've now converted my WatkissOnline website to be completely generated from Wordpress. It is still running on the same hosted Linux web server.

Most visitors will probably not notice any change, or if they do they are more likely to see that the menu has been shrunk and the entries changed which is a separate change I made at the same time. The general theme of the site is still pretty much the same as it was before.

Wordpress describes itself as a state-of-the-art publishing platform, but most will know Wordpress as the popular blog tool used to power a significant chunk of the blogs on the Internet. Wordpress is capable of being used as a CMS (Content Management System).

Driving force behind the change

My site has evolved from a static html based website to being all in Wordpress. The driving force is to make it easier and more consistant to maintain the site. So now I just need to go to one tool (the Wordpress Dashboard) whenever I want to make any changes to the site. I've also taken this as an opportunity to simplify the number of pages to make it easier to maintain.

Initially the majority of pages on the site were static html. I then used a little php to generate the headers and make it a little easier to maintain, but then bolted the wordpress blog onto the end. It may have looked like the blog was integrated into the rest of the site, as they had the same feel and menu structure spanning both (and I'd also embedded the most recent blog into my homepage), but they were maintained separately which added overhead to any changes. What I have done is move all my static pages into Wordpress pages and then created the menu accordingly.

A further advantage to using Wordpress is that others can be set-up to edit the pages, and if required this can be done using a WYSIWYG (user friendly) editor, although that is not something I'm planning for this site.

Wordpress also tracks changes as a form of version control.

There are some disadvantages. One of these is that if an error is made in one of the theme files then it can break the entire site. I've managed to do this a few times whilst moving the site into wordpress. This is something I can avoid when hand editing as I usually create a temporary file to test with first before making the changes on the live pages, whereas to do this on wordpress would mean running a separate server or at the very least a separate setup of wodpress on the same server.

The advantages that wordpress offers more than out-way the disadvantages.

Customising the Wordpress Theme

I'd already heavily customised the Wordpress theme to integrate it into the site. I'd taken an existing theme and copied it into my own theme. I'd then made some changes such as the header image and website name. I'd also added a top menu across the top of the page.

Another of the changes I made was to remove the side menu from the pages (although kept it in the blog posts and the category pages etc.). This made the pages look cleaner, but kept the menu when navigating the blog.

Later I changed the top menu to use the new wordpress files, but I'm getting ahead of myself as I need to explain some other changes first.

Moving static html to Wordpress

The first step was to move all the static text into Wordpress. So I just created a new page for each page of the site and copied in the html (I use html edit mode rather than the wysiwyg editor which made that quite easy).

I wanted to keep some php within my pages which is not normally allowed in Wordpress. I had already enabled the Exec-PHP worpress plug-in which overcame this limitation.
Note: There are security implications to enabling this plug-in mainly related to the ability for editors to insert malicious code. As I'm the only editor and I trust myself then that is not a problem. If looking to enable Exec-PHP on a shared site then you should read the security information before enabling the plug-in.

With the php code sorted, the only other issue I had was with the gallery pages, which are powered by my own penguingallery code. I'd written the gallery pages in php in a manner so that it could be inserted easily into php files on a web server. To integrate this into wordpress needed some changes in the way that the code worked especially as I wanted to have a single page for all the galleries rather than having to create a new page for each gallery. I therefore redesigned some parts of that code.

This has delayed the release of the code as OpenSource, but I do still hope to make it available later this year.

Giving the links user friendly names

When I'd created the pages in wordpress they'd been given non user-friendly names. For example the home page is located at http://watkissonline.co.uk/?page_id=2434, but I wanted it to have a more user friendly name of http://www.watkissonline.co.uk/home. Wordpress does have some support for mapping to user-friendly links, but I chose to use .htaccess with the mod_rewrite module.

I've already created a tutorial on mod_rewite in apache .htaccess files which is a good starting point.

#.htaccess Rewrite rules
RewriteRule ^home$ /wordpress/?page_id=2434 [L]
RewriteRule ^info$ /wordpress/?page_id=2416 [L]
RewriteRule ^baby-children$ /wordpress/?page_id=272 [L]
RewriteRule ^reviews$ /wordpress/?cat=4 [L]
RewriteRule ^legal /wordpress/?page_id=2495 [L]

Note this is just a subset of the rules I created - I've skipped the gallery page as that is more complicated and will go into the penguingallery documentation when complete.

These map the short name to the wordpress page. The actual wordpress url is hidden from the user. Note that review is different. I intend to create a dedicated page for that in future, but that's not ready, so for now I've just mapped it to the wordpress category called reviews (category number 4).

Adding a menu to the pages

I'd already created a static menu by editing the themes, but I needed to change it to the new page urls. I also wanted to set it so that the colour of the links changed if we were on that page or not. The following is the resulting code used in the header.php file (changed using the theme editor).

<?php // Determine which section we are in
// blog is default section
$menusection = "blog";
$pageid = $_GET[page_id];
// If we don't have a pageid then it's probably a post rather than a page - so we class it as a blog
if ($pageid == "") {$menusection = "blog";}
else if ($pageid == "2434") {$menusection = "home";}
else if ($pageid == "2428") {$menusection = "home";}
else if ($pageid == "2416") {$menusection = "info";}
else if ($pageid == "272") {$menusection = "kids";}
else if ($pageid == "2457") {$menusection = "gallery";}
?>