FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Home  »  WordPress  »  Basic WordPress Theme Guide

by 1 comment

This is a brief explanation of what is needed for an awesome theme, well awesome from my perspective. This is good stuff, memorize it.

This is a visual representation of all the different types of templates that can be used in a theme, it's just for your reference, you can skip over it. Start at the left of the image, and go right.

Template Hierarchy


Main Theme Templates

  1. front-page.php - the Home Page - /
  2. single.php - a single post/article - /what-did-you-eat-on-thanksgiving/
  3. page.php - a single page - /about-us/
  4. category.php - a category page, usually a list of all the posts in a category - /category/seo/
  5. tag.php - a tag page, usually a list of all the posts tagged a certain tag - /tag/seo/
  6. author.php - an author page, usually a short bio and a list of all the posts written by that author - /author/mtom/
  7. search.php - search results page - /search/?s=thanksgiving
  8. 404.php - error page displayed when someone mistypes a url - /aboup-us/

For several of those main types further customization is possible. This can let the designer do some cool things, like using a different color scheme on different categories, layout, or even totally different everything for different categories, authors, pages, etc..

  • single-{post_type}.php - If the post type were product, WordPress would look for single-product.php.
  • page-{slug}.php - If the page slug is recent-news, WordPress will look to use page-recent-news.php
  • category-{slug}.php - If the category's slug were news, WordPress would look for category-news.php
  • tag-{slug}.php - If the tag's slug were sometag, WordPress would look for tag-sometag.php
  • archive-{post_type}.php - If the post type were product, WordPress would look for archive-product.php
  • author-{nicename}.php - If the author's nice name were mtom, WordPress would look for author-mtom.php

For more reading, the codex.wordpress.org site is your friend, see: Theme Development

Theme Layout

In order to create fluid, flexible layout, this is how I do it (after years of reading and trial and error). The main thing for designers is that basically every page on the site will use the same header and footer, so keep that in mind when placing things like page titles, search forms, navigation menus, breadcrumbs, etc.. But also don't think too hard about it, with a flexible, fluid layout like this it frees the designer to be able to position things anywhere they want. Also cross-browser perfect.

  • body
    • Global Container - for everything
      • Header Container - for header
      • National Container
        • Main Container
          • Content Container - for the main content area of page
          • Side Container - for the sidebar
      • Footer Container - for footer

CSS Developers

In Firefox using Firebug (if you aren't using firebug you are only using a fraction of your potential to be great) it looks like:

css theme layout

Each of the above (other than body) are divs, and all (including body) are position:relative;, which means anything within the div can then be absolutely positioned or floated within the div. Also the divs are overflow:hidden; to prevent anything from escaping. One of the examples of why is below:

CSS Positioning

Notice that the navigation (NavM) and the search form is on the top left of the page, they are both absolutely positioned within the GlobalW container. Doing layout like this gives you total control over the placement of things. Layout divs should have an id. That's the gist in a nutshell, to dive deeper use firebug on askapache.com.

I hope this helps explain what types of things are needed for a world-class theme, good luck!

Tags

January 15th, 2013

Comments Welcome

  • AH

    Thanks for putting this together. It's very helpful.

My Online Tools
WordPress Sites

My Picks

Related Articles
Newest Posts
Twitter

  • Trojan Horse, a novel!  t.co/Hf8EtYaZVa 
  • The Hacker Playbook - very nice high level overview of attacks  t.co/lHwNVWi61u 
  • Clean Code - A Handbook of Agile Software Craftsmanship  t.co/hnJX0x1qIc 
  • Secrets of the JavaScript Ninja - By my absolute favorite JS hacker John Resig!  t.co/tZ42ljmcCl 
  • Hacking Exposed 7: Network Security Secrets & SolutionsMy all time favorite, basic but thorough and accurate.  t.co/jycW0RDVtZ 
  • Empty words will be no surrogate for cold resolve. Pain is nothing.  t.co/qXjpRxbjCw 
  • REVERSING: Secrets of Reverse Engineering  t.co/GaWo29lWWG 
  • NEUROMANCER  t.co/3OoknUcb5Z 
  • "The Shockwave Rider", by John Brunner (1975 hacker sci-fi)  t.co/ZW56HVUefW 
  • The Rootkit ARSENAL - Escape and Evasion in the Dark Corners of the System  t.co/1FzX6bHgsQ 
  • "We Are Anonymous - Inside the Hacker World of LulzSec, Anonymous, and the Global Cyber Insurgency" better be good!  t.co/GL0cFNiUOq 
  • THE IDEA FACTORY Bell Labs  t.co/FyVhgNwwT5 
  • The Datacenter as a Computer -- Urs Holzle  t.co/M5WIYs1OVg 
  • Now by Steven Levy, "IN THE PLEX"  t.co/PwxtLgqukG 

Friends and Recommends
Hacking and Hackers

The use of "hacker" to mean "security breaker" is a confusion on the part of the mass media. We hackers refuse to recognize that meaning, and continue using the word to mean someone who loves to program, someone who enjoys playful cleverness, or the combination of the two. See my article, On Hacking.
-- Richard M. Stallman






[hide]

It's very simple - you read the protocol and write the code. -Bill Joy

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed. "Apache" is a trademark of The ASF. NCSA HTTPd.
UNIX ® is a registered Trademark of The Open Group. POSIX ® is a registered Trademark of The IEEE.

| Google+ | askapache

Site Map | Contact Webmaster | License and Disclaimer | Terms of Service

↑ TOPMain