Website powered by WordPress – Website in a blog

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 https://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";}
?>

<div class="topmenu">
<a href="/home" <?php if ($menusection == "home") {echo "class=\"toplinkselected\"";} else {echo "class=\"toplink\"";} ?>>Home</a> <span class="hidden">|</span>
<a href="/baby-children" <?php if ($menusection == "kids") {echo "class=\"toplinkselected\"";} else {echo "class=\"toplink\"";} ?>>Babies & Children</a> <span class="hidden">|</span>
<a href="/gallery" <?php if ($menusection == "gallery") {echo "class=\"toplinkselected\"";} else {echo "class=\"toplink\"";} ?>>Gallery</a> <span class="hidden">|</span>
<a href="/info" <?php if ($menusection == "info") {echo "class=\"toplinkselected\"";} else {echo "class=\"toplink\"";} ?>>Information</a> <span class="hidden">|</span>
<a href="/reviews" <?php if ($menusection == "reviews") {echo "class=\"toplinkselected\"";} else {echo "class=\"toplink\"";} ?>>Reviews</a> <span class="hidden">|</span>
<a href="/blog" <?php if ($menusection == "blog") {echo "class=\"toplinkselected\"";} else {echo "class=\"toplink\"";} ?>>Blog</a>

It would be possible to move this all into a separate php file with it's own configuration file rather than hard-coding the values into here, but for simplicity I just put it straight into the header file.

The first part which is a chunk of php code just checks what the page_id is and sets the menusection to an appropriate value. These page_id numbers are hardcoded into the header.php file. The if else structure could in this case be replaced by a switch statement. I did originally want to provide additional flexibility to look at other variables to determine if we'd reached a particular post from the baby and children page, although I've not done that yet (and perhaps won't).

The second part is the menu part which selects a different class depending upon whether we are on that page or not. It may have been better to create these links as an un-ordered list <ul>, but for some reason when I first created the menu I used a string of text entries.

Here is a break-down of one of the menu entries (the rest are created in a similar way)


(1)<a href="/home"
(2)<?php if ($menusection == "home")
(3){echo "class=\"toplinkselected\"";} else
(4){echo "class=\"toplink\"";} ?>
(5)>Home</a>

(1) - This is a link to the home page (/home)
(2) - Are we on the home page?
  (3) - If so set the class to toplinkselected
  (4) - If not set the class to toplink
(5) - Complete the rest of the link with the name of the page

Then in the css file there are different entries for toplink and toplink selected. In this case toplink is blue and toplinkselected is black.

As I said it would be possible to move this into a separate file which would have been a bit cleaner and made it slightly easier to add entries, but the advantage of putting it directly into header.php is that this can be all edited within WordPress (assuming the theme directory and files have the appropriate permissions set)

Future

There are still a few more tweaks that I'd like to make. Another advantage of using wordpress that I've not exploited yet is that it now means that the entire site is now searchable. Well almost the entire site, unfortunately the generated content such as the gallery is not searchable using the wordpress search option, but just about everything else is.

I also think the template could do with a few minor changes to make it a little bit more aesthetically pleasing.

It seams that the role of a webmaster is never done. Once I finally get it 100% how I like it then it will start to feel out-dated and will need a new look, but that's the world of the web.

Summary

Using the steps above I've been able to move my entire website into WordPress. This needed a good understanding of html and css and a little bit of PHP to get it working the way that I wanted to. The result appears to be worthwhile and it should be easier to edit the site in future.