Tutorials

Customize our premium WordPress themes and stand out from the crowd.

Create a Simple WordPress Admin Panel – Part I

http://colorlabs.co/vquVFk

When we create our themes, we also need to create our own theme options on the admin panel. By customizing the theme options, it will make it easy for us, and most importantly, for our users to control the theme. You don’t need to create hardcode again to change the options. Simply select and save it. And you’ll get what you want.

Now I will explain to you how to make a simple WordPress admin panel. This post will be useful when you make your own WordPress theme along with the admin panel. Don’t worry, everything is easy when it comes to WordPress, including making your own theme options on the admin panel.

You can put any kind of control options for your theme on the admin panel, such as uploading logo or choosing the headline’s category. You can use all class in WordPress to make a layout for our admin panel, and add some style to make tab or accordion effect.


We will make the tutorial’s become three parts and here they are:

First, let’s make the function.php

/*---------------------------------------------------
register settings
----------------------------------------------------*/
function theme_settings_init(){
register_setting( 'theme_settings', 'theme_settings' );
}

/*---------------------------------------------------
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' );

/*---------------------------------------------------
Theme Panel Output
----------------------------------------------------*/
function theme_settings_page() {}

Put that’s script to your function.php, and you will find at the bottom of your dashboard, your theme options.

then put your options of your theme to the function theme_settings_page().

You can see this one for example.

/*---------------------------------------------------
Theme Panel Output
----------------------------------------------------*/
function theme_settings_page() {
    ?>
     <div class="wrap">
         <div id="icon-options-general"></div>
         <h2><?php _e( ' Theme Options' ) //your admin panel title ?></h2>
         <ul>
             <li>View Documentation |</li>
             <li>Visit Support </li>
         </ul>
         <p><span>Theme version</span></p>
         <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 done! You will see the header at your admin panel.
And all those codes above will give you this screenshot as a result.

And for the next you can put any options in your admin like that. I will tell you in the next part of Create a Simple WordPress Admin Panel tutorial

If you 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.

Let’s be creative!

  • Justin

    Thanks. this was helpful! An easy kick-start!

  • Pedro

    The screenshot is unavailable, could you please update? Thanks in advance!

    • http://colorlabsproject.com/blog Anita Pravitasari

      @f18a10151a19b6121ae317d3d8770366:disqus So sorry for that. It should work now. :)

  • Tusar Ranjan

    Hi Aanag. Great tutorial buddy. Really i enjoyed creating the theme options panel Thanks

  • z

    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 ?

  • hery

    How i can fetch logo field value for header.php….

  • Yaw Ansong

    change this damn commenting systm

  • SM-Mahdavi

    tnx, it was very usefull.

  • Hana

    Thanks for this!

  • a

    Good

  • Momo

    Where should I put the code Theme Panel Output? In the new php page inside the themes or where?

  • Muniraj Tejaswini

    As showed above i created functions.php page and pasted the script ,but theme options dint come in my wp dashboard.solve it pls