Wordpress Theme Design with Options Adminstration
Spread it!
Are you running Wordpress? And how are you controlling all options of your current wordpress theme? Wordpress offers you get_option() function to get the options of your wordpress. However, all of default options wordpress gives to you are not enough. You maybe want to add more options that easy to implement on your theme design. How to do that? This tutorial will help you create options and administrate them in wordpress admin page.
Theme Options
All of wordpress options are stored in the database under table wp_options, and your theme options will be so. Let’s see the structure of wp_options table, all the field, and data type of each are:
- option_id – BIGINT
- blog_id – INTEGER
- option_name – VARCHAR
- option_value – LONGTEXT
- autoload – VARCHAR
All you need are the fields in bold, because you use the function get_option() to get options with the name in option_name filed, and the option_value, of course is what you need to get.
The default using of get_option() is:
<?php echo get_option( $show ); ?>
And the code above is the same as the query below:
However, you should know the difference is the function will return FASLE if the desired option does not exist, or no value is associated with it, but the query will return null.
How do we process an option?
At first, you have to declare an option on your theme functions.php file. The simple option is fine for configuration and getting will be declared as:
// theme options $options = array ( array( "name" => "Option Title", "desc" => "Option Description", "id" => "Option Unique ID", //This is option_name filed in the database "default" => "10"), //Its default value );
Your theme setting page will as good as display as image below:
Hey, but before getting a result above, we have to write some code for displaying. As an example, I will make a block of an option. In my case, I want to set an option for number of Community News article will be displayed on the homepage.
Declare the option:
<?php $options = array ( array( "name" => "<strong>Homepage Community Entries</strong>", "desc" => "Select the number of Community entries that should appear on the Index page", "id" => "aext_numcomnews", "default" => "10"), ); ?>
The code to display:
<div class="stuffbox"> <h3>Homepage Setting</h3> <div class="inside"> <table class="form-table" style="width: auto"> <?php foreach ($options as $value) { switch ( $value['id'] ) { case "aext_numcomnews": ?> <tr> <th scope="row"><?php echo $value['name']; ?><br /><?php echo $value['desc']; ?></th> <td> <input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="text" value="<?php get_option($value['id'])?printf(get_option($value['id'])): printf($value['default']) ?>" /> </td> </tr> <?php break; } } ?> </table> </div> </div>
And, here is the result …
Where’s the Theme Setting Page?
We already write a lot of code for theme setting page, but we can not edit/update the option without display page. Let’s see how to add a link which link to theme setting page.
At first, you have to understand what your functions.php looks like. To make it easy, the name and the content of this functions.php are:
<?php $options = array ( //All your options will be declared here ); //This function is used for processing function themename_options() { global $options; add_theme_page('Theme Setting', 'Theme Setting', 10, 'themename-settings', 'themename_admin'); } //All the code of displaying will be here function themename_admin() { global $options; } add_action('admin_menu', 'themename_options'); ?>
The add_theme_page() function is used to add a page to a add a page to your WP admin. Here it is, this page is your theme setting page. The third parameter is included as unique URL to this page. Example with this URL below is the link to a theme setting page:
http://localhost/wp-admin/themes.php?page=themename-settings
The add_action() function is used to hook function themename_option() and create a menu item in admin menu. You cannot access your theme setting page without this function.
You know what? The menu item that link to this page can be added with two different type. The add_theme_page() above will add an item into Theme Menu. You can use this code below to add a separated menu item as another parent menu item.
Replace the add_theme_page() by add_menu_page() with the same parameters:
add_menu_page('Theme Setting', 'Theme Setting', 10, 'themename-settings', 'themename_admin');
Take a look:
Complete the setting page code
You need more works to make your setting page run smooth. Now, we will combine all the code together. First code block that we start completing code is option array:
// theme options $options = array ( array( "name" => "<strong>Homepage Community Entries</strong>", "desc" => "Select the number of Community entries that should appear on the Index page", "id" => "aext_numcomnews", "default" => "10"), array( "id" => "aext_footer", "default" => ""), );
In this tutorial, I just use two options to make it easy to look. We have two options above, right? But we just need to focus on the value of id of each array, because the code below will get value of id and we can identify what option we update by unique id.
<?php ..... function themename_admin() { global $options; ?> <div class="wrap"> <h2 class="alignleft">Theme Setting</h2> <br clear="all" /> <?php //Check if settings saved! if ( $_REQUEST['saved'] ) { ?> <div class="updated fade"><p><strong>Setting Saved</strong></p></div> <?php } ?> <form method="post" id="myForm"> <div id="poststuff" class="metabox-holder"> <div class="stuffbox"> <h3>Homepage Setting</h3> <div class="inside"> <table class="form-table" style="width: auto"> <?php foreach ($options as $value) { switch ( $value['id'] ) { case "aext_numcomnews": ?> <tr> <th scope="row"><?php echo $value['name']; ?><br /><?php echo $value['desc']; ?></th> <td> <input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="text" value="<?php get_option($value['id'])?printf(get_option($value['id'])): printf($value['default']) ?>" /> </td> </tr> <?php break; case "aext_footer": ?> <tr> <th scope="row"> <strong>Footer HTML</strong> <br />Put some HTML code here. That's helpful if you want to add tracking code .... </th> <td> <textarea class="code" rows="4" cols="60" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php print get_option($value['id']); ?> </textarea> </td> </tr> <?php break; } } ?> </table> </div> </div> </div> <input name="theme_save" type="submit" class="button-primary" value="Save changes" /> <input type="hidden" name="action" value="theme_save" /> </form> </div> <?php } ..... ?>
At the top of this block of code above, we check the value of the request saved. The text will displays to notify that setting was saved successful. The form will load default value of id: aext_numcomnews if there are no value of aext_numcomnews in database.
That is the form display. We need to process the value that the form submitted. We do it inside themename_options() function:
<?php function themename_options() { global $options; if ('theme_save'== $_REQUEST['action'] ) { foreach ($options as $value) { if( !isset( $_REQUEST[ $value['id'] ] ) ) { //Do nothing } else { update_option( $value['id'], stripslashes($_REQUEST[ $value['id']])); } } if(stristr($_SERVER['REQUEST_URI'],'&saved=true')) { $location = $_SERVER['REQUEST_URI']; } else { $location = $_SERVER['REQUEST_URI'] . "&saved=true"; } header("Location: $location"); die; } add_theme_page('AEXT Theme Setting', 'AEXT Theme Setting', 10, 'aext-settings', 'aext_admin'); } ?>
That function processes the data submitted by update_option() with parameter is the value of each id was changed. After submit your changes, your all changes will be made in table wp_options in your database.
At last, remember to put the line of code here at the end of your functions.php file:
add_action('admin_menu', 'themename_options');
If you want to rest your current options to default value, simply copy and paste these code next to your current form. The reason is we can not submit two value theme_save and theme_reset at same time.
<form method="post"> <p class="submit" style="border: 0;"> <input name="reset" type="submit" value="Reset" /> <input type="hidden" name="action" value="theme_reset" /> </p> </form>
And edit your theme_options() funtion like this:
if ('theme_save'== $_REQUEST['action'] ) { ..... } else if('theme_reset' == $_REQUEST['action'] ) { foreach ($options as $value) { delete_option( $value['id'] ); $location = $_SERVER['REQUEST_URI'] . "&reset=true"; } header("Location: $location"); die; }
Get your options in your theme files
It’s as easy as the code at the top of this entry. Because all of your options are stored in database, we will get values for a named option from the options database table. If the desired option does not exist, return value is FASLE.
In my index.php file:
...... <?php $numcomnews = get_option('aext_numcomnews'); query_posts("category_name=Community News&showposts=$numcomnews"); if (have_posts()) : //Displaying posts endif; ?> ......
What’s up?
The completed code is attached in this post, you can download it for use later. However, I suggest that you follow step by step to help you get all what I want to say. This tutorial comes along with only two options, you can add more options to customize your own wordpress template. Although these code is working, maybe I am doing something wrong. Feel free to comment, I’ll really appreciate all you give to me!
Related Posts
61 User Comments
Trackbacks/Pingbacks
-
-
02. Oct, 2009
[...] link: Wordpress Theme Design Tip with Options Adminstration | AEXT.NET Comments0 Leave a Reply Click here to cancel [...]
-
-
02. Oct, 2009
[...] here to read the rest: bWordpress Theme/b Design Tip with Options Adminstration | AEXT.NET SHARETHIS.addEntry({ title: "bWordpress Theme/b Design Tip with Options Adminstration | [...]
-
-
02. Oct, 2009
[...] More here: Wordpress Theme Design Tip with Options Adminstration | AEXT.NET [...]
-
-
02. Oct, 2009
[...] This post was mentioned on Twitter by Tuts from A to Z and Axel Flow. Axel Flow said: Wordpress Theme Design Tip with Options Adminstration | AEXT.NET: Are you running Wordpress? And how are you co.. http://bit.ly/3sNBxe [...]
-
-
02. Oct, 2009
[...] the original post: Wordpress Theme Design Tip with Options Adminstration | AEXT.NET Share and [...]
-
-
02. Oct, 2009
Wordpress Theme Design Tip with Options Adminstration…
Are you running Wordpress? And how are you controlling all options of your current wordpress theme? Wordpress offers you get_option() function to get the options of your wordpress. However, all of default options wordpress gives to you are not enough. …
-
-
02. Oct, 2009
[...] See the original post: Wordpress Theme Design Tip with Options Adminstration | AEXT.NET [...]
-
-
02. Oct, 2009
[...] Wordpress Theme Design with Options Adminstration [...]
-
-
02. Oct, 2009
[...] Wordpress Theme Design Tip with Options Administration [...]
-
-
02. Oct, 2009
Wordpress Theme Design Tip with Options Adminstration…
Wordpress offers you get_option() function to get the options of your wordpress. This tutorial will help you create options for theme and administrate them in wordpress admin page….
-
-
02. Oct, 2009
[...] the rest here: Wordpress Theme Design Tip with Options Adminstration | AEXT.NET Related Posts:Web hosting options for WordPress – HyperCircleweb2feel.com – Free wordpress themes [...]
-
-
02. Oct, 2009
Wordpress Theme Design with Options Adminstration…
Are you running Wordpress? And how are you controlling all options of your current wordpress theme? Wordpress offers you get_option() function to get the options of your wordpress. However, all of default options wordpress gives to you are not enough. …
-
-
02. Oct, 2009
Wordpress Theme Design Tip with Options Adminstration…
Wordpress offers you get_option() function to get the options of your wordpress. You may want to add more options that easy to implement on your theme design. This tutorial will help you create options and administrate them in wordpress admin page….
-
-
02. Oct, 2009
Wordpress Theme Design Tip with Options Adminstration…
Wordpress offers you get_option() function to get the options of your wordpress. You may want to add more options that easy to implement on your theme design. This tutorial will help you create options and administrate them in wordpress admin page….
-
-
02. Oct, 2009
[...] post: Wordpress Theme Design Tip with Options Adminstration | AEXT.NET Categories: Technology Tags: add-more, create-options, get-the, help-you, implement-on-your, [...]
-
-
04. Oct, 2009
[...] Read this article: Wordpress Theme Design Tip with Options Adminstration | AEXT.NET [...]
-
-
04. Oct, 2009
[...] Wordpress Theme Design with Options Adminstration [...]
-
-
05. Oct, 2009
[...] Tutorial mit Quelldateien Wordpress Theme Design with Options Adminstration Share this on del.icio.usDigg this!Stumble upon something good? Share it on StumbleUponSubmit this [...]
-
-
05. Oct, 2009
[...] In: Wordpress themes 5 Oct 2009 Wordpress offers you get_option() function to get the options of your wordpress. This tutorial will help you create options and administrate them in wordpress admin page. Go to Source [...]
-
-
05. Oct, 2009
[...] Wordpress Theme Design with Options Adminstration [...]
-
-
06. Oct, 2009
[...] Wordpress Theme Design Tip with Options Adminstration | AEXT.NET Wordpress offers you get_option() function to get the options of your wordpress. This tutorial will help you create options and administrate them in wordpress admin page. (tags: WordPress admin theme tutorial) [...]
-
-
14. Oct, 2009
[...] Wordpress Theme Design with Options Adminstration – Are you running Wordpress? And how are you controlling all options of your current wordpress theme? Wordpress offers you get_option() function to get the options of your wordpress. [...]
-
-
15. Oct, 2009
[...] Wordpress Theme Design with Options Adminstration – Are you running Wordpress? And how are you controlling all options of your current wordpress theme? Wordpress offers you get_option() function to get the options of your wordpress. [...]
-
-
12. Nov, 2009
[...] Wordpress Theme Design with Options Administration [...]
-
-
24. Nov, 2009
[...] WordPress Theme Design Tip with Options Adminstration | AEXT.NET Are you running WordPress? And how are you controlling all options of your current wordpress theme? WordPress offers you get_option() function to get the options of your wordpress. However, all of default options wordpress gives to you are not enough. You maybe want to add more options that easy to implement on your theme design. How to do that? This tutorial will help you create options and administrate them in wordpress admin page. (tags: WordPress Theme Design Tip with Options Adminstration | AEXT.NET) [...]
-
-
21. Dec, 2009
[...] to this (based on code from aext.net): [...]
-
-
27. Dec, 2009
[...] Read the original: Wordpress Theme Design Tip with Options Adminstration | AEXT.NET [...]
-
-
08. Jan, 2010
[...] base on the options that user will put their account in. Luckily I published an useful posts “Wordpress Theme Design with Options Adminstration“. Now, you have to check this post first because it’s very complicated step that should [...]
-
-
21. Jan, 2010
[...] you tried to add options for your WordPress theme before? If not, please take a look at this post: Wordpress Theme Design with Options Adminstration. Hope this post is useful for [...]
-
-
15. Feb, 2010
[...] 6. Wordpress Theme Design with Options Adminstration [...]
-
-
05. Mar, 2010
[...] 6. WordPress Theme Design with Options Administration by AEXT.net [...]
Leave a Reply
About AEXT.NET
AEXT is a design magazine that publishes all things web design. Articles here are published by web professionals for web professionals featuring tutorials, collections, and resources.
Thanks for the tutorial. Custom control panel tutorials for WordPress are quite rare
I’m glad that you like it
thanks!
Thanks, good tutorial
Thanks !
This is amazing! thank you so much, I’ve been trying to find information about how to do this for a while now. I’ll be implementing extra options for a theme I’m developing for a client this week.
Haha, me too. I’m going to develop a blog for my client so that I have to write myself a theme. That’s a reason this tut was born!
This article has been shared on favSHARE.net. Go and vote it!
Thank you very much indeed. Very comprehensive explanation.
Cheers!
I’ve been looking for something like this for days, I’ll try it out! thanks
Thanks for your interesting!
Nice article on wordperss theme design with option. Thanks for sharing this awesome post.
@clippingimages You’re welcome!
thanks for thes great tutorial.
Superb post, many thanks.
I have not been able to work out the complete structure of this on my own, I am fairly new to Wordpress after being a big Joomla user for years, but this complete tut is just what I needed!
Bookmarked your site, and I’ll be back.
@Steve: Thanks for your positive comment about my blog.
very good tutorial.. thanks!!
Nice one for the people to understand the wordpress theme in better way.
Very Nice Tutorial … Keep up the G8 Work.
Hi Lam,
I did find a **small** mistake in the code.
In the Textarea field you have an unnecessary “>” .
This might create some confusion with inexperienced coders.
Cheers
Oh really? Thanks for the notification Michael!
Hi Lam,
I feel like an ASS, I actually tried your code today. It was fine my mistake, there’s nothing amiss !!
I humbly Apologize
Cheers
This is really useful. Thanks for this
hi Lam..its ur frend krish..nice tute..good jobe mate
Thank you, Krish!
Can you provide the entire source code for this tut please. Thanks
Henry´s last blog ..Daily Creative Inspiration #95
The whole code is already included in attachment, you will need only the functions.php file
Sorry I missed it at the top. Hey Lam I was wondering if you don’t mind doing another tutorial exactly the same but with some more options. I truely found this helpful but still struggling on creating my own.
Henry´s last blog ..Daily Creative Inspiration #95
Great tutorial!
What SQL editor are you using in that first screenshot? It looks like the Camino browser.
exactly what i was looking for! thanks for the detailed tutorial. hope i find the time to give it a try today… thanks a lot!
Hi Henry, although I love to write more about that, it will make the tutorial become cheap. People don’t love the old topic. However, that was easy, you just need an idea for any option you want to add in. By the way, you can learn a lot from viewing other theme sources.