WordPress Theme Elements

A client asked us to put together a list of every design element required in a WordPress theme but it’s the sort of thing we think we should share.

When producing a theme, we try not to limit the website owner’s options within the WordPress Dashboard. The owner may wish to enable an option down the track and be disappointed if they can’t.

The downside for the designer and developer is they may put in work for elements that are never used. The upside is happy clients and return business.

Like most things web, the site’s purpose will dictate that some things just aren’t feasible. Consider this as a series of guidelines that you can adapt for your purposes.

This is a giant list of everything we could think of. It makes the task of designing for WordPress look a lot more daunting than it actually is. The theme test unit contains posts with every type of content listed below.

For the purposes of this post, we focused on our internal WordPress framework.

The website basics

The frame of the website includes the header, footer and any sidebars for website owners to add widgets. The frame may change on various pages throughout the site.

Some typical items that need to be designed for the site are:

• Menus, including hover states and any drop downs or mega menus, if applicable
• Headings and sub headings: HTML can have up to six levels of headings and sub headings. To keep code semantic in our framework, it allows
  • 5 levels of headings within a page (with the page title being the top level)
  • 4 levels of headings within a post (on archive pages, the post title is a second level heading)
• Form input fields, including
  • label placement
  • error message placement
  • focus states (when the user’s cursor is in the input)
  • submit buttons
    • hover states
    • focus states
    • active states (when the button is clicked)
  • an example of a typical layout can be found on our CSS framework’s form demo page (hit the submit button to view error messages).
• link colours
  • default
  • visited (if different from default)
  • hover state
  • focus state (for users navigating the page via keyboard)
    As mentioned in a recent post, we tend to reverse the foreground and background colours for the focus state.
  • active state (when the link is being clicked, frequently the same as hover state)
• Footer, typically containing
  • links to website policies
  • declaration of copyright,
  • links to main pages or a site map.

Widgets

Widgets are the various elements that appear in the sidebar, such as recent posts.

Each widget has a title and the contents described below

• List Widgets
  Most widgets are a list of links. Commonly these are styled in the same fashion but, if the design demands it, they can be made to look quite different.
  • Archives of months/categories
    • Option: Display as drop down
    • Option: Show or hide post count
    • Option for categories: show hierarchy.
  • Links/blog roll
    • Option: show link image (if no image, title is displayed)
    • Option: show link title
    • Option: show link description
    • Option: show link rating
  • Pages/custom menu, shown as hierarchy. Options do not affect design.
  • Recent post titles
    • Option: number of posts to display
  • Meta, links to site’s admin, RSS feed and similar
  • RSS Feed, can also be used to show recent posts. Shows title and an extract from the post.
    • Option: number to display
    • Option: display post author
    • Option: display post date
  • Recent Comments.
    Actually two links per list item; one to the comment and one to the commenter’s webpage.
    • Option: Number of comments to display
• Other widgets
  • Search form, includes input and a submit button
  • Text widget, can include any HTML
  • Calendar: one month with links to dates on which there were posts
  • Tag cloud

Plugins can be used to add other widgets to your page, for example a mailing list subscription form.

Archives and Search Results

WordPress includes the following archives of posts.

• Main archive – archive of posts from all categories by all authors
• Date based archives (by year, month and day)
• Category archives
• Tag archives
• Author archives
• Search results by search term

It is possible for the designer to include a description or author bio on the page. If you add this, you need to allow for the element to be removed if no description/bio is defined.

The archives are a list of posts, while the designer may remove them, they typically include

• title,
• category,
• tags (if added by website owner),
• author,
• number of comments,
• date of post,
• a short excerpt, the beginning or full text of the post
• a ‘read more’ link

Additionally, links to older and newer posts are displayed.

Search results display both pages and posts containing the search term in their title, excerpt or content.

Single Posts

Single posts typically display

• a feature image or thumbnail (if enabled by the designer)
• title
• category
• tags (if defined by website owner)
• author
• comments (if enabled)
• comment form (if open)
• date of post
• full text of the post
• links to the next & previous posts
• links to the next and previous page of comments (if applicable)

it is also possible to display a variety of information about the author if it has been defined.

Some plugins add extra content to the contents of this page. Designing for the gazillions of plugins available is impossible so discussing plugins with your client upfront will be helpful.

WordPress supports post formats which can be used to alter the display for the post depending on it’s content. The theme designer can choose to enable none, some or all of these. Possible post formats are:

• standard
• aside
• gallery
• link
• image
• quote
• status
• video
• audio
• chat

Single pages

WordPress allows multiple page templates to be included within a theme, common templates include:

• A standard page layout (required)
• A home page
• Special purpose landing pages

Pages typically display

• a feature image or thumbnail (if enabled by the designer)
• title
• comments (if enabled)
• comments form (if open)
• full text of the page
• links to the next & previous pages of comments (if applicable)

Attachment pages

An attachment page is linked to from an image or other media file.

• The full sized image, or a link to the media file
• A caption
• the next/previous attachment – if applicable.
• title
• date uploaded
• comments (if enabled)
• links to next / previous page of comments (if applicable)

Post and page content

The WordPress visual editor allows website owners to add numerous items to their post content, including

• bulleted and numbers lists,
• block quotes
• left, right, centre or justified alignment of text,
• links
• headings & subheadings – up to five levels in our framework
• images (left, right or centre aligned)
• images with captions  (left, right or centre aligned)
• video – either uploaded or embedding a youtube video.
• audio – either uploaded or embedding from elsewhere
• links to next/previous pages (if the page/post is split across pages)

If the website owner knows HTML, they can add other items using the HTML editor.

The layout test post on the theme test data page contains everything the website owner can add.

If the theme author enables it, each post and page may include a featured image/thumbnail. This may be displayed wherever post content appears.

Pull out quotes and other decretive elements can be added at the theme designers desecration.

Comments

Comments are generally displayed in the same manner on both pages and posts. WordPress allows for comments to be

• Paginated
• Nested
  By default WordPress allows comments to be nested up to ten levels deep. As the theme designer you can disable this or limit it to a lower number.
  We tend to limit it three or four levels deep.
• display avatars or not.
  As these are enabled and disabled in the dashboard, it is important for the comment design to allow for both scenarios.

The design of individual comments are dictated by the designer. Comments typically include

• name of the commenter
• the contents of the comment
• date and time of the comment
• avatar (if enabled)
• reply to this comment link (if enabled)
• When commenters submit a comment, if the comment needs to be moderated by the admin the text “You comment is awaiting moderation” is displayed.

The comment form

Users that aren’t logged in will see a comment form requesting:

• their name (required),
• their email address (required),
• their website (optional, the theme designer can remove this)
• the comment (required)
• a submit button

If the user fails to fill in the form correctly, our framework displays error messages next to each field.

If the website owner has required users register before leaving a comment, in place of the comment form logged out users will see the text “You must be logged in to post a comment.” In our framework, we display a login form below this text.

Users that are logged in will see the text “Logged in as username. Log out?” and a form requesting the comment followed by a submit button.

Not found pages

If a search term returns no results or a visitor enters a URL incorrectly, a no results/file not found page will be displayed.

Anything can be displayed on this page, by default our framework includes:

• a one line explanation of what’s happened,
• a search form,
• a site map.

Additional items

The theme designer may wish to add additional items & content to their WordPress site. For the most part your imagination is the limit.

Updates

• 28 Sep, 2011 – added a:active as suggested by Edward Caissie below
• 28 Sep, 2011 – change heading level details for posts, brain freeze.