Installing and reskinning a WordPress blog

This post is both for people with web design experience but who haven’t yet used WordPress and it might be useful for regular Joes or small companies who want to install a default WordPress blog engine on a site at their own URL. So here’s how to install wordpress and how to reskin it. I’ve not gone into a huge amount of detail but it should be a good starting point. Let’s try the questions and answers format:

What is the difference between http://www.wordpress.org and http://www.wordpress.com?

On wordpress.com you can set up a blog that will be hosted on wordpress.com, and on wordpress.org you can download the blog engine to install on your own site.

Can you be a bit more specific?

On WordPress.com you can quickly set up a blog that will be hosted on WordPress.com, so the address of your blog will be http://websitename.wordpress.com. For example: http://whythatsdelightful.wordpress.com/. You can customise how it looks to some small degree (and a small fee). You would typically choose a template and maybe change the header image as in the example above. However you have limited access to the markup and css and have to access these through a web interface, which I personally hate doing.

However on WordPress.org, you can download the blogging engine and install it on your site. This gives you full access to all the markup (html code) and the css, so you can do whatever you want with in Dreamweaver or whatever you use to code. The other obvious major benefit is that your web address can be whatever you want, or at your existing site.

What’s the easiest way to install WordPress?

A lot of web hosts have good hosting packages that make it easy to install extra bits and pieces and this is by far the easiest way to install WordPress or setup a new site with WordPress. My web host of choice is www.blacknight.ie . I decided to setup http://www.beatingrsi.com one night before going to bed and a couple of hours later I had it setup and mostly reskinned.

1. Get a Soho package for €35 a year.
2. Go to your control panel and then go to The Installatron!
3. Select WordPress and follow the very simple steps to install it

Where’s my blog?

Your blog will now be at the root of your site http://www.yourwebsite.com or http://www.yourwebsite/blog depending on whether you installed WordPress in the root directory or a sub directory. Now you’re ready to start writing blog posts or pages. It’s very easy to use. Go to www.yourwebsite/blog/wp-admin and you’re ready to go.

Can I reskin it now?

Yes. You have two choices, you can install someone else’s theme or you can reskin it yourself.

How can I install someone else’s theme?

The process for installing a theme or a plugin is much the same.

1. Find a theme you like. Here are some http://www.freewpthemes.net/ http://www.wpthemesfree.com/ http://www.freewordpressthemes.com/http://www.woothemes.com/
2. Download a theme
3. Copy it to your themes folder
4. Upload the theme
5. Go to your Admin page http://www.yourwebsite.com/wp-admin or http://www.yourwebsite.com/blog/wp-admin and in the Design section pick your theme.

How can I reskin a theme?

There’s no point in completely starting from scratch. Pick a barebones theme that somewhat fits the layout you want, ie the number of columns, if any, that you want. The default theme that you installed (Kubrick’s theme) is a good starting point for the standard layout. The sandbox theme is another good starting point. It’s unskinned but has all the elements marked up, ready for you to skin with CSS.

The typical process from there depends on your preferences. I tend to design in photoshop. Take a screengrab of the default theme. Then set up your grid to match the width and turn on snap. This will make everything from here on a lot easier. Now, do your design magic! Here’s what I did for www.beatingrsi.com. I didn’t bother with the footer or main content typography at this stage. I prefer to get a basic design and then tweak. This is what a few of those steps look like at a high level:

How did you go from Photoshop to WordPress theme?

Open the original images from your default theme. You will find them in /wp-content/themes/default/images. For example open header.gif. Then copy the header from your design and paste it into header.gif, position it properly and save (or export as gif and save over original). Do the same with the backgound image for the page, or the wrapper image. And you’re off to a very good start. It’s all tweaking from here on. Start messing with your CSS to match the widths and height to your new images if necessary. Then start tweaking your typography, and add your footer if you hadn’t already worked on it in the original design. Then tweak, tweak, tweak.

It’s easier to work locally when tweaking, so open your blog in Internet Explorer (It’s better than Firefox for saving pages) and save it as testpage.html in your site directory and then change the paths to CSS etc.

I already have a blog. Can I transfer to WordPress?

Yes. It’s delightfully easy to import all posts and comments into wordpress from blogger or wordpress.com. At the press of a button you can have all content imported. Although you will probably have to reskin from scratch or just go for a new design as the markup hooks will be different (that’s the only reason I haven’t moved this site yet.)

What about blogger?

No! Blogger is fine if you want a blog at www.mysite.blogger.com and don’t want to change the theme much. www.johnbraine.com is completely modified but it was a very slow process. I had to use the online editor, and managed to get most of the CSS into a separate file so I didn’t have to wait on the VERY slow blogger – it was a very slow painful and painful process, as is working with blogger: You can publish blogger to an external URL, as I do, but after a small amount of posts and labels build up, it times out whenever you publish a post. I’m dreading publishing this post! I will have to hit retry every minute for about ½ an hour! So avoid, if you want to reskin and publish to your own URL. It seems the only “fix” for this is to actually host with Blogger.

For writing, management, publishing, or reskinning, a dedicated WordPress Engine wins hands down.

Update: For a more detailed guide on installing WordPress, see Gav’s Guide to installing WordPress.