Add highlighting to new Admin Dashboard Menu Item

The question:

I have implemented a Custom menu item in my wordpress dashboard using the following command in the functions.php

function create_menu() {
    $settings_page = add_menu_page('Edit_Post_69', 'Edit_Post_69', 'add_users', '/post.php?post=69&action=edit', '', get_stylesheet_directory_uri() . '/editicon.png', 2);
}

This works great and has added the icon into the dashmenu, included the icon and when clicked, takes me to the Edit Post page on post #69.

enter image description here

The problem I am facing is that even though I have clicked my custom link, the page it is currently on is the Edit Post page, this causes the Highlighted arrow to be on the Post section rather than my custom section as in the image below.

snapshot2

What I need is for my custom item to be highlighted as well, I have tried looking at filters and dug out _wp_menu_output, the idea being to filter the html and change the id class of the item to give it its highlighting.

Can anyone point me in the right direction of resolving this issue?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

The probability is high that no hook will exist for that…

But it can be solved with jQuery:

add_action( 'admin_head-post.php', 'wpse_58567_highlight_menu_item' );

function wpse_58567_highlight_menu_item()
{
    global $post;

    if( 69 != $post->ID )
        return;

    ?>
        <script type="text/javascript">
            jQuery(document).ready( function($) {
                $('#toplevel_page_post-post-69-action-edit').removeClass('wp-not-current-submenu').addClass('current');
                $('#toplevel_page_post-post-69-action-edit').find('a:last').addClass('current');
            });     
        </script>
    <?php
}


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment