WordPress

Those of you who are just looking for a great way to display blog stats in your WordPress Dashboard, read no further. Sign-up for pMetrics and then download the plugin.

But connoisseurs of innovative technology take note. Performancing is today releasing what we see as a major step forward in WordPress plugin technology. The innovation that we are introducing is at the level of fundamental architecture and can be generalized for numerous applications. We demo the technology in our 1.0 pMetrics plugin release.

Several months ago over at College Startup, I wrote a post over at College Startup entitled Open Source Priority #1: One Click Updates. The general idea behind the post was that we should move beyond the old-art of software updates (deleting, downloading, unzipping, re-uploading). The old-art is especially problematic when running dozens or hundreds of blogs.

After making that post, I realized that I should do something about it. Enter Sean Hickey from Headzoo. I explained my ideas to Sean and asked him to execute this new software architecture, using the pMetrics API in the hopes of killing two birds with one stone: 1) making a killer demo and 2) giving pMetrics users an expandable, auto-updating plugin

In a nutshell here’s what the pMetrics plugin offers:

1. Auto-updates (this option can be toggled on and off)
2. One-click installs for added functionality
3. One-click removals (deletes files off the server)
4. Blog stats in your WordPress dashboard
5. Latest searches display
6. pMetrics rank display
7. Auto-installation of pMetrics javascript code

Coming Soon

8. Auto-installation of affiliate banner in sidebar
9. Blog sales page with detailed pMetrics statistics
10. Feedburner integration

and much more…sky’s the limit.

Download the plugin now

I’m proud to announce the latest WordPress theme from Performancing, the News Theme.

The theme intends to mimic the look and feel of a print magazine or newspaper, with paper-like upper and lower edges, which is quite suitable for blogs that want to put forth a newspaper-y type of image (aided by the display of the current date on the masthead).

The color scheme uses subtle shades of grey and blue, with the sidebar standing out with orange tints.

It’s a return to the traditional 2-column format with the header able to pack in plenty of links and information while looking clean and professional. The background color in the sidebar panels is a nice touch, although for the blog I’ve got planned for this theme, that’s the first thing I’d change.

The sidebar is wide enough to accommodate graphic ads or text links, and the 3-column footer gives it a very nice balance.

The News Theme also fits almost all the criteria I set out in the ‘what makes a WP Theme great’ post last month, and overall I’m thrilled to have this theme come out, and I’ll be launching a new site using this theme soon which I’ll announce here in this thread.

Hope you guys like the theme – let me know what you think about it and how (if) you think it can be improved.

Also see: Performancing WordPress Themes

Disclaimer: My website, Soccerlens.com, sponsors the News Theme.

In the last hour or so I’ve been scribbling notes for what would make an ideal WordPress theme. It occured to me that any successful theme would have to meet 2 main objectives: proper structure, and focus towards a particular audience.

By structure I’m talking about the basic building blocks of themes (or even websites):

• Code must validate – adherence to web standards
• Cross-browser compatibility
• Should follow basic usability guidelines / requirements
• Uses modular, easy-to-customise code
• A focused channel for theme support and upgrades
• Follows WordPress coding standards

A website will be limited by the imperfections in its foundation – so if you’re building a theme that will be as popular as Cutline or K2 (or even more popular), then you must lay the proper foundations.

The second condition is focus – and knowing which audience you are designing the theme for.

Designing a general-purpose theme is hard than one focused towards a specific audience. It’s easier to plan the layout of a theme for a photoblog or a car blog than it is to plan the layout of a theme that could be used in a thousand different ways. You have to allow for the design to be immensely flexible and at the same time include the basic elements that would be needed by and be useful to everyone who takes your theme for a spin.

For the sake of discussion, let’s work on building a general-purpose theme.

There are dozens, if not hundreds, of different decisions to make when doing a layout of a theme. Most of these though, are personal preferences, using the 80/20 principle and focusing on the core factors, I ended up with the following list:

• Banner + horizontal menu at the top

  Personally I’m not happy with restricting a theme to this option but the thing is, this setup works well for a majority of blogs

• Multiple options for columns

  Instead of restricting the theme to a single column pattern (2 column right-sidebar), I think it’s a better idea to go Semiologic’s way and build a system in which the blog owner can easily change the number and alignment of columns through the WP Admin area

• Extended footer

  the 2 or 3 column footers seen on several WP themes are an excellent means of organising information – while the theme may appear bottom-heavy if there’s no banner at the top or if there’s not enough content in one post, the multi-column footer technique can work well and should be used.

• Advertising

  Some basic concerns when building a theme with advertising in mind – 3-column versions of the theme should have a content area wide enough to show the 300px AdSense block / 468px AdSense banner, and the 2-column versions should have a sidebar that’s at least 270 px wide to accomodate 2 columns of graphical ads

• Navigation / above the fold elements

  A reader lands on a random page of your website – how does he orient himself and what does he do there? Another reader lands on your blog’s main page – how do you provide them direction through your blog and how can they, in a few seconds, find all the key areas / functions of your blog?

• Make it fully customizable

  I’d prefer a theme that can be completely customised and turned inside-out using the same building blocks

• Static home page

  What is the main purpose of your blog’s front page? What is the main purpose of any category archives page on your blog? Chances are, the two answers are different, so why would you keep your front page looking the same as a category’s archives? A static front page helps you plan and implement a proper landing page for prospects and direct readers to different sections of your blog

Questions

• What color scheme should be used?
• Which plugins should have built-in support?
• What changes would you make to the structure discussed above?

Comments are welcome – let me know what you guys think.

Matt Mullenweg likes playing the victim. But in reality, he’s using his perceived victimhood to evade the key question over sponsored themes:

Wouldn’t it be better to establish a *quality* criterion as opposed to a *sponsorship* criterion?

Another way of putting it is this:

Aren’t PressRow and Cutline damned good WordPress themes that have benefited the WordPress community?

Instead of answering these questions straight-up, I expect that Matt (and his WP fanboys) will continue to take the following copouts:

1. Cry victim and ignore this legitimate criticism

2. Claim “significant financial interests in seeing sponsored themes continue”

The fact is that both of these responses are irrational. Arguments can be sound regardless of who makes them. I’ve made an argument that you might refer to as reductio ad absurdem: the new policy has the brittle effect of wiping out great themes like Cutline and PressRow. That’s an undesirable effect. There must be some middle ground.

But no. We’ll throw the baby out with the bath water. And we’ll cry victim while we’re at it (and delete reasonable comments that make us look bad;-)

If you browse the WordPress Theme Viewer, take notice of where most designers place their page links. Most designers put them in a horizontal menu either directly above or below their header image. What you might also notice is that many designers treat the links like tabs with a link hover effect. Sometimes, that link style (something that sets the tab apart on hover) will be shared with an active page style. In other words, a tab will look different than the other tabs when it is either being hovered over by the mouse, or if the tab represents a page that is currently active.

Thankfully, the good folks at WordPress decided to add a great little feature to the wp_list_pages function. When a page is active, the list item that represents that page gets a class added to it called “current_page_item”. This is in addition to the “page_item” class that is on all page list elements (elements can have multiple classes). So now that we know that this new class is automatically added to active list items, we can take advantage of that and style that element based on the class, to demonstrate that the page tab is active.

As always, I’m assuming you know basic web coding, and this isn’t a tutorial on how to make tabs in CSS. If you need help with that, check out Listamatic.

The WordPress Template Code

So, let’s assume you’ve got the menu marked up like so:

<div id="menu">
<ul>
<li><a href="<?php echo get_settings(‘home’); ?>">Home</a></li>
<?php wp_list_pages(‘title_li=&depth=1’); ?>
</ul>
</div>

Yes, I’ll explain this 🙂

The first <li> is a link back to the home page of our blog. It’s dynamically generated based on our WordPress Settings. Pretty cool. Next comes our page list function. As you can see, I’ve opted to not display a header (because this is a horizontal menu), and only display top-level pages (depth). You can take a look at all the different options here.

The HTML Output

Now, the html output of that code will look a little something like this:

<div id="menu">
<ul>
<li><a href="http://example.com/">Home</a></li>
<li class="page_item"><a href="http://example.com/page-1/" title="Page 1">Page 1</a></li>
<li class="page_item"><a href="http://example.com/page-2/" title="Page 2">Page 2</a></li>
</ul>
</div>

You may have noticed the class added to each of the list items that were given to us by the wp_list_pages function. Really, this doesn’t matter all that much, because we can control the look fairly easily without it.

But, when you are on one of those pages (when the page is active), the output looks like this:

<div id="menu">
<ul>
<li><a href="http://example.com/">Home</a></li>
<li class="page_item current_page_item"><a href="http://example.com/page-1/" title="Page 1">Page 1</a></li>
<li class="page_item"><a href="http://example.com/page-2/" title="Page 2">Page 2</a></li>
</ul>
</div>

Notice the addition of the “current_page_item” class that got added to the Page 1 list item. What this means is we can actually add a new class in our CSS file and style it:

#menu ul li.current_page_item {
style goes here
}

Add whatever style you’d like to that class, and make it stand out as an active tab.

Oops! A problem!

As some of you may have noticed, because we hard coded the <li> element of the link to the homepage, there’s no way for it to add the class dynamically based on whether or not the homepage is active. So, let’s put in a little PHP to fix it:

<div id="menu">
<ul>
<li class="<?php if (is_home()) { echo "current_page_item"; } ?>"><a href="<?php echo get_settings(‘home’); ?>">Home</a></li>
<?php wp_list_pages(‘title_li=&depth=1’); ?>
</ul>
</div>

We use the is_home() conditional tag to determine if we were on the homepage. If we are, then it echoes “current_page_item”. A simple workaround, but it works like a charm.

Definitely take a look at this and use it to learn a bit more about how to take the built in WordPress functionality and use it to your benefit by making really cool, feature-rich themes.

Have an idea for a future post? Want to know something about WordPress that you can’t quite figure out? Leave a comment below and let me know. Your question may be the subject of a future WordPress tutorial right here on Performancing!