...my digital hub on the world wide web.

+ my writings and my work.

Site Redesign with WordPress – Layout and Design

Published on March 4, 2007 in WordPress

After finding some WordPress themes for inspiration I set about creating the look and feel of my new site. As different developers will take different approaches to designing a site layout there are several ways to go about doing this. I believe that a solid theme will always start with well coded HTML. As a result, the very first thing is to create a homepage with no dynamic data, just a plain HTML page with code for the layout and dummy text as content. Then the look and feel can be applied to the site with CSS files, colors, and images being plugged into the static page.

The rational behind completing the site design/coding and layout first is to make sure that all of the code blocks are in the right place and semantically laid out. In addition, this is a good time to validate the site, checking for errors like an improperly closed div tag that could mess up the site layout. Once the layout code has been added to the WordPress template, errors of this kind are much more difficult to diagnose and fix. This approach provides a chance to nail down the styles that will be used for layout and text without having to worry about any WordPress tags or PHP code getting it the way.

If you look at the illustration below each page in this site is really just split up into four blocks. Even the homepage, while a little different, is just additional content and side blocks within the main content block. Each one of these blocks are marked up and placed in position using div tags and CSS floats. Besides helping to separate the content from presentation, this provides one important additional benefit. I can write the page just once and it should render correctly in most browsers and devices

Block Sections in Each Page

LeslieFranke Site Layout

Header Block

The header block of the page contains all the HTML information that needs to be at the top of each WordPress page. This includes the site menu, header image, page title/description and things that belong in the HEAD section of the page, such as the doctype, links to style sheets, and the title. Basically, the header block should contain anything that needs to be repeated across the top of all of the WordPress pages on the site.

Content Block

The content block contains the meat of each WordPress page, either posts or WordPress pages.

Sidebar Block

This block contains anything that will add additional value to the page. For example, on the posts pages I may want to add the latest posts and posts categories.

Footer Block

The footer block contains the information that goes at the bottom of each WordPress page such as copyright and contact information.

Copying the Code into WordPress Templates

Now I can copy my layout code from the static pages into the appropriate files in the theme directory. WordPress themes live in a directory residing in the wp-content/themes/ folder. For example, a theme named ‘mytheme’ would reside in the wp-content/themes/mytheme folder. This directory holds all of the theme’s stylesheets, templates, images, etc. WordPress will load different pages templates for a different query type. Basically, if a category is being queried the template called category.php will be used.

In order to avoid starting completely from scratch I begin by copying all of the files from the default WordPress theme into this directory (Update Note: Alex King mentions that he uses the Sandbox theme as a starting point. Depending on your needs this may be a better choice.) While many different theme files have special meaning to WordPress below is the theme files I included in this site’s new theme.

  1. index.php – The main WordPress template. Index.php must be present and will be used if the appropriate query template is not present.
  2. style.css – The main stylesheet. This must be included with the theme.
  3. archive.php – The archive template. Archive.php is used when a category, author, or date is queried.
  4. author.php – The author template. Used when an author is queried.
  5. category.php – The category template. Used when a category is queried.
  6. comments.php – The comments template.
  7. footer.php – The page footer template. Can be used on any page.
  8. header.php – The page header template. Can be used on any page.
  9. page.php – The page template. Used when a page is queried.
  10. sidebar.php – The side portion of the page template. Can be used on any page.
  11. single.php – The single post template. Used when a single post is queried.
  12. search.php – The search template. Used when a search is performed.
  13. 404.php – The 404 Not Found template. Used when WordPress cannot find a post that matches a query.

Conclusion

Now that I have added my layout HTML code to each WordPress template I can begin adding the WordPress tags and PHP code to each one of the WordPress template files, customizing each one to my liking.

Notes:

To help in creating the look and feel, as well as coding the site, the following software was used. I used Dreamweaver and Top Style Light for the XTML/CSS part of the design and Paint Shop Pro for the graphic work. While Top Style Light is freeware, the others are not. A good, free alternative to Dreamweaver is HTLM-Kit and a good, free alternative to Paint Shop Pro is Paint.Net. Besides this software, I needed a browser to test the site as development progressed. I used Mozilla Firefox as my primarily development browser with two essential extensions, Firebug and Web Developer, while at the same time making sure to check my progress in both Internet Explorer 6 and 7.

In addition if you need coming up with layout code take a look at one of the following sites:
Open Source Web Design, Open Web Design, Template World.

9 Comments

  1. Jay, May 23, 2007:

    Great post – just got started in blogging recently.

  2. Design Contests, May 24, 2008:

    Nice tutorial I would say.

  3. Max, July 1, 2008:

    Very useful information. Thanks!!

  4. Web Design Zoo, August 30, 2008:

    Definite bookmark! Will be coming back for more.

  5. Paul Rasmussen, February 3, 2009:

    Some very useful information

  6. Nadine, January 24, 2011:

    Very nice information. Thanks

  7. I have been exploring for a bit for any high quality articles or weblog posts on this kind of space . Exploring in Yahoo I finally stumbled upon this web site. Reading this information So i’m happy to convey that I’ve an incredibly excellent uncanny feeling I discovered exactly what I needed. I so much certainly will make sure to don?t fail to remember this web site and give it a glance regularly.

  8. Denny Kristie SEOoptimizacija, September 19, 2013:


    Fastidious replies in return of this question with real arguments and telling
    everything on the topic of that.

    Also visit my web blog – Denny Kristie SEOoptimizacija

  9. homepage, October 12, 2013:

    I visited various sites however the audio feature for audio songs existing at this website is truly fabulous.

Leave a comment

Your email is never published nor shared.




You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Who Am I?

Leslie Franke Profile

Leslie Franke:[les-lee fran-key]; 1. Husband and proud dogowner; 2. Seventh-day Adventist; 3. Web Designer; 4. Atlanta Braves Fan; 5. Northeast Ohio Native; 6. Bottle Caps Lover; 7. Certified 'Freakonomic';