Tutorials

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

Create a Simple WordPress Admin Panel – Part III

http://colorlabs.co/W1fcIG

This is the last part of the tutorial “Create a Simple WordPress Admin Panel“. Finally, I have time to finish this tutorial. Let’s get started with it. In case you missed the previous parts, go check Part I and Part II to complete the tutorial.

In the previous tutorial, we have already created our own admin panel page with separate option positions but we think it’s still not good enough. We need to add some CSS styling and JavaScript effects to perfect the theme panel and make it look rather sophisticated. In this last part of the tutorial, I will tell you how to add accordion effects onto the admin panel which we have created before.

OK let’s start with creating a CSS file for the admin panel. This is the code:


.input_section{
border:1px solid #ddd;
border-bottom:0;
background:#f9f9f9;
border-radius: 3px 3px 3px 3px;
}
.option_input label{
font-size:12px;
font-weight:700;
width:15%;
display:block;
float:left;
}
.option_input {
padding:30px 10px;
border-bottom:1px solid #ddd;
border-top:1px solid #fff;
}
.option_input small{
display:block;
float:right;
width:60%;
color:#999;
}
.option_input input[type="text"], .option_input select{
width:20%;
font-size:12px;
padding:4px;
color:#333;
line-height:1em;
background:#f3f3f3;
}
.option_input input:focus, .option_input textarea:focus{
background:#fff;
}
.option_input textarea{
width:20%;
height:175px;
font-size:12px;
padding:4px;
color:#333;
line-height:1.5em;
background:#f3f3f3;
}
.input_title h3 {
color: #464646;
cursor: pointer;
float: left;
font-size: 14px;
margin: 0;
padding: 5px 0 0;
text-shadow: 0 1px 0 #FFFFFF;

}
.input_title{
cursor:pointer;
border-bottom:1px solid #ddd;
margin: 0;
padding: 7px 10px;
background-color: #F1F1F1;
background-image: -moz-linear-gradient(center top , #F9F9F9, #ECECEC);
font-size: 15px;
font-weight: normal;
line-height: 1;
border-bottom-color: #DFDFDF;
box-shadow: 0 1px 0 #FFFFFF;
}
.input_title h3 img {
position: relative;
top: -2px;
vertical-align: middle;
margin-right: 5px;
}

.input_title span.submit{
display: block;
float: right;
margin: 0 20px;
padding: 0;
}
.clearfix{
clear:both;
}

form > p.submit {
float: right;
padding: 0;
margin-right: 30px;
}
.options_wrap > ul li {
display: inline;
margin-right: 5px;
}
.content_options .message {
margin-top: 30px
}
.footer-credit{
margin-top: 60px
}

Save the file as panel.css and put it in the same folder as functions.php. The next step is to develop the accordion effect with Javascript and here it’s the code :

jQuery(document).ready(function(){
jQuery('.all_options').slideUp();

jQuery('.input_title h3').click(function(){
if(jQuery(this).parent().next('.all_options').css('display')=='none')
{    jQuery(this).removeClass('inactive');
jQuery(this).addClass('active');
jQuery(this).children('img').removeClass('inactive');
jQuery(this).children('img').addClass('active');

}
else
{    jQuery(this).removeClass('active');
jQuery(this).addClass('inactive');
jQuery(this).children('img').removeClass('active');
jQuery(this).children('img').addClass('inactive');
}

jQuery(this).parent().next('.all_options').slideToggle('slow');
});
});

Then, save the above codes in a JavaScript file named panel_script.js. Don’t forget to put this file in the same folder as functions.php.

Now that we’ve got the CSS and Javascript files created, we need to hook those files into our admin panel. Open your functions.php and find the function theme_settings_init(). You will need to modify the function and put wp_enqueue_style and wp_enqueue_script into it. The function will look like this:


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");
}

That’s it! Everything is done. The admin panel will now look like this:

I hope this tutorial can help you create a simple admin panel for your themes. This tutorial is very basic so be creative. Change the options, CSS, and JavaScript effects all you want. In case you missed the previous parts, here are the links to those:

There are Twitter, Facebook, and Google+ buttons located on the top of this tutorial. Feel free to share if you like this tutorial and find it helpful for your theme panel development. Good luck! If you have any further questions or have suggestion on what you would like to see on our next ‘How-To’ post, feel free to leave them in the comment bellow.

  • Steven

    Having some issues. Works great until I get to this last part. It seems like it’s not recognizing the CSS file. Any idea what I could be doing wrong?

    • http://stevenbeyerjr.com Steven Beyer Jr.

      Oh, and functions.php, panel.css, and panel_script.js are all in the same folder.

    • Fred Higson

      This is happening because the previous tutorial didn’t apply the class names to any of the elements. Annoying but unless the author posts a revised version of the options functions.php then we’re going to have to add these manually and kinda guess what the correct class names are.

  • Guest

    i’ve the same issue. the css file is not being recognized. i’ve moved panel.css to the same folder as well as included it in the css folder but it wasnt to much avail.

    thanks for the tutorial though. it was helpful.

  • http://www.facebook.com/atomicargonaut Joe Jenkins

    im having the same problem. the css file is not being recognized, though according to the console is loading.

  • Lohith

    Hi. i have created a website theme and whenever i log in later its not showing admin panel on the site.. (above the site a gray colour admin panel bar appears but its not appearing what i should do for this?)

  • http://www.facebook.com/vache.ghadimi Vache Ghadimian

    Where is the download link?

  • Marco Berrocal

    Liked the tutorial.

    Heavily disliked the lack of linking the CSS/JS with the actual code.

    I did the CSS myself which as Fred said, it’s annoying, but the JS now has a DIV that I don’t even know where it goes (.all_options) so it does nothing.

    • Anang

      Hi Marco,

      I forget to add some class into theme option structure,
      but right now i already add it. You can change the function of
      theme_settings_page() with the new one. You can get the new function on
      Part II (Create a Simple WordPress Admin Panel – Part II). good luck and
      thanks for your comment

      • Marco

        Hello Anang,

        Thanks for getting back to me. I managed to do it anyway, was wondering, why isn’t there a switch case for the FILE OPTION?

        Let me know.

  • Joups

    Hello,

    Congratulations for your great tuto, and thanks.

    Another future tutorial on how to insert it on the site (post, homepage,…) would be very very great.

    Thanks.

  • http://nativeimaging.com/ Native Imaging

    Thank you for the tutorial. Do you have any references about adding image upload & resize options for the fields?

    • Anang

      Hi,

      About adding image upload you use wp_enqueue_media() or wp_enqueue_script( ‘media-upload’ ) and add some javascript. And for resize the image you can try this function wp_get_image_editor( $file_path ).

      • http://nativeimaging.com/ Native Imaging

        Thank You. I actually found that using the Theme Customizer API’s was a better route to go. I will try to post a snippet when I have a free public version. I might make it into a plugin. no sure yet… :)

        Thanx!

      • Jelle Spaan

        Do you maybe have the code of the image upload case block?

        Thank you!

  • http://www.facebook.com/mattyfromle Matty Williamson

    Hi there.

    Excuse me if i’m missing something. I’ve followed this, looks great, everything makes sense apart from one thing…

    For example, I want to show the Logo on the front end, what line of code do I need to include into header.php for this to link them up?

    Thanks, awesome tut!

    • Ivana

      Hey Matty, I’m wondering this also, did you get an answer?

    • Fausto

      just type:

      echo get_option(‘field_id’);

  • http://twitter.com/SparkDevelop Spark Development

    I suggest altering the jQuery to the following, which allows the accordion to open/close when the whole title bar of the section is clicked on, not just the h3 title:

    jQuery(document).ready(function(){
    jQuery(‘.all_options’).slideUp();

    jQuery(‘.input_title’).click(function(){
    if(jQuery(this).next(‘.all_options’).css(‘display’)==’none’) {
    jQuery(this).removeClass(‘inactive’);
    jQuery(this).addClass(‘active’);
    jQuery(this).children(‘img’).removeClass(‘inactive’);
    jQuery(this).children(‘img’).addClass(‘active’);
    } else {
    jQuery(this).removeClass(‘active’);
    jQuery(this).addClass(‘inactive’);
    jQuery(this).children(‘img’).removeClass(‘active’);
    jQuery(this).children(‘img’).addClass(‘inactive’);
    }
    jQuery(this).next(‘.all_options’).slideToggle(‘slow’);
    });
    });

    • Alex Wright

      Taking it even further:

      jQuery(document).ready(function($){
      $(‘.all_options:not(:eq(0))’).slideUp();
      $(‘.input_title’).click(function(){
      if($(this).next(‘.all_options’).css(‘display’)==’none’) {
      $(this)
      .removeClass(‘inactive’).addClass(‘active’)
      .children(‘img’)
      .removeClass(‘inactive’).addClass(‘active’);
      } else {
      $(this)
      .removeClass(‘active’).addClass(‘inactive’)
      .children(‘img’)
      .removeClass(‘active’).addClass(‘inactive’);
      }
      $(this).next(‘.all_options’).slideToggle(‘slow’);
      });
      });

      – Aliases jQuery as ‘$’ for better readability
      – Slides all panels up initially, except first for better user experience
      – Takes advantage of jQuery’s chaining power

      • Spark Development

        Good call :)

  • icarrien

    hi Anang, when save setting button. i set this value to mysql.

    but, in mysql db, i don’t see it in wp_postmeta.

    could you tell when use “update_option( $option_name, $newvalue );” this post data in what mysql??

    tks