Create a Simple WordPress Admin Panel – Part III
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.
About Author
