Blog / Random thoughts and musings.

My WordPress install

I promised a couple people I’d write up some of the technical details of the recent migration of www.mfischer.com to WordPress. This could take a while…

Background

My blog was hosted on Google’s Blogger.com, but the features and flexibility they offered were pretty limited. I also had lots of older “static” pages and our photo gallery running off my basement Linux server, unfortunately only available on port 8080 since Verizon’s FiOS doesn’t allow customers to run web servers on the standard port (80). My goal was to bring both these sites together, make them more dynamic, and hopefully easier to manage as well. WordPress features both a blog (called “posts”) and the ability to add static content (called “pages”), which seemed like it would suit me just fine.

The wordpress install

The actual wordpress install was extremely easy, assuming you have a little bit of Linux experience and know how to create a MySQL database. I was running version 2.2.2 during the initial install, and upgraded to 2.3 just recently when it was released.

Themes

There are thousands of different themes available, mostly at the official wordpress theme viewer site, but there are also many other places to look. I knew that I would want to customize whatever theme I ended up choosing, so I was looking for one that had the basic features I wanted and was easy to understand. My main requirement was a three-column theme with both sidebar columns on the right — most three-column themes seem to have one sidebar on each side and the content in the middle. I wanted three columns due to the relatively high amount of “extras” I wanted in the sidebars. I planned to have the most important information (the blog entries) on the far left, semi-important information (such as navigation) in the first sidebar, and “optional” information (XBox games, etc.) on the far right. This way, visitors with smaller monitors or browser windows — that might not fit the entire page width — wouldn’t risk missing out on important information. The theme I chose is titled Cleaker.

The biggest changes I made to the theme were:

1. The plain banner across the top I replaced with a dynamically changing collection of banners created from photos of our recent Mediterranean vacation. The animation is done by the free JW Image Rotator flash application. Set-up was pretty straightforward: install the flash app anywhere in the web site, add a few lines to the wordpress theme’s header.php file so that the flash app is loaded instead of the old banner, upload my banner images, and create an XML file listing the URLs of the images (the image rotator site links to a simple PHP script which does this automatically).
2. I added a double-wide box above the two sidebars where I could put a photo and very brief synopsis of the web site. This was done by creating a new sidebarDouble.php theme file with the code for the content box, and calling that file from each of the theme template files (page.php, index.php, archive.php, etc.)
3. Since the “search” form used to live in the banner area, which was now replaced with the flash image rotator, I put a search form in the navigation menu and moved the navigation menu from the right to the left (changing header.php and style.css).

That’s all the significant changes to the theme, apart from some color and spacing changes done in the style sheet.

Migration

Migration from Blogger wasn’t as easy as I’d hoped. Blogger offers an “export to XML” feature which I used, and WordPress has a Blogger import feature, but it wasn’t working for me. Some searching on Google confirmed this wasn’t my fault, and pointed out that WordPress’s blog hosting service at wordpress.com had a working Blogger import function. The solution was to create a new blogging account at wordpress.com, import from Blogger, then export as a WordPress archive, then import that into my self-hosted wordpress install. Clunky, but it worked.

This got me the main content (including comments) but not images. I found a wordpress plug-in that would import images from a Blogger blog, but it only worked partially, and I ended up having to do some scripting to correct the shortcomings of that plug-in.

As for importing the static pages from my basement, there were only a couple dozen so I settled on an afternoon of copying and pasting.

Sidebar widgets

WordPress makes it very easy to add content to the sidebars by installing “widget” plug-ins and dragging them to the desired sidebar location. Some basic widgets are included, to show a block of text, a list of links, etc.

In my left sidebar I have:

1. A “category cloud” widget showing all the categories I’ve posted blog entries in (vacation, for example) where the size of the word indicates how many posts are in that category. Clicking will list all posts in that category.
2. A “recent comments” widget showing the last five comments visitors have left on the blog.
3. A text widget providing links to some of my friends’ blogs.
4. A second text widget listing some of the major static pages on the site.
5. A third text widget with links to allow visitors to subscribe to blog updates via e-mail or RSS feed.

The right sidebar has:

1. A PHP widget that allows execution of any PHP code. In this case the code just calls one of the plugins I have installed — StatusPress — which displays my most recent FaceBook status.
2. An RSS feed widget that shows the most recent entry from Kathie’s blog.
3. Three instances of my [[wplink wp-ignlist]] widget that display the list of video games I’m currently playing, games on my wishlist, and my favorite games.

The right sidebar got rather long so I searched for an interesting way to display the content. I found it in deziner folio’s Simple Javascript Accordions script which collapses many bits of content, and allows displaying one at a time, folding the others up like an accordion. The script was quite simple and straightforward, which meant that although it didn’t do everything I wanted, it was easy to understand and modify. I changed it in several ways:

1. The script was very rigid about how its content must be structured, which was very different from the way WordPress’s sidebar widgets are structured. I modified it to work with any WordPress sidebar widgets automatically.
2. I added a timer to the script so that it would automatically “turn the page” every set interval rather than requiring a person to click a header. If a header is clicked, the timer is disabled.
3. I added a rotating “countdown clock” icon showing how long it would be until the next page was turned. This gives the visitor a better understanding of what’s going on and why the content keeps changing.

Other plug-ins

I currently have 14 plug-ins installed. You can see the complete list, along with descriptions, at my “[[wplink wordpress-plugins-i-use]]” page, which is automatically generated by one of the plug-ins! Some supply the previously mentioned sidebar widgets, some generate content that can be included in posts, and others handle the display of images. I’m still browsing through the WordPress plug-in database and will undoubtedly be adding more plug-ins in the future.

Wrap-up

That’s about all I can think of to write about the WordPress install. If you have questions or comments, feel free to leave a comment and I’ll reply pretty quickly.