Getting Started on the Buffet Framework – Part 1

In this tutorial, I will be showing you how to start developing a child theme based on the Buffet Framework. You’ll need:

• 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.