How To Build Your Own Custom WordPress Premium Theme Admin – Part 1

If you're creating themes for other people as a freelancer or you want to sell themes on places like themeforest.net and other market places, then you will need to step up your game as this is one of the things that make you stand out from the crowed.

So today I’m going to show you how to build your admin for your theme. There are two different ways people are doing it.

The first one is a WordPress menu navigation with submenu’s and the second way is one WordPress menu with a jQuery tabs menu effect.

First let’s start off with a Main menu and submenus so that you can see how to do this. In the end I will be using the jQuery tabbed menu effect as It looks just so much smoother.

Let’s start by creating the main menu

add_action('admin_menu', 'my_theme_menu');
 function my_theme_menu(){
 // the settings
 $page_title = "My Themes Admin";
 $menu_title = "Theme Settings";
 $capability = 'administrator';
 $menu_slug = "theme-settings";
 $function = "main_theme_menu";
 $icon_url = "icon.png"; // could be anything jpg, png, gif
 $position = 5;
// add the main menu
add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
}

Above we created the main menu; let me explain the code for you:

The $page_title is where you can set the page title tag.

The $menu_title is where you set the menu’s title.

The $capability is where you set the user access level, but according to the wordpress codex you can leave it blank ‘’.

The $menu_slug is the slug to be used for this menu page. Your link will look something like this http://localhost/wordpress/wp-admin/admin.php?page=super-menu

$function is the function to be used to display the content for that menu. I will be showing how to do this later on.

$icon_url is the path to the menu icon. Your icon should be 16 x 16 pixals. You could leave this blank.

$position is the position of your menu.

Your submenu code will look similar.

$parent_slug = "theme-settings";
$page_title = "General Settings";
$menu_title = "General Settings";
$capability = 'administrator';
$menu_slug = "general-settings";
$function = "sub_menu_general_settings";

add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function );

It’s time to write our menu functions to display our content

All we need to do here is to write our function and make sure that the function name corresponds with the name we used in the part where we added the menus.

Our Main Menu function:


function main_theme_menu() {

// Here you can add any type of php / html code to display on your page
echo "Put something here";
}

Our Sub-menu function:


function sub_menu_general_settings() {

// Here you can add any type of php / html code to display on your page
echo "Put something here";
}

As you can see it’s quite simple to add content and forms or whatever you like to your new menu page or sub menu page.

Now let’s start using the tabs menu like you see on most premium themes now days.

The method I’m going to show you now is my preferred method of creating an admin menu for my themes.

Now we are only going to create one menu item which is the main menu but we are going to use a tabbed menu effect with jQuery UI. This way we have multiple menus on the main menu.

Please download the latest jQuery UI here

Get the menu working, remember that this code goes in to your functions.php file:


//create custom admin menu's
// add the main menu
 add_action('admin_menu', 'my_theme_menu');
 function my_theme_menu(){

// the settings

$page_title = "My Themes Admin";

$menu_title = "Theme Settings";
/*
* Please not that this changed in the latest wordpress
* versions from a number to words for user capabilities.
* This would of been 7 but now you should use 'administrator'.
*/
$capability = 'administrator';

$menu_slug = "theme-settings";

$function = "main_theme_menu";

$icon_url = ""; // could be anything jpg, png, gif

$position = '5';

add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); // create the menu

}

wp_enqueue_script( 'jquery' );  //this code here  enables jquery

// Here we add the jQuery UI script to our theme header

wp_register_script( 'jquery-ui-script', get_bloginfo('template_url').'/js/jquery-ui-1.8.16.custom.min.js'); //this part registers the new script

wp_enqueue_script( 'jquery-ui-script' ); //this part puts the script in to our page header

// Here we add the jQuery UI theme Css to our header
$myThemeStyleUrl = get_bloginfo('template_url') . '/css/ui-lightness/jquery-ui-1.8.16.custom.css'; //set the path to our css

wp_enqueue_style('jquery-ui-style', $myThemeStyleUrl,'1.0','screen'); // this puts the css in the header

// Here we add the code that enables the tabbed menu
add_action('admin_head', 'enableTabMenu');

function enableTabMenu(){

echo "<script type="text/javascript">// <![CDATA[

jQuery(function() {

jQuery( '#tabs' ).tabs();

});

// ]]></script>";

}

function main_theme_menu() {

?></pre>
<div id="tabs">
<ul>
	<li><a href="#tabs-1">General Settings</a></li>
	<li><a href="#tabs-2">Social Settings</a></li>
	<li><a href="#tabs-3">Contact Settings</a></li>
</ul>
<div id="tabs-1">
First Menu Content here...</div>
<div id="tabs-2">
Second Menu Content here...</div>
<div id="tabs-3">
Third Menu Content here...</div>
</div>
<pre>
<!--?php <br ?-->
}

Now all we did above was add jquery and the the jquery UI to our header, we also added the stylsheet for our theme which we selected when we downloaded the jQuery UI code. We also created the html for our menu. If you did this correctly your menu will look something like the image below.

That’s it for Part 1 of this tutorial.

Please keep an eye out for part 2 of this tutorial. I will be adding it soon. In part 2 I will be showing you how to save data in the admin. We will be using the normal PHP way of saving data to wordpress option fields, then after that I will be showing you how to use ajax to save data and make it look like magic.

Guy’s and Girls I would like to encourage you to comment on my articles. Just in case you missed that big banner on the top of my articles and in the side-bar. You will notice that I’m giving away a free Premium WordPress theme every month to one lucky commentator. Who knows maybe you are one of them.  Your comments encourage me to write more and better articles / tutorials on this site and help me better my writing skills. I appreciate that you read this far, thanks buddy 😉

I've added all the code into a neat little plugin so you don't have to go through all the trouble. Download it below

Demo Link

 

 

Related Posts:

  • rss
  • email
  • rss
  • email
I'm a full time PHP developer and I just love all things web related. If you need help I'm your guy.

14 Responses to How To Build Your Own Custom WordPress Premium Theme Admin – Part 1

  1. Bobegods says:

    This didn’t work for me.

  2. Morné says:

    Hi there, What part did not work for you? I can maybe point you in the right direction.

  3. Muhammadkamran05 says:

    great article

  4. Karol says:

    I cant seem to get this to work. I keep getting various syntax errors that I can’t fix from lines 48 to 58. Do you know what this could be?

  5. Morné says:

    Hi Karol,

    Please provide me your code and what the error says then I could help you out. As I need to see what the issue could be.

    Thanks

  6. Karol says:

    The code is in my functions.php and it is just the whole jquery tab menu section you posted. I have tried just this snippet alone and I keep getting an error when I upload it and try to go to admin. It says:
    Parse error: syntax error, unexpected end of file
    I’m trying to it out but I just can’t seem to find a solution.

  7. Morné says:

    Hi Karol,

    Thanks for pointing that out. From line 46 to 58 you need to change the code a bit.

    Change it to this, it was my mistake.

    function enableTabMenu(){
    ?>
    //
    and <?php

    I'm going to update my code to reflect the fix.

    Thanks :) hope that helps and sorry for leaving you in the dark there 😉

  8. Karol says:

    Wow the plugin is awesome. It actually worked which assured me that the code will work. However, after trying a lot of different things I just can’t seem to get the javascript to link to the page. I keep getting 404. When I put in the plugin it works fine. But for some reason it just won’t link to the js and css without the plugin. I put all the css and js in the right folders and checked the paths. The paths look to be right but when i use the chrome developer tool and then click on the links it brings me to a 404 page. Any suggestions?

    Thanks a million for your help so far by the way.

  9. Morné says:

    Hi Karol,

    Please show me how you are linking your JS and CSS files. I think you are doing something wrong. There is a specific way to link them so that your URL is always correct, which will mean no 404’s.

    There is a small difference between the plugin code and the code that goes directly into your Theme functions file.

    Are you trying it in a plugin or the functions.php file?

  10. Just curious how old this post is and if its current with the WordPress 3.5.1 API’s.

    Also, you begin with several code snippets to start the customization but no reference to which files they go in. Also, why would you need to load the JQUERY UI when WordPress already has a jquery UI installed?

  11. Morné says:

    Hi there,

    This post is a bit old already but is still valid.

    This should still work with WordPress 3.5 and up. Yes I know that jQuery Ui is build in to WordPress already I just did it that way because at the time I wanted a newer version of jQuery UI. Should probably have mentioned it :)

    The only major part that would of changed in 3.5 is the gallery system.

    I know at first I never mentioned the file but if you read the whole article then you will see that I say functions.php is the file it needs to go in to 😉

    If you are ever interested in doing themes or need some help don’t hesitate to ask?

    I’m going to be writing some new articles and do some new video tutorials soon. Just need to prioritize my time.

    Thanks for the comment.

  12. Thanks. I actually found that using the API’s for the WP Theme Customizer was the best way to go. Thanks for the article though.

  13. Morné says:

    Hi yes, at the time of writing this the api wasn’t available yet. All though you can use the api, there is still a need to have custom code for your back-end to do things specific to the themes needs.

  14. WordPress Review says:

    Very good article. I preffer to use admin themes to impress my
    clients that are already working with wordpress and know how boring
    default theme can be. :) You can see ones that I often use on this WordPress
    admin theme
    list. Keep up with good info and thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>