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.

28 Comments
  • Reply Cormac Moylan

    June 5, 2008, 2:02 pm

    Hi John, great introductory blog post about blog creation and theming. Well done.

    I think I have lost count of the amount of times someone has dropped me a message via my contact form about WordPress! I’ll direct them to your post as a basis from now on.

    Cormac

  • Reply Nathalie

    June 5, 2008, 5:00 pm

    Thanks a million for this John! Really helpful and easy to follow. Am thinking of switching from .com to the .org dudes soon, so your post will be incredibly useful

  • Reply John Braine

    June 6, 2008, 9:46 am

    @Cormac. Cool! I might flesh it out a bit more, maybe add a few screengrabs.

    @Nathalie. Thanks for the feedback. Glad to see it’ll be of some use.

    Thanks!
    J.

  • Reply Tim

    June 6, 2008, 12:22 pm

    Cool tutotial. Very knowledgable and very useful. Thanks

  • Reply roy

    June 8, 2008, 6:24 am

    Mind you blogger handles videos better, I still use blogger for video posts ….then import them to wordpress, if I do them direct to wordpress the page goes askew!

  • Reply Ben

    June 8, 2008, 8:31 pm

    Great post John!

    God cant believe your on blogger, you wouldnt think it from the look of your site!

    Commenting on Blogger sucks bad too!

    Great post!

  • Reply Zee:-

    June 9, 2008, 4:45 am

    Great Information blog ! Thank you for keeping up the good work. I look forward to returning to your blog, and learning more from you ! http://www.uoha.com

  • Reply Robert Synnott

    June 9, 2008, 8:42 am

    A word of caution about wordpress.com; unlike Blogger, they put ads on your site. You can’t change the template at all; if you pay them a few quid a year, they’ll let you change the CSS, though.

    They also have a fantastically annoying feature called ‘possibly related posts’, which means ‘definitely not related and probably very scary posts’, though for the moment, you’re allowed switch that off. And then there are the bizarre global tags (clicking a tag on someone’s post gets you everything that ANYONE has written using that tag, which is probably not what you’d expect); you can’t turn these off.

    It’s all a matter of preference, but I’d go for Blogger over wordpress.com any day.

  • Reply Robert Synnott

    June 9, 2008, 8:44 am

    Oh, also, for the last couple of years, the Google-approved way of publishing to your own domain is hosting it with them; it’s just a nameserver change, and avoids the nastiness implicit in the old publishing system.

  • Reply Deborah

    June 9, 2008, 6:13 pm

    Awesome post John. I’ve just switched to wordpress for the main blog.

    The lightbulb moment for me was when you broke down the process of getting it from photoshop to the blog. Never even occurred to me! 🙂

    Hope to be hearing some good news from your other half soon! 😉

  • Reply John Braine

    June 10, 2008, 1:11 am

    Thanks for the feedback everyone.

    Roy. Yeah video’s is one thing that Blogger seems to handle a bit better, though there’s most likely a plugin for WP that would sort everything.

    Hi Robert. Yeah I got stung by that small fee at first thinking that would give me full access to html/css. Must add that to post. In the context of reskinning and publishing to an external host I don’t really think it’s a matter of preference . Not if one causes major problems and the other doesn’t. There’s a clear winner if that’s the case. And I don’t want to host with Blogger, as I’m really happy with Blacknight, so that’s not really a solution for me. Appreciate the feedback though.

    Deborah. Thats great to hear! Tast.ie is looking very tasty! As for other news, check my latest post 🙂

    Cheers!
    J.

  • Reply raptureponies

    June 16, 2008, 9:16 pm

    Oh My God, where has this post been all my life?!
    🙂

  • Reply sinead

    June 19, 2008, 7:07 am

    Just installed WordPress on my sever last night and spent a few annoying hours going through their codex. This is exactly what I needed 🙂 And up it pops in Damien Mulley’s list this morning! Ah good old serendipity..

    Thanks for an excellent tutorial. Saved me at least a few days.

  • Reply roosta

    June 19, 2008, 8:50 am

    That’s a great tutorial.

    As someone who does themes for wordpress and is constantly being asked by friends and family how to get started, this kind of thing will be invaluable.

  • Reply roosta

    June 19, 2008, 8:52 am

    oh, and to go forward, i found this guide to completely picking apart and redesigning Kubrick to be pretty good too:

    http://urbangiraffe.com/themes/guides/

  • Reply Paul McCarthy

    June 19, 2008, 12:20 pm

    Cool tutorial. I saw Mulley’s post about how much some people were charging for WordPress themes, and I was aghast. If you have any bit of web experience it’s a simple enough process, especially if you use a base theme to start off with.

    I find the blank themes from http://www.refueled.net/blank-wordpress-themes/
    to be very handy as they’re widget aware and you have the choice of 2 and 3 column to get you started.

    Now if only I had the creativity to create something decent in Photoshop, I’d be laughing!

  • Reply John Braine

    June 20, 2008, 9:35 am

    Sinead, Excellent. Glad to have saved you lots of work. That time stuff is precious.

    Cheers Roosta. I must add that link to the post.

    Thanks Paul. They look like fairly good blank themes.

  • Reply steveorevo

    July 15, 2008, 7:32 am

    Just a heads up that version .3 of ThemeDreamer is out. It’ll simplify the process of customizing and developing WordPress themes. It turns Dreamweaver into the only WYSIWYG development tool for WordPress themes.

    http://www.themedreamer.com

  • Reply Gav

    July 28, 2008, 2:38 pm

    Thanks for the link, John, much appreciated! 🙂

  • Reply Directory

    December 30, 2008, 9:27 pm

    Thank You John:-
    Very easy and really helpful article. nice blog directory

  • Reply Matt

    November 11, 2009, 6:51 am

    John, I see what you mean by reskinning a WP blog, but what about adding a header and footer so that the blog looks like it is part of my website, i.e. when users read the blog, they do so within my website.

    I have a html file that has included the header and footer, like a sort of blank page awaiting content, or alternatively I can just include the header and footer somewhere in WP. (I can edit any part of WP)

    It looks like you have done this here, any pointers on what files I need to change to add my own header and footer around a Kubrick WP blog?

  • Reply mona

    April 29, 2010, 5:57 pm

    I can’t seem to find the themes folder or design section is that only available in a wp hosting account? Because on justhost.com webhosting/godaddy I don’t see where this folder is located or is this one I have to create?
    Admin page Design section pick your theme.

  • Reply WordPress Plugin

    July 16, 2017, 3:23 am

    Hi, yup this article is really pleasant and I have learned lot of things from it on the topic of blogging.
    thanks.

Write a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.