Tuesday, April 23, 2013

WordPress Creating Admin Menu and Sub Menu

WordPress Creating Admin Menu and Sub Menu

I am working on a wordpress plugin nowadays and would like to share few concepts with you. One of those is to create Admin Menu and Sub Menus.
Menus are integral part of any website, let alone wordpress. Ok so lets get started.
Now with wordpress good thing is that you can take your plugin to any limit. WordPress offers such flexibility that I sometime am overwhelmed with just a thought about what can be achieved. So finally I decided to write my first wordpress plugin.
This post is not about developing plugin from scratch but is more on topic about how to go about creating Admin Menu and Sub Menu on the main left Navigation. WordPress version I am using is 3.3.2
There are 3 topics I will cover in this post.
  1. Hooks required for creating Admin Menu
  2. Admin Sub Menu
  3. A basic landing page when you click on a Menu Item.
Ok so lets get started.
I assume that you already know what hooks and filters are, If not then you are better off reading this article
Ok so you read the above article and now ready to groove.
I am in fovor of showing with example so its better If I take that opportunity and create a basic wireframe Plugin and I call this Plugin as “jcorgtestplugin“. We will however will just be concentrating on Admin Menu and Sub Menus. You can download the source for what I’ve done later.
Ok first create a folder under plugins directory of your WordPress Install  /path/to/wordpress/root/wp-content/plugins/jcorgtestplugin, below is how it looks on my machine.
Wordpress Menu and Submenus Tutorial

Now create a file called jcorgtestplugin.php under the newly created folder and insert the lines below into that file.
  1. <?php
  2. /*
  3. Plugin Name: My test Plugin
  4. */
  5. ?>


Now goto WordPress administration and the Check you Plugins, Your new plugin will show up in the list as shown below
Wordpress Admin Menu and Submenu
Now if you Activate/Deactivate this plugin Nothing happens. Well that’s true because we haven’t done anything cool yet. This Post is about showing you how to Add you Menu and Submenu under the Admin panel.
Ok so lets look into that now, I’ve covered the above mentioned things just so that you know what I am talking about.
The hook that is required for your Admin Menu and Submenu to appear on Left is called admin_menu
So in the above created file add this line of code.
  1. add_action("admin_menu","jcorgcr_create_menu_test");
add_action function accepts 4 parameters, here is an explanation in case you don’t know about this function already add_action( $tag, $callback_fn, $priority, $accepted_args ); Parameters
$tag -(required) The name of the action Default: None. In our case we are using admin_menu $callback_fn (required) The name of the function that will handle our menu. Default: None, We are using “jcorgcr_create_menu_test$priority (optional) Used to specify the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action. Default: 10 $accepted_args (optional) The number of arguments the function accepts. Default: 1
Now lets create function called jcorgcr_create_menu_test, its shown below
  1. function jcorgcr_create_menu_test(){
  2. //create new top-level menu
  3. add_menu_page('My Test Plugin Settings', 'Test Plugin',
    __FILE__, 'jcorgcr_settings_page',plugins_url('/path/to/p;ugin/icon',
  4. // create a new submenu
  5. add_submenu_page( __FILE__, 'Categories Page', 'Manage Categories',
     'administrator', __FILE__.'_categories_settings',  
  7. }
Now if you save your Plugin file and try to activate it you will see a Menu and Submenmu for your test Plugin as shown below.
Wordpress Menu And submenu
In the above pic Icon is not showing up because /path/to/p;ugin/icon is invalid path in above function. But you get the Idea.
Now lets see whats happening in above function line by line
// declare the handler function and is required because this is
// expected by WP because of this call,
// add_action("admin_menu","jcorgcr_create_menu_test");
function jcorgcr_create_menu_test(){
        //create new top-level menu
        add_menu_page('My Test Plugin Settings', 'Test Plugin','administrator',
 __FILE__, 'jcorgcr_settings_page',plugins_url('/path/to/p;ugin/icon', __FILE__));
add_menu_page is essential to create top level navigational menu. lets go through parameters of this function
definition of add_menu_page is shown below
add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );
 below is what this function parameters mean
$page_title (required) The text to be displayed in the title tags of the page when the menu is selected Default: None
$menu_title (required) The on-screen name text for the menu Default: None. We used “Test Plugin” in our example
$capability (required) The capability required for this menu to be displayed to the user. User levels are deprecated and should not be used here! Default: None. Read more about capabilities here http://codex.wordpress.org/Roles_and_Capabilities
$menu_slug  (required) The slug name to refer to this menu by. This should be Unique name for your menu. In our case we are using PHP file that will handle the display. Default: None
$function The function that displays the page content for the menu page. As you see that we are using jcorgcr_settings_page which will be used to create the markup for our main settings page.
$icon_url (optional) The url to the icon to be used for this menu. This parameter is optional. Icons should be fairly small, around 16 x 16 pixels for best results.
$position (integer) (optional) The position in the menu order this menu should appear. The higher the number, the lower its position in the menu. Try to use unique number every time else your Menu can be overwritten by another carying the same number
// Now lets check the sub menu function
        add_submenu_page( __FILE__, 'Categories Page', 'Manage Categories'
,'administrator', __FILE

Read more: http://jaspreetchahal.org/wordpress-creating-admin-menu-and-sub-menu/#ixzz2RIv5ze8W

No comments:

Post a Comment