UPDATED 2010-09-29

WordPress excerpts, which are not excerpts in the common sense of the word, make a WordPress site easier to browse and its content easier to discover. When also used as META descriptions, good excerpts bring more and better traffic from search engines.

This article looks into the WordPress Excerpt and explains how to use it.

CONTENTS

1. What is the WordPress excerpt
2. Why write excerpts in WordPress
3. How to write excerpts
4. WordPress Excerpt Editor
5. Excerpts as META descriptions
6. Notes, Miscellaneous
7. Links

1. What is the WordPress excerpt

The excerpt in WordPress is a short summary of a post. It is written by hand and it can replace the full post in places where a summary is preferable.

Or, as the Excerpt box in WordPress 2.7 2.8 says:

Excerpts are optional hand-crafted summaries of your content. Learn more about manual excerpts.

In other words, the WordPress excerpt is not an excerpt in the common sense of the word; it is not a part taken from a post but an extra piece of information added to a post, in the same way that tags are added. And, like tags, it is optional. To add an excerpt, you simply write one in the Excerpt box, right under the post editor:

But why bother with writing excerpts?

2. Why write excerpts in WordPress

Because of what happens if you don’t!

The following assumes a WordPress theme that displays excerpts in search results and in author/category/date/tag archives. Not all themes do. For a solution, see WordPress Excerpt Editor, on which more in a while.

2.1. Archive pages and search results

Let’s start with an example:

Say that you search for minimalist+wordpress in this site, op111.net. Among other results you’ll get “Five clean, minimalist themes for WordPress”, along with a brief description:

Five good WordPress themes examined and compared: Basic2Col, Moo Point, Sandbox, Simplish, and Thematic.

Which is the excerpt I wrote. If I hadn’t written one, the first 55 words of the review (that is, the automatic excerpt) would be displayed instead:

UPDATED 2009-02-13. I recently decided to look for a good minimalist theme for op111.net. I did not expect it would be an easy search, and, in a sense, it wasn’t. (Partly because WordPress had been going for some time without a central repository of themes. Now there is one, but it is still young.) [...]

Which one is better for a list of search results? I know!

The drawbacks of the automatic excerpt are obvious, but let me enumerate them for the sake of the argument:

1. The beginning of a piece is usually an introduction, not a summary.
2. Even if it is a summary, 55 words are too many for a list of search results.

On the other hand, by writing a manual excerpt I was able to add a few extra pieces of information to the information provided by the title, and say all I wanted to say, in 13 words and 105 characters.

Even if the excerpt I wrote is not perfect, it can be scanned instantly by the eye. Not only that: Since the other results have excerpts too, the results page is now more appealing and useful as a whole. The same goes for archive pages—archives by date, category, tag, or author—since excerpts can be used there too. See, for example, Category “English” in op111.net

So, in a sense, hand-written excerpts are good navigational devices: They help visitors find easier what they look for. Or, if that does not exist, they let visitors know, so that they don’t click back and forth in vain and get frustrated in the end.

2.2. Result pages in search engines

Most interestingly, this navigational device can be used off-site too!

Let’s start with an example again: Try this search on Google, Live Search, or Yahoo!. You’ll get something like:

It’s a typical SERP item: A title, a URL address and, right in the middle, a short description, which is exactly the excerpt I wrote!

How did Live Search know about that? This text does not appear anywhere in the indexed page. Did Microsoft guess it in some way? No! The answer is simple:

In op111.net excerpts double up as meta descriptions.

Regularly, search engines compile the a short description of a result by putting together bits from the page. But if the page has a META description, and if they think it is a good description and relevant to the search query, they may display that instead.

This means that, to a certain degree, META descriptions let you control how your content is described by search engines. And if a description is good, people are more likely to click on the link.

More on WordPress excerpts as META descriptions in Part 5.

2.3. Summing up the Whys

1. Manual excerpts help visitors navigate a site easier and find good results.
2. Manual excerpts can double as meta descriptions, which are often used by search engines to describe search results. In this way, good excerpts increase and improve traffic from search engines.
3. Therefore, you should write excerpts by hand!

3. How to write excerpts

You should be convinced by now: You’ll never hit Publish again without writing an excerpt first! But how to write one?

Writing good excerpts/summaries is not simple – it’s an art. Writing a decent excerpt, however, only takes basic common sense: What’s the excerpt for? What is its purpose? Answering this question will show us what the excerpt must be like.

PURPOSE OF THE WORDPRESS EXCERPT

To help readers tell at a glance if a page is what they look for.

So, to do that, the excerpt must be:

CHARACTERISTICS OF THE EXCERPT

1. Brief
2. Informative

3.1. How brief

As brief as possible! My rule is to write no more than 160 characters, partly because I use excerpts as meta descriptions too (see Part 5 for that). For English, 160 characters is 25 to 30 words. It may seem little but it’s not, for two reasons:

First, the excerpt is always displayed along with the title. So, for the purpose of offering a summary description these two are a set: title + excerpt. Assuming that a title should be no longer than 70 characters and that the average word length is 5 letters, we have:

( 70 + 160 ) ÷ ( 5 + 1 ) ≈ 38

(We also added 1 space for each word, since spaces count too.)

That’s thirty-eight words in sum! You can almost write a short story in 38 words! :-)

Second, you can say lots of things in 160 characters if you follow good practice. Not only that, but your excerpts will be better as a result:

TIPS FOR CONCISE EXCERPTS/SUMMARIES

• Prefer short words. E.g., write “use”, not “utilize” (unless you mean “utilize”).
• Prefer simple constructs. E.g., say “because”, “since”, or “as”, not “due to the fact that”.
• Prefer verbs to abstract nouns. Abstract nouns are longer and less lively (and also lead to lengthier and clumsier constructions).
• Use adjectives and adverbs sparingly. Does that adjective really need an adverb to qualify it?
• Read over to remove needless words.
• Read over again.

3.2. How informative

As much as possible! The rules I try to follow are two:

First, be honest. Summarize the content accurately and objectively and do not write aggresively promotional copy. Imagine a friend asked you what the page is about. How would you describe it to them in a few words? Use the same description as your excerpt.

Second, complement the title. Since the excerpt is always displayed along with the title, there is no reason to repeat what the title says. Of course, some repetition is unavoidable and it may also be useful, e.g. for emphasis, but, other than that, try to complement the title and to add to it.

TIPS FOR INFORMATIVE EXCERPTS/SUMMARIES

• Describe honestly and accurately. As if you were describing to a friend.
• Complement the title in any relevant aspect; things like:
  • Amount. Simply add more information.
  • Scope. E.g., give the general context for a specific title.
  • Tone. E.g., write a serious excerpt to balance a playful title.
  • Variety. E.g., if a title word has a common variation, use that variation in the excerpt. (To facilitate humans, not to trick machines!)
• Write excerpts last. Then you have a better overview.
• Revisit you excerpts. Even if you got everything perfect the first time, other things may have changed.

To recap, when writing WordPress Excerpts try to be, as much as possible:

1. Brief
2. Informative

Let’s see some tools now.

4. WordPress Excerpt Editor

A default WordPress setup offers one tool to manage excerpts: the Excerpt box. If you are serious about excerpts, you need more. Fortunately, even though the WordPress Excerpt is underappreciated, there are quite a few good plugins for managing excerpts. Part 5 suggests a couple that generate META descriptions from excerpts, while the Links at the end include a couple more.

This part looks at one plugin for excerpts that, in my estimation, offers the most general usefulness:

WordPress Excerpt Editor

WordPress Excerpt Editor does what its name suggests and much more. It is essentially an excerpt manager. Among other things, it lets you:

• Add and edit excerpts quickly
• Add excerpts to pages
• Control the appearance of excerpts
• Display excerpts instead of full content on index pages (search results, tag archives etc.)
• Display excerpts instead of full content on the homepage

If you need to add excerpts retrospectively to a large number of posts, or simply edit a large number of excerpts, Excerpt Editor brings all excerpts, empty and filled-in, together in one place, so that you can edit or add excerpts one after the other. For posts with no excerpt, it shows the first 70 words, to help you start. Once you are finished with an excerpt, you click Save and Excerpt Editor goes to the next one:

It also lets you add excerpts to WordPress pages, which is not possible without a plugin.

If you only need Excerpt Editor for these two features—adding/editing post excerpts and adding/editing excerpts to Pages—, you can deactivate it when you finish and reactivate it the next time you want to add or edit a large number of excerpts. (This is how I use it at present.)

The extended functionality of Excerpt Editor, beyond adding and editing excerpts, is too wide to go over here. There is one feature, however, that can be essential for what we discuss. This is “Replace Posts”:

If your theme does not support excerpts, or supports excerpts poorly, “Replace Posts” lets you define where to show excerpts instead of full content. There are several combinations you can select for that; you can even have the homepage show the latest post in full and display only the excerpt for the rest!

5. Excerpts as META descriptions

5.1. What is a META description

The language in which most webpages are written is HTML or its cousin XHTML. A meta description is an optional set of data in the head of an HTML document that describes the content of the document. “meta” means that this set of data is metadata or meta-information; that is, data about data, or information about information: about the information in the document itself.

A basic XHTML document with a META description looks like this:

Click to see how this document appears in a web browser.

Unlike the title of a page and the text in the body, the meta description is not displayed by web browsers. Browsers understand it, however, as do indexing robots, the programs search engines use to browse the web automatically and index web pages.

When search engines were still young, in the early days of the commercial Web, they used to rely on this description, as well as on the “keywords” meta element, to understand what a page is about and how relevant it is to a query. As a consequence, description and keywords were abused to senselessness by webmasters. Search engines, at least the ones that matter, don’t do that any more. They do not rely on description and keywords for indexing and ranking. However, they still use description, very frequently, for what its original purpose was: Description!

The reason why search engines are interested in the meta description is the same reason why web authors should use it. The Official Google Webmaster Central Blog explains:

The quality of your snippet — the short text preview we display for each web result — can have a direct impact on the chances of your site being clicked (i.e. the amount of traffic Google sends your way). We use a number of strategies for selecting snippets, and you can control one of them by writing an informative meta description for each URL. [...]

We want snippets to accurately represent the web result. We frequently prefer to display meta descriptions of pages (when available) because it gives users a clear idea of the URL’s content. This directs them to good results faster and reduces the click-and-backtrack behavior that frustrates visitors and inflates web traffic metrics. Keep in mind that meta descriptions comprised of long strings of keywords don’t achieve this goal and are less likely to be displayed in place of a regular, non-meta description, snippet. And it’s worth noting that while accurate meta descriptions can improve clickthrough, they won’t affect your ranking within search results.

SOURCE: Raj Krishnan, Google Snippets Team, in Improve snippets with a meta description makeover, 27 September 2007.

Given the source of the quotation, I don’t think I need to add anything. — I’ll just cite one more example of search results:

Searching for “clean minimalist themes” in Google returned, among other results, two op111.net pages. Both have meta descriptions. Google seems to think that the descriptions are descriptive enough and relevant enough to the search query, so it uses them. If these pages did not have meta descriptions, Google would make descriptions by extracting relevant bits from the content and putting them together.

5.2. Using WordPress excerpts as META descriptions

You can write meta descriptions for your posts in WordPress by using a plugin. But if your posts already have excerpts, there is no reason to do that. Since the WordPress excerpt and the HTML meta description are about the same in purpose, you can use your excerpts as meta descriptions!

In the WordPress logic, this is simple. In the same way that, for example, we tell WordPress to get the post_title of a post from the database and use it as a title for that post, we can tell WordPress to get post_excerpt and use it as a meta description (in addition to using it as an excerpt). Only we can’t do that in a default setup. We need a plugin. Here are two for you:

Platinum SEO

Platinum SEO Pack does this automatically. Once you install it, all posts with excerpts will also have meta descriptions. You don’t need to do anything else. (The same is true for All in One SEO Pack, on which Platinum SEO is based.)

If a post has no excerpt, Platinum SEO will use the first 160 characters of the post as a meta description. This is the option “Autogenerate Descriptions”, which is enabled by default:

My advice is to disable “Autogenerate Descriptions”. If you have posts without excerpts, let the search engines piece together descriptions for them. They do a better job.

If you want to use a meta description different from the excerpt for a particular post, go to the post editor and write one in the SEO Platinum Pack box, in the Description field.

Headspace2

HeadSpace2 allows finer control of the head of HMTL pages and can do that and much more, but does absolutely nothing by default. (Which is one reason why it is among my favourite WordPress plugins.) Setting it to generate meta descriptions from excerpts is easy:

1. Go to HeadSpace Settings › Page Settings
2. Click to edit the Posts & Pages section
3. Type %%excerpt_only%% in the Description box
4. Save your changes

This tells HeadSpace2 to generate meta descriptions for posts and pages that have excerpts.

To use a meta description different from the excerpt for a particular post or page, simply go to the page/post editor and write a meta description for that page or post:

Last, HeadSpace trims meta descriptions to 150 characters. You can change this value in HeadSpace Settings › Page Modules › Page Description. (I use 192.)

Themes that generate META descriptions from excerpts

If WordPress plugins can take an excerpt and use it as a meta description, so can WordPress themes. One theme that does this is Hybrid:

Another is Thematic. Thematic does this by default and, since version 0.9, does it the smart way too: It makes meta descriptions only for posts that have a manual excerpt.

5.3. Length of META descriptions

Since META descriptions are written for search engines, what matters here is what search engines do. At this writing (February 2009), Google seems to use up to 160 characters to describe search results, Yahoo! up to 170, and Live Search up to 180:

LENGTH OF DESCRIPTIONS (SNIPPETS/ABSTRACTS) IN SEARCH ENGINES IN FEB 2009

• ≤ 160 characters in Google
• ≤ 170 characters in Yahoo!
• ≤ 180 characters in Live Search

So, if you want your descriptions to be displayed in whole when picked up by search engines, do not exceed 160 characters. For English, that’s about 25–28 words.

For a quick check-up of your meta descriptions, you can use the Diagnostics tool in Google Webmaster Tools. It will tell you whether you have too long, too short, or duplicate descriptions, how many of each, and it will point you to the pages that need attention:

6. Notes, Miscellaneous

6.1. Excerpts for Pages

WordPress supports Page excerpts internally (the database field that stores them is exactly the same as for posts: post_excerpt) but offers no interface to add excerpts to Pages. WordPress Excerpt Editor makes no such distinction and lets you add excerpts to both posts and pages. If you create pages often, another plugin you may find useful is PJW Page Excerpt: It adds an Excerpt box to the page editor, same as the Excerpt box of the post editor.

6.2. Teasers

The “teaser” is another useful device in WordPress, often confused with the Excerpt. You make a teaser by inserting the more tag in a post. (The More button is to the left of the spellchecker.) Then, the part above the more tag becomes a “teaser” and is displayed by default on the front page in lieu of the full content, along with a Read More link.

The relation between the Teaser and the two Excerpts, manual and automatic, is this: When a post has no manual excerpt, WordPress looks for a teaser and uses that instead. If the post has no teaser either, WordPress uses the first 55 words as an excerpt.

6.3. That’s it!

The WordPress Excerpt is a narrow subject but rather confusing for it scope. I tried to make some sense of it by focusing on what seemed essential to me and without going into too much detail. If you think there is still too much detail, or not enough detail, leave a comment to say so. If you are still perplexed about the excerpt that’s not an excerpt, please ask. In any case, feel free to say what you think. Your contribution is appreciated.

Thanks for reading!

δκ

7. Links

7.1. General

Template Tags/the excerpt

Documentation for the function the_excerpt() in the WordPress wiki.

Wanted: Excerpt Exacter

“I need a WordPress plugin that won’t let me publish a post until I’ve filled in the excerpt field. Anyone got one?” By Eric Meyer. — 2009-10-05: See Autofields below.

WordPress Now Available (v0.70)

Release notes for the first public release of WordPress, v0.70, in May 2003. The Excerpt is among the highlighted features: “Manual Excerpts — This allows you to handcraft summaries of your posts to appear in your RSS feed and other places.”

7.2. WordPress plugins for excerpts

All plugins below can be installed from the WordPress Dashboard: Go to Plugins › Add New, look up the plugin name, and click Install.

Advanced Excerpt

Tweaks the excerpts that WordPress generates automatically when the Excerpt field is empty.

Autofields

Autofills the Excerpt field (optionally) and also warns about missing excerpt (optionally).

HeadSpace2

Powerful metadata manager for WordPress. Can be used for SEO and for much more!

Platinum SEO Pack

A WordPress plugin for easy search-engine optimization. (Based on All in One SEO Pack.)

PJW Page Excerpt

Adds an Excerpt box to the page editor, same as the one in the post editor, to add excerpts to pages.

WordPress Excerpt Editor

An excerpt editor, formatter, and manager for WordPress.

7.3. “description” META element

Google’s Search Engine Optimization Starter Guide

Good concise (22 pages) SEO guide in PDF format, by Google. It has a section on the “description” element.

Google Webmaster Tools

A set of useful tools by Google. Among other things, they analyze your META descriptions and tell you if there is anything wrong with them.

Making the Most of Meta Description Tags

How to write good meta descriptions, by Rand Fishkin at SEOmoz.

Video: anatomy of a search snippet

Matt Cutts of Google explains on video how descriptions are generated in Google results. (English and Korean captions available.)

Changes

2010-09-29

Several edits and corrections here and there.

2009-10-05

Added Autofields to list of plugins for excerpts.

2009-06-14

Corrected: Platinum SEO and All in One SEO cut meta descriptions at 160 characters, not 150.

Several other edits.

2009-03-03

Added Thematic to themes that generate meta descriptions.

Add to del.icio.us

© 2009 op111.net | Permalink

... to 20 questions, in alphabetical order.

How do I...

1. Add a category link to the navigation bar?
2. Add a favicon to my site?
3. Add a Home link to the navigation bar?
4. Add CSS or JavaScript to individual pages/posts?
5. Back up my WordPress data?
6. Change default category?
7. Change fonts/colours/layout in my theme?
8. Delay the delivery of my feeds...
9. Disable the visual editor? (WYSIWYG)
10. Exclude a page from the navigation bar?
11. Find good WordPress themes?
12. Make a post stick to the front page? (Sticky)
13. Make links open in a new window?
14. Make my WordPress site faster?
15. Optimize my site for search engines? (SEO)
16. Show more/fewer posts in archives/searches etc.?
17. Stay updated of simple solutions for WordPress?
18. Tag pages and have pages appear in tag results?
19. Use “asides” or “miniposts” in my blog?
20. Use PHP code in my posts and pages?

1. How do I add a category link to the navigation bar?

Top

1. Install and activate Page Links to
2. Make a new page with the title you want to appear on the menu. (The page does not need to have content, and its permalink doesn’t matter.)
3. Scroll down and enter the URL for the category you want to link to —e.g., http://example.net/category/food/— in the “Point to this URL” box
4. Scroll up and click Save

2. How do I add a favicon to my site?

Top

What is a favicon? — The tiny website icon/logo displayed in the location bar, bookmarks, and tabs of modern browsers.

1. Make a 16x16 icon.
2. Convert it to the ICO format:
   • Dynamic Drive- FavIcon Generator — free good online generator/converter
   • GIMP — free, open-source image editor for all platforms
   • IrfanView — free image viewer and converter for Windows
3. Make sure it is named favicon.ico
4. Upload it to the home directory of your site. E.g.: http://op111.net/favicon.ico
5. Install and activate Extended Options
6. Go to Dashboard, Settings, Extended, Favicon Meta Links
7. Select “Favicon in root directory”
8. Scroll down and click Save Changes

3. How do I add a Home link to the navigation bar?

Top

• Add any link to your WordPress navigation menu with Page Links To

4. How do I add CSS or JavaScript to individual pages/posts?

Top

1. Install and activate HeadSpace2
2. Go to Dashboard, Settings, Headspace, Page Modules
3. Enable the module you need, JavaScript or Stylesheets, if it is not enabled (by default both are, under Advanced)
4. Go to any page or post
5. Scroll down to: HeadSpace Meta data
6. Click “advanced” to reveal advanced modules
7. Link your stylesheet or JavaScript file
8. Scroll up again and click Save

Alternatively, you can enter CSS or JavaScript as “Raw data” — this module is not enabled by default:

5. How do I back up my WordPress data?

Top

Many hosts do this automatically. To do it yourself, you need to know where your data are.

A. Database. — The database stores all text —posts, pages, comments, tags, etc.— and all settings of plugins and of WordPress itself. There are many ways to back up a database, and there is also a convenient plugin: WordPress Database Backup. After installing it, you can make copies of your database on demand, and/or set it to send copies to an e-mail address at regular intervals.

B. wp-content/uploads. — This directory has all files you upload. If your host has cPanel, you can use this to make copies. You can also use an FTP client: connect to your FTP account, navigate to the directory wp-content, and download the directory uploads to your computer.

• WordPress Database Backup
• Cyberduck — an open-source FTP client for Mac OS X
• FileZilla — an open-source FTP client for Windows and Linux
• FireFTP — a cross-platform FTP client for Firefox

I connected to my FTP account with FireFTP, and navigated to the directory wp-content. I’m about to download the directory uploads. It has all images I upload, and also thumbnails generated automatically by WordPress.

6. How do I change default category?

Top

1. Make a category to use as default (I use “Misc”)
2. Go to Dashboard, Settings, Writing, Default Post Category
3. Select your default category
4. Scroll down and click Save Changes

7. How do I change fonts/colours/layout in my theme?

Top

If your theme doesn’t have options (few do), make a “child theme” and add your changes to it. It’s easy!

• How to make a “child theme“ for WordPress. A pictorial introduction for beginners

8. How do I delay the delivery of my feeds...

Top

... so that I don’t get embarrassed by stupid mistakes that I catch right after I click Publish?

• Feed Pauser

Feed Pauser is a young plugin, still in beta, but I’m keeping an eye on it. :-)

9. How do I disable the visual editor? (WYSIWYG)

Top

That’s easy but sometimes you miss it. :-) In your profile, unselect “Use the visual editor when writing”:

10. How do I exclude a page from the navigation bar?

Top

Install and activate “Exclude Pages”. It will add an option to not include individual pages in the nagivation bar and in other user menus, like the Pages widget.

• Exclude Pages

11. How do I find good WordPress themes?

Top

I can suggest eight:

• Five clean, minimalist themes for WordPress
• Another three clean, minimalist themes for WordPress

12. How do I make a post stick to the front page? (Sticky)

Top

Is this urgent? If you can wait, it will be part of WordPress 2.7, scheduled for November 2008:

13. How do I make links open in a new window?

Top

I believe visitors can do that for themselves, if they want. :-)

14. How do I make my WordPress site faster?

Top

• Remove plugins you don’t use or need.
• Compress your images: smush it!
• Compress everything! This is done server-side, but at least you can check with your host or see for yourself whether your server uses compression: YSlow
• Use WP Super Cache — a plugin that caches the dynamic PHP output of WordPress to static HTML pages, which are served much faster.
• Move to a faster server.

More can be done to accelerate a site, but most of it is the business of the server administrator (and, in the case of WordPress, of WordPress developers and plugin developers). If you think your site is too slow, run YSlow to check. Its reports are always interesting. Here’s is what I found recently by running YSlow on a WordPress site that is always very slow when I visit it with empty cache. (I removed the site’s address.)

A long list of JavaScript files served uncompressed... The largest is Prototype, the JavaScript framework. Let’s see what would be the gain of compressing and minifying prototype.js:

Minification is the process of removing bits essential to humans but unneeded for execution, such as comments, white space, and line breaks.

prototype.js                        124 kB
prototype.js minified                72 kB
prototype.js gzipped                 28 kB
prototype.js gzipped & minified      21 kB

That’s right! The numbers are not fictitious! Since prototype.js is a large file, the gain in absolute size is impressive. But even for smaller files, numbers add up and the difference is felt by new visitors (whose browsers don’t have the files cached), even on fast connections.

15. How do I optimize my site for search engines? (SEO)

Top

Optimize it for humans, and it will be optimal for engines too:

1. Publish good material.
2. Publish good material well! Standards for online content authors
3. Link to good material.

OK, maybe that’s not the complete truth, :-) but it’s the truest you can get in a short answer. To quote Michael Torbert, maintainer of “All in One SEO Pack”, the most popular WordPress plugin currently:

The biggest thing, of course, for SEO [...] is content. That will never change and it’s become increasingly, more and more important [...] as the search engines get better and better determining what is on your page and parsing through all that data. So, having good content is the key.

Michael Torbert, AKA hallsofmontezuma, in: “All In One SEO To Go”, 11 October 2008. Podcast. “WordPress Weekly episode 24”. 32:15–32:36. weblogtoolscollection.com/archives/2008/10/11/all-in-one-seo-to-go — Also interesting reading, from the original author of All in One SEO Pack: Modern Day SEO - What Really Counts

All that said, search engines can always use a little help to index a website better. There are two very popular WordPress plugins people use for this.

“Google (XML) Sitemaps Generator for WordPress” is a must-have. It automates the generation of an XML sitemap, a document recommended by the search companies themselves.

An XML sitemap tells web crawlers (also known as “spiders”, “robots” or just “bots”) where to find the content to be indexed. So, everything is indexed, even pages with no links, internal or external, pointing to them. An XML sitemap helps crawlers in other ways too. For instance, when a crawler sees the same content repeated in the home page and in the permalink of an individual post, it does not have to work too hard to decide which to give more weight to: it just looks at the XML sitemap, and learns that the main and permanent location is the permalink.

XML sitemaps and sitemap pages in websites are DIFFERENT things. The former are unstyled XML documents meant for web crawlers. The latter provide an index, an overview of the site’s content, for human visitors.

“All in One SEO Pack”, the other very popular SEO plugin, does various kinds of optimization. One is similar in purpose to XML sitemaps: It adds noindex tags (“do not index this”) to pages that duplicate content (category pages, tag pages, etc.), so that crawlers can work better.

It can also rewrite page titles, add meta descriptions, and more — see its page for details.

As far as I understand (not very far), the benefit of such optimizations is difficult to measure (the variables are too many), but, in any case, “All in One SEO Pack” can do no harm.

• Google (XML) Sitemaps Generator for WordPress
• All in One SEO Pack

Both plugins work fine in their default settings. Just install and activate.

16. How do I show more/fewer posts in archives/searches etc.?

Top

1. Install and activate HeadSpace2
2. Go to Dashboard, Settings, Headspace, Site Modules
3. Click the Edit icon next to “Page Counts” and enter your values
4. Tick the box to activate the module

17. How do I stay updated of simple solutions for WordPress?

Top

May I suggest:

• Get new op111.net posts by RSS » English and Greek
• Get new op111.net posts by RSS » English only

18. How do I tag pages and have pages appear in tag results?

Top

1. Install and activate HeadSpace2
2. Go to Dashboard, Settings, Headspace, Page Modules
3. Make sure the Tags module is enabled
4. Tick “Pages appear in tag archives”

19. How do I use “asides” or “miniposts” in my blog?

Top

• Add the feature yourself: http://codex.wordpress.org/Adding_Asides
• Use a theme that has it: Tarski and K2 are two.
• Use a plugin:
  • MiniPosts2 — Used in op111.net.
  • AsideShop — Haven’t tried it but seems good.

What are “asides”? — Short posts displayed differently than the rest.

20. How do I use PHP code in my posts and pages?

Top

• Exec-PHP — executes PHP code in your posts, pages, and text widgets

A few tips that may save you trouble or troubleshooting when using Exec-PHP (all from the detailed documentation):

1. In your profile, disable the visual editor
2. In Dashboard, Settings, Writing, unselect “WordPress should correct invalidly nested XHTML automatically”
3. By default only code by the admin is executed — but see no. 4:
4. Read the Security Information in Dashboard, Settings, Exec-PHP

Notes

My thanks to Philip for his help.

And my thanks to you for visiting op111.net! — For any suggestions, corrections, questions etc., feel free to post a comment. You are most welcome.

Add to del.icio.us

© 2008 op111.net | Permalink

The last review resulted from my search for a good minimalist theme for WordPress. I found what I was looking for, but the search continues, now driven by curiosity. This time I review three themes. While all are definitely clean, two cannot be accurately described as minimalist, at least in their default setup. However, as you will see, thanks to the options that they offer, they can be made as minimal or as maximal as you wish.

The general requirements were the same as in the last review. The number of themes was also going to be the same (5), but I excluded two, both for the same reason: they use a global CSS rule (universal selector) to reset paddings and margins, and then leave HTML elements unstyled.

This was a surprise to me — in one of the two themes more of a disappointment, in fact, as it is among the best I have tried. That was not the first time I saw global CSS resetting with HTML elements left unstyled, but it was the first time in a theme I liked. Hence the long comment...

If you feel you don’t know what I’m talking about, you may want to scroll down to the reviewed themes. If you are curious, I tried to put together a compact explanation.

Universal CSS reset and HTML elements left unstyled...

COMPACT EXPLANATION

Each web browser applies some default styling to HTML elements (headings, paragraphs, lists, etc.), but not all browsers apply the same defaults. To deal with this issue and to achieve uniform rendering across all browsers, many web designers use a technique called “CSS reset”: In their stylesheets, before doing anything else, they reset values of attributes for several HTML elements. Then, they restyle the elements one by one.

Two styling attributes whose values are always reset (set to zero) in this technique are margin and padding. The two themes I left out reset the values of just these two attributes, margin and padding, not for selected elements, but for every HTML element, by using a “universal selector” (a wildcard character). Then, they restyle only some elements, leaving the rest with no margins and paddings. The result can be seen below:

An illustration of why two themes were excluded. On the left, paddings and margins for the definition lists (here used for link lists) and for the h4 heading are left to the discretion of the browser. Only the top margin of the heading is defined (1.5em). The right screenshot reproduces what the two themes did to the definition lists and to the h4 heading.

Once I saw what the two themes did to my text, I lost all inclination to review them.

I know this might seem like nitpicking to some and not a serious reason to exclude good themes from a review. How many WordPress users care about h4 headings or have even heard about HTML definition lists? In fact, definition lists are nowhere to be found int WP editor, not even in its “Kitchen Sink”. So, why should a theme designer care about them and why is this valid criticism? — I thought about this, and I concluded that it is not relevant:

WordPress is a flexible universal publishing system. You can publish just one link or one photograph one day, and the next day copy a long article from your text editor, marked up in XHTML with every element defined in the specification, paste it into the WP text area, type a title and click Publish. WordPress does not say: “You should only use a specific subset of (X)HTML or your content will get scrambled.” It accepts and handles well everything valid.

This is what I like most about it: It does not restrict you. You can do whatever you want with it, it is easy to use at either end and works well at either end.

This basic but universal functionality of WordPress should be preserved by themes, whose raison d’être is to enhance what is offered by default. If, instead, a theme carelessly removes basic functionality, then it is not acceptable. This is how I see it.

Interestingly, one of the themes is hosted on wordpress.org (the other is not, because of incompatible licencing), which produces an oxymoron: The wordpress.org section named Extend hosts themes that remove basic functionality taken for granted in any default WordPress installation...

END OF COMMENT

The three themes

Following are the three themes that did not misbehave during the review. :-p

0. Common features, General notes

• All three themes are published under the GNU GPL, the same licence used by WordPress.
• All offer nice printing (Atahualpa by means of an included plugin).
• All offer an options page (see screenshots — many interesting options).
• All offer alternative layouts.
  • Atahualpa: 3 or 2 col., flexible width, adjustable-width sidebars, removable/adjustable header, and more.
  • PlaintxtBlog: 3 col., flexible width, sidebars left or right (not on either side).
  • Tarski: 2 col., fixed width, sidebar left or right, bottom widget area, removable/adjustable header.
• All use text-transform:uppercase — Tarski and PlaintxtBlog extensively so. I commented on this typographic effect in my last review, but you are probably not interested unless text-transform:uppercase is not designed for your language or unless you have aesthetic objections to the extensive use of block capitals.
• PlaintxtBlog and Tarski offer three page templates each. (Atahualpa supports the default page for archives.)
  • In PlaintxtBlog they are: Archives, Links and Sitemap.
  • In Tarski they are: Archives, Links and Tags.

Most screenshots are from Firefox for Linux. My Linux desktop had none of the fonts specified by the themes, so Firefox used a replacement font, the same in all instances (Liberation by Red Hat), neutralizing font preferences and differences.

1. Atahualpa

Home: wordpress.org/extend/themes/atahualpa
Demo: wp-themes.com/atahualpa
By: BFA Webdesign
Characteristics: 3 or 2 col., rotating headers, SEO, easy and extended customizability
Version reviewed: 2.21

While not exactly beautiful, Atahualpa is attractive. Its attractiveness comes largely from its partly opaque, rotating header images, which, like almost anything in it, are fully customizable: You can adjust opaqueness, add images via FTP for greater variety, overlay the site’s title, remove all images but one for a static dispaly, remove them all, or just unselect the option.

But what attracted me most to Atahualpa is its pragmatic, down-to-earth approach: everything it does or offers seems to be of good practical value. And, while normally I would dislike so many options, I liked them in Atahualpa for three reasons: 1. they all made sense; 2. they were clearly and concisely explained (see screenshot — I enjoyed reading the explanations); 3. they allow you to adapt the theme’s looks and functionality with a few clicks (see third screenshot for an example).

A great bonus of Atahualpa is the four included plugins. They are among the most popular WordPress plugins, but normally three of them require editing of WordPress files. In Atahualpa all you have to do is activate them.

NOTE. I was sceptical at first about the inclusion of plugins, because I thought they were modified. So, I run a comparison with the files as originally distributed and it only showed differences for WP-PageNavi (I have no idea what that could mean in practice). Subscribe to Comments, WP-Email and WP-Print were identical. If you, like me, hesitate to use a modified plugin (what if an update breaks it? does it even support the automatic update mechanism?), WP-Email and WP-Print working out of the box is still a great bonus. (Subscribe to Comments works out of the box anyway.)

The site of Atahualpa seemed disorganized and confusing to me. (This is why the links are to wordpress.org.)

CONS: Site disorganized. Does not honour date format preference.

WARNING. The Atahualpa options screenshot is huge! 1011×5613 px (635 kB).

Atahualpa may be unmatched in the number of options it offers. Explanations are very clear.

Atahualpa stripped down to a headless layout. The transformation took a couple of clicks. What was missing was a link to the home page of the test site (demetris). I used the widget “Text” (a default WordPress widget) to make one and added it to the top of the left sidebar. The screenshot is from Firefox for Windows. The font is Corbel (available to select in Atahualpa’s options).

2. PlaintxtBlog

Home: www.plaintxt.org/themes/plaintxtblog
Demo: demo.plaintxt.org/?wptheme=plaintxtBlog
By: Scott Wallick
Characteristics: 3 col., all-white, flexible width, options, microformats
Version reviewed: 4.6.1

As I was looking again at PlaintxtBlog for this review, I was wondering why I didn’t choose it for op111.net the first time I saw it. I think I found the answer: I was confused by the choice offered in Scott Wallick’s site. While the Sandbox theme is more than sufficiently distinguished from any other WordPress theme, the differences among the other themes do not, in my opinion, justify five (5) different offerings. I think a little consolidation could help easily confused fellows like me.

Other than that, judged on its own merit, PlaintxtBlog is a model minimalist theme: forward-looking, fully functional and clean. In its author’s words: “PlaintxtBlog is [...] ideal for customization, [...] light yet rich. An ideal theme for those wanting focus solely on the content.” Its options page is not as rich as the other two here, but anything much larger would probably be out of character. (In any case, an options page is always a bonus; not many themes offer this.)

Something I particularly liked in PlaintxtBlog was the Sitemap template, which, in one page, displays lists of:

1. All pages
2. All posts
3. All montnly archives
4. All category archives
5. Most common tags

As a visitor, I always appreciate sitemaps in sites.

Something else I liked was the option to select font, but I would prefer a wider selection, not only “web safe” fonts. (In Atahualpa you can also select some of the Microsoft ClearType fonts.)

CONS: Sidebars may be too narrow for some kinds of content (their width is not adjustable).

PlaintxtBlog: The two tiny RSS icons add a nice touch of colour to the all-white interface. I did not like the styling of forms and buttons (the look seemed somewhat dirty to me).

3. Tarski

Home: tarskitheme.com
Demo: wp-themes.com/tarski
By: Ben Eastaugh and Chris Sternal-Johnson
Characteristics: 2 col., options, bottom widget area, styles, hooks API
Version reviewed: 2.3

Not many themes are like Tarski. To put it this way, I would be comfortable choosing it even without knowing what it looks like: It has been localized in about twenty languages, it has a proper website, proper documentation, proper changelog (and also a roadmap), proper release notes, legacy downloads, a forum, even a dedicated page acknowledging people who have helped in any way in its development.

If I chose to use it, I would certainly modify its fonts, but that’s not important. What is important is Tarski’s quality as a project, its options, its features and its extensibility. You can see the options in the screenshot below. What I liked best was Asides/Miniposts and the option to add a category of links to the navigation bar.

Among its other features, I found most interesting the bottom widget area, which is divided in two parts (see third screenshot). This brings the total number of widget areas in Tarski to four. (In Tarski, posts and pages can have different widgets than index pages.) However, when not used, the bottom widget area has a display issue: its double top border remains visible, which results in two double borders (one for it and one for the footer) encompassing an empty space.

As for customization, it is possible in two main ways in Tarski:

1. An “alternate style”. — Alternate styles in Tarski all like child themes. They inherit everything from the main style and their rules override the equivalent rules of the main style.
2. Its hooks API, which can be used to add content, navigation etc. to sections of pages: code.google.com/p/tarski/source/browse/trunk/app/api/hooks.php

CONS: Nothing really. (I had put something about Times New Roman here but then removed it.)

If you have ever used a web browser, you must have seen the default Tarski with its default artwork. See Tarski on the left with no artwork at all (option “Blank Header”) in the alternate style “Polar”. On the right is Tarski’s options page; click to see a feature on the right bottom corner. — If you want a headless Tarski, opposite that, under Miscellaneous, unselect the options “Display site title” and “Display site tagline”.

On the left is Tarski’s bottom widget area, divided in two parts: one part is aligned with the sidebar, and the other with the main column. The last screenshot was taken in Windows. I set all fonts to Candara and fixed an alignment issue that bugged me. Notice how an instance of what can be called “overstyling” produces a blemish: the blog description (“Εργαστήρια δοκιμών του op111.net”) is in smaller text and in different colour than the title. Does it also need to be italicized?

Still haven’t found your minimalist theme? It may be waiting for you here!

Thanks for reading!

Links

THE 3 THEMES AGAIN

Atahualpa, Home | PlaintxtBlog, Home | Tarski, Home
Atahualpa, Demo | PlaintxtBlog, Demo | Tarski, Demo

OTHER LINKS

en.wikipedia.org/wiki/Liberation_fonts

The family of fonts seen on the Linux screenshots. (Liberation fonts were accepted into Debian in July 2008. I suppose it won’t be long now before they find their way into the host of distributions based on Debian.)

extralogical.net

The site of Ben Eastaugh, creator of Tarski. It uses a customized Tarski, very minimal and very clean.

meyerweb.com/eric/tools/css/reset

If you want to learn more about css-resetting, start from this page by Eric Meyer.

wordpress.bytesforall.com

The home of Atahualpa and other themes by the creator of Atahualpa.

Add to del.icio.us

© 2008 op111.net | Permalink

Given their power and how easy they are to use, “child themes” are a surprisingly little-known feature of WordPress. I wish I knew about them the first time I looked for themes. I found then a number of designs I liked but I ended up discarding them all because of a few issues I saw in each; things like small line height, justified text, or a careless selection of fonts.

Now, such issues are easy to fix: With an elementary knowledge of HTML and CSS and a reference at hand, you spot the rules in the stylesheet, change a value or two, then save your changes. But I never liked this option: it means that you have to keep track of your changes, remember about them, and reapply them every time the theme is updated. So I settled for a theme that got most of the details right but which I did not like that much... Then I learned about child themes!

If you have found yourself in a similar position, this introduction is for you. It will not teach you how to write CSS — it just explains, with a few examples, how to make a child theme and with it change small things in a WordPress theme you like.

With a bit of reading and experimentation, you can move quickly beyond the basic examples of this introduction and make drastic changes — at a more advanced level, and given a good parent theme, the style and layout of a WordPress site can be changed completely by using only the stylesheet of a child theme, without touching one line of PHP code or HTML markup!

CONTENTS

1. How child themes work in WordPress
2. How are themes modified without being modified?
3. What you need to make a child theme
4. Assembling a child theme: the framework
5. Using Firebug
6. Adding CSS rules to your child theme
7. Putting it all together and activating the child theme
8. Notes
9. Links to tools and resources

1. How child themes work in WordPress

• You make the child theme: just one directory and one CSS file in it.
  • You may also use a functions.php file (outside the scope of this introduction).
• The child theme, in its CSS file, declares its parent, i.e., the theme whose templates it uses. It inherits all files of the parent except the stylesheet (which can be explicitly imported). Once everything is in place, the child theme:
  • Is activated like any other theme, via the administration panel.
  • Behaves exactly like its parent, in everything. E.g., if the parent has an options page, the child will have it too.
  • Looks exactly like its parent, plus or minus any changes you make: you can modify everything beyond recognition or just change one tiny, unnoticeable detail.
• You don’t have to keep track of your modifications or worry about losing them the next time the parent theme is updated, since you haven’t touched the parent theme. Your changes live in their own file(s) within their own directory in wp-content/themes.

2. How are themes modified without being modified?

For styling, this is possible thanks to the way Cascading Style Sheets work. In this particular case, the stylesheet of the parent is imported (by an explicit instruction) into the stylesheet of the child. Then, you add your own rules to the child’s stylesheet. When a rule you added conflicts with a rule of the parent, here is what happens — quoted from the CSS 2.1 Specification:

[I]f two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself. — SOURCE

Let’s see an example. The parent stylesheet says:

body {
    color: #3f3f3f;
}

It means gray text (on white background) for the whole body of the HTML document. But you prefer black. So, into the stylesheet of the child you put:

body {
    color: #000000;
}

Now, obviously, the two declarations conflict. But, while they are equal in everything, they are different in this: The parent’s comes from an imported stylesheet, while the child’s is in the stylesheet itself. — The child wins!

SYNTAX OF CASCADING STYLE SHEETS

As you can see in the example above, the syntax of CSS is simple and the naming scheme intuitive:

There are rules. Each rule has a selector, for example body or p(aragraph), and a declaration block. The declaration block is enclosed in braces and it can contain several individual declarations, which are separated by semicolons. Each declaration has a property (in the examples above, color) for which a value is specified. That’s it!

3. What you need to make a child theme

NECESSARY

• FTP access to your site (sites on wordpress.com don’t offer this) and an FTP client.
• A text/code editor (like the Windows Notepad, but preferably better).
• A parent theme. In the examples I use Basic2Col: wangenweb.com/wordpress/themes/basic2col — Most likely, you will be able to follow the examples by using any good theme as a parent (you’ll just have to adapt some names in the example stylesheet). You may also want to look at this review: Five clean, minimalist themes for WordPress - op111.net — all 5 themes work well with child themes. (All tested!)

RECOMMENDED

• Firebug, a Firefox extension.
• A reference on HTML tags and CSS properties. I use the ones by HTML Dog.
• A CSS validation service to be sure that your CSS code is valid.

Before continuing, please look at the links at the end. They include recommended tools (for all platforms), resources, and a few good references. I find it essential having a couple of references open in tabs when I play with HTML and CSS.

4. Assembling a child theme: the framework

4.1. Step 1

Open your text editor, make a new file, and paste the following into it:

/*
Theme Name: Kid
Theme URI: http://op111.net/
Description: Child Theme for Basic2Col
Author: Demetris
Author URI: http://op111.net/
Template: basic2col
Version: 0.1
*/
 
@import url("../basic2col/style.css");

Adapt the two URIs (Uniform Resource Identifiers) and the Author’s name, and save the file as style.css somewhere convenient.

NOTES

1. The name of the stylesheet —style.css— is important. The child theme will not be recognized by WordPress unless a file with this exact name is found in its directory.
2. The part between /* and */ is how WordPress identifies the theme, in order to display it in the administration panel. This part is ignored by browsers, since everything between /* and */ is a comment in CSS syntax.
3. The Template line is important, since it declares the parent theme. The parent must be declared by the name of its directory exactly as you see it, case-sensitively — not by the name of the theme. Often the two are different.
4. The @import rule must precede all other rules. That is, any styling rules you add must be placed after it. (If you put rules before it, it will be invalidated, and the parent stylesheet will not be imported.) — What this rule does is giving an instruction to the browser when a page is viewed: “Go to the parent directory [the meaning of the double dot in directory browsing], get into the directory basic2col, get the content of style.css and @import it here.”

4.2. Step 2

Make sure that the parent you declared is present in your installation. If it is not, upload it to the themes directory.

In the same directory —wp-content/themes— make a new directory and name it “kid” — or anything you like; “kid” is just the name I use in the examples.

Technically, your child theme is ready. You can upload style.css to the directory “kid” and activate the child theme from the administration panel — but the child theme will look exactly like its parent, since it inherits everything from the parent without adding anything of its own.

Now you can start adding rules to the child’s stylesheet. Finding the rules and values that do what you want can be a pain sometimes, but there is a tool that makes all this a breeze. Let’s have a quick look at this tool:

5. Using Firebug

Install Firebug in Firefox: getfirebug.com — Now see the next 3 steps on how to use it to inspect CSS information and edit it live.

Right-click on an item on a page and select “Inspect Element”. Here I’m looking for the styling of some fixed-width text:

A panel emerges with all the information you may need. Now you can inspect:

Click on a value to edit it. Once you are satisfied with the result, copy the value and paste it in the stylesheet you are preparing.

Hitting Escape cancels editing, while Enter makes the change stick until the next page refresh. This means that you can inspect and edit items, one after the other, and have the combined result of your changes updated live the whole time.

6. Adding CSS rules to your child theme

The theme I use as a parent in the examples is Basic2Col. I selected it because it is one of the themes made with child themes in mind, and, for this reason, very easy to work with: wangenweb.com/wordpress/themes/basic2col

6.1. Changing the style of links

Suppose you want to change the dark red of hyperlinks in Basic2Col. You prefer green. Right-click on a link to inspect its styling:

Firebug reveals that this dark red is #660000 — that is, in decimal, rgb(102,0,0).

Stylesheets understand both hexadecimal and RGB chromatic notation. In RGB notation you can use either absolute values or percentages. They also understand some colour names. So, white and #ffffff and rgb(255,255,255) and rgb(100%,100%,100%) are all valid and equal in CSS syntax.

Right-click on the value and start typing. In the screenshot I’m starting from the green with the same saturation and brightness, that is, #006600.

Firebug automatically updates the display as the chromatic value is edited.

After trying all kinds of green, you finally settle for the one you started with: #006600. (Hypothetical here but happens all the time!) Add this to your stylesheet:

a:link, a:visited {
    color: #006600;
}

Now, you don’t know this yet, but, as soon as you activate the child theme, links will stop changing colour on hover. (If you are interested in a detailed why, see links at the end.) To preserve the setting of the parent for hovered and active links, find the rule the parent uses and add it to your stylesheet, after the rule for links and visited links:

a:hover, a:active {
    color: #666666;
}

6.2. Adding a font

The links are styled to your satisfaction now. Something else you will probably want to experiment with in any theme is fonts. Let’s see what fonts Basic2Col uses. Right-click on some text to inspect:

The first thing you notice is that paragraphs inherit some font styling, including font-family, from the body, for which ten fonts are specified, in order of preference. To try a different font, type its name before any other names, and then a comma. (If the font has spaces in its name, it is good practice to enclose it in quotation marks.) In the screenshot I’m trying a Microsoft ClearType font, one of the so-called “C” fonts:

If you are satisfied with the result you see above, paste this into your stylesheet and you are done with this part:

body {
    font-family: Candara, "Lucida Sans Unicode", "Lucida Sans",
        "Trebuchet MS", "Lucida Grande", "Bitstream Sans Vera",
        Verdana, Arial, Tahoma, Helvetica, Sans-Serif;
}

6.3. Hiding an element

Now let’s try something different. In the previous two examples we edited values of existing properties, to override declarations imported from the parent stylesheet. In the next example we will add a new declaration to a rule.

The search box in Basic2Col has a title above it: “Search”. This is not necessary. It’s obvious what that box does; it even has a button next to it saying “Search”. Is it possible to make this title go away, and reclaim the space it takes, without meddling with files in the parent theme? — It is!

By inspecting this element you find that the selector you want is:

#searchform label

... which means: label but only if it is within the division uniquely identified as searchform. Click on its declaration, hit Tab to start a new line, type display — then hit Tab again and type none — see the screenshot:

The title of the search box disappeared!

It did, but something is not right now! Without its title, the search box does not look properly aligned. It needs to be moved a bit to the left. This is not difficult to do, but let’s say, for the sake of brevity, that you didn’t notice it and that you are satisfied with the result. Put this in your stylesheet:

#searchform label {
    display: none;
}

You don’t see anything else you would like to change for the time being. (And if you see something later, you can always open your stylesheet, add or remove anything you like, and upload it again to the directory of your child theme.) Let’s see what we have by now:

7. Putting it all together and activating the child theme

In a few minutes you constructed 4 CSS rules: 2 for links, 1 for fonts, and 1 to hide something from display. If you pasted the result of each step into your stylesheet, it must look like this now:

/*
Theme Name: Kid
Theme URI: http://op111.net/
Description: Child Theme for Basic2Col
Author: Demetris
Author URI: http://op111.net/
Template: basic2col
Version: 0.1
*/
 
@import url("../basic2col/style.css");
 
a:link, a:visited {
    color: #006600;
}
a:hover, a:active {
    color: #666666;
}
body {
    font-family: Candara, "Lucida Sans Unicode", "Lucida Sans",
        "Trebuchet MS", "Lucida Grande", "Bitstream Sans Vera",
        Verdana, Arial, Tahoma, Helvetica, Sans-Serif;
}
#searchform label {
    display: none;
}

The visual result may be slightly different, depending on your editor. In Notepad++ I’m seeing this:

Now upload the stylesheet to the child theme’s directory and go to the administration panel, Design, Themes, to activate it. (The child theme will not have a thumbnail screenshot. You can add one to its directory if you want, and it will be detected by WordPress, but it is not of much use unless you intend to publish the theme.)

If in preview your theme looks exactly like its parent, empty your browser’s cache and retry.

If everything looks good in preview, you can now activate the theme. Congratulations! Your first child theme is on the air!

8. Notes

You really made it all the way down here? Thank you for reading!

9. Links

9.1. Parent themes

Almost any good theme can be used as a parent theme, but here are three more that are designed with child themes in mind:

plaintxt.org/themes/sandbox

Sandbox by Andy Skelton and Scott Wallick. The mother of all parent themes.

themehybrid.com/themes/hybrid

Hybrid by Justin Tadlock.

themeshaper.com/thematic-for-wordpress

Thematic by Ian Stewart.

9.2. Tools, Software

bluefish.openoffice.nl

Default editors in Linux distributions are more than enough for such tasks. If you want to try something else, Bluefish is good. Look in your distro’s repositories (Debian and Ubuntu have it).

cyberduck.ch

Cyberduck: Good, free, open-source FTP client for Mac OS X.

fireftp.mozdev.org

FireFTP: “a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers”.

getfirebug.com

A Firefox extension to “edit, debug, and monitor CSS, HTML, and JavaScript live in any web page”.

jigsaw.w3.org/css-validator

CSS Validation Service. To validate your CSS code.

mozilla.com/firefox

There is no escaping Firefox! — obviously, to use Firebug, you need Firefox.

notepad-plus.sourceforge.net

Notepad++ is a good, free, open-source text/code editor for Windows.

Notepad2, with the same basis as Notepad++, is simpler but fine for most tasks: flos-freeware.ch/notepad2.html

smultron.sourceforge.net

Smultron: good, free, open-source text/code editor for Mac OS X.

9.3. Tutorials, References

codex.wordpress.org/Theme_Development

Has a short section on child themes.

extralogical.net/2008/08/theme-inheritance

In WordPress 2.7 you will be able to do more things with a child theme. The creator of the theme Tarski talks about the possibilities opened.

htmldog.com

“The Best Practice Guide To XHTML and CSS”, by Patrick Griffiths. It really is the best!

htmldog.com/reference/cssproperties

“Information about all of the valid properties belonging to the CSS 2.1 standard”.

htmldog.com/reference/htmltags

“Information about all of the valid tags belonging to the latest version of strict XHTML”.

reference.sitepoint.com/css

SitePoint CSS Reference.

themeshaper.com/how-to-protect-your-wordpress-theme-against-upgrades

The author of the theme Thematic explains how to make child themes. — The alliteration is unavoidable!

themeshaper.com/functions-php-wordpress-child-themes

Another article by the author of Thematic: How to use custom PHP functions in your child theme.

wangenweb.com/2008/07/creating-wordpress-child-themes

Another how-to on child themes, this one by the designer of Basic2Col.

9.4. Further reading

meyerweb.com/eric/css/link-specificity.html

Eric Meyer explains why the order in which we add link rules to a stylesheet is important.

w3.org/TR/CSS21

The CSS 2.1 specification.

Changes

2010-12-16

Removed link to Italian translation. (Page has disappeared.)

2009-03-29

Replaced Stylegala CSS Rererence link with SitePoint CSS Reference link in 9.3. Several other edits.

2009-02-21

Added link to Italian translation. Thanks, Danny!

2008-12-22

Replaced Structure (Links, Parent themes) with Hybrid, the latest theme by J. Tadlock.

2008-09-01

Added links for parent themes, spell-checked, several other edits.

Add to del.icio.us

© 2008 op111.net | Permalink

UPDATED 2009-02-13.

I recently decided to look for a good minimalist theme for op111.net. I did not expect it would be an easy search, and, in a sense, it wasn’t. (Partly because WordPress had been going for some time without a central repository of themes. Now there is one, but it is still young.) Yet, I found more good themes than I expected, and, in the end, out of several that caught my attention, I singled out five: the one that op111.net uses now and four that I kept installed and I intend to follow.

If you are in a similar search, I hope this review will be useful to you, at least as a starting point: all five themes are very good, with advanced and sometimes distinguished functionality. For this reason, my review is also meant as a token of appreciation to the designers: they produce quality work, forward-looking, with attention to detail and respect for standards.

What kind of “minimalist”

In some contexts minimalism may mean “minimal features”, but in WordPress themes, as I understand the term, it does not have that meaning. At least “minimal features” was not what I was interested in. I was looking for themes capable of taking full advantage of the possibilities of WordPress, while presenting the output in a clean and economical way, without unnecessary and distracting elements. — In short:

• Full functionality combined with
• Economical presentation

Additionally, I was looking for themes that met all, or most, of the following:

General requirements

1. Be properly maintained.
2. Offer documentation.
3. Offer changelog of some kind.
4. Offer (or suggest) some way to report issues.
5. Offer (or suggest) some way to get support.
6. Produce valid (X)HTML and CSS.
7. Not require editing of WordPress files (or of their own files). All configuration should be possible either via the administration panel of WordPress or by making and editing additional files.

The 5 themes

0. Common features

• All five themes are published under the GNU GPL, the same licence used by WordPress.
• All come in a 2-column layout, while two include extra layouts.
  • Sandbox: one 1-col, one 2-col, three 3-col.
  • Thematic: one 2-col, two 3-col.
• All work well with child themes. (What are “child themes”?)
• All offer page templates.
  • Basic2Col: Archives, Front page, Links
  • Moo Point: Archives, Links
  • Sandbox: Archives, Links
  • Simplish: Archives, Links, Sitemap
  • Thematic: Archives, Links
• Four implement microformats: Moo Point, Sandbox, Simplish and Thematic.
• Four support localization: Basic2Col, Moo Point, Sandbox, and Thematic. (In Simplish support is on the way.) (If you don’t find your language, it is not difficult to do a translation: the strings are not many.)
• Three are currently used by their creators in their sites: Sandbox, Simplish and Thematic.

1. Basic2Col

Home: wangenweb.com/wordpress/themes/basic2col
Demo: demos.wangenweb.com/basic2col
By: Kristin K. Wangen
Characteristics: 2-col, all-white, elegant, extensible, framework
Version reviewed: 3.1.1

I saw Basic2Col while browsing aimlessly one day and it won me immediately. It is a 2-column theme made primarily as a framework for custom themes (for details, see its page and its functions.php file) but it is also perfectly fit to be used as is. A detail I particularly liked in it was the styling of its forms. I also liked its Archives page, which uses code from the plugin Blix.

In general, I found Basic2Col elegant and discreet, and, based on default appearance, I liked it the most. If you want a clean, fully-functional theme to use without any modifications —and also a theme that you can modify and extend at any time—, Basic2Col is a very good choice.

Something that can be improved in Basic2Col is fonts. Lucida Sans Unicode, the first font specified, is not a good choice (see links at the end for one reason), while the first fallback font, Lucida Sans, only has Latin script — this is not bad in itself, but not good either in a theme designed for an international publishing platform.

CONS: Date format preference ignored. Suboptimal font choices.

Clean and elegant out of the box, on both Linux and Windows. It is difficult to find something not to like in Basic2Col (unless you agree about the fonts thing, maybe). — On the left screenshot an oversight is visible: the “continued »” link is not separated or distinguished in any way from the post title.

2. Moo Point

Home: iamww.com/wordpress-theme-moo-point
Demo: iamww.com/wpthemes/index.php?wptheme=Moo-Point
By: Will Wilkins
Characteristics: 2-col, characterful, legible, Sandbox-based
Version reviewed: 1.75

I think that the best two words to describe this theme by Will Wilkins are: eminent readability — I was impressed the first time I saw Moo Point, and I remain impressed. It comes in a classic 2-column arrangement (the metadata on the left are not a column), at fixed width, it is well laid out, and presents text with exceptional clarity. I don’t know what the recipe for this is — obviously, something done very well in the combination of: font family, font size, font colour, background colour, line height, and line length.

Hyperlinks, on the other hand, was something I did not like in Moo Point. I found their combination of bold style and distinct colour distracting. (The colour itself is beautiful: something between brown, russet, and goldenrod; see screenshots.) The use of block capitals can also be an issue:

CONS: Hyperlinks may be distracting.

The styling of Moo Point exposes my incorrect use of em(phasis) to italicize titles. :-D (In this case, to italicize the titles of two Greek dictionaries.) The font on the right is Calibri. Moo Point is one of the few themes in general (and the only one in this review) that take advantage of the new ClearType fonts of Microsoft. The middle item on the navigation bar (ΔΙΆΦΟΡΑ) is an instance of the problem with text-transform:uppercase: the capital alpha should be unaccented.

3. Sandbox

Home: www.plaintxt.org/themes/sandbox
Demo: demo.plaintxt.org/?wptheme=Sandbox
By: Andy Skelton and Scott Wallick
Characteristics: 1-col, 2-col, 3-col, bare, customizable, framework
Version reviewed: 1.6

Sandbox is a theme perfectly plain on the surface but impressive underneath: it produces dynamically a multitude of CSS classes, which allow the styling and positioning of almost everything on a page by means of CSS alone (see its readme, and note below). This makes it a very good choice for theme designers who want a versatile framework to work on, and, indeed, designers seem to be a large part of its audience. Another part must be people looking for a simple, visually undistracting WordPress setup to put content in.

The features of Sandbox are well documented (see included Readme and the wiki), with enough examples to get you started. In general, it is a theme very well made. It also felt faster than most themes I have tried, but I did not run any benchmarks.

One addition I would like to see in it is a GUI option to switch layouts. Now you have to edit its stylesheet.

CONS: None.

Sandbox out of the box, as plain as it gets. You may be thinking that no one would use it like this on a site, but you would be wrong: its author does! If you want to see what a fully styled Sandbox could look like, I assembled a sample of links below. You can find more by searching for pages that link to Sandbox, usually from their footers: http://www.google.com/search?as_lq=http://www.plaintxt.org/themes/sandbox/

SAMPLE OF SITES BUILT ON SANDBOX

• blog.songbirdnest.com — Blog of Songbird, the music player
• decafbad.com/blog — Leslie Michael Orchard’s blog
• dentedreality.com.au — Beau Lebens’ site
• skeltoac.com — Kubrick, the default WordPress theme, remade with Sandbox by Andy Skelton, co-creator of Sandbox
• thedigitalist.net — The Pan Macmillan blog

4. Simplish

Home: labs.utopian.net/blogs/simplish
Demo: labs.utopian.net/blogs/simplish/demo
By: Josh Wood, Utopian.net Labs
Characteristics: 2-col, improved galleries, shades of gray, sitemap
Version reviewed: 1.9.3
Version reviewed: 2.1.1 (INFO UPDATED 2008-10-10)

Simplish —a “WordPress variant of the Scribbish theme for blogs”— won me with its clean arrangement and its efficient use of screen space: it manages to get more text on screen than any other theme, without feeling cramped. I also liked its titleless search box: often “Search” titles above search boxes are a waste of space, since search boxes are usually easy to identify.

Among the five themes here I think that Simplish is the least likely to impress at first sight (maybe even less than the provocatively bare Sandbox), but this is not necessarily bad — or maybe it’s just me and my indifference to shades of gray. Then again, every time I see it I like it more, and I notice things that reveal responsible development and a forward-looking spirit (see its changelog, and its Features page.)

CONS: See below, 2nd note.

Efficient use of screen space by Simplish. Notice the clean arrangement of metainformation in the box below the post.

2008-08-22. UPDATE. A new version of Simplish is out. Release notes: labs.utopian.net/blogs/simplish/dev/2008/08/19/simplish-20 — As I was looking at the new version I noticed again two things I omitted to mention the first time:

1. Like Basic2Col and Thematic, Simplish uses its own date format, ignoring the preference set in Dashboard, Settings, General. Fixed in v. 2.1.
2. In Simplish hyperlinks are black, and they are distinguished from regular text by means of the traditional underlining. This is a problem in my opinion: link underlining reduces legibility (since it cuts through the stems) and it can also make pages look stuffed, given the profuse use of links in today’s web. I believe that restyling hyperlinks could make Simplish even better.

2008-10-10. DISCLOSURE. Since 5 September 2008 op111.net is hosted with Utopian.net, the sponsor of Utopian.net Labs, who make Simplish. I discovered Utopian.net through Simplish, and I hope that my good relationship with the people of Utopian.net does not affect the way I view Simplish. :-)

5. Thematic

Home: themeshaper.com/thematic-for-wordpress
Demo: themeshaper.com/thematic
By: Ian Stewart
Characteristics: 2-col, 3-col, bold, framework, options page, widgets area
Version reviewed: 0.6.4.1
Version reviewed: 0.7 (info updated 2008-10-10)

Thematic is the second Sandbox-based theme here (the first was Moo Point). It is a reworked Sandbox that keeps the easy customizability and extensibility of Sandbox while adding a great-looking face that is more likely to appeal to those looking for a theme ready to use. (Sandbox is not exactly unready to use, but its readiness depends more on personal taste.) One distinctive feature of Thematic is the number of its widget areas: thirteen! (13). Its looks is also distinctive, but this is not necessarily good if you want to use it unmodified. (Probably the same can be said for Moo Point.)

Thematic is the only theme in this review with an options page:

The three options include one frequently requested by WordPress users: editable footer. You can add anything you want, and also remove anything you want. (Offering this kind of user-choice is smart, in my opinion.)

While at the site of Thematic, have a look at the list of “child themes” made for it. The (commercial) Acamas is impressive.

CONS: Date format preference ignored.

Well balanced design, carefully styled. The spacious header is easy to resize by means of a child theme.

2008-10-10. UPDATE. Thematic 0.7 adds modular stylesheets, among other things. Release notes: themeshaper.com/thematic-07

The theme I chose

In the end I chose Sandbox, for 4 reasons:

• It has advanced functionality (which I may never use, but I like options).
• It is easier for me to style Sandbox up to something I like, than to style another theme down.
• It offers half a dozen column layouts (which, again, I may never use).
• It offers a flexible, fluid layout out of the box, which you can easily adapt.

op111.net now uses Sandbox with a “child theme”. The child theme adds some styling and consists of a few icons and one stylesheet:

http://op111.net/wp-content/themes/dk/style.css

“Child themes” are the recommended method to apply such changes to a full-fledged theme, or to completely restyle a full-fledged theme. For more: How to make a “child theme” for WordPress. A pictorial introduction for beginners - op111.net

Links

THE 5 THEMES

Basic2Col home | Moo Point home | Sandbox home | Simplish home | Thematic home Basic2Col demo | Moo Point demo | Sandbox demo | Simplish demo | Thematic demo

OTHER

labs.utopian.net/habari/theme/sp

If you like Simplish/Scribbish but use Habari, sp is for you. By Josh Wood.

microformats.org

Learn about microformats, a set of simple, open formats for data.

quotedprintable.com/pages/scribbish

Scribbish (a theme for blogs). Simplish is a variant of Scribbish.

rmarsh.com/plugins/blix-archive

Blix Archive, the plugin whose code is used in the archives page of Basic2Col.

www.ascendercorp.com/ctfonts.html

The Microsoft ClearType fonts. At present (August 2008) they are included in Windows Vista, Microsoft Office 2007, Office 2008 for Mac, Microsoft PowerPoint Viewer 2007, and in the Microsoft Office Compatibility Pack. — I would be happy to see more web designers using some of these fonts, like Candara, Corbel and the monospace Consolas.

www.brownbatterystudios.com/sixthings/2007/03/14/lucida-hybrid-the-grande-alternative

One reason why Lucida Sans Unicode is not an optimal font choice.

www.pjharvey.net

Kept me good company while I was trying to make something cohesive out of my notes. :-)

www.plaintxt.org/themes/simplr

Simplr, by the author of Sandbox; a fine one-column minimalist theme for WordPress.

Live preview of Simplr: demo.plaintxt.org/?wptheme=Simplr

Changes

2009-02-13

Cut down Sandbox design samples to 5. One new: dentedreality.com.au.

2008-11-23

One more Sandbox design to the sample: blog.songbirdnest.com.

2008-11-07

Added sp for Habari to links.

2008-10-10

Rewrote parts, added/updated/grouped info, added 2 links (Lucidas + Blix).

2008-09-02

Added link to op111.net/53 and removed links for child themes.

2008-08-22

Added 2 remarks on Simplish.

2008-08-20

Edited for clarity and brevity. — Thanks to the theme designers who mentioned the review on their sites!

Add to del.icio.us

© 2008 op111.net | Permalink