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 dedicated site. I’ve been meaning to write a post about installing and skinning Wordpress for a while now, as I wasn’t sure where to start when I was building a Wordpress site recently, even though I’ve designed and built a lot of other types of websites. Sabrina and the good folks at www.creativeireland.com pointed me in the right direction though. Damien did a post recently about the fact that some Cowboys are charging from €550 to €1500 to install a Wordpress theme, which is fairly scandalous. So I thought I’d get the finger out, as this post might help a few people stop getting ripped off, as you can see how easy the install is. Of course If they're charging for the reskinning that's a different story altogether.

So. 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/
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.

Another google reader tip.

Did you know, you can add a next button to your browser and it will open the next unread item in your Google reader list? But it opens the pages on the actual web sites they come from. This adds a bit of colour to your reading, and you get to see comments etc straight away. I also use Google reader to keep up with lots of sites that aren't blogs, such as creative ireland. So it's very handy for feeds like that, as I jump to the whole thread rather than just the first post, which is all you get in google reader.

I wasn't sure if I was going to bother writing about this or not but here's the clincher. When you're at the last item, and you click next, this is what you get:

You guys!
*wags finger at those whacky google guys*

Here's how: In Google Reader go to Settings then Goodies, and just drag the Nextbutton onto your toolbar

Bonus tip: Open (Windows) Accessibility Options / Mouse and turn on Mousekeys. The when you press 5 on your numerical keypad, it will open the next post, (after you've clicked the next button once).

Shocked and stunned

I was shocked and stunned to win best newcomer at the Irish blog Awards last night... for this frivolous little thing. Really. I personally thought K8 the Great or Roy were going to win. Or any of the other great new blogs on the list.

I also had a personal triumph in saying a few words in front of 400 or so people. I'm delighted to see my absolute dread of public speaking diminishing with age! This deed would have been impossible for me a few years ago. The thought of it had my heart pounding so hard I thought it was about to explode but I was assuring myself with the fact that they'd call someone else's name out. Which they didn't!

Like I managed to blurt out on the night, the blog awards is such a good-natured event and with such a friendly atmosphere that last year's event got me blogging in the first place. Well, it was the icing on the cake anyway. This year's event was great fun too. And it was great to meet lots more of you lovely people again. Special shout out to the girl who ran up to me and asked what blog I was from, then before I had a chance to answer said "look I've got a black tongue" before skipping off to someone else. And when I say girl I mean woman.

Thanks to whatever judges seemed to find the same stuff wotsits and thingies as interesting as I do. Fair play to Moviestar for giving out free DVD players to every winner too! I'm happy to give them a shout out, as I experienced some great customer service off them just last week. And also to Edelman for sponsoring best newcomer. And to Damien and all the organisers of course. Booyakasha!

Irish KC has links to all the blog awards posts here. http://irishkc.com/index.php/review-irish-blog-awards-2008.htm

I'd like to thank blogger for making it all so painful

Well I never. I've been shortlisted in the best newcomer category of the Irish blog Awards. Didn't expect that to happen. Oh christ, award cliches already. I'll be thanking God next. It's all awards awards awards recently isn't it? Here's the other contenders:

• K8 the GR8
• Blog the Bog
• Irish Taxi
• 73man
• nickhereandnow
• Midget Wrangler
• A Pint of Unionist Lite
• Coffee Helps
• The Friendly Farmer
• John Braine
• All Parts Included
• One for the road

On that note. I'm delighted to see This Is England raking in the awards. one of the best films in years I reckon. There's lots of great stuff on www.thisisenglandmovie.co.uk and http://www.shanemeadows.co.uk/

Irish Blog Awards

That time of year again. The Irish Blog Awards. I went last year because The Missus was nominated for best personal blog, as she is again this year (well, she's on the long list), congratumalations. It was a good laugh last year, no one one took it very seriously, and they seemed like a really good bunch of people. Was kind of the icing the cake for me to decide blogging.

The long lists are now out. One of the more interesting lists of nominations is best post. My favourite's so far are the most exclusive prison cell in the world and Top 5 Scary Moments - #1. At the time, I can remember enjoying Fuck off Katy French, and she did.

Glad to see everyone I nominated on various lists including The menace.com for best design blog. The rest are kind of usual suspects, so I won't mention them all.

Ooh look, I'm at the bottom of the very long long list of best newcomers, ha!

Amusing blog stuff in newspapers this week

There have been a couple of amusing articles in the papers this week about blogs that I read. First of all, just who hasn't written about Pat Kenny being a total plank? Grandad's post about the exact same clip a while ago was pretty funny. Graham Linehan's Why That's Delightful blog isn't much different . Albeit comic genius that he is, his blog is still fairly down to earth... waffling away like the rest of us about random stuff. So I think it's hilarious to see such a po-faced article in the Independent about "Chat kingKenny letting the country down" quoting the post in detail.

Limmy's show was one of the best at last year's Fringe. And I really enjoyed his 'magic pen sketch'. Have a look at the recorded version before reading on...

Then, in this week's Sunday Mail, there's an article about the clip. And it turns out, the newsreader really was doing a magic trick on the sly. Hilarious! Original Pengate post.

Couple of Google Reader tips

Came across a couple of Google Reader tips last night. Or rather, they magically appeared in my Google Reader inbox:

1. Add a dynamic blogroll directly from google reader

This is very handy, and very easy to do. You can add a blogroll to your blog that mirrors folders in your Google Reader. This means that I can maintain my blogroll without going near Blogger. And that's always good news. Obviously you can leave out whole folders and still retain privacy where needed. Of course I only discovered this a week after doing a blogroll by hand. See how atOfficial Google Reader Blog.

2. Integrate your Google Reader into Gmail

This is just one feature in Lifehacker's Better Gmail Firefox extension.

You can set up Google reader to appear under your emails or/and have a link in your sidebar so you can flick between email and feeds.And if you like your shortcuts don't miss out on Gmail macros.

Blog roll

It's about time I got with the program and added a blogroll. So here's most of the blogs I read in my feedreeder. If you don't use a feedreeder, get with the program! Why go to the post office to get your letters, when you've got a postman to bring them to you. If you have a gmail account, the easiest thing to do is go to www.google.com/reader, and start subscribing to feeds. Or any blog or webpage just look out for a feed icon. If you want to see RSS explained further, here's a simple video. Subscribe to my feed here.

Anyway, here's most of the blogs that I've get in my feedreader & added to my blogroll...

Irish blogs

Annie Rhiannon

Just everyday comings and goings of a girl called Annie but I like her style. A very witty kitty. And if you're a movie buff check out Annie get your gun too.

Gingerpixel

Great photo blog, with the occasional insight into good photography tips and techniques.

Damien Mulley

Mostly technology news, which I don't follow that much to be honest but there are lots of other interesting bits and bobs of fluff.

Twenty Major

Twenty mostly makes up stories about his imaginary mates and there's also lots of good old down to earth rants about the idiots that live in and run this country.

Web design

Smashing magazine

This really is a great resource to subscribe to if you've any interest in web design. Lots of practical tips, advice and downloads.

A list apart

the first place to look for industry standard techniques. The regular features are great but it's taken second place in my favourite web resources. Smashing magazine is just that bit more useful and to the point.

The designed tree

I've already given this a mention. The designed tree is an Irish based blog featuring well designed sites from around the world.

The Menace

Good Irish Web design blog, occasionally outing some of the many web design cowboys on the go at the moment. And I love the blog header.

Other

Limmy

If you haven't checked out Limmy.com yet do it now. Play with some playthings and watch some videos. Then you're allowed to have a look at his blog. Did I tell you how good his live show was?

Turning off colour for Blog action day!

To save the amount of power it takes to colour your monitor, I've turned the colour off in your browser window. Erm, it won't work in a feedreader etc, you need to actually come to www.johnbraine.com and hit refresh.

http://blogactionday.org/

Update:

Normal service is now resumed. This site looked like the image below for one day. I'm sure I saved a million Megawatts in energy. Just like blackle.