Over the past two weeks I’ve been working on WP Framework full time, knocking out the to do list and fixing bugs raised in the forums. As a result, WP Framework has received a boat load of new features and functionality that improves your theme development work flow dramatically.

No seriously, WP Framework really improved over the past 2 weeks and I need your help testing it to make sure it’s as polished as possible. Out of the many things I need your valuable help with, WP Framework’s got this sexy new auto upgrading functionality that needs testing on as many server environments as possible. Can you help me test that?

If you’re interested, leave a comment and I’ll forward you a copy the latest nightly along with some specifics about what I need help with testing. I’m closing the beta period by next Wednesday as WordPress 2.8.1 is around the corner and I’m trying to get this out the door when that ships.

1. inserting the <link> or <script> tag directly into the header.php
2. encapsulate the <link> or <script> tags into a function that hooks into an action hook (located in header.php)

I’m not particularly happy with any of those methods. WordPress has built-in functions for dealing with these file types: wp_enqueue_style & wp_enqueue_script respectively. The only drawback with css is that the old way of @importing stylesheets is deprecated. Of course this might be a good thing, depending on whether your big on performance or not.

Anyway, I decided to build an API around those functions that would easily allow theme authors to include css and javascript into their theme—the smart way. Simply filter the global array containing all the enqueued CSS files (or javascripts), and append your own:

add_filter( 'enqueue_styles', 'my_stylesheets' );

function my_stylesheets( $styles ) {
	$styles[] = array(
		'handle' => '2col',
		'src' => MEDIA . '/layouts/2col-r.css',
	);
	return $styles;
}

I’ve outdone myself. Instead of filtering the global array like I mentioned in the previous paragraph, simply make this call in your custom-functions.php:

framework_add_stylesheet( 'master', 'master.css', 'reset.css' );
framework_add_script( 'superfish', 'superfish.js', 'jquery', true, false );

The functions automatically search the media directory in their respective locations (which can be overwritten if necessary). Removing a stylesheet or javascript is even simpler:

framework_remove_stylesheet( 'master' );
framework_remove_script( 'superfish' );

Full documentation on these functions are in the Media API docs

The API accepts up to 5 parameters, with the first two being required. The parameters are dealt with exactly like their respective functions, so check those codex links for more info on that. Once I finish testing this API, it will be available in the next release.

The next version of WP Framework will be 0.4 and will ship once WordPress 2.8 releases (It’s currently in beta testing) New structural changes to the templates and a brand new theme options page are two of the many improvements that you’ll find in 0.4.

Change log:

New:

• You can now style categories with the category and category-slug css class
• Semantic Entries now uses get_post_class
• Microformat Profile URIs are now used

Bug fixes:

• js error: expected identifier, string, or number
• The gallery shortcode works as it should

And that’s all for 0.2.4.10, please post any bugs, ideas, or feedback in the forums!

Change log:

New:

• New screenshot.png now shows the base layout
• New default look (base.css)
• Part of widgets.php from the 0.3 branch is now included in 0.2.4 for better handling with widgets
• Comments and Pings/Trackbacks are separated
• 3 sample layouts are now included (library/media/layouts)
• Screen.js now has an example use of jQuery

Changes:

• The assets directory has been moved to the library and renamed to media
• The styles directory has been merged with media
• Archives pages now have a more specific .page-title
• The core directory has been renamed to functions + all files within that directory now have better names
• Constant names have been renamed in framework.php
• Comments.php has been reworked
• Semantic Classes has been reworked
• Navigation links are now below the comments

P.S. Coming this week will be the first public WordPress theme based on WP Framework: Haven (previously known as WP Freemium theme). A lot of you have requested an update for this theme, now it’s officially coming.

Things are constantly changing in the code base and maintaining these revisions is getting a bit cumbersome. So the main download link will continue to be WP Framework 0.2.3 until any future versions are stable enough.

I’ll still release any bug fixes and changes for 0.2.3 down the line if needed.

Development release of WP Framework future versions will still be announced but you’ll only be able to download them via the svn repo. If you’d don’t have subversion, then you can request a .zip copy but understand that it’s not intended for production. Thanks for your understanding. Doing this gives me more time to do other things like write documentation and develop the website.

Hope you guys like it, and as always, post any feedback on the forums!

Change log

New

• cleaner template files and a overhaul of all the backend code
• New entry_footer div under #entry-content and #entry-summary that shows the post categories and tags if they have any.
• new directory: extension (to house all the functionality that extends the framework)
• new files: general-functions.php, helper-functions.php, and pluggable.php in /core/
• screen.js now has an example function using jQuery
• New constant: REGISTER_WIDGETS in functions.php so you can set how many widgets you have in your theme

Changes

• theme-functions.php has been renamed back to custom-functions.php to become compatible with version 0.3
• hooks.php has been renamed to framework-hook-system.php
• updated the examples in theme.php (formally theme-functions.php)
• #entry-content and #entry-summary now have an extra CSS class called article to select both of them
• Base.css has been updated
• A few of the main divs have been changed to make the transition over to HTML5 easier:
  #container, #header, #footer are now classes.
• the #secondary div now has a new class called aside.
• removed smiley.gif
• no longer using get_author_link() as it’s deprecated. Now using get_author_posts_url();

The State of the Theme.

So, here’s the good news. There are tons of free themes available for WordPress. And with that, they’re are a multitude of sources to get your hands on those theme themes. Here are four ways WordPress users find and download their themes:

1. WordPress Theme’s directory
2. Blog announcement post/round ups (e.g. Weblogtoolscollection)
3. Directly from the theme author’s website
4. Dedicated theme sites (be it premium or freemium)

And that’s great! Lots of ways to find that one special theme you’re looking for. And that’s not all. Want to demo one of those themes? No problem! It’s extremely easy to demo a potential WordPress Theme and judge whether you’d like to use it or not. And it’s getting even easier with WordPress 2.8 around the corner. You’ll be able to search, preview and install a WordPress theme right from the convenience of your WordPress Dashboard. Now that’s what I call automattic.

All good and dandy. But there’s some bad news associated with that. A lot of WordPress themes (free or premium) aren’t exactly sexy under the hood. I’m sure you’ve encountered many poorly written themes that only contain the bear minimum to make that theme actually work. I’d hate to call anyone out, so just browse around and see for yourself. You’ll see themes with invalid markup, buggy code, and themes that only contain the bear minimum to make that particular theme work. Now when the Codex states that all you need to make a theme work is the index.php and style.css, some people took that way too literally.

With all that said, I’d hate to say it gets worst. In addition to being poorly written, containing buggy code and themes only containing the bear minimum, themes don’t innovate. WordPress provides users with a power widget system that allows you add blocks of content literally anywhere into your WordPress theme. Currently, widgets are only used as sidebar accessories. So much for innovation.

What’s a theme author to do? Raise the standard and create a tool as a guide to how themes should work under the hood. Create a tool to aide in the developing of WordPress themes with no fluff. Make it so that this tool only contains framework level code, architectural stuff that every theme needs or should have. This tool is a theme framework.

What is a theme framework?

I like to give an analogy of a car (cars = themes, bear with me). When building a new car, everything isn’t reinvented. Your not going to find innovation in tires or in a steering wheel from the new Dodge Grand Caravan. Instead, you’d probably find innovation through the features it sports. What results, is a lot of cars using the same parts. So can WordPress themes. It’s all about being more efficient in your craft. Factor out all the essential theme parts and use them as the bases for the framework. In doing this, you’ll dramatically speed up the time it takes to build recurring themes from scratch.

So in essence, I’ve just explained to you why I created WP Framework. I saw that they’re were no standards in theme authoring, everybody was basically doing what the other guy was doing for whatever reason, so I did something about it. After some brainstorming of figuring out how I could best solve these problems, I created WP Framework. What you have is an extremely modular, powerful theme, built with extensibility in mind.

Continuing from the car analogy, you’re not going to drive a car without doors or an exterior. You’re going to personalize it first, adding all those car features you always wanted and finally, drive it. I guess what I’m trying to stress is that it’s important to understand that when you download WP Framework, you’re not getting a fully designed WordPress theme ready to install on your site. Technically you could, but you’ll probably want to customize it first and make it look sexy.

WP Framework’s Goal

Now that you understand what a theme framework is, why I created one and how you can benefit from using one, here’s WP Framework’s goal.

My primary and only goal with WP Framework is to raise the standard for WordPress Themes and dramatically improve the efficiency in creating new themes from scratch.

I see that as a two part goal and will tackle it as such. The road to accomplishment far and burly, so I set some principles so WP Framework will have a clear path towards success.

WP Framework’s Principles

I come from a front-end web development background and I’ve done work both as a designer and developer. So it’s important that this framework is both, designer and developer friendly. How?

For designers, WP Framework will

• be web standards complaint
• always output valid, clean semantic HTML/CSS
• provide dynamic CSS classes based on context
• provide organization and structure to your themes

and for developers, WP Framework will

• contain well commented and forward compatible code
• allow any default behavior to be overwritten or extended
• provide convention over configuration
• serve as the bases any WordPress theme project

With these principles in mind, WP Framework is set off on a clear path to reaching it’s goal.

WP Framework Features

As of version 0.2.2, WP Framework features:

• Microformats coming in hAtom, hCard and XOXO vereities.
• Continually Search Engine Optimized
• Modular CSS includes ( reset.css, base.css, screen.css )
• Gravatar enabled
• Favicon & iPhone webclip placeholder images
• jQuery enabled + screen.js (an empty .js file pre-loaded and ready)
• Basic print.css Stylesheet ready for printing web documents

WP Framework sports a lot more features like well documented code and behind-the-scenes type stuff that power a theme. WP Framework really strives in the details so go take a peek inside.

The Future of WP Framework

So now we pretty much know what WP Framework is, who it’s for, and all that good stuff. What’s the future look like? Well for one, it’s pretty bright! lol I like to look at the future from two angels: near and… right after that.

Near Future

Currently, WP Framework’s target audience is theme authors who are more specifically, designers and developers. These guys are all technofobes who understand geeky terminology  POSH, or CoC. What I envision for WP Framework is to become the behind-the-scenes tool that everyone uses but doesn’t even know. Well, for the non-technical crowd atleast. I’d love to talk about the specifics, but rather sum things up like this: I want anyone, nontechie and geeks, to be able to visually build their own custom unique layout and have it up on their site moments later.

That’s all I have to say about that. For now, we’ll just call it Theme Builder.

Right after the near future

By then, I hope to have build a community around the project. Through wpframework.com, I hope to truly deliver a framework that’s everything you need and nothing you don’t. Essessntially, I envisioned a section on the site where you could download user genereated content like framework functionality that extend WP Framework itself and things of that nature.

I have a lot to say about the project, but instead of writing about it and trying to understand it, I’d rather produce and make it happen. That’s all I have to say.

Credits and Shoutouts

As always, I like to give credit where credits due. These people come from various walks of life with one thing in common. They’re continually advancing WordPress and for that, I thank them.

• Kubrick – default theme
• Nathan Rice – nathanrice.net
• K2 – Binary Bonsai
• Cory Miller at iThemes
• Sandbox – Scott Wallick
• Chris Jean – WP Roadmap
• Thematic – Ian Stewart
• Jeff Chandler – WP Tavern
• Hybrid – Justin Tadlock
• Mike – WPCandy
• Tarski – Ben Eastaugh
• Thesis – Chris Pearson
• SP

Q&A: If you have any questions, please feel free. If not, thanks for your time and I hope you get a chance to try out WP Framework in it’s infancy stages and see what it’s all about.

As many of you might know, version 0.3 is a major release for the project which introduces a lot of new functionality. It has been completely rewritten to pave the way for future innovations and features to come. Version 0.3 is my idea of a WordPress theme framework.

One of the main things you’ll notice about this new version is the abstraction that’s been done to all the template files. I’ve abstracted common elements from all the template files and consolidated them into callback functions. This allows for more gradual control over your layout, and keeps things DRY. Abstracting all the common elements allowed me to introduce a new concept to theme development called MVC. Model View Controller is a architectural pattern used in software engineering:

In MVC, the model represents the information (the data) of the application; the view corresponds to elements of the user interface such as text, checkbox items, and so forth; and the controller manages the communication of data and the business rules used to manipulate the data to and from the model. — Wikipedia

How does this translate to theme development? Well, think of the model as the WordPress database layer. The view translates to all WordPress template files (in which the user interacts with). And lastly, the controller is a combination of WordPress/theme functions that handle all the template logic. From an MVC perspective, current WordPress themes don’t really have a controller, everything’s just in the template files. That approach is one of the prime reasons for user modifications potentially messing up during a theme upgrade. Using a MVC approach easily solves that problem and in addition (including many other benefits), makes your theme more modular and extensible.

Introducing WP Framework Core

Ever since I released WP Framework to the public, it included some nice-to-have features along with it. Here’s whats included in version 0.3:

• a CSS reset stylesheet
• a basic print stylesheet
• a base stylesheet that gives your layout a sensible default look
• two favicons; one 16×16 .ico for the web browser and an iPhone webclip icon
• automatically including an empty javascript file with jQuery pre-loaded
• and semantic classes, a successor of the sandbox functions.

While these features are great, their nice-to-haves and aren’t essential for all themes. So I removed all of them and created a new package called WP Framework Core. That way if you don’t want all the extra features that WP Framework provides, you can download the core version and have only the essentials. If, however you download the core version and want to cherry pick features, that’s not a problem as all features are easily pluggable. Doing this paves the way for the theme builder project I talked about at WordCamp Miami (which I’ll explain a little more in a following article).

That’s about it, I hope you’ll enjoy this release. I covered this release at a high level, but there’s lots of new things and hidden goodies that you’ll find while playing with it. Customizing is a little different, it now mainly involves using the WordPress plugin system. I’m working on a theme based on WP Framework for you guys to play with. In the meantime, just ask any questions in the forums and I’ll be sure to help you out.

I should note that WP Framework is still considered beta software until its 1.0 release. Folders, functions and/or CSS classes might be added, removed or replaced up until 1.0, so nothing is officially permanent. This might be an inconvience for you if you start building off WP Framework right now, but the most I can do is provide you a list of detailed changes that go into each release. Alternatively, you can keep an eye on the change list, or read the readme.txt included within WP Framework to see list of all the changes between versions. I’m in the process of making a record of the change log publically, so subcribe to the blog if you haven’t already.