Elements to Design for a Custom WordPress Template

Designers

Elements to Design for a Custom WordPress Template

While there are lots of WordPress templates available now-a-days, there’s nothing quite like custom branding for a business. If you’re a designer, you probably get customers who want the value of custom design for their website.

But when designing a site that will be built within WordPress, there are several built-in elements that you’ll need to remember to design.

Comments

The comment section is an easily over-looked design area. But with WordPress, designing the comments is really important – especially if you’re trying to foster community on your site. Even if the client isn’t looking for comments to be open, it’s best to design something basic instead of simply leaving a default look (which looks terrible, by the way).

When designing the comments, you’ll need to design the top comment, a response comment, as well as a reply area underneath each comment. Finally, you’ll want to customize the “Leave a Reply” section at the bottom of all the comments. The images below show each section:

Designing WordPress Comments

Individual Reply section under each comment

Designing WordPress Comments

Showing a reply to a specific comment

Designing WordPress Comments

Leave a Reply section at the bottom

WordPress Tags

There are also some basic tags you’ll need to think about.

Captions. Captions aren’t used by everyone on their site; in fact, I rarely use them. Irregardless, styling them only takes a moment and not styling them can mean unhappy clients down the road.

Images within text. At its most basic, styling for images within text, as in images added inside of a page or post, can just include a simple margin. But depending on the overall site design, you might want to “snaz” this up a bit.

Timestamp. On most blog posts there’s information displayed including the time it’s posted, maybe categories, tags, etc. You can customize this to your heart’s content, just don’t forget it!

Next/Last Page. At the bottom of most blogs you’ll need a link to the next page. While there are plugins that provide nice functionality, you’ll want to tailor the look to your site.

Blockquote. A blockquote provides a way for the writer to emphasize a sentence within a page or post. Default isn’t very special, so customize within your design. Keep in mind that your client might use blockquotes differently. I use them to highlight key side-points, not usually for quotes (as below).

The details are not the details. They make the design.

– Charles Eames

General HTML elements

While WordPress has a few custom design elements that are easy to forget, you’ll also need to cover the standard HTML elements including: buttons, forms, labels, input areas, textbox areas, lists (both numbered and not), headings (1-6), links (hover, normal, and visited), etc.

Sidebar

It’s pretty unusual for a website not to have a sidebar on at least some of the pages. While the page itself might be easy to design, I often find that sidebar designs are sorely lacking.

When designing the sidebar, remember that it’s created so that the owner can easily add or remove items without knowing code. If you provide your developer with each item in the sidebar heavily customized, make sure you include also include a default look so when the owner adds another menu down the road, it doesn’t look completely out of place.

The Checklist

So here’s the checklist to make sure you remember to style everything needed for WordPress:

  • Comments – nested, reply, reply to comment
  • Buttons
  • Forms
  • Labels
  • Input & textbox
  • Lists (numbered and not)
  • Headings
  • Links
  • Sidebar – default
  • Captions
  • Images within Text
  • Blockquotes
  • Timestamp
  • Next/ Last Page

See anything I missed? Let me know in the comments!

 

 

 

Comments
  • Hi Kim,
    Excellent post. I planned to customize my WordPress comment section. At present, I’m using Disqus comments on my client’s site. But my customer needs a custom design. Therefore, I’m looking for good design. I learned using this post something new.

    Thanks