Wordpress Theme: Creating a layout (Step 1)

January 2, 2007

Think about what information you want to display, what you want to focus on, and how best to display it. Have a look at how other blogs lay out their content and think about what you like and don’t like about the layout (try not to focus on the design elements at this point).

For most blogs, this will consist of:

  • Logo/introduction to a blog
  • Main menu
  • Blog posts
  • Other content (photos, links, bio, music, books, archive links etc).

For this simple theme I’m making, I chose the following initial layout:

Layout step 1

I’ll be making the footer quite large to organise some of the other content listed above.

Turning this into an XHTML/CSS template doesn’t need to be too difficult. A good place to refer to is this quick start guide where you can copy one of their templates into a text editor.

I’ve stripped this down to the bare basics, put in the different areas of my template and added in some very basic CSS to lay out the areas. This will be tweaked more later. See here » (and view the source code).

See also
Comments

  1. [...] Wordpress Theme: Creating a layout (Step 1) | cre8d design: blog design, Wordpress themes, Drupal, Web 2.0 Think about what information you want to display, what you want to focus on, and how best to display it. Have a look at how other blogs lay out their content and think about what you like and don’t like about the layout (try not to focus on the design e (tags: howto theme Wordpress) [...]

    — links for 2007-01-03 » Bloganbieter.de, January 3, 2007

  2. This is fantastic Rachel! I can’t wait to start fresh for my own WP theme.

    I would rather make a clean start than have to work off an existing theme and customize it. I’m looking forward to your next step!

    Cheers,
    Donna Vitan
    donnavitan.com

    — Donna, January 3, 2007

  3. [...] Wordpress Theme: Creating a layout (Step 1) [...]

    — Grym’s Rant » Useful resources for creating a Wordpress theme, January 4, 2007

  4. Great info- I’m wondering if I need to know PHP to create a WordPress theme, or can I just do the design and use someone else’s PHP?
    Thanks.

    — Randa, January 6, 2007

  5. and….waiting with great anticipation for part 2 please…

    — Adam Walker Cleaveland, January 8, 2007

  6. Coming later today :) Had unexpected guests come to stay here which got me behind on everything.

    — rachelcunliffe, January 8, 2007

  7. [...] This is part of a series of posts on how to create a Wordpress theme. See also: Step 1 and Useful Resources. [...]

    — Wordpress theme: Creating a theme (Step 2) | cre8d design: blog design, Wordpress themes, Drupal, Web 2.0, January 8, 2007

  8. [...] Learning how to create a new design template for the blog: My first step towards learning how to design with CSS was a post “Wordpress Theme: Creating A Layout (Step 1)” by Rachel from cre8ed design. And once I began things just got simpler and simpler, I will explain this in detail in the near future. [...]

    — Problog Quest » Blog Archive » Beginning The Quest, January 13, 2007

  9. Hi!
    Fantastic info!

    — AIDAN, January 14, 2007

  10. This Info seems powerful!

    We already run a successful business but have never ventured into the area of blogging, so it’s great to read about it.

    I have a question about our business and blogging…

    We rent out people’s car doors as advertising space for our company…basically we send them a car door magnet with our company logo on it, then we pay people to drive around town..so they make a passive income, and we get exposure. Do you think a blog on this would work? Here is the site http://www.carmagnetbusiness.com

    — Aaron Harris, January 15, 2007

  11. A blog would be a great idea, you could talk about case studies, fun stories about things that have happened, success stories etc.

    — rachelcunliffe, January 15, 2007

  12. Hi!
    Looks great! Very nicely done. I will bookmark!

    — ELLA, January 23, 2007

  13. Hi! Nice site!

    — Lawrence, February 22, 2007

  14. thanx.

    — sohbet, March 13, 2007

  15. Your site looks great! Visit my sites, please:

    — Lawrence, March 30, 2007

  16. Exelent! Good work! Would you please also visit my homepage?

    — Dianne, March 30, 2007

  17. Great looking site so far!! I’m just starting to look around it but I love the title page! Please visit my homepage:

    — Glass, March 30, 2007

  18. I liked this site, it’s neat. Good job! Visit my sites, please:

    — Lambeth, March 31, 2007

  19. Excellent tutorial, thank you.

    — Vent Swap, May 3, 2007

  20. Thank you for this tutorial! Excellent resource for building my own theme.

    — Carol, May 24, 2007

  21. Looks great! Very nicely done. I will bookmark!
    Thank you all.

    — amcık, June 1, 2007

  22. Hello! Good Site! Thanks you! oytgnyhtffnu

    — kiexnkamih, June 25, 2007

  23. We already run a successful business but have never ventured into the area of blogging, so it’s great to read about it.

    — iddaa, July 24, 2007