archives

Posts tagged Wordpress training

In this post, we’ll take that initial design idea and turn it into an XHTML template.

Lately I’ve been using some nice free software to code up my sites in. It’s called Notepad++. I gave up using Dreamweaver a long time ago – it is so easy to produce poor-quality code in Dreamweaver and I find it really slow and cumbersome to use.

I prefer to code up my sites by hand and Notepad++ is better than Notepad in many ways – it has tabs and color-codes tags and makes it easy to collapse down code while you’re working on it.

First step is to start off with a really basic template and worry about nice meta tags, RSS feeds, WordPress code, and even CSS later. View the source of that to see how basic I’m starting off with.

Note: There’s one line of code you’ll find in all my template’s code which you should ignore – it’s my stats package, Mint:

<script src="/mint/?js" type="text/javascript"></script>

Next step is to figure out the structure of the template. I may change my mind later about the tags I’ve used or the order of things when I tweak things later (especially the header tags). I’ve put in the sample data seen in the original design, just so I can see how the structured content looks too. And there we have Step 2.

I check to see if the code validates.

It’s actually a good idea to see how nice your page looks without any styling. This is how people will see your site if they don’t have stylesheets enabled. Your site should still look organised – the structure should still be obvious to people.

Tip: How do you know whether to use id or class? If the style you’ll set up later appears more than once on a page (potentially), then use class. If it will only appear once, use id.

Next step: figure out the CSS to get the layout working!

(PS: When I’m coding up a theme myself, I’ll usually have WordPress code in there right from the start but I think it’s adding unnecessary complications too early on for this tutorial series.)

Recently I had my blog posts divided into three columns with different blog posts appearing in each one. I’ve now switched back to two columns, putting my blog design/tech posts in one and my personal/life posts in the other. Here’s how I set it up (and this can be extended to as many columns/areas as you’d like):

  1. Categorise your posts. I’m using three categories currently: blog design, life and other interests. I use categories to handle where the posts appear on my page and tags for more detailed descriptions of the content. I use a brilliant plugin called Ultimate Tag Warrior to handle the tagging.
  2. Create your layout. There’s lots of resources to help you create a two column, three column etc layout.
  3. Decide on where you want different content to go. In my current layout, I want both posts categorised as blog design or other interests to appear on the left and posts categorised as life on the right.
  4. Create a home page template. If your theme doesn’t have one, go into your theme’s folder, make a copy of index.php and call it home.php. Make it writeable by the server so you can edit it via the WordPress admin system. Edit home.php so that it uses the layout you created.
  5. Pull in the appropriate posts for each column/area of your layout. Instead of having one WordPress loop which shows your posts, you’ll have multiple loops on the page, one for each column/area. Highlight the WordPress loop code:

    <?php while (have_posts()) : the_post(); ?>
    ...
    ...
    <?php endwhile;?>

    and copy and paste that into the different layout areas you want different posts to show up. E.g., in my blog I have two copies of the loop: one in each column.

    Before each loop, we need to tell WordPress which posts to display. We add one line of code, which will look something like this:

    <?php query_posts('cat=1&showposts=10'); ?>

    In that example, it’ll pull in 10 posts from category 1. If I wanted to show posts from two categories (as I do on my blog), it’ll be something like:

    <?php query_posts('cat=1,2&showposts=10'); ?>

    If you want to show everything but category 1, use:

    <?php query_posts('cat=-1'); ?>

    You can do a lot with query_posts.

  6. Customise the look of your posts. You can change the display of posts in different areas quite easily now. For example, if I wanted my life posts to just show the headlines, I’d remove the excess code found in that loop.

I hope this tutorial helps you be more flexible with your blog layouts. If you need any help, or more information please leave a comment.

Elsewhere: Skype MSN Messenger Twitter Facebook