Lately I’ve been venturing into the Thesis community, coming across loads of great people and excellent resources. Although publicly released skins (both paid and free) seem to be taking off only as of lately, I’ve had a chance to try out a few free Thesis skins.

Something I haven’t seen a Thesis skin tap into, is theme options directly editable through the WordPress dashboard- despite its easy implementation. Let me show you how to accomplish this, starting with the source code complete with comments:

// NOTE: Hover top right to download! //

<?php

add_action('admin_menu', 'thesis_custom_add_page'); // Moves the add page function in the WP dashboard admin menu via WP hook

function thesis_custom_add_page() { // Adds our test page to Thesis menu
add_theme_page('Test Page', 'Test Page', 'edit_themes', 'test-page', 'test_page_admin');
}

function test_page_admin() { // Our function (as seen above) that runs when the page is accessed

$tt_twitter_option = 'tt_twitter_name'; // Option name (in db)
$tt_hidden_field_name = 'tt_submit_hidden';
$tt_data_field_name = 'tt_twitter_field';

$tt_twitter_value = get_option($tt_twitter_option); // Read in existing option value from database

if( $_POST[ $tt_hidden_field_name ] == 'yes' ) { // If form has been sumbitted
$tt_twitter_value = $_POST[ $tt_data_field_name ]; // Read value from post
update_option($tt_twitter_option, $tt_twitter_value); // Save value in database

?>
<div class="updated"><p><strong><?php _e('Your options have been saved.', 'mt_trans_domain' ); ?></strong></p></div>
<?php

}
// Main screen:
echo '<div class="wrap">';
echo "<h2>" . __( 'Thesis Themes - Customization', 'mt_trans_domain' ) . "</h2>"; // header

?>

<form name="form1" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
<input type="hidden" name="<?php echo $tt_hidden_field_name; ?>" value="yes">
<p><?php _e("Enter your twitter username:", 'mt_trans_domain' ); ?>
<input type="text" name="<?php echo $tt_data_field_name; ?>" value="<?php echo $tt_twitter_value; ?>" size="25">
</p>

<p class="submit">
<input type="submit" name="Submit" value="<?php _e('Update Options', 'mt_trans_domain' ) ?>" />
</p>

</form>
</div>

<?php

}

Where should I put the code?

Well you should be using only a couple files to customize Thesis: custom.css and custom_functions.php. You can paste all of the source code directly into custom_functions.php.

What does the code do?

Right now, the code isn’t going to be any use to your front end. The code will create a new menu called “Test Page” under the appearance tab in your WordPress dashboard. Further, it will have a title, field, and submit button. The field will iniatily hold no value, but after you fill it in, it will be saved to the database. The value being saved is called “tt_twitter_name”, although you could rework the titles and have the value do anything. Lets take a closer look at the code.

add_action('admin_menu', 'thesis_custom_add_page');

Thesis didn’t invent the hook. WordPress has a number of hooks throughout its code, both for the  backend and frontend. Basically, in this line of code, we are adding a custom function (thesis_custom_add_page) at the hook location of admin_menu. This will let our function run at the right location and time.

function thesis_custom_add_page() {
add_theme_page('Test Page', 'Test Page', 'edit_themes', 'test-page', 'test_page_admin');
}

Here’s our function we looked at above. What is the function doing? Adding our theme ofcourse. The add_theme_page function runs like this: add_menu_page(page_title, menu_title, access_level/capability, file, [function], [icon_url]);. We are adding a page title of “Test Page”, a menu title of “Test Page”, access rights of “edit_themes” (which means you must be able to edit themes to access this page), the file name, and the resulting function.

function test_page_admin() {

$tt_twitter_option = 'tt_twitter_name';
$tt_hidden_field_name = 'tt_submit_hidden';
$tt_data_field_name = 'tt_twitter_field';

In this set of code we are opening our function that will run once the page is accessed (test_page_admin) and setting our variables. In this example we are going to get the user to input a Twitter username, so that we can access it later.

$tt_twitter_option is our option name, and will hold our database field name (it’s up to you).

$tt_hidden_field_name is simply the name of the hidden field in the html form that will load. It will be used to check whether the user had submitted form on load.

$tt_data_field_name is the the name of our field, where the user will input his/her Twitter username.

$tt_twitter_value = get_option($tt_twitter_option);

Here we have another variable, tt_twitter_value, which runs a WordPress function to get the value already present in the database (if it is there at all).

if( $_POST[ $tt_hidden_field_name ] == 'yes' ) {
$tt_twitter_value = $_POST[ $tt_data_field_name ];
update_option($tt_twitter_option, $tt_twitter_value);
?>
<div class="updated"><p><strong><?php _e('Your options have been saved.', 'mt_trans_domain' ); ?></strong></p></div>
<?php

As mentioned before, we want to check if the user submitted the form already, and we do that by using the hidden field. If the hidden field is set to “yes” once accessed, we will run some of this code and show the user a message indicating options were saved. update_option(); is another wordpress function. It will update the database ($tt_twitter_option) with the new value ($tt_twitter_value).

echo '<div class="wrap">';
echo "<h2>" . __( 'Thesis Themes - Customization', 'mt_trans_domain' ) . "</h2>"; // header

?>

<form name="form1" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
<input type="hidden" name="<?php echo $tt_hidden_field_name; ?>" value="yes">
<p><?php _e("Enter your twitter username:", 'mt_trans_domain' ); ?>
<input type="text" name="<?php echo $tt_data_field_name; ?>" value="<?php echo $tt_twitter_value; ?>" size="25">
</p>

<p class="submit">
<input type="submit" name="Submit" value="<?php _e('Update Options', 'mt_trans_domain' ) ?>" />
</p>

</form>
</div>

Alright, so we’re at the last bit of code. This should be pretty straightforward. This is what is going to actually show up when you load the new page we created. We have our header being echoed out, our input fields, and our submit button. The user will now be able to enter in a twitter username, and hit save. If he/she comes back to the same page the field will be populated with the same twitter username.

Phew. So we have the input, what can I do with it?

Well, you can essentially grab that value whenever and wherever you want within thesis by calling get_option(‘tt_twitter_name’);. For example, as seen on my most recent skins,  if you wanted to have a link to the users twitter account you would enter something like:

<?php $tt_twitter_username = get_option('tt_twitter_name'); ?>
<p class="tt_twitter"><a href="http://www.twitter.com/<?php echo $tt_twitter_username; ?>">Follow on Twitter</a></p>

What now?

At this point we are beyond Thesis. If you read this coming from a WordPress theme designer you probably didn’t get much from this, as it’s essentialy the same stuff. The only difference is you have to call the functions from the custom_functions.php file (which you can and should extend to different php files). For further tutorials, references, and code check out http://codex.wordpress.org/. Didn’t get something above? Add me to Twitter or write me below, and I’ll do my best to help out.

Tagged as: thesis, thesis skin, Thesis Skins, thesis tutorial, wordpress, wordpress dashboard