Blog

Blog Updates

Add an options menu to the WordPress dashboard for a Thesis Skin

May 29, 2009 · 25 comments

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.

{ 14 comments… read them below or add one }

Jermaine June 1, 2009 at 3:22 am

Thanks for sharing – this is a great tutorial. Maybe you should provide a screenshot to show users what the page actually looks like in the admin.

Jermaine’s last blog post..Thesis Theme Tutorial Part 1 Released

Reply

Matt June 1, 2009 at 4:47 am

Hey man, thanks. I kind of just slapped this together in between coding skins, and wanted to see if I’d get any feedback. I’ve had a few people tweet me, and message me so I think I’ll take your advice and throw in some screens when I get a chance.

Reply

James Lee June 1, 2009 at 3:28 pm

Matt,

I’m currently using a plug-in for Twitter lovin’, but like the idea of just adding it to the code. I headed over to the skins site, but didn’t see a specific example of this in action (looked at three demo sites). Am I missing where this is displayed?

James

James Lee’s last blog post..10 Twitter Don’ts for Job Seekers

Reply

Matt Hodder June 1, 2009 at 3:35 pm

Hey James,

Ya, you’ll actually have to download one of those skins and install it, as you’ll need to be the admin and be able to access the WP dashboard. Once you enable your custom folder in Thesis, a new option called “edit skin” will appear under your appearance tab (right below thesis options and design options).

If your not keen on installing a whole new skin, add me on twitter / suscribe to the feed here as I will probably do another post including the actually files and functions for download / install.

Reply

KIT PES July 26, 2009 at 10:41 am

hai matt, if blogspot how to????
[rq=162987,0,blog][/rq]PS3 Option File 3.00 [Summer Transfers]

Reply

Nithin Bekal October 16, 2009 at 9:27 am

Hi Matt, thanks for the tutorial. I was actually looking to add a twitter option in the theme I’m working on. This tutorial will help a lot as I’m still finding my way around wordpress. Btw, does this work in all themes or just Thesis skins?
[rq=906864,0,blog][/rq]Review: AOC F22 (22 inch widescreen monitor)

Reply

Matt Hodder October 18, 2009 at 1:56 pm

@Nithin

You could work it into another theme- follows the same idea. However most theme’s probably don’t have a custom folder / cutom_functions.php.

Reply

muhammad khalid November 19, 2009 at 10:45 am

kindly tell me how to use this menu on front end
kindly reply me on my email-address

Reply

lee hipkiss February 10, 2010 at 8:40 pm

hi thanks for this great tutorial, have looked at many and this one works great for me. all other focus on adding options to a “theme options page” what i have done is create a new “main page” in the dashboard with multiple sub pages so i can organise the options better.

im having a few problems though 🙁

using:

function test_page_admin() {

$tt_twitter_option = ‘tt_twitter_name’;
$tt_hidden_field_name = ‘tt_submit_hidden’;
$tt_data_field_name = ‘tt_twitter_field’;

i can add one option to a page, and it works great. but how would i duplicate the above for the same page function? ie:

function test_page_admin() {

$tt_twitter_option1 = ‘tt_twitter_name1’;
$tt_hidden_field_name1 = ‘tt_submit_hidden1’;
$tt_data_field_name1 = ‘tt_twitter_field1’;

i want to have multiple input fields for multiple purposes on one page, but im struggling, please help me.

Reply

Jess May 2, 2010 at 12:34 am

Hey Matt, I love your Thesis skins, you are cool and trendy fo shizzle. Thesis rocks and your skins really help in getting thesis pimpin’.

Thanks, Jess.
.-= Jess´s last blog ..Is There Really An Anti Cellulite Treatment That Works? =-.

Reply

LilyAlisons June 9, 2010 at 9:24 am

Bonjour, Nice to yoke you, I am alise

Reply

Niraj August 23, 2010 at 3:06 am

Hey i hav a question
is it possible to add a text box and a label in dashboard – in add new post
so dat the editor gets an easy option to enter the data in proper order and it should be displayed b4 the post after the heading
for eg in dashboard it should appear in such a way
Heading-DEMO

Name-demo
Place-demo
Location-demo
etc
den post should continue

is dis possible?
nd yes den how
plzzz help me its urgent

Reply

Trisha September 15, 2010 at 9:35 pm

Awesome tutorial, been trying to learn this forever – and it WORKS!

Couple of questions… If I wanted to add more fields, does that hidden field need to be repeated, or is once per form fine?

Also, does anyone know how to strip slashes from a textarea so the user can use html??? Wordpress has code here: http://codex.wordpress.org/Function_Reference/stripslashes_deep but im not sure if thats the right code, where to put it, and such.

Thanks!!!
Trisha

Reply

Kristian Bono August 29, 2011 at 7:01 am

thank you for this tutorial.. it helps me a lot.. thank you sir.

Reply

{ 11 trackbacks }

Leave a Comment