So, what is a theme framework really?

Most developers already have a broad sense of what a framework is but in granular terms (as it applies to WordPress theming), a framework is basically a large-scale template (or outline), which presents a way of rapidly developing themes based on common axioms. Did you catch that? It presents a way. So a WordPress framework can mean different things to different people.

It may be a collection of modularized style sheets, scripts, or plugin support files set in a distinct hierarchy. It may be a minimally styled theme with hooks, custom functions or microformats. It may be a theme devoid of styling, but with a semantically rich set of classes applied to the markup. (Technically, even this is a framework.) Regardless of what’s included or discarded, one certainty is that each framework will have a particular style of organizing, coding and referencing the components within it.

Based on this explanation, we can at least deduce that frameworks are NOT:

• a one-size-fits-all theme (such a thing doesn’t exist in my book)
• a formula that every developer/project can adhere to
• an all-encompassing solution (that kind of thinking only kills creativity)

So what’s the big deal about frameworks then?

If you can concede the points above, only then will you begin to see the potential. There is no ONE framework that will fit every developer’s style or every project’s need. The idea of a framework was never intended to be a singular answer. Those who misinterpret it as such will never realize the value therein. If you recognize there are benefits to using one but don’t quite know what they are, here’s a few things frameworks can do:

• offer a stable, methodical way to approaching projects
• expedite repetitive tasks
• reduce the margin for error
• simplify the provision of customer/client support
• provide an easy, future-proof alternative to theme customization (i.e. child themes)

Sounds great right? I can’t imagine why anyone wouldn’t want those things… but not everyone has the ambition to create a framework and of course there will always be skeptics of the whole concept. The question is, could you benefit from a ready-made templating system? Yes, if one or more of the following applies to you:

• I’m a developer in need of a remedy for the obstacles and time-sinks that come with coding from scratch
• I’m a designer searching for a way to increase productivity or streamline my workflow when it comes to post-Photoshop development
• I’m a developer looking to adapt a framework to serve my own needs, improve my product line or enhance my support system for existing products

Wait! I’m a consumer and I just want to know what this has to do with me.

Well, you’re in luck. Customers may have the most to gain from frameworks. When you use a [child] theme built on a framework (such as Thematic, just for example), the author can provide updates and/or new functionality when it becomes available – and you won’t have to worry about losing or rewriting your customizations every time! If you doubt it, jump on Twitter and ask Ian or Nathan. They’re big proponents of protecting customer modifications.

I’m interested. How do I know if a framework is reliable or suited for me?

A surge of frameworks have already been released and I’m sure there’s more to come, but only you can make that determination for yourself. That’s one drawback of frameworks. You may not really know until you work with one for a while. Unfortunately, if you must experiment with several before finding something you really like, that’s a significant investment of time and a big deterrent – especially if you fall into one of the aforementioned categories.

I’ve never been deeply set in a particular workflow and I find the concept of using a framework very interesting, so I’m willing to investigate the possibilities of someone else’s ideas. I’ll adapt what is useful, reject what is useless, and create what is specifically my own. Perhaps I’ll release the result someday. For now, I’ll refer you to the following list of framework candidates:

Sandbox – Probably the de facto of theme frameworks… or at least it used to be. In the early days particularly, Sandbox lived up to its name by being the theme that everyone tore apart to learn from and build derivative works with.

Sandbox theme by Plaintxt.org

K2 – described as an advance template, K2 is perhaps the first to support sub-templates called styles (or what is now more commonly known as child themes).

K2 theme for WordPress

Thematic – The brain child of Ian Stewart, Thematic is establishing itself as the “go-to” theme. Quite a bit of ingenuity went into the building of this framework, and it continues to improve with each release. It’s also well supported, with a growing community of enthusiasts.

Thematic by Themeshaper

Theme Hybrid – With over a dozen custom page templates and widgets galore, Hybrid is another framework making waves (so to speak). Justin Tadlock is the developer behind it and like Ian, he has also established a strong community with equal support. Additionally, Hybrid has been translated into an impressive list of languages besides English.

Theme Hybrid by Justin Tadlock

WP Framework – On par with Ian and Justin is Ptah Dunbar, who created his own version of a framework. While it hasn’t been around as long, the author has regularly released maintenance updates.

WP Framework by Ptah Dunbar

Carrington – This framework is a bit different in that it’s designed specifically for use of WordPress as a CMS. It’s developed by a small but talented company, is very well documented and has a ton of actions and filters which can be employed. It’s a bit intimidating at first but I think given the time, a developer could really run with it.

Carrington by Crowd Favorite

Vanilla – While not necessarily described as a framework, it is based on Carrington and appears to be a lot of potential behind the idea.

Starkers – Developed by Elliot J. Stocks, this is mainly just a “naked” theme, which actually stemmed from K2. For those with simple requirements, this could be all the framework you need.

Whiteboard – Within the same school of thought as Starkers, this framework is another blank theme type.

Empty Canvas – Also falling into the blank theme category is the appropriately named Empty Canvas. While not described by the author as a framework at all, it could still serve as one based on what we deemed a framework to be in this article.

Thesis – Although marketed as a framework, the fact that Thesis is 1) a full commercial theme and 2) geared mainly for the end user who doesn’t know HTML/CSS  – disqualifies it in my opinion. It’s also my understanding that it contains quite a bit of proprietary code. It would be difficult then, to determine where the framework “outline” ends and the developer specific code begins. That said, Thesis is still worth mentioning here because with it, Pearson has pushed the envelope of theme development and introduced other devs to some exciting new possibilities.

Summary

This article was not designed to advocate frameworks nor deny their usefulness. Every developer is different and has a unique way of approaching a task or completing a project. The intention was simply to inform and motivate those who seek to understand frameworks and what their cabapilities are, to debunk any misunderstandings and to showcase particular works which I feel could benefit a variety of developers who make their living with WordPress. I sincerely hope it was a helpful resource. As always, you’re invited to add your thoughts on the topic below.

First, some Diagnostics

One quick way to figure out how many queries your blog is making is to insert this little snippet somewhere in your footer:

<!-- <?php echo get_num_queries(); ?> queries -->

After uploading, refresh and view source on whichever page(s) you want to check. The number of queries will be variable. My homepage has 41 queries for example, while most other pages have 10-17. That at least indicates where I need to make improvements.

For a more comprehensive look at your site, get YSlow. It’s is a terrific little Firefox add-on which runs analysis checks and reports back with suggestions for improvements. Also ties right in with Firebug.

Purging Code

There’s always some new blog thingamajiggy being released. If you get excited about widgets and plugins, then just as quickly get bored and uninstall them – don’t forget to remove the snippets which call the functionality!

Do you use multiple stats programs? You might consider picking one or two, then removing the excess javascript for the metrics you abandon. The header.php and footer.php files are the two biggest culprits for user added, load-bearing code… and they’re easy to forget about. Deleting unnecessary tags from your header may also be beneficial.

Maintaining a Healthy Database

How long has it been since you opened up phpMyAdmin or took a gander at your database? If you install/uninstall a lot of plugins, it might be in need of a tune-up. Clean Options can help with that task. Basically, it sweeps up orphaned data from the Options table. It has limitations, but it’s a great start.

Out With the Old

One word – Categories. Do you have way too many? How about reeeeeally old posts which are not only irrelevant now but possibly riddled with broken links? And what about plugins you were using prior to the release of 2.5 which are now (or will be) deprecated? Things like Search Everything, Click Tags and most Avatar plugins come to mind, because the functionality for each is now supported in the WP core. Remember, even deactivated plugins just sitting on your server can bog down load times!

A Need for Speed

Geekery is a wonderful thing (especially the WordPress flavor), and thanks to people way smarter than me there are plugins like WP Super Cache, which will help tremendously if you have a large database, or take a Digg hit.

Okay, getting started. Open up your comments.php file. (This tutorial assumes you’re using WordPress as your blogging platform, by the way). Look for your opening OL tag. Using the default theme as an example, you should see something like this about 1/4 of the way down the page:

Depending on how your theme is set up, next you might see the statement within the LI tag which instructs WordPress to echo the comment if it’s approved. We don’t want to go straight into that yet. Instead, we’re going to insert some code telling WP to also check if it’s an author comment. Here’s how it looks in my comments.php file (I removed the Gravatar code for brevity’s sake):

< ?php if ($comment->comment_author_email=="charity@designadaptations.com") echo 'author';
else echo $oddcomment; ?>

This runs a comparison against whatever email address you entered as the administrator of your blog, so be sure you use that one if you want it to work. I you plan on having guest bloggers, you could also add this between echo ‘author’; and else echo:

else if ($comment->comment_author_email == "guest@email.com") echo 'specialguest';

Now you’ll have to add some styles to your CSS. The Web Developer Toolbar for Firefox is incredibly handy for this, because it’ll show you the elusive hooks used in WP’s core code which are used for identifying author comments. If you have it, hit Cmd+Shift+Y (Ctrl+Shift+Y on PC) and hover over a test author comment in your browser to see what I’m talking about.

Here’s how my style sheet looks:

.cite { /*for reader comments */
float:left;
margin:0;
padding:5px;
font-size:1em;
width:120px;}
.cite img{padding-right:5px;}
.cite a{font-weight:bold;}
.comment_content{float:right; width:390px;}

li.author .comment_text{/*for author comments*/
color:#222;
border:solid 1px #69c;
background: #69c url(images/auth_comments.jpg) top left;}
li.author .cite a{color:#333!important;}
li.author .cite a:hover{color:#fff!important;}
li.author .cite .commentmeta a{color:#333!important;}
.author .comment_text p a {color:#fff !important;}

Notice I had to override the inherited rules (from the .cite class) by adding the !important keyword. You may or may not have to do this depending on your styling hooks and how they cascade.

That should be all there is to it! Having your comments visually distinguished from others is not only helpful to readers, but to you as the author if you need to refer back to something you said earlier. ;) It’s also a nice addition to the “curbisde appeal” of your site. Enjoy!

Spamming is an enterprise I’ve never understood. Do these people actually get clicks and make money? I realize we live in an ad-driven society… junk mail, television and radio commercials are all widely accepted. So why is spam is so loathsome? Because it’s utterly unavoidable.

With TV or radio you can walk away, switch the station or turn them off any time. Telemarketing is annoying but can always hang up (or don’t answer the phone in the first place). Spam gives you no such options. If you want to preserve the integrity of your site, you have to deal with it.

So other than moderating ALL comments, what’s a blogger to do? In addition to Akismet, here are a few highly effective plugins designed to guard against comment spam:

• Moderate Brief Comments – automatically puts into moderation very short and/or one word remarks
• WP-SpamFree Anti-Spam – eliminate automated trackbacks and pingbacks
• Bad Behavior – block link spam generated by robots

Have you experienced success with a particular plugin? By all means, add it here and ease someone’s pain! ;)

WordPress Database Backup

This is imperative if you don’t want to risk losing everything on some idle Tuesday afternoon. I speak from experience. Even if your host provides regular backups for you, it’s better to take matters into your own hands. Admittedly I’m a control freak, but in my opinion this plugin is probably more essential than any other I can name. Now managed by ilfilosofo.

Advanced WYSIWYG Editor

Save yourself loads of time in formatting posts… add headings, anchors, horizontal rules, sub/superscripts and even special characters right from the visual editor. I don’t mind code at all, but without this plugin, you have to switch to code view and hand-code the HTML for any of the above, and it just gets old. Still can’t figure out why these features aren’t part of the core WYSIWYG. Oh well, Labnotes trac can fix that.

WP Tiger Administration

Sleek and simple, this is a skin for the WordPress admin by Steve of OrderedList. Meant to emulate the Mac OS environment, it’s a very nice alternative to the WP default. The color scheme is a bit on the drab side, but the clean layout, smaller text and muted tones make all the admin panels more readable, navigable and just generally more usable.

Edit: (10/02/07) Tiger is a little buggy on v2.2, and doesn’t play well with v2.3 at all. :(

Contact Form II

A basic drop-in contact form, customizable via template page. Offer visitors a way to contact you from anywhere on your site, without ever having to publish a mailto link. Not only will you be providing readers with a user-friendly way to contact you any time, but it prevents those damn harvesters from getting hold of your email address, helping you minimize the daily onslaught of spam you’ll eventually get.

Maintenance Mode

This begs to be included due to the sheer volume of WP updates rolled out. I have a small panic attack every time I have to upgrade, and I’d be willing to bet a lot of others do as well. ;) If you tend to screw things up in the process, and you don’t want the world to know you sometimes annihilate your blog, this has you covered. Activating it displays a short message informing visitors of maintenance downtime. Everything is still accessible to administrators while in maintenance mode.

FeedSmith

Originally developed by Steve Smith, this plugin was recently adopted by Feedburner (who were themselves recently adopted by Google). With it, you can provide format-independent “smart feeds” to your audience, and effectively track and manage your readership. Incidentally, signing up with Feedburner offers a great number of benefits aside from FeedSmith, but that’s beyond the scope of this post.

Akismet

This extremely popular plugin bears mentioning just in case someone missed it. It’s a comment spam catcher, and a very effective one at that. If you don’t already have it running on your blog, you can learn more and download it from the official Akismet site.

Smart Update Pinger

WordPress by default allows you to ping any update service you wish. Notification takes place every time you publish or update a post. The concern here is possibly flooding the update services and getting banned for “ping spamming”. I don’t know if that’s really worth worrying about, but I’m listing Smart Update Pinger because of its log. You can see exactly which services are pinged and when. Out of the box, WordPress offers no such information.

Each of these plugins are recommended because they’re simple to install, configure, and use. Independent of your blog niche, work-flow or site design, these all do their small part in enhancing the functionality of the WordPress admin, and for you, that means working smarter and happier. Yay!

• it requires patience and a lot of experimentation
• it’s difficult to test and measure effectively
• it’s very time consuming

Though I’m not a guru by any means, I have learned a few tricks about improving SEO that may help you get started with a little greater understanding than I started with.

Utilize the tools available

Improving search engine optimization could be as simple as adding a plugin such as the All In One SEO Pack to your WordPress installation. With it, you can add a title and keywords to individual posts from within the Write Post panel. You can also tailor meta information regarding your site overall, such as title, description and keywords.

Use appropriate tags

Tagging and categorizing is more than just a means of organizing your content. Other than providing a navigation system or filter mechanism for your visitors, it’s a way of signaling the bots that crawl your site. Useful category names and using tags that relate to your content will help you make friends with the SEs.

Make small changes

The search engines are very secretive about their indexing frequencies, and pinpointing an exact schedule is impossible. We may never know exactly when they crawl our sites, but we can exert some control by making measurable changes to things like ad arrangements, keywords, or product presentations. In other words, don’t change everything all at once, because then you’ll have no frame of reference for which changes are effective.

Track your efforts

Get your hands on a good tool for monitoring and analyzing your stats (incoming traffic, clicks, exiting traffic, etc). Knowing where your traffic is coming from, where it’s going and how people are interacting with your content will help you determine which keywords are performing, which ones might need tweaked and which ones people are searching to search your site. Google Analytics and pMetrics both provide free stats software.

This was intended to be a very brief guide to starting out with SEO. For some fast and easy tips on optimizing your blog, see my article 5 Simple Steps for Improving SEO.

Powering your entire site with WordPress can be done with a minimum of configuring, while still affording you the ability to maintain a tidy file structure, by installing WordPress to its own directory). This way, your blog “virtually” exists in the root, allowing you to create static pages and offering control over the site-wide content you develop.

Update: This is not an article on how to hack WordPress into a full-fledged CMS. It was written long ago and targeted version 2.0. It remains mostly for posterity. Please note I also removed a large portion of the original tutorial because the release of WP2.1 made the info obsolete.

Installing WordPress Into its Own Directory

1. Create a folder in your file structure where you want to install WordPress. Unpack and FTP all files into that folder.
2. Navigate to the new folder in your browser and follow the prompt for setting up your database and logging in
3. Once logged in, go to Options > General and make sure the address currently in the box labeled WordPress address (URI) matches the name of the folder you installed to, for example http://whatever.com/yourblog
4. Change the address currently in the box labeled Blog address (URI) to reflect your root – http://whatever.com
5. Save your changes
6. Still in Options, go to the Permalinks tab, and change the structure to whatever you prefer. I typically use /%category%/%postname%/

Note: The purpose of changing permalinks at this point is to force the .htaccess file to show up in the remote file structure, where it would normally be hidden (even if you have “show hidden files” selected in your HTML editor prefs)

7. Download .htaccess (thereby forcing it to be visible on the local side as well)
8. Copy index.php and .htaccess from your blog root to the site root.
9. Open index.php and insert the folder name of your blog just before the slash (/) so it reads:

   require ('./whatever/wp-blog-header.php') ;

10. You should now be able to navigate to your site root http://whatever.com, and see your blog content, rather than a static front page.

Note: Be sure you don’t have something like index.htm in your root, which would override index.php.

So now you should have a shiny new WordPress installation set up and ready to customize. Before we dive in to actually using it as a CMS, let’s cover a few  basics. There are two means of displaying content with WordPress – Pages and posts. Pages operate outside the the Loop. In other words, they don’t age and they’re usually accessible as part of the main navigation. They’re used for displaying static information such as a contact form, bio, services, etc. Conversely, posts are dynamic pages which will “age”, or move down the blog chronology as new entries are made.

Page Control

The number and type of pages which can be added using custom templates is virtually limitless. Say you want to showcase your Portfolio. You might need a layout vastly different from your standard pages, especially if you’ll be displaying large images. The easiest way to accomplish this is to duplicate page.php, rename it to portfolio.php, and style to fit the needs of your content. Finally, add the following to the top of your page (before any other code):

<?php

/* Template Name: Portfolio */

?>

FTP your new template and log in to your control panel. From within the Pages admin panel, create your page. I know this seems redundant, but WordPress needs to reference it somehow. Add your content (either from within your HTML editor, or via the Write box within WordPress) and assign the page to the ‘Portfolio’ template using the drop-down selector on the right.

Post Control

Using the Loop, you have extensive control over how and where your posts appear. You can create custom styles by category, single post, or even by manual posting. For example, the index page of a typical WordPress site features the most recent post(s), ordered by date. If you want only certain entries to appear on the front page, you can specify this by modifying the Loop in the home.php or index.php file.

Further Considerations

• Comment Control – for every forum, blog or community portal, there needs to be a way to moderate. In time, you may need to employ the use of some comment moderation and/or anti-spam tools.
• User Management – User roles may not be a consideration for you yet, but if you ever plan to have multiple authors or users, you’ll have to implement some restrictions.

Well this wraps up my first attempt at writing a custom WordPress installation guide. :) If you notice that I left anything out or completely botched something up, please let me know so I can make corrections!