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.

My New site: Beating RSI

I kept intending to write an RSI post here; tips on beating RSI - based on my own experience. Then I had a bad relapse and didn't feel so cocky. But in the meantime I realised I had much more to say than I could fit in one blog post. So I've started a new blog: Ways to beat RSI at www.beatingrsi.com. Please spread the word if you think it worthwhile.

I'm using Wordpress this time as opposed to blogger and Wordpress wins hands down. From setup, to redesigning, to writing posts and managing the blog. Big thumbs up to the Wordpress people.

Making Babies

I've been frantically working on a website for the missus in time for her imminent book launch. The new site is www.makingbabies.ie and it went live today. All feedback welcome. Will be re-doing the background/header imagery. Few people already saying its a bit much.

Web design crimelord #1

I've had to lock up RTE NL for crimes against web design. Just what were they thinking? Scrolling text that would give a speed-reader a creak in the neck and no way to stop it from scrolling. That's the worst crime I've seen on the Web in ages. And while I'm on the subject; no www.johnbrain.com is absolutely nothing to do with me. He should be locked up for crimes against web site navigation at least.

Digital Media Awards

Congratulations to The Missus for winning 'best in blogging' at the Digital Media Awards. We almost didn't even go. Couldn't afford neither tux nor tickets. But we were afforded free tickets at the last minute, and found a tux I could borrow. Then to her shock and horror she actually won the award. The look on her face was priceless.

But all that isn't the point of this post. And none of the above is going to stop me from saying what I've been meaning to say since I heard of these awards; their website is a disgrace. Most of this is from memory.

• Flash is very badly and unnecessarily used in places
• The overall UI is terrible
• The navigation is all over the place and inconsistent
• They commit several web design mortal sins, resizing images in the code (thus making them pixelated) and underlining text that isn't a link.

The reason all that is from memory, is that ever since the awards the site has been inaccessible. A flash movie loads and stays at 8% or doesn't load at all. Sure there are plenty of bad web sites out there, but someone calling themselves the Digital Media Awards really should have got professionals to build their site.

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?

SIFR V Dropdowns

I've thrown in the towel on trying to get Sifr headings to appear behind my dropdowns. I'd prefer to have plain old text headings and be able to navigate the site thanks very much. Sifr and z-index just don't want to co-operate with each other. Sifr has caused mucho headaches anytime I've tried to use it. I have used it on a lot of sites to do nice headers but I have spent so much time trouble-shooting with it, that the acronym just gives me a bad taste in my mouth now. I'd rather never use it again.

HB Motorcycles

Another Motorbike site I did, hbmotorcycles.com has gone live.

Few new sites gone live:

A few of the dealer sites I did, have eventually gone live. I did these about six months ago. Offices eh?

Moore's Garage

http://mooresgarage.ie

Billy Barron Motorcycles

http://www.barronbikes.com

Semi fluid layout, the navigation buttons resize as the browser window is resized.

Dogs box motorcycles

http://www.dogsbox.ie

Another fluid layout, but this time the image on the homepage resizes depending no the size of the browser window.

Lee Motorcycles

www.leemotorcycles.ie

Another fullscreen resizable layout.

Buckley Motorcycles

www.buckleymotorcycles.ie

Hogan Motorcycles

www.hoganmotorcycles.ie

Scotts bikes

http://www.scottsbikes.ie

Nice web design blog - The Designed Tree

I'm liking the latest addition to my Google reader; The Designed Tree. It's a frequently updated blog, with every post featuring a well designed site, hilighting the sites best features. It's also an Irish based site and seems to be ran by a guy called Keith Donnegan. Some daily inspiration, nice.

Tutorial: Using semi-transparent png images in CSS for ie6

If you want to use semi-transparent images in your web page, you'll want to use a PNG. The problem is that Internet Explorer doesn't support PNG transparency. So for example if you were using an image with a semi-transparent drop-shadow, instead of the shadow, you will instead see an ugly block of colour in IE6, and a lot of people still use ie6. There are a few sites out there with workarounds but only if you've placed an image into a page with the <img> tag. These fixes will not work for images contained within stylesheets. For such a useful practice (that is semin transparent images in CSS), I had a lot of trouble finding anything on the Web to solve the problem. So I thought I'd chuck this tutorial up. I did find one page, with a solution but it contained some errors in the code and there were no working examples. So I'm just expanding on that really, not exactly a tutorial.

Here are two examples, where you would need to use this technique. Both have a transparent drop-shadow and both have a patterned background. If it wasn't for the patterned background the transparency would be unneccessary. Click the images to see full working versions, resize the window, and you'll see why you need transparency.

Update: Simon is right. I had trouble getting the code below to work in an ASPX site (so I'vve grayed it out). So I used the HTC fix instead. Which is a much simpler solution once you get it working. See http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/

Here's how the CSS would look if IE didn't exist:

#wrap{background:url(../images/wrap.png) repeat-y} #header{background:url(../images/header.png) repeat-y;} #footer{background:url(../images/footer.png) top no-repeat;}

And here's the fix:

div#wrap {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/wrap.png', sizingMethod='scale');} * > #wrap{background:url(../images/wrap.png) repeat-y} div#header{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/header.png', sizingMethod='scale');} * > #header{background:url(../images/header.png) repeat-y;} div#footer{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/footer.png', sizingMethod='scale');} * > #footer{background:url(../images/footer.png) top no-repeat;}

You will need to add widths etc in there (I keep my colours/images in a seperate stylesheet)

I've just discovered there's an article on alistapart (where else?) from a few years ago covering this in detail. But as great as a their articles always are, they're sometimes a little too detailed. My example above isn't valid CSS though, so if you want to validate, check out the ALA article.

Restaurant templates

I'm working on building up a library of CSS templates for restaurants. I'll be doing hundreds of restaurant sites for the rest of the year. I'm currently having bit of fun with a few CSS tricks on one of the sites....

• It's an elastic layout
• Text-size is in EMs
• The header uses SIFR (Scalable Inman Flash Replacement) text
• The main image is set to a width of 100%
• I have different stylesheets for different size text

So when you resize the text, it has a knock on effect on everything else, the layout widths increase, the header re-scales, and the photo stretches. The overall effect is that you can zoom in and out of the site. Have a look.

IE Shit

How embarrassing. I try to make sure all my sites work in every browser/platform/resolution but I forgot to go fix all the things that weren't working properly in Internet Explorer. The footer was half-hidden, the navigation menu was looking dodge, and the drop-downs didn't work at all.

So for all you millions and millions of people who've been here before and use Internet Explorer, you can actually see stuff in the Art, and Playground drop-down s now.

What is web design for?

What is this book for!? It's not for me that's for sure but it's not for anyone. I don't know who would read this. It starts with the same old tedious stuff you get for novice web material -history of the internet etc. Yawn. Then when the content eventually starts its mostly related to really big budget web design contracts. The guys who are doing those sites don't need a book, that thirty pages in is still explaining what a browser is. So it goes from that to the scoping, planning, organization, user testing etc of large and complex sites. There's nothing for the thousand's of web designers like me and our clients who do sites for small to medium business and organizations. People who don't have budgets for a month of research, and use cases and meetings and contracts and other crap that just doesn't happen in grassroots web design.

I kept waiting for it to get better but it just got worse. It's packed full of the kind of ridiculously useless common sense that always gets my goat. This nugget takes up half a page: "Clients can find designers in a variety of ways. They may have had personal contact with someone in the company, or the designer may have been recommended by a colleague. The client may know about the supplier from the trade press or work with a client in their industry. They may have found the suppliers name in the directory....." yadda yadda yadda. Might as well be saying "A designer may get up in the morning and brush their teeth. Or the designer might have a shower first".

The language throughout is fairly dubious. Lots of talk of 'suppliers' and 'engineers' and things you don't associate with web design. Suspicions are confirmed when you get to the test cases. A few of them are unapologetically products of industrial design. What is Web Design? Well It's not a bloody Arm band Sensor that's for sure! I thought it might get interesting when I got to the test cases but they very quickly end up sounding like minutes from a boring meeting and aren't greatly insightful.

In this industry a 4 year old book would be extremely dated and trust me it is, it looks and reads like a ten year old book but that's still no excuse for all the elements that make it such a useless book. I wouldn't be so harsh if I just made a bad purchase, and it wasn't for me but like I said at the start - this book isn't for anyone! I bought this alongside its more recommended big *sister What is Design For? I'm still interested in reading about good web design practice and theory, but this is a bad start! I suppose I've only myself to blame for such a hasty internet purchase.

Smartbride.ie

Smartbride is a web site that coincides with the launch of a book called "How to have a champagne wedding on a bucks fizz budget". I got this site done just in time for an Irish Times article it appeared in on Saturday about people cutting costs for weddings. Funnily enough, I got a mention in the same article because I bartered web sites for wedding services (photographer, jeweler, chauffeur, hairdresser & cake maker) when I got married.

I like jobs like these, you get a nice image to work with (shoe from the book cover) and you've got an agreed colour scheme and half a banner straight off. The site isn't entirely finished yet though, there's a few sections 'under construction'.

Life!

I've been working my arse off trying to get this LIFE site finished. It's probably the best design I've done but I'm sick of the sight of it at the moment! There's a lot of work to it - a member section, and a minisite that's going to be used as a template for other chemists. I'm looking forward to getting it finished off and getting a full nights sleep!

However I did have a bit of fun earlier (which I'm paying for now because I'm dying to go to bed but have to get this site done). I scanned in a sketch that I did during the week and chucked it into a photo. I wanted to do something better with this - but for now here's Zippy, the Wonder years.