As a logical first post on WebRehash.com, I thought I’d share how I customized the blog with a different WordPress theme. For readers new to the blog scene, there are many blog platforms out there, but I chose to use WordPress because of it’s extensive plug-in support and the fact that it is very easy to customize.
I installed WordPress via the Fantastico scripts that come included in my web hosting plan. If you don’t have a “click and install” type of function from within your site admin section, you can download the installation package from the WordPress website here.
Once your default installation is complete, you will be presented with a basic template with limited function. The next step is to download a new template to use for your blog. You can browse through many WordPress templates here and download the template you wish to use. Just save it to your local drive and then upload it via FTP or through the WordPress admin to your hosting server. Save the template folder in your wp-content/themes folder on your site server.
To change the theme of your current blog, simply log into your WP admin and click on the “Presentation” tab at the top. It will list the currently installed themes, and your newly uploaded theme should be visible. Just click on the theme you wish to use, and your WordPress blog will then be using that theme. Easy huh!
The theme I used on this blog is called Vertigo-10 by Brian Gardner and is downloadable from the WP themes site linked to above. The default theme was all grey, and I wanted a little color in my blog, so I had to change the header graphics to accomodate this. I prefer using Adobe Fireworks for all my web graphic editing. You can use whatever program you’re comfortable with. I’ll eventually post some articles on how to create web graphics in Fireworks and the best ways to optimize the graphics for the web.
Open up your graphic editor and browse to your local files for your template, or download them from your site. For my theme, there were 3 files that needed to be changed. One graphic spans across the background of the page, the other is the logo graphic, and the third is the rest of the header including the WebReash.com text. I opened up the files and proceeded to create the new look in Fireworks. The original files were greyscale gif files, and now that I had color, I used a 24 bit png file format on export.
Even though I’m using WordPress, I still set up my site in Dreamweaver to utilize the file upload functions. I’ve used Dreamweaver for years and am very familiar with it, so even though it sounds like an odd work around, it’s how I do it. I then uploaded the new png files to the template images directory on my server. Since the page graphics are controlled in the CSS file, I had to go into WP and change the CSS file to reflect the new png extensions. To do that, I simply went to “Presentation” then “Theme Editor”. This will show you all the files associated with your template. I opened my stylesheet file and found the CSS code that had my images with their gif extensions, simply changed them to png extensions, and that updated the images in the live preview.
That’s essentially all there is to installing and customizing the appearance of a new WordPress theme. It’s not difficult, but there could be a little learning curve if you’re not familiar with CSS code and how it controls the layout on screen.
Article Update: I was looking for a solution to a problem I was having with the TinyMCE visual editor in WordPress when I found a blog called Coevolving Innovations that had a great post on installing and customizing WordPress on your own domain. It goes into detail about setting up your blog on your own domain including some mod_rewrite tips (PHP technique for dynamically forwarding URL’s – also used a lot for rewriting dynamic URL’s into search engine friendly addresses). There is also a good list of plugins to install once WordPress is set up.