Tutorials

Customize our premium WordPress themes and stand out from the crowd

Create a Simple WordPress Admin Panel – Part II

June 7, 2012 by in 25 Comments

http://colorlabs.co/JNfnRU

At the Part I of Create a Simple WordPress Admin Panel, I explained how to make a theme option panel in WordPress dashboard menu, and right now I will tell you how to make the theme options at theme panel page. Don’t forget to continue to the last part of the tutorial.

Before we begin, let me explain all the structure that I used in this part of the tutorial. Theme panel page will be wrapped up into a div named “options_wrap” and then “content_options” for the options container. And for each section of options has a separate div with a class of “options_section”. This div has a title (for the name) as well as several input div’s within it. By using classes on tag div like <div class="option_input option_select">, we can style dropdown’s, text inputs, and textarea’s differently.

Here we have it: a simple, theme options page ready to go! Let’s start to edit the previous functions.php. Open your functions.php and put this code on the top, we’ll write some code to generate a list of WordPress categories, rather than having users type in ID numbers.

/* ----------------------------------------------------------
Declare vars
------------------------------------------------------------- */
$themename = "Theme Name";
$shortname = "shortname";

$categories = get_categories('hide_empty=0&orderby=name');
$all_cats = array();
foreach ($categories as $category_item ) {
$all_cats[$category_item->cat_ID] = $category_item->cat_name;
}
array_unshift($all_cats, "Select a category");

We use get_categories function to fetch all categories, and then uses a foreach loop to store them in the variable $all_cats. The options “Select a category” is then added to the top of the array.
Next step we start entering a list of options for the theme. See below, and paste it into your functions.php file before function theme_settings_page():

/* ---------------------------------------------------------
Declare options
----------------------------------------------------------- */

$theme_options = array (

	array( "name" => $themename." Options",
	"type" => "title"),

	/* ---------------------------------------------------------
	General section
	----------------------------------------------------------- */
	array( "name" => "General",
	"type" => "section"),
	array( "type" => "open"),

	array( "name" => "Logo URL",
	"desc" => "Enter the link to your logo image",
	"id" => $shortname."_logo",
	"type" => "text",
	"std" => ""),

	array( "name" => "Custom Favicon",
	"desc" => "A favicon is a 16x16 pixel icon that represents your site; paste the URL to a .ico image that you want to use as the image",
	"id" => $shortname."_favicon",
	"type" => "text",
	"std" => get_bloginfo('url') ."/images/favicon.ico"),

	array( "type" => "close"),

	/* ---------------------------------------------------------
	Home section
	----------------------------------------------------------- */
	array( "name" => "Homepage",
	"type" => "section"),
	array( "type" => "open"),

	array( "name" => "Homepage Featured",
	"desc" => "Choose a category from which featured posts are.",
	"id" => $shortname."_feat_cat",
	"type" => "select",
	"options" => $all_cats,
	"std" => "Select a category"),

	array( "type" => "close"),

	/* ---------------------------------------------------------
	Footer section
	----------------------------------------------------------- */
	array( "name" => "Footer",
	"type" => "section"),
	array( "type" => "open"),

	array( "name" => "Footer Credit",
	"desc" => "You can customize footer credit on footer area here.",
	"id" => $shortname."_footer_text",
	"type" => "text",
	"std" => ""),

	array( "type" => "close")

);

Now let’s see some usage of the options. We’re going to store the options in a variable called $theme_options. At this point, there are some codes needed to declare the options, and we will give you the explanation . Here we go:

  • It is composed of a number of arrays, each with a “type” key to signify how it will be displayed, and what it does.
  • We start with a “type” => “title” array – this will be used to show the themename and a title at the top of the page
  • Each section (General, Homepage and Footer) has a separate list of options.
  • We start a new section by closing any previous sections, declaring a new section using array( "name" => "General","type" => "section")and opening a new section.
  • Each option can will have the options specified below:
    • name: Name of the input field.
    • desc: Option description explaining what it is to the user.
    • id: ID of the field, prefixed by the shortname. It will be used to store as well as to access the options.
    • type: Input type – select, text or textarea for declare the option
    • options: used to declare an array of options for a select type input.
    • std: Default input value, used if no other input is given.

Okay the next step, we will edit function theme_settings_page(). This is the code:

/*---------------------------------------------------
Theme Panel Output
----------------------------------------------------*/
function theme_settings_page() {
	global $themename,$theme_options;
	$i=0;
	$message=''; 
	if ( 'save' == $_REQUEST['action'] ) {
	 
		foreach ($theme_options as $value) {
			update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
	 
		foreach ($theme_options as $value) {
			if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }
		$message='saved';
	}
	else if( 'reset' == $_REQUEST['action'] ) {
		 
		foreach ($theme_options as $value) {
			delete_option( $value['id'] ); }
		$message='reset'; 		 
	}
 
	?>
	<div class="wrap options_wrap">
		<div id="icon-options-general"></div>
		<h2><?php _e( ' Theme Options' ) //your admin panel title ?></h2>
		<?php
		if ( $message=='saved' ) echo '<div class="updated settings-error" id="setting-error-settings_updated"> 
		<p>'.$themename.' settings saved.</strong></p></div>';
		if ( $message=='reset' ) echo '<div class="updated settings-error" id="setting-error-settings_updated"> 
		<p>'.$themename.' settings reset.</strong></p></div>';
		?>
		<ul>
			<li>View Documentation |</li>
			<li>Visit Support |</li>
			<li>Theme version 1.0 </li>
		</ul>
		<div class="content_options">
			<form method="post">
 
			<?php foreach ($theme_options as $value) {
		 
				switch ( $value['type'] ) {
			 
					case "open": ?>
					<?php break;
				 
					case "close": ?>
					</div>
					</div><br />
					<?php break;
				 
					case "title": ?>
					<div class="message">
						<p>To easily use the <?php echo $themename;?> theme options, you can use the options below.</p>
					</div>
					<?php break;
				 
					case 'text': ?>
					<div class="option_input option_text">
					<label for="<?php echo $value['id']; ?>">
					<?php echo $value['name']; ?></label>
					<input id="" type="<?php echo $value['type']; ?>" name="<?php echo $value['id']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id'])  ); } else { echo $value['std']; } ?>" />
					<small><?php echo $value['desc']; ?></small>
					<div class="clearfix"></div>
					</div>
					<?php break;
				 
					case 'textarea': ?>
					<div class="option_input option_textarea">
					<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
					<textarea name="<?php echo $value['id']; ?>" rows="" cols=""><?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?></textarea>
					<small><?php echo $value['desc']; ?></small>
					<div class="clearfix"></div>
					</div>
					<?php break;
				 
					case 'select': ?>
					<div class="option_input option_select">
					<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
					<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
					<?php foreach ($value['options'] as $option) { ?>
							<option <?php if (get_settings( $value['id'] ) == $option) { echo 'selected="selected"'; } ?>><?php echo $option; ?></option>
					<?php } ?>
					</select>
					<small><?php echo $value['desc']; ?></small>
					<div class="clearfix"></div>
					</div>
					<?php break;
				 
					case "checkbox": ?>
					<div class="option_input option_checkbox">
					<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
					<?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
					<input id="<?php echo $value['id']; ?>" type="checkbox" name="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> /> 
					<small><?php echo $value['desc']; ?></small>
					<div class="clearfix"></div>
					</div>
					<?php break;
				 
					case "section": 
					$i++; ?>
					<div class="input_section">
					<div class="input_title">
						
						<h3><img src="<?php echo get_template_directory_uri();?>/images/options.png" alt="">&nbsp;<?php echo $value['name']; ?></h3>
						<span class="submit"><input name="save<?php echo $i; ?>" type="submit" class="button-primary" value="Save changes" /></span>
						<div class="clearfix"></div>
					</div>
					<div class="all_options">
					<?php break;
					
				}
			}?>
		  <input type="hidden" name="action" value="save" />
		  </form>
		  <form method="post">
			  <p class="submit">
			  <input name="reset" type="submit" value="Reset" />
			  <input type="hidden" name="action" value="reset" />
			  </p>
		  </form>
		</div>
		<div class="footer-credit">
			<p>This theme was made by <a title="anang pratika" href="http://anangpratika.wordpress.com" target="_blank" >Anang Pratika</a>.</p>
		</div>
	</div>
	<?php
}

And Kaboom! We have our own admin panel page with a separate options position for itself. You can see the screenshot what we have been made from Create a Simple WordPress Admin Panel part I and Create a Simple WordPress Admin Panel part II,here it is:

And here the full code:


<?php
/* ----------------------------------------------------------
Declare vars
------------------------------------------------------------- */
$themename = "Theme Name";
$shortname = "shortname";

$categories = get_categories('hide_empty=0&orderby=name');
$all_cats = array();
foreach ($categories as $category_item ) {
$all_cats[$category_item->cat_ID] = $category_item->cat_name;
}
array_unshift($all_cats, "Select a category");

/*---------------------------------------------------
register settings
----------------------------------------------------*/
function theme_settings_init(){
register_setting( 'theme_settings', 'theme_settings' );
wp_enqueue_style("panel_style", get_template_directory_uri()."/panel.css", false, "1.0", "all");
wp_enqueue_script("panel_script", get_template_directory_uri()."/panel_script.js", false, "1.0");
}

/*---------------------------------------------------
add settings page to menu
----------------------------------------------------*/
function add_settings_page() {
add_menu_page( __( 'Your theme name' .' Theme Panel' ), __( 'Your theme name' .' Theme Panel' ), 'manage_options', 'settings', 'theme_settings_page');
}

/*---------------------------------------------------
add actions
----------------------------------------------------*/
add_action( 'admin_init', 'theme_settings_init' );
add_action( 'admin_menu', 'add_settings_page' );

/* ---------------------------------------------------------
Declare options
----------------------------------------------------------- */

$theme_options = array (

array( "name" => $themename." Options",
"type" => "title"),

/* ---------------------------------------------------------
General section
----------------------------------------------------------- */
array( "name" => "General",
"type" => "section"),
array( "type" => "open"),

array( "name" => "Logo URL",
"desc" => "Enter the link to your logo image",
"id" => $shortname."_logo",
"type" => "text",
"std" => ""),

array( "name" => "Custom Favicon",
"desc" => "A favicon is a 16x16 pixel icon that represents your site; paste the URL to a .ico image that you want to use as the image",
"id" => $shortname."_favicon",
"type" => "text",
"std" => get_bloginfo('url') ."/images/favicon.ico"),

array( "type" => "close"),

/* ---------------------------------------------------------
Home section
----------------------------------------------------------- */
array( "name" => "Homepage",
"type" => "section"),
array( "type" => "open"),

array( "name" => "Homepage Featured",
"desc" => "Choose a category from which featured posts are drawn",
"id" => $shortname."_feat_cat",
"type" => "select",
"options" => $all_cats,
"std" => "Select a category"),

array( "type" => "close"),

/* ---------------------------------------------------------
Footer section
----------------------------------------------------------- */
array( "name" => "Footer",
"type" => "section"),
array( "type" => "open"),

array( "name" => "Footer Credit",
"desc" => "You can customize footer credit on footer area her.",
"id" => $shortname."_footer_text",
"type" => "text",
"std" => ""),

array( "type" => "close")

);

/*---------------------------------------------------
Theme Panel Output
----------------------------------------------------*/
function theme_settings_page() {
	global $themename,$theme_options;
	$i=0;
	$message=''; 
	if ( 'save' == $_REQUEST['action'] ) {
	 
		foreach ($theme_options as $value) {
			update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
	 
		foreach ($theme_options as $value) {
			if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }
		$message='saved';
	}
	else if( 'reset' == $_REQUEST['action'] ) {
		 
		foreach ($theme_options as $value) {
			delete_option( $value['id'] ); }
		$message='reset'; 		 
	}
 
	?>
	<div class="wrap options_wrap">
		<div id="icon-options-general"></div>
		<h2><?php _e( ' Theme Options' ) //your admin panel title ?></h2>
		<?php
		if ( $message=='saved' ) echo '<div class="updated settings-error" id="setting-error-settings_updated"> 
		<p>'.$themename.' settings saved.</strong></p></div>';
		if ( $message=='reset' ) echo '<div class="updated settings-error" id="setting-error-settings_updated"> 
		<p>'.$themename.' settings reset.</strong></p></div>';
		?>
		<ul>
			<li>View Documentation |</li>
			<li>Visit Support |</li>
			<li>Theme version 1.0 </li>
		</ul>
		<div class="content_options">
			<form method="post">
 
			<?php foreach ($theme_options as $value) {
		 
				switch ( $value['type'] ) {
			 
					case "open": ?>
					<?php break;
				 
					case "close": ?>
					</div>
					</div><br />
					<?php break;
				 
					case "title": ?>
					<div class="message">
						<p>To easily use the <?php echo $themename;?> theme options, you can use the options below.</p>
					</div>
					<?php break;
				 
					case 'text': ?>
					<div class="option_input option_text">
					<label for="<?php echo $value['id']; ?>">
					<?php echo $value['name']; ?></label>
					<input id="" type="<?php echo $value['type']; ?>" name="<?php echo $value['id']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id'])  ); } else { echo $value['std']; } ?>" />
					<small><?php echo $value['desc']; ?></small>
					<div class="clearfix"></div>
					</div>
					<?php break;
				 
					case 'textarea': ?>
					<div class="option_input option_textarea">
					<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
					<textarea name="<?php echo $value['id']; ?>" rows="" cols=""><?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?></textarea>
					<small><?php echo $value['desc']; ?></small>
					<div class="clearfix"></div>
					</div>
					<?php break;
				 
					case 'select': ?>
					<div class="option_input option_select">
					<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
					<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
					<?php foreach ($value['options'] as $option) { ?>
							<option <?php if (get_settings( $value['id'] ) == $option) { echo 'selected="selected"'; } ?>><?php echo $option; ?></option>
					<?php } ?>
					</select>
					<small><?php echo $value['desc']; ?></small>
					<div class="clearfix"></div>
					</div>
					<?php break;
				 
					case "checkbox": ?>
					<div class="option_input option_checkbox">
					<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
					<?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
					<input id="<?php echo $value['id']; ?>" type="checkbox" name="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> /> 
					<small><?php echo $value['desc']; ?></small>
					<div class="clearfix"></div>
					</div>
					<?php break;
				 
					case "section": 
					$i++; ?>
					<div class="input_section">
					<div class="input_title">
						
						<h3><img src="<?php echo get_template_directory_uri();?>/images/options.png" alt="">&nbsp;<?php echo $value['name']; ?></h3>
						<span class="submit"><input name="save<?php echo $i; ?>" type="submit" class="button-primary" value="Save changes" /></span>
						<div class="clearfix"></div>
					</div>
					<div class="all_options">
					<?php break;
					
				}
			}?>
		  <input type="hidden" name="action" value="save" />
		  </form>
		  <form method="post">
			  <p class="submit">
			  <input name="reset" type="submit" value="Reset" />
			  <input type="hidden" name="action" value="reset" />
			  </p>
		  </form>
		</div>
		<div class="footer-credit">
			<p>This theme was made by <a title="anang pratika" href="http://anangpratika.wordpress.com" target="_blank" >Anang Pratika</a>.</p>
		</div>
	</div>
	<?php
}

?>

But we still have ‘ugly’ page because we haven’t add CSS to it. But that will be in the Part III of the tutorial. In the next part, I will tell you how to add CSS and JavaScript on the theme panel page. So, keep in an eye on our blog :). There are Twitter, Facebook, and Google+ button located on the top of this tutorial. Feel free to do some sharing if you like this tutorial and find it helpful for your theme panel development. And good luck.

If you have any further questions or have suggestion on what would you like to see on our next ‘How-To’ post, feel free to leave them in the comment bellow.

About Author

It was 2010 when Anang joined ColorLabs as a Web Developer and found out that WordPress is his soul-mate. Now he heads the Product Development Department. He and his team sit in front of the screens for hours a day, developing high functioned WordPress themes for ColorLabs customers. Breaking a deadline is a sin in his book, that means staying up late and working long hours if possible. He believes that with work and commitment nothing is impossible.
  • Chirag Defygraphics

    how do you connect the option panel to theme?

    • http://twitter.com/anangpratika Anang Pratika

      Hi Chirag,

      If copy the whole codes in your function.php to your theme, it will automatically integrate with your theme.

  • jen russo

    Thank you for this post. It was really great to see this content in the blog.

    • http://twitter.com/anangpratika Anang Pratika

      Thank you for your comment. :)

  • Shilpa

    Nice tutorial. Waiting for third part. Can I expect it will be out soon?

    • http://twitter.com/anangpratika Anang Pratika

      Hi Silpa,

      Thanks for your comment, maybe soon ’cause I still have some project to do. After I finish my project, I will work on Part 3.

  • zifana safira

    bagian ke 3 mana ya.. ??

    • http://twitter.com/anangpratika Anang Pratika

      :) iya mba nanti saya update lagi untuk bagian ke tiga nya, makasih mba udah comment

  • Pingback: Quora

  • Rahim

    Thanks for the tuto, I am wondering, is there anyway to integrate background/css classes options? like panel to change background color or image ?

    • http://twitter.com/anangpratika Anang Pratika

      To add more option for change color or image you must create some code for the option type, colorpicker jquery, and media uploader jquery.

      • Rahim

        Thanks Anang for the reply, but as I am newbie, I wish I can find a ready tutorial to include such options, any chance?

  • http://twitter.com/AudioVoyeur Pieter Brink

    hi Anang – thanks for the great article!

    PS – Really like your author BIO – “breaking deadlines is a sin”

    • Anang

      Hi Pieter,
      Thank you for your comment, keep in touch :)

  • ff

    hi, i’m using this to give my client some spical areas of text. i want to “pull” the veriable from lets say:footer area of your script inside the php of my theme. how do i do this ?

    • Anang

      Hi ff,

      Please try this.

  • qakbar

    Hello Anang,

    Nice tutorial mate….

    Looking forward to your third instalment. Can you please let me know when you will be creating this??

    Thanks

    • Anang

      Hello Qakbar,

      Thanks for your comment, i will finish the last part of this tutorial soon, so keep in touch. :)

  • Riaz

    You are great man. This is truly an excellent yet really very easy post on this topic. I created a beautiful Admin Panel using your technique. Well, I got stuck up in an issue. I want to place two radio options “Enable” or “Disable” just around textarea box in my Admin Panel. But really unable to do that. Can you help me please …. ??

  • shreya

    how can I fetch value from this function.php

  • wasim

    How do change my footer from dashboard

  • wasim

    I was paste this code in my function.php. But how do work from this in my home page footer

  • http://nativeimaging.com/ Native Imaging

    Sorry, none of this code works. I don’t even see “function theme_settings_page()” in the functions file at all anywhere. How old is this tutorial?

  • Sandeep Kumar

    Thanks Anang But some error comes in settings page in debug mode set true in wp-config

    Notice: Undefined index: action in C:xampphtdocswpwp-contentthemeswrock-metrofunctions.php on line 107

    Notice: Undefined index: action in C:xampphtdocswpwp-contentthemeswrock-metrofunctions.php on line 116

    and after click save same error in line 110 & 113

  • http://www.bloggerbonus.com/ Mukesh

    It tuto. was interesting for me, still wondering for more feature and flexibility of theme dashboard. I hope you bring more tuto on same topic. thanks

Recent Tutorials

View all tutorials »

Twitter

Follow @ColorLabs

Facebook Friends

Contact Us
×

Contact Us

If you are interested in any of our products and have a question to ask, please complete the form below. Make sure you provide the right e-mail address so we can get back to you.

Your Name (required)

Your Email Address (required)

I'm Interested in

Your Message

Anti-spam Check
7 x 6 = ?