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.

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.

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

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

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

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.

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.