Options-Framework: Expose an options panel for your Thematic WordPress themes

I don’t always use WordPress, but when I do, I prefer Thematic (and compass-wordpress). Thematic is a WordPress theme framework from Ian Stewart that provides an abstracted API, letting you focus on your site instead of the lower-level minutia of WordPress.

I was excited when I stumbled across a couple of projects by Devin Price that let you easily expose an options panel for your theme. Thematic Options (and the non-Thematic Options Framework) make it easy to add an options panel for your theme settings, letting your end users customize your theme in the WordPress admin panel.

Options are declared in a PHP array, as in this example:

// Set the Options Array
global $my_options;
$my_options = array();

$my_options[] = array( "name" => "General Settings",
                    "type" => "heading");

$my_options[] = array( "name" => "Custom Logo",
          "desc" => "Upload a logo for your theme, or specify the image address of your online logo. (http://yoursite.com/logo.png)",
          "id" => "logo",
          "std" => "",
          "type" => "upload");

$url =  ADMIN . 'images/';
$my_options[] = array( "name" => "Main Layout",
          "desc" => "Select main content and sidebar alignment. Choose between 1, 2 or 3 column layout.",
          "id" => "layout",
          "std" => "2c-l-fixed.css",
          "type" => "images",
          "options" => array(
            '1col-fixed.css' => $url . '1col.png',
            '2c-r-fixed.css' => $url . '2cr.png',
            '2c-l-fixed.css' => $url . '2cl.png',
            '3c-fixed.css' => $url . '3cm.png',
            '3c-r-fixed.css' => $url . '3cr.png')
          );
$my_options[] = array( "name" => "Custom Favicon",
          "desc" => "Upload a 16px x 16px Png/Gif image that will represent your website's favicon.",
          "id" => "custom_favicon",
          "std" => "",
          "type" => "upload"); 

$my_options[] = array( "name" => "Tracking Code",
          "desc" => "Paste your Google Analytics (or other) tracking code here. This will be added into the footer template of your theme.",
          "id" => "google_analytics",
          "std" => "",
          "type" => "textarea");

...

Devin has a nice blog post with more info including how to use these values in your theme, along with an introductory screencast.

[Source on GitHub]