Monthly Archives: May 2018

How to Keep Custom wp-admin Nav Menu Items Open and Sub-menu Items Highlighted When Clicked

So, I spent a good 3+ hours doing what I thought would be a simple task today. I was working on a custom WordPress plugin named "Cultivate" for a client and made some additions to the admin menu in wp-admin. I added a Main menu item with the plugin name on it and there were 8 sub-menu items under it with links to various admin pages for the plugin.

The Problem

The problem is that the cultivate main menu item should stay open when someone clicks on one of the sub-menu items, but doesn't. So let me demonstrate with a couple of images of the admin area in WordPress. Here's an image of how the admin nav looks just after I clicked on the main menu item "Cultivate". As you can see in the below image, the Cultivate menu is open and you can see the 8 submenu items below it. When it is closed all you see if the "Cultivate" menu item, but here it is open:

MainMenu

Okay, that's all good and fine. You can see the sub-menu items and you can see "Cultivate" main menu item is highlighted because that page is now open. So, everything looks great! However, below is another image of how it looks after clicking on one of the sub-menu links below the "Cultivate" main menu item. In the next image, I have just clicked on the "Pods" sub-menu item under "Cultivate":

Submenu

Now do you see the problem? Not only is the main "Cultivate" menu item closed, but the "Pods" sub-menu item isn't even present. Pods should be visible and highlighted which is not possible without the sub-menu being opened! So, after hours of research and coding, I finally figured out how to make this custom wp-admin menu work as it should. Here is how it looks after clicking on "Pods" under "Cultivate" after I added my code which I'll show you shortly:

OpenSubmenu

See how in the above image, the main "Cultivate" menu remained open and the "Pods" sub-menu item is highlighted after going to the custom admin page?  That's how it should work! That's how it works after adding my custom PHP and jQuery code shown below.

The Solution

The solution is a block of PHP code added to your plugin file or functions.php file and a custom jQuery script for each sub-menu item. It might sound like a lot to make a separate .js file for each sub-menu item, but you only have to change one word in each file, so not a huge deal really.

The PHP Code

Here's the PHP code you can add to your main plugin file or to functions.php if you're adding it to a theme:

First we will just add the following PHP code, then below that you can see the complete script, but you'll want to run this partial script first to get your page names for the if statements to function properly:

add_action('admin_head', 'jafty_set_open_menu');
//Open the correct menu for taxonomy
function jafty_set_open_menu(){
    $screen = get_current_screen();
    $screenname = $screen->base;
    $screentax = $screen->taxonomy;
    $posttype = $screen->post_type;
    //uncomment next line to write name of page, post type and taxonomy to log:
    log_debug("\n\nOpened page: $screenname\nOpened Taxonomy: $screentax\nPost Type: $posttype\n\n");

}//end jafty_set_open_menu function by Ian L. of Jafty.com

//Custom function to write data to log file:
function log_debug($log){
    $pdir = plugin_dir_path( __FILE__ );//gets the directory of current file with trailing slash whether inside plugin or not!
    $myFile = $pdir."my_log.txt";
    $fh2 = fopen($myFile, 'a') or die("can't open file to append");
    fwrite($fh2, $log);
    fclose($fh2);
}//End log_debug PHP function

Now with the above code installed in your main plugin file or functions.php file, you'll also need to add a file to your plugin's main directory named my_log.txt and give it write permissions. This way it will write the page names and any possible taxonomy or post types you need to insert later in the script to the log file when you click on the admin nav links. So you click on a sub link, then see what was written to the log file. Repeat for ea. sub link. and write down the values written to the log file. Then you use what you wrote down to plan your PHP if statements correctly according to the page, post type and taxonomies used.

With that said, here's the entire script that worked for my Main menu item with 8 sub menu items below it"

//code to keep main menu open if submenu items are clicked:
add_action('admin_head', 'jafty_set_open_menu');
//Open the correct menu for taxonomy
function jafty_set_open_menu(){
    $screen = get_current_screen();
    $screenname = $screen->base;
    $screentax = $screen->taxonomy;
    $posttype = $screen->post_type;
    //comment out next line to stop writing the page and taxonomy names to log file:
    log_debug("\n\nOpened page: $screenname\nOpened Taxonomy: $screentax\nPost Type: $posttype\n");
    //next will be a separate block of code for ea. submenu item in the main menu to trigger the proper .js file to manipulate the nav menu properly for ea.:
    //code for the "People" submenu item:
    if($screenname === 'edit' && $posttype === 'people'){
        wp_enqueue_script( 'open-menu-parent_people', plugins_url('js/open_admin_menu_people.js', __FILE__ ), array('jquery') );
    }    
    //code for the "Pods" submenu item:
    if($screenname === 'edit-tags' && $screentax === 'pods'){
        wp_enqueue_script( 'open-menu-parent_pod', plugins_url('js/open_admin_menu_pod.js', __FILE__ ), array('jquery') );
    }
    //code for the "Touchpoints" submenu item:
    if($screenname === 'edit' && $posttype === 'touchpoints'){
        wp_enqueue_script( 'open-menu-parent_touchpoints', plugins_url('js/open_admin_menu_touchpoints.js', __FILE__ ), array('jquery') );
    }    
    //code for the "Campaigns" submenu item:
    if($screenname === 'edit-tags' && $screentax === 'campaigns'){
        wp_enqueue_script( 'open-menu-parent_campaigns', plugins_url('js/open_admin_menu_campaigns.js', __FILE__ ), array('jquery') );
    }    
    //code for "Forms" submenu item:
    if($screenname === 'cultivate_page_forms_admin_pg'){
        wp_enqueue_script( 'open-menu-parent_forms', plugins_url('js/open_admin_menu_forms.js', __FILE__ ), array('jquery') );
    }    
    //code for "Custom Fields" submenu item:
    if($screenname === 'cultivate_page_custom_fields_admin_pg'){
        wp_enqueue_script( 'open-menu-parent_custom_fields', plugins_url('js/open_admin_menu_custom_fields.js', __FILE__ ), array('jquery') );
    }        
    //code for "MailChimp Admin" submenu item:
    if($screenname === 'cultivate_page_mailchimp_admin_pg'){
        wp_enqueue_script( 'open-menu-parent_mailchimp_admin', plugins_url('js/open_admin_menu_mailchimp_admin.js', __FILE__ ), array('jquery') );
    }        
    
}//end jafty_set_open_menu function by Ian L. of jafty.com

Now the jQuery Code:

You'll need one .js file with the following contents for each sub-menu item you have in your admin nav. All you have to change in the text that reads "MailChimp Admin" in my example below to the link text of the sub-menu item for ea. separate .js file you use:

(function($) {
    // Close all the other parent menus
    $('.wp-has-current-submenu').removeClass('wp-has-current-submenu');

    // Open your specific parent menu
    $('.toplevel_page_cultivate_settings_pg')//set to menu name for cultivate menu
        .removeClass('wp-not-current-submenu')
        .addClass('wp-has-current-submenu wp-menu-open');
        

            $('.toplevel_page_cultivate_settings_pg .wp-submenu-wrap').find('li').each(function(){
                 var current = $(this);
                    if(current.text()=='MailChimp Admin'){
                        current.addClass('current');
                    }
        });

}(jQuery));

Summary

Nice huh? It took me forever to get this to work, but with the above code you should be able to do it in minutes.