I have been actively developing the framework, pushing in new ideas and finding simple approaches to make theme development much easier. If you have actually explored the repository up at Google Code, you would have noticed some additions into the framework.

Minify Support

One of the main features that I have been trying is to add support for Minify, which allows you to combine, minify and cache your CSS and JS files. WordPress actually has an internal caching feature for their CSS and JS files that will be implemented in 2.8, but it will only be used in admin. So to provide support for this app, the theme developer would probably have to do the following things:

• Define the path Minify is installed, with their own configuration.
• Use wp_enqueue_script to add their own JS files instead of echoing out the HTML tags like you would normally do.
• Use a special framework function bf_add_stylesheet to include your stylesheet instead of using @import or the <link> tag.

As long as the path to the installation path is defined, the framework will kick in and add an option into the admin to allow theme users to enable or disable the feature. An additional option will also appear to allow the users to delete the cache should they change anything in their CSS and JS files.

This feature should appear in the 0.6 stable release of the framework.

• Text editor (Notepad will do, but you might want to use code editors like Notepad++)
• Local web development server (I highly recommend you do it on a local web server before using it on a production server. XAMPP or WAMP will do)
• FTP client (If you want to upload files to your web server. FileZilla would be a good choice for me)

The CSS Stylesheet

Like all child themes, the first thing you will need to do is to create a folder in /wp-content/themes/ and name it as you wish. Next, you will need to create a file called style.css inside the folder you have just created.

You will need to add the following codes into the file:

/*
Theme Name: Theme Name
Theme URI: http://www.zy.sg/
Description: Child Theme of the Buffet Framework
Version: 1.0
Author: Me, myself and I
Author URI: http://www.zy.sg/
Template: the-buffet-framework
*/

You can edit any of the theme information here, except for the Template line. It tells WordPress that you are using the template files from that folder as the parent.

Once that is done, you can import in the framework CSS files. For example, I can import the Blueprint CSS stylesheets which are bundled with the framework. To do it, you will need to add the following lines:

/* Import Blueprint CSS styles */
@import url('../the-buffet-framework/css/blueprint/reset.css');
@import url('../the-buffet-framework/css/blueprint/typography.css');
@import url('../the-buffet-framework/css/blueprint/forms.css');

The framework comes bundled with the layout stylesheets from Thematic. So for example, I would like my basic layout to be a 2 column layout, with the sidebar to the right:

/* Import custom layouts (located at /css/layouts/) */
@import url('../the-buffet-framework/css/layouts/2c-r-fixed.css');

Once you are done, you can continue to style the theme to the way you would like it. You can also copy over all the styles from the default stylesheet at /wp-content/themes/the-buffet-framework/style.css and edit from there.

You can view and activate the theme from the Themes page over at the WordPress admin panel if you have done it correctly.

You can basically stop here right now, but if you need to add and edit content to the existing child theme, you will need to use the theme hooks to do it. I will cover this on the second part of the tutorial.