Your Vision Needs A Home

Socrates Premium Wordpress Theme

Socrates Premium Wordpress Theme

Get Instant Access


You have just seconds to impress your viewers. Dont kid yourself- looks do matter.

I take caro of all the geeky stuff. HTML code, CSS, JavaScript,

Figure 3.2. Daina Reed's purple hues

Figure 3.3. The BountyBev site embraces the color blue


If you're designing a theme that will be used by a wide range of publishers, it's important that you consider the role brand will play.

Logos come in a wide range of sizes, colors, and formats. Make sure that your design allows for publishers to use their own logo (or add text for their site title when they don't have an image). This may seem like obvious advice, but the consideration here is that the theme's logo space should allow for a variety of possibilities.

Many site owners want to include a prominent tagline or mission statement (about one to two sentences long) for the blog or company that's prominent on the front page. Make sure you plan for this when building your design.

Additionally, you may want to consider different font stacks to allow publishers to change the tone of their site by selecting an alternative typeface.


Because WordPress sites often use a lot of text, you should be devoting some serious thought to your theme's typography. While there are probably tens of thousands of unique visual combinations achievable through CSS font styling, there are a few main points that you should consider.


Regardless of the font style you pick, it's important that you be constant in your font treatment throughout your theme. Using several fonts can make your theme look disorganized and unprofessional. It can also serve to confuse publishers about which fonts to use in which contexts. The best typographic systems use one or two typefaces to develop sophisticated and readable blocks of text on every page.


Use the size and styling of your type to develop the hierarchy on each of your theme's templates. Traditional print design is an ideal place from which to draw inspiration. Consider a newspaper: the front page will boldly display the main headlines, the lesser articles will receive smaller, but still legible headlines, and the body copy will always be small and uniform from article to article.

Like the majority of newspaper publishers worldwide, the New York Times has carried over the typographic hierarchy from the print publication to its website, as shown in Figure 3.4. Notice that there are three story headline font sizes: one for the feature story, another for the secondary story in the first editorial column and the photo highlight, and a third for all the other abstracts on the front page.

Also, look at how typography is used to establish a hierarchy in the section listing in the far left menu: you can tell at a glance that "Books" and "Movies" are subsections of "Arts."

Figure 3.4. Typographic hierarchy on The New York Times website

Let's carry this metaphor over to your WordPress theme. The home page template of your theme should promptly let users know where they are and what the site's primary content is. Post and page titles should be easy to find, read, and click on. Subheadings should be less dominant and so forth, until you have styled the body copy, which should be simple, readable, and consistent across all parts of the site.

You can of course use other visual design elements to organize content on your pages, but be mindful of the power that type has to communicate information hierarchy. In WordPress themes especially, it's a powerful way to ensure that content is communicated clearly—even if you're unsure what that content is going to be.

Line Length, Letter Spacing, and Line Height

These elements of design are often overlooked, as the browser defaults are generally seen as being "good enough." But paying close attention to how these small details will complement your theme's layout and visual style is often the difference between a good design and one that is truly awesome.

Text should have plenty of room to breathe, and lines of text should avoid being so long that it's difficult for the eye to scan back to the beginning of the next line. This second point is particularly relevant to flexible-width layouts: consider how the text will stretch if the site is being viewed on a very wide monitor.

Font Replacement

Typography on the Web has recently been undergoing a form of renaissance. Previously designers were limited to relying on a user's installed fonts for CSS styling, or replacing the text with an image or (shudder) Flash movie; now, a number of new font replacement and embedding technologies have become available, allowing you use of virtually any font, so long as the license terms allow it.

You should abstain from using font replacement for body text; instead, limit it to headings, titles, blockquotes, and the like. A custom font can give your theme a distinct personality. Here are few other rules of thumb (break them at your own risk):

■ Avoid using fonts that are hard to read.

■ Don't use more than one font face as a font replacement unless you have a very good reason.

■ Make sure that browsers will still render legible type when the font replacement doesn't occur. This means paying attention to line height, font color, and letter spacing. The same rules discussed in the main typography section apply to font replacement.

■ Consider the implications of using a specific typeface on non-English language sites. If your theme is likely to be used with a language that requires characters missing from that typeface, you need to plan for a fallback or alternative font.

Let's look at a few sites that make clever use of font replacement. Figure 3.5 is a great example: the two distinct header fonts complement each other nicely and contribute to the visual style of the site.

Figure 3.5. Complementary font replacement on The Sew Weekly

The site shown in Figure 3.6 also uses a few well-chosen custom fonts to contribute to the feel and style of the design.

Figure 3.6. Custom fonts on Design Informer, simplified as£ 11

Figure 3.6. Custom fonts on Design Informer, simplified

Visual Style

Color, typography, and texture combine to create a unique visual style for your theme. By having a clear idea from the outset of what you're trying to achieve, you'll be better able to combine the distinct parts into a cohesive whole.

Think about the tone and context that you are trying to achieve when arriving at a visual style. Figure 3.7 and Figure 3.8 illustrate two individual visual styles. Consider the message that each style conveys without reading any of the words on the pages."/>
Figure 3.8.

As seen here, the visual style of your theme can range from clean and minimal to bold and illustrative (and everything in between). If you're designing a theme that a range of people will use, you should limit the visual styling to simple, unobtrusive elements, as these are much easier to customize. Conversely, if you're designing a theme for a specific niche, you'll have a lot more room to maneuver.

Layout and Composition

At the end of Chapter 2, I discussed the importance of drawing wireframes that map out the content contained on each page of your theme, and how that content will be organized. Now that we've reached the design phase, it's time to map out the theme's layout in more detail. Selecting the layout of your theme is one of the most crucial decisions to make during the design process.

The Golden Ratio

Dating back to the Renaissance art period, the golden ratio is simply a mathematical ratio that's widespread in nature, and which tends to give compositions an aesthetically pleasing balance. Everything from an oil painting to a web design can use the ratio. The ratio is fairly close to (but not exactly) a two-thirds to one-third split, as illustrated in Figure 3.9.

Office Organizer Desktop Icon Background
Figure 3.9. The golden ratio

In a WordPress theme, the golden ratio usually appears as the ratio of the main content column to the sidebar column; it can also be applied to subcolumns, or to the height of elements in the header or footer. Let's look at a practical example of what this might mean for your theme layout. A typical site layout is shown in Figure 3.10.


Figure 3.10. The golden ratio applied to a site layout

This wireframe actually uses the golden ratio to guide its column and row proportions. The 470px column is balanced against the 270px column, which in turn is balanced against the 160px column. In the header, the two sections are also proportionate to the golden ratio. Notice how pleasing this layout is to the eye. Every column and row works in harmony with the other elements in the template to create a balanced, yet interesting, visual structure.

Fixed or Fluid

Because web pages are viewed on a number of screen sizes and resolutions, it's worth considering how the theme will adapt to all of the various options. Most desktop screen sizes are above 1000px wide by 600px tall (after you remove the browser and operating system chrome). Mobile browsers naturally have a lot less screen real estate to work with, though some—like the iPhone—compensate by zooming the entire page out to fit on the screen.

Your theme can have a fluid width—that is, it can adapt itself to the size of the browser window—or it can be a fixed width. There are pros and cons associated with either approach, though fixed-width designs seem to be increasing in popularity as ultra-wide monitors become more prevalent. They're also a little easier to code: no more worrying about your layout breaking at a given window size.

But, as with all design decisions associated with your theme, the layout you pick will depend on your theme's goals and mission statement.

Layout Options

After considering your layout in the abstract, you'll need to select the dimensions for your theme. In most cases a maximum width of 960px is advisable, because it will display on the majority of screen sizes: your theme will be viewable on a monitor with a resolution of 1024x768px, without any nasty horizontal scrollbars. Even if you've chosen to build a theme with a fluid width, you should still start the design phase with a set of dimensions in mind, so that you can establish the default proportions of various elements.

There are a few traditional options from which to pick when considering your layout. The most common ones around are your garden variety two-column and three-column layouts, which adapt well to a number of uses; for simple sites, though, a single-column layout can be effective. Examples of these layouts (in numerical order) are shown in Figure 3.11, Figure 3.12, and Figure 3.13.




new show: All posts view: =

Magritte explained posted by 37 minutes ago * *

new show: All posts view: =

Magritte explained posted by 37 minutes ago * *

Figure 3.11. A single-column layout

J Pixel Craft

Figure 3.12. A two-column layout
Figure 3.13. A three-column layout

These conventional layouts are attractive and functional to boot. However, there's no need to be limited by convention! There's a host of newer WordPress themes that are truly outside of most people's perceptions of a WordPress theme. Figure 3.14 and Figure 3.15 are examples of WordPress themes that use original and unconventional layouts.

Figure 3.14. The Flex Theme utilizes a flexible grid layout
Figure 3.15. Brizk Design's website uses a fixed navigation and a vertically scrolling main body section

Keeping customization in mind, you might also want to plan for multiple layouts and allow your users to pick the one they prefer. You could also provide a few custom page layouts that your users can apply to specific pages on their sites (this will be discussed further in Chapter 7).

The Anatomy of a WordPress Theme

In Chapter 2, we went through the theme planning process and ended up with a sitemap and a few wireframes. Now, with the help of the design principles we've seen in this chapter so far, we'll be turning your wireframes into the actual bits and pieces from which a WordPress theme is made.

But just what are those bits and pieces? Like many other content management platforms, WordPress treats most pages and posts in a very modular way. This means that the sidebar on one page will almost always look like the sidebar on another page. The same goes for the header, footer, and other elements. There are several of these modules that come together to form a complete WordPress theme, and it's important that you understand and address each one in the design phase. In addition, there are a number of specific pages that just about every site will need, and these should be part of your theme: 404 error pages and search results pages, for example.

If you leave one or more of these components undesigned, you will be forced to come up with an appearance for them on the fly when you start coding your CSS; this can often lead to those elements having a poorly defined visual style, or seeming at odds with the rest of your design. By addressing every component in the design phase, you'll ensure that your theme will have a consistent feel that's slick and professional.

A few of the core components of a standard WordPress home page template are shown in Figure 3.16.

The Header

The Navigation Menu

The Feature Box (optional)

Sidebar Widget Sidebar Widget

A Btog Post - "The Loop"

A Btog Post - "The Loop"

Was this article helpful?

0 0
WordPress Cash Machines

WordPress Cash Machines

In WordPress Cash Machines, you will learn over 50 different methods of making money with WordPress.

Get My Free Ebook

Post a comment