op111.net » English

Progressive enhancement of drop-down menus with the :not CSS selector

demetris — Fri, 08 Jan 2010 16:50:53 +0000

You probably have noticed the characters—usually arrows—displayed on some navigation menus to indicate the presence of subitems under an item. I find them helpful, and I recently looked to see if it was possible to have them displayed on a CSS drop-down menu by using only CSS (that is, without any JavaScript assistance). In this howto I explain the solution I arrived at:

How to display these useful indicators on a CSS drop-down menu by using the selector :not.

For a simple demo, see the menu of this site, op111.net.

It is a simple solution that works in all browsers except Internet Explorer, where the indicators simply do not appear at all. Hence, it is a progressive enhancement, or, to put it the other way round, it degrades gracefully in old or wayward browsers.

It is also a solution that suggested to me that the :not selector may offer possibilities that are unexplored. If you know of other useful applications of the :not selector, be kind enough to enligthen us with your comment!

Step 1

To each anchor in the menu we add an indicator-character wrapped in a span with an appropriate class:

<span class="more"> ↓</span>

For this howto I use the downward arrow as indicator, and more as the class name.

So, supposing we have a menu with two top-level items, one of which has a subitem:

<ul>
  <li>
    <a href="http://x.net/p1">Page1</a>
  </li>
  <li>
    <a href="http://x.net/p2">Page2</a>
    <ul>
      <li>
        <a href="http://x.net/p2/s1">Subpage1</a>
      </li>
    </ul>
  </li>
</ul>

... what we aim at is:

<ul>
  <li>
    <a href="http://x.net/p1">Page1<span class="more"> ↓</span></a>
  </li>
  <li>
    <a href="http://x.net/p2">Page2<span class="more"> ↓</span></a>
    <ul>
      <li>
        <a href="http://x.net/p2/s1">Subpage1<span class="more"> ↓</span></a>
      </li>
    </ul>
  </li>
</ul>

The best way to add the indicators will depend, of course, on how the markup is generated. If you use WordPress, look at the Appendix at the end for some examples.

Let’s see the second step now...

Step 2

We make a CSS rule to hide all indicators we added:

li a .more { display: none; }

Why did we do that?

Because the indicators we added in the first step appear in all items, but not all items have subitems. So, in the second step we hid the indicators, and in the third step we will instruct the browser to display indicators only in items with subitems:

Step 3

We make a second CSS rule:

li a:not(:last-child) .more { display: inline; }

Done!

How does this work?

In items with subitems, the a anchor is followed by a ul element (which containts the subitems). So, in items with subitems the anchor is not the last child of its li parent. This is the condition that our :not rule specifies, saying, in human language:

Select .more within any anchor that is not the last child of its parent, and display it inline.

The display:none declaration of the second step is understood by all common browsers. So, all browsers will hide the indicators from display. Then, browsers that understand :not and :last-child will show the indicators where appropriate.

Simple, perfectly valid CSS 3, and, for this reason, future-proof too!

Fine... But!...

I want the helpful indicators in Internet Explorer too!

That’s not possible with CSS alone, because IE (even IE8) knows nothing about CSS3 selectors like :not and :last-child (or :only-child, which would have the same effect here).

So, for Internet Explorer you will have to resort to a mixture of CSS and JavaScript. Either use something like Superfish or write some custom JavaScript. If the site already uses a JS framework, I imagine the code would be pretty simple. In jQuery, for example, all it takes is one line:

jQuery(document).ready(function($) {
    $('a:not(:last-child) .more').show();
});

Then, load the JavaScript snippet conditionally if the user agent is Internet Explorer, so that good browsers don’t have to download unnecessary bytes.

I want different indicators for parents of different levels!

I omitted that from the example on purpose, to keep the markup as simple as possible. It’s easy to do:

Add two indicators to each anchor, one for subitems that expand vertically and another for subitems that expand horizontally, and wrap each indicator in its own span along with an appropriate class. E.g.: more-v and more-h.
Hide all indicators.
For top-level parents display the one indicator by making a selector that applies to top-level parents only. E.g.:
- #menu > ul > a:not(:last-child) .more-v
For lower-level parents display the other indicator by making a selector that targets lower-level parents. E.g.:
- ul ul a:not(:last-child) .more-h

Appendix

Here are three bits of code that show how to generate the markup for the indicators in WordPress.

If you are constructing a WordPress theme from scratch, simply use the link_after argument of wp_page_menu(). If the menu is generated by wp_list_pages(), you can pass the exact same argument to it too. Here is an example that uses wp_page_menu():

wp_page_menu(array(
    'depth' => 2,
    'link_after' => ' ↓',
    'sort_column' => 'menu_order',
    'title_li' => '',
));

wp_page_menu() and wp_list_pages() can also be modified by applying a filter, which is convenient if you do not want to edit template files directly.

For wp_page_menu() the indicator markup is added by applying a filter to wp_page_menu_args():

function my_page_menu($args)
{
    $args['link_after'] = ' ↓';
    return $args;
}
add_filter('wp_page_menu_args', 'my_page_menu');

For wp_list_pages() your filter will have to do a simple string replacement instead:

function my_list_pages($html)
{
    return str_replace('', ' ↓' . '', $html);
}
add_filter('wp_list_pages', 'my_list_pages');

Add to del.icio.us

Page Lists Plus: Comprehensive control of your WordPress page menu

demetris — Thu, 31 Dec 2009 20:45:24 +0000

Whether you use WordPress as a weblog tool to publish articles in reverse chronology or as a more traditional CMS to publish pages arranged in a hierarchy, your webpages probably have a page navigation menu somewhere near the top. Sooner or later there comes a time when you need a way to manage this menu better. In fact, if your content is hierarchically arranged pages, this time comes right at the beginning.

There are several good plugins that help you improve your page menu. op111.net has published quick howtos on two: Page Links To and Page Menu Editor. A few months ago I started using another page-menu plugin, which finally replaced for me both Page Links To and Page Menu Editor, as well as Exclude Pages. It is called Page Lists Plus and this is a small review of it.

Page Lists Plus

Homepage: technokinetics.com/plugins/page-lists-plus
WP.org homepage: wordpress.org/extend/plugins/page-lists-plus
Author homepage: technokinetics.com
Version reviewed: Page Lists Plus v1.1.5
Compatibility: Tested and works fine with WordPress v2.8, v2.9 and v3.0-dev.

Page Lists Plus is a plugin that offers options to customize the output of wp_list_pages() — this probably sounded like Greek to you, but I’m starting with it for a reason: wp_list_pages() is the main WordPress function for generating a list of all pages (as opposed to posts) in a site, and it is what WordPress themes use to create page navigation menus. What that means in practical terms is that Page Lists Plus and its array of useful options will work with essentially any WordPress theme that has a page menu.

What are these customization options then?

Page Lists Plus global options

Page Lists Plus has about twenty options. They are all presented on one screen, separated in two groups. The first group is the global options, which you set once and forget about:

Add “Home” link at the start of Page lists is the first option and it must be among the most useful to users of the plugin: If your theme does not display a Home link on the page menu, or does not offer an option to add one, all it takes to add it with PLP is one click.

Add class="first_item" to first list item and the four options after it make it easy to change the appearance of the page menu via CSS.

The last global option, Remove title attributes from anchors, is what intrigued me most the first time I tried PLP, as it indicated a concern for an area which has sometimes been singled out as the weak point of WordPress (and in which WordPress has made significant progress in the last few versions) — accessibility.

As Tim Holt, the author of Page Lists Plus, explains in his site, what WordPress does with title attributes is wrong and, unless you are manually adding meaningful and informative title attributes to your links, the best thing to do is remove the attributes completely. Selecting Remove title attributes from anchors will do exactly that.

(Even leaving accessibility aside, a title attribute identical to the anchor text is pointless and can also be annoying.)

Page Lists Plus per-page options

Next is the group of page-specific options. They are eight in total and, since not all will be of interest to everyone, the plugin lets you select the ones you want to use:

The options you select will then appear grouped in a box on the Edit screen of your Pages:

As of version 1.1.5, the page-specific options of PLP are eight — one that I dislike, one that I’m indifferent to, and six I like and use:

Add Custom Classes to Individual List Items: Adding custom CSS classes to specific items makes it easy to style them individually via CSS.
Alternative Link Text: To specify, for example, a short link text for a page that has a long title. If I had a page with the title, say, Greek Cuisine Recipes by Demetris, I could use just Greek Recipes for the page menu.
Alternative Title Attribute: To supply supplementary information that appears when a link is hovered over. (See screenshot example below.)
Include: To specify whether a page appears on page lists and page menus. This option is selected by default for new pages. (In the Global options you can also specify whether children of excluded pages are excluded too.)
Link: To unlink a page. Useful, for example, for empty pages that serve as parents to other pages.
Redirect To: To make a page that appears on page menus and redirects transparently to a specified URL. For example, you can make a page that redirects to a category archive, by specifying the URL of the category archive.

In this example from op111.net the link for the Archives page has a TITLE attribute that provides some supplementary information on the target. Graphical browsers commonly display the TITLE attribute when the link is hovered over.

Suggestions & Feature requests

All in all, I’m happy with Page Lists Plus. It’s been a three-in-one plugin for me, and it has been working flawlessly.

The following are just a few small points that I think would help make it even better, at least for what I need:

An additional Save button near the top of the Options screen.
An option to use page Excerpts as title attributes of links.
An option to use custom anchor text for the Home link.

Questions & Answers

These are a few questions I had when I started using Page Lists Plus, along with the answers I can offer now:

Is PLP a replacement for Page Links To?: Page Links To is a specialized plugin that does redirections of all kinds, but if you only need to add links to your page menu, Page Lists Plus will do that for you just fine.
Is PLP a replacement for Page Menu Editor?: For me it has been a complete replacement, as it does everything Page Menu Editor does, and more. Also, PLP is more economical in database queries: While Page Menu Editor makes one query for every page that exists in a site, Page Lists Plus only makes one query per active option that needs information from the database. (Some of its options, like the addition of various CSS classes, do not need database information at all.)
Does PLP work with wp_page_menu?: It should in theory, as wp_page_menu is simply a wrapper for wp_list_pages, and it seems to work in practice too. (At this writing, the page menu of op111.net is constructed with wp_page_menu, and Page Lists Plus seems to work fine with it.)

Behind Page Lists Plus: Tim Holt

Page Lists Plus is made by Tim Holt, a web developer in England. Tim Holt specializes in WordPress customization, and, as his homepage and Page Lists Plus show, has also a special interest in web accessibility.

Tim replied prompty and informatively to two questions I sent his way before I started writing this review. I want to thank him for his kindness from here too.

Eight website/weblog designs I enjoy

demetris — Mon, 30 Nov 2009 20:29:35 +0000

... and that I would probably try to steal from if I ever, against all reason, decided to do a proper website design myself. I hope you’ll enjoy them too!

Click on the links to visit the websites or on the thumbnails to see the full-size captures. You can navigate between captures by hitting the Left and Right arrow buttons on your keyboard.

en-ca.org

en-ca.org is a two-page website for a book on Canadian-English orthography. Its front page uses a single font, Constantia. The manicule/index image is a nice touch.

Visit en-ca.org!

kyleslattery.com

kyleslattery.com, the custom-built website of Kyle Slattery, has one of the best navigation bars I’ve seen. See the drop-down menu on the first screenshot:

Visit kyleslattery.com!

madebyfrog.com

This is the homepage of the Frog CMS, and it makes me want to try this CMS. (Not something I will say for many publishing platforms.) Built with Frog CMS.

Visit madebyfrog.com!

melly.me

Text shadows are often used in web design without thought or reason, with results that range from indifferent to bad. In melly.me text-shadow—and transparency—are a successful and integral part of the design. On the left is the home page; on the right the Archives and Tags page. Built with Habari.

Visit melly.me!

nikolay.bg

Black/Red/White schemes are common but they are also difficult to get right; the result can easily get jarring or too stark. nikolay.bg, the website of Nikolay Bachiyski, gets it right. Also, like all designs in this selection, it makes good use of white space. Built with WordPress.

Visit nikolay.bg!

tom.preston-werner.com

tom.preston-werner.com has a functional and inviting front page: Just a series of title links that you want to click on. (Why aren’t more blogs like this?) Its individual article pages use full paragraph justification without hyphenation but they somehow almost get away with it thanks to the relatively wide lines. Built with Jekyll.

Visit tom.preston-werner.com!

whistleandfish.com

whistleandfish.com has a beautiful header, while its paragraphs are among the most readable I’ve seen. Its typography also serves as a reminder that fancy font options is not something good design can’t live without. The fonts on the left are Liberation Serif and Liberation Sans (the fallback defaults for serif and sans-serif in my Linux desktop). The page on the right uses Georgia and Verdana (Verdana is second after Helvetica Neue in the sans-serif stack). Built with WordPress.

Visit whistleandfish.com!

wilsonminer.com

I never would have thought that I would enjoy a site whose front page is in a shade of violet (amethyst in this case). Yet the colour is what I like most in wilsonminer.com. I would like its individual pages more if they didn’t use indentation to distinguish paragraphs. Built with Django.

Visit wilsonminer.com!

Notes

Screenshots are from Firefox 3.5 for Linux and Firefox 3.7 for Windows. (Hover over the images to see which is which.)

Add to del.icio.us

WordPress 2.8: What’s new

demetris — Sat, 23 May 2009 14:00:03 +0000

After six months in preparation, the first beta version of WordPress 2.8 was released on 16 May 2009. Following WordPress 2.7, which focused mainly on the UI, WordPress 2.8 brings changes that are more evenly distributed across all areas. There are big improvements in the user interface, but there is a much larger amount of not immediately obvious improvements in two main areas:

Extensibility
Optimization/Performance

Also, many bug fixes and enhancements, big and small: This version saw more tickets opened and, most importantly, closed than any other version of WordPress before. The closed tickets are almost 800 at this moment. — All in all, WordPress 2.8 is a better tool than WordPress 2.7.

A NOTE ON COMPATIBILITY

In general, backward compatibility seems good. With two exceptions (one theme that broke itself and another that broke WordPress) all themes I’ve tried work well. Same with plugins: A few have problems but most work well. If it is any indication, of the plugins used in op111.net only one explicitly supports WP 2.8 at this moment; yet, all work without problems. (op111.net has been running on development snapshots of v. 2.8 since March.)

On to what’s new, in alphabetical order…

Accessibility improvements

WordPress 2.8 brings several improvements, big and small, to accessibility. A lot of work went into two areas in particular:

Adding labels and alternative text to input elements that did not have them.
Making the functionality of the new Widgets UI (more on that later) fully available without JavaScript.

Authentication: more pluggable

The authentication mechanism is now improved, so that authentication methods like OpenID and authorization methods like OAuth can cooperate easier with it (without replacing it and then having to deal with other issues). Read more:

Improvements in this area also pave the way for OAuth support in the core (which will probably come in ver. 2.9).

Columnification and pagination in Screen Options

Screen Options has two new options, depending on the type of screen:

Number of columns
Number of items per page

Items per page is the one I’ve found more useful, but I can imagine columnification would be very useful too in some situations, e.g. on a netbook with an 800×480 display.

CSS: new dynamic classes with `body_class()`

Dynamic CSS classes were first brought to WordPress by the innovative Sandbox of Scott Wallick and Andy Skelton, offering a simple way to modify to any extend the appearance of a WordPress site by CSS alone. They offer possibilities that would otherwise require JavaScript or PHP.

WordPress 2.7 added dynamic CSS classes for the post div(ision). Version 2.8 adds dynamic classes for the body element too. Both implementations were based on Sandbox.

For theme authors. To add this to a theme, simply open the body element like so:

 if (function_exists('body_class')) { body_class(); } ?>>

Feed links for everything

WordPress 2.8 automatically adds feed links specific to the page viewed. For example, when you view the archive of the category Cooking, it adds a feed link for that category. When you view the archive for author Cyrus, it adds a feed link for that author, etc.:

For theme authors. The two main feed links—all posts and all comments—are not added automatically. To let WP add them too, put the automatic_feed_links() function (defined in general-template.php) in your functions.php.

Note. Extra Feed Links, a plugin by scribu, adds the same functionality to earlier WP versions.

JavaScript at the bottom

JavaScript files properly registered via the appropriate script API can now be placed at the bottom of the page. In most cases this is preferable, because JavaScript blocks parallel downloads (browsers need to evaluate it before proceeding) and can delay the time by which a page is usable and also the time by which the rendering is complete. So, unless a JavaScript file needs to be at the top, it can be moved to the bottom for better performance.

For plugin/theme authors. This is done with a new optional argument in the wp_enqueue_script() function. The argument defaults to “false” (not in the footer). To put a script in the footer, set it to “true”. E.g.:

wp_enqueue_script('script_handle', 'script/url/file.js', '', '', true);

LiveJournal Importer: Redone and improved

Importing a LiveJournal blog into a WordPress 2.8 blog is easier and more complete thanks to the rewritten LiveJournal Importer, which uses the LiveJournal API. Read more:

The All-New LiveJournal Importer for WordPress « Dented Reality

Minification and concatenation of CSS and JS…

… or, faster admin pages.

Most CSS and JavaScript files in the administration area are now concatenated (chained together into one file) and, depending on the server setup, compressed too. Javascript files are also minified. Using minification, concatenation and compression improves performance in two ways:

The total size of files to get is reduced.
The browser requests fewer files from the server.

This kind of optimization could prove even more beneficial to the frontend (the public part of a website). Of course, things can become more complex there, but the current impementation could serve as a testing ground for applying something similar to the frontend at a later time.

What is minification? Minification is the practice of removing from a file bits useful to humans but unneeded for machine execution, like comments, spaces, line breaks and indentation. On the web it is used mainly for CSS and JS files, to reduce the amount of bytes sent from the server to the browser.

Plugin Installer

The plugin browser/installer was first introduced in the previous version, six months ago. I’m including it here for two reasons:

It seems it’s not very well known yet…
It’s been improved in v. 2.8. In the meantime, the search mechanism of wordpress.org was improved too, and now the whole system works much better.

Here is how to install a plugin in the new way:

Plugins management

The plugins manager was retouched, and is still being worked on at this writing. It now offers views/filters by plugin state, which I’ve found to be very convenient:

Pretty permalinks for IIS 7

IIS 7, the current version of the Microsoft web server, recently got an official rewrite module and can now do URL rewriting like Apache does. WordPress 2.8 detects if the server is IIS 7 with the rewrite module and offers the option to use fully pretty permalinks with IIS 7 too — not just the semi-pretty ones with index.php in the middle. Read more:

IIS 7 URL Rewrite Module support in WordPress 2.8 : Ruslan’s Blog : The Official Microsoft IIS Site

Proxy support

Easy proxy support (without editing core files) had been missing from WordPress and was a frequent request. Now it is part of the WordPress HTTP API. You enable it by defining a few constants in wp-config.php.

The documentation for this, along with an example, can for now be found in the file wp-includes/http.php (look for the WP_HTTP_Proxy class).

Quotation marks locale-aware

WordPress has a smart typography filter that, among other things, replaces ASCII quotes—"like these"—with proper quotation marks “like these”. Before v. 2.8 this filter only knew about quotation marks as used in American English.

Now translators can specify the appropriate quotation marks for a language, and, if you use a localized version, they will be used instead. For example, «αβγδ» for Greek, „abcd“ for German, and so on and so forth.

Relational navigation links

A relational link in an HTML document points to another document and states its relation with the current document. Examples of such links that are used for navigation are “prev” (previous in a series) and “index” (index for current). Browsers can use them to offer an interface for navigation, much like they do when they show an icon/menu in the URL address bar for the feed links in a document.

WordPress 2.8 generates four types of relational navigation links: home, index, prev, next. If your browser supports such links (not many do, at least natively), you’ll be seeing them more often as WordPress sites upgrade to v. 2.8:

An interesting possibility of relational links is that browsers can also use them as hints to prefetch (predownload) a page, cache it, and then serve it from the cache, for better speed. Firefox—the only browser that does link prefetching currently—does this with relational links of the type next. (I have not been able to verify if it works in WordPress sites.)

Smilies: Now faster!

Version 2.8 cuts in half the time needed to convert text smilies to image smilies! :-o The faster code is also availabe as a plugin for WordPress 2.7: Faster Smilies

(Of course, you can always turn graphical smilies off in Settings › Writing › Formatting, and WordPress will be even faster!)

Theme Installer

Installing themes in v. 2.8 is as quick and easy as installing plugins is in v. 2.7:

Theme/Plugin Editor with highlighting and lookup

I was never fond of this feature of WP: I don’t see any need for it and I also think that it encourages bad habits. But others like it. They’ll be happy to know that the theme/plugin editor is now improved, with syntax highlighting and function lookup:

Note. In Chrome and Safari you’ll see the plain old text area without fancy colours. These two browsers (that share the same rendering engine) are not supported at the moment.

Timezone selection and DST

Settings › General had been displaying for a long time this apologetic message:

Unfortunately, you have to manually update this for Daylight Savings Time. Lame, we know, but will be fixed in the future.

Well, the future is here! :-D Now you only need to enter your location:

Note. Automatic DST adjustment uses functions that were introduced in version 5.1.0 of PHP. So, you won’t see it if your server has an older version. (The minimum requirement to use WordPress remains PHP 4.3.)

Automatic Timezone is the plugin on which this enchancement was based. It adds the same functionality to WordPress 2.5, 2.6 and 2.7.

Widgets API: new and multiple-instance

Another part rewritten in v. 2.8 is the Widgets API. Writing widgets is now simpler and, importantly, widgets based on the new API are multiple-instance by default, like the Text/HTML widget in previous versions. (Writing multiple-instance widgets was already possible but convoluted.) Read more in this announcement by Ryan Boren:

New Widgets API - wp-hackers | Google Groups

As a bonus, the new function the_widget() lets you display the output of a widget anywhere in a template.

Widgets management UI: Redone, much improved

This took a lot of work and is, in my estimation, the most important improvement in the user interface of WordPress 2.8.

The new Widgets manager:

Does everything by simple drag ’n’ drop (and is fully functional without JavaScript too).
Has better memory/storage: You can deactivate a widget without losing its configuration, and widgets that are deactivated automatically retain their configurations too.

Also, thanks to the new Widgets API, widgets can now have multiple instances. You can add a widget as many times as you wish.

See the screenshots:

That was it!

If you think I left out some important feature, please leave a comment to say so. If you want to try test versions of WordPress 2.8 as they come out, watch the official blog: wordpress.org/development — Usual warnings apply, of course: This is not a final product! Do not install on a live website unless you are prepared to spend time investigating and reporting bugs!

Note. The menu icons on the screenshots are not the default ones. If you like them, you can have them too!

Thanks for reading!

/δκ

Changes

2009-06-18. Added function_exists condition to body_class example.
2009-06-11. Locale-aware quotation marks by wptexturize.
2009-06-02. Link to X. Borderie on 10.000 tickets and 2.8 dev stats. Link to Automatic Timezone.
2009-06-01. Link to N. Rice on the body_class() function.

Add to del.icio.us

Basic WordPress plugins

demetris — Thu, 09 Apr 2009 17:38:28 +0000

UPDATED 2009-06-17

WordPress plugins are like Firefox extensions: there are thousands—literally!—and there is one for everything. If you can think of a way to modify or extend Firefox or WordPress, most likely someone else has already thought about it and made it into an extension or a plugin.

This is great, but it can also be confusing, especially when you start: “I found 5 plugins for this or that. Good! Which one to use now?” Or: “What plugins to install to make my site better for me and my visitors?” This list of plugins is meant to answer questions like these, questions that beginners in WordPress usually have.

I put together a selection of plugins that improve and extend WordPress in basic ways and that I think every WordPress user should know about. That is, not “the best plugins” (although all are among the best) or “must-have plugins” (no plugin is a “must-have” in general), but plugins I consider just that: Basic!

Since a selection like this is bound to be subjective to a point, I also included the ratings from WordPress.org for a quick objectivity check.

Enjoy, and ask away if you have questions!

GENERAL NOTES

All plugins are plug-and-play; no editing of templates needed
All are free to use and licenced under the GNU GPL
All are installed with a few clicks via the WordPress Dashboard (Plugins › Add new › Search for the plugin name and click Install)
All work well with WordPress 2.7 and 2.8.
Ratings from WordPress.org are as of 7 April 2009

QUICK LINKS to the homepages of all plugins:

Bad Behavior
HeadSpace2
Search Everything
Shutter Reloaded (or WP-Slimbox2 or Lightbox 2)
Similar Posts (or YARPP)
Subscribe to Comments
WordPress Database Backup
XML Sitemap Generator
Contact Form (Easy Contact or Contact Form 7)
Mobile WordPress (MobilePress or WordPress Mobile Edition or Wordpress PDA & iPhone or WPtouch)

Bad Behavior

Home: Bad Behavior
What: Blocks automated spam
By: Michael Hampton
Version: 2.0.26
Rating at WP.org: 75/100 by 47 people

Bad Behavior is an antispam solution that takes a different approach. Instead of looking at the message, it examines the messenger and the delivery method: If they are not legitimate, they are simply blocked, before they even get to submit a message. Since most—almost all—comment spam is delivered by automated bots, this is a clever approach, and it seems to be effective too. Bad Behavior virtually eliminates comment spam. Optionally, it can also consult the blacklists of harversters and comment spammers maintained by the Project Honey Pot, and with this option it is even more effective.

One type of spam that Bad Behavior is not designed to catch is manual spam: spam messages submitted by hand by humans. For this reason, it is often used as a first line of defense in front of a plugin like Akismet. But if you don’t receive a lot of manual spam, you may be fine with Bad Behavior alone.

LEARN MORE

Spam Prevention Strategy. The developer of Bad Behavior explains how to use the plugin as a part of an antispam strategy.
Project Honey Pot. To activate the http Black List in Bad Behavior, you need to register to Project Honey Pot (it’s free) and get an http:BL Access Key (it’s free).

HeadSpace2

Home: HeadSpace2
What: Search-engine optimization and more
By: John Godley
Version: 3.6.19
Rating at WP.org: 75/100 by 65 people

All in all, WordPress is well optimized for search engines. It does not need fixing and there are only a few things you can do here and here, like generating meta descriptions from post and page excerpts, or adding noindex tags to Archives, Categories etc.

HeadSpace2 is perfect for this: By default it does nothing, while, at the same time, it is powerful and versatile, more than any other plugin for WordPress SEO. So, you can use it to apply as few or as many optimizations as you want.

It also offers an array of extra features not directly related to SEO but handy nevertheless, like an option to activate themes or plugins per page, or an option to display a different number of articles on the home page and on archive pages.

Search Everything

Home: Search Everything
What: Extends the WordPress search
By: Dan Cameron and many contributors
Version: 5
Rating at WP.org: 78/100 by 93 people

The built-in search mechanism of WordPress is limited: it only looks in the content of posts. Search Everything extends the WordPress search to pages, comments, excerpts, tags and more, and it’s very easy to configure. To use it in its default configuration, you just activate it. You can modify its default settings by ticking or unticking a few check boxes.

Shutter Reloaded

Home: Shutter Reloaded
What: Lightbox effect for images and galleries of pictures
By: Andrew Ozz
Version: 2.2
Rating at WP.org: 73/100 by 49 people

The Lightbox effect is one of the best things JavaScript has brought to the web: a pleasant, unobtrusive way of going from thumbnail to full-size image and of viewing slideshows.

Since the original Lightbox appeared in 2005, many alternative implementations have been developed and there are several plugins that adapt Lightbox implementations to WordPress. Shutter Reloaded is different that most in that it does not require a JavaScript framework like jQuery or MooTools, and so it is very light. Like the two alternatives below, it is also easy to setup, has many features, it is applied automatically to images (you don’t need to change anything in your posts) and it can also group images into sets.

ALTERNATIVES

WP-Slimbox2 by Greg Yingling, rated 89/100 by 9 people, brings Slimbox2 to WordPress and uses the jQuery framework. It is a relatively new plugin at this writing (April 2009) and it seems to work very well. (It is the one currently used in op111.net.)
Lightbox 2 by Rupert Morris, rated 79/100 by 93 people, has a feature that I miss in both Shutter Reloaded and WP-Slimbox2: It takes the image titles and uses them as captions on the images. On the downside, it requires the sizeable Prototype framework.

Subscribe to Comments

Home: Subscribe to Comments
What: Option for commenters to be notified of new comments
By: Scriptygoddess (originally), Mark Jaquith (now)
Version: 2.1.2
Rating at WP.org: 73/100 by 172 people

If you accept comments in your WordPress site, you must install Subcribe to Comments, at least as a courtesy to your commenters. It adds a check box that commenters can tick to get e-mail notifications of new comments.

The same can also be achieved by subscribing to the post feed. However:

Not everyone uses feeds; and
The convenience of Subscribe to Comments is appreciated even by those who do

If you allow comments in your site, install Subscribe to Comments!

WordPress Database Backup

Home: WordPress Database Backup
What: Automated and on-demand database backups
By: Scott Merrill (originally), Austin Matzko (now)
Version: 2.2.2
Rating at WP.org: 81/100 by 102 people

Good webhosts backup automatically the sites they host. Even so, having copies of your database sent to your inbox at regular intervals is an extra layer of protection and a nice convenience. WP DB Backup does this without hassle. You set it and then forget about it.

NOTE. WP DB Backup only makes copies of the database: posts, pages, comments, metadata and also settings of themes, plugins and of WordPress itself. It does not back up the files (pictures, videos etc.) that you upload to your posts (and which are located in wp-content/uploads).

XML Sitemap Generator

Home: XML Sitemap Generator
What: Generates and maintains an XML sitemap
By: Arne Brachhold
Version: 3.1.2
Rating at WP.org: 85/100 by 430 people

An XML sitemap is a file in the home directory of a website, e.g.: http://example.com/sitemap.xml, that tells search engines where to find the pages that are available to crawl. It is an important part of any modern website that wants to be visible by search engines, but making and maintaining one is not simple. XML Sitemap Generator does this automatically. It makes an XML sitemap, it updates it every time a new post or page is added and it also notifies a few major search engines about the change.

NOTE. XML sitemaps and sitemap pages, like this, are different things. The former are unstyled XML documents meant for machines. The latter provide an index, an overview of the site’s content, for human visitors.

Contact Form

WordPress sites have comments, but often people need to contact you in private, by e-mail. The most convenient means you can offer for this is a contact form. There are many good contact forms for WordPress, but none I’m perfectly happy with. Here are the two I like most:

Easy Contact by Scott Wallick, rated 98/100 by 18 people, is near perfect: It’s easy to set up and has all the basics plus two optional features that I consider essential in a contact form: a quiz (for antispam protection) and a check box that senders can tick to receive a carbon copy of their messages. — It also does something bad: By design, upon deactivation it deletes automatically all its settings from the database.
Contact Form 7 by Takayuki Miyoshi, rated 82/100 by 199 people, is more advanced, supports more fields and also multiple instances, but it does not offer a CC option.

op111.net uses Easy Contact: op111.net/contact — You are welcome to try it if you want; just remember to put [TEST] somewhere in the subject.

Mobile WordPress

As more and more people browse the web through mobile devices, it is becoming essential for websites to look good in mobile browsers. One way to do this in WordPress is a plugin that, when it detects a mobile browser, activates a theme tailored for mobile devices. Here are four that I’m looking at:

MobilePress by Younique (rated 79/100 by 41 people).
WordPress Mobile Edition by Crowd Favorite (rated 66/100 by 22 people).
Wordpress PDA & iPhone by Imthiaz Rafiq (rated 75/100 by 34 people).
WPtouch by BraveNewCode (rated 80/100 by 39 people).

Add to del.icio.us

op111.net » English

Progressive enhancement of drop-down menus with the :not CSS selector

Step 1

Step 2

Step 3

How does this work?

Fine... But!...

I want the helpful indicators in Internet Explorer too!

I want different indicators for parents of different levels!

Links

Appendix

Related

Page Lists Plus: Comprehensive control of your WordPress page menu

Page Lists Plus

Page Lists Plus global options

Page Lists Plus per-page options

Suggestions & Feature requests

Questions & Answers

Behind Page Lists Plus: Tim Holt

Links

Related

Eight website/weblog designs I enjoy

en-ca.org

kyleslattery.com

madebyfrog.com

melly.me

nikolay.bg

tom.preston-werner.com

whistleandfish.com

wilsonminer.com

Notes

Related

WordPress 2.8: What’s new

Accessibility improvements

Authentication: more pluggable

Columnification and pagination in Screen Options

CSS: new dynamic classes with body_class()

Feed links for everything

JavaScript at the bottom

LiveJournal Importer: Redone and improved

Minification and concatenation of CSS and JS…

Plugin Installer

Plugins management

Pretty permalinks for IIS 7

Proxy support

Quotation marks locale-aware

Relational navigation links

Smilies: Now faster!

Theme Installer

Theme/Plugin Editor with highlighting and lookup

Timezone selection and DST

Widgets API: new and multiple-instance

Widgets management UI: Redone, much improved

That was it!

Changes

Related

Basic WordPress plugins

Bad Behavior

HeadSpace2

Search Everything

Shutter Reloaded

Similar Posts

Subscribe to Comments

WordPress Database Backup

XML Sitemap Generator

Contact Form

Mobile WordPress

Related

CSS: new dynamic classes with `body_class()`