How to add a custom HTML class name to admin screen submenu items?

Question

Here are these submenu items under the Posts menu

I inspected the code and found out that the markup of it is this

<ul class="wp-submenu wp-submenu-wrap">
  <li class="wp-submenu-head" aria-hidden="true">Posts</li>
  <li class="wp-first-item current"><a href="edit.php" class="wp-first-item current">All Posts</a></li>
  <li><a href="post-new.php">Add New</a></li>
  <li><a href="edit-tags.php?taxonomy=category">Categories</a></li>
  <li><a href="edit-tags.php?taxonomy=post_tag">Tags</a></li>
</ul>

What I would want to do is add a custom class my-custom-class on the <li> tags (processed on the server-side) such that it would become like this

<ul class="wp-submenu wp-submenu-wrap">
  <li class="wp-submenu-head" aria-hidden="true">Posts</li>
  <li class="wp-first-item current my-custom-class"><a href="edit.php" class="wp-first-item current">All Posts</a></li>
  <li class="my-custom-class"><a href="post-new.php">Add New</a></li>
  <li class="my-custom-class"><a href="edit-tags.php?taxonomy=category">Categories</a></li>
  <li class="my-custom-class"><a href="edit-tags.php?taxonomy=post_tag">Tags</a></li>
</ul>

Is there a way to add a custom HTML class name to admin screen submenu items?

It's not ideal, but unless you find a different solution you _could_ use attribute selectors instead. Granted, you want be able to target the `li`:s but rather the `a`:s; `.wp-submenu a[href="post-new.php"]` and so on. — powerbuoy, Apr 17 '17 at 17:23
The question is definite. Selectors are not an option for the said objective. — Abel Callejo, Apr 18 '17 at 10:26
Could you please clarify the use case. **Why** would you want to do this? The reason for why this clarifications is needed is that there are many ways to target that element using client side code (CSS/JS). Defining your use case - what you are trying to achieve - would get better informed answers. — Adam Rehal, Apr 22 '17 at 21:18
actually I just realized that the class can also be added in the `` tags instead of the `
That ripple effect is done using JS so my JS resolution should work just fine as the effect won't work before JS is loaded — Jack, Apr 23 '17 at 15:42
@JackNicholson I'm not so sure for now. The ripple effects work by appending new DOM objects with in the specific class name. The class name acts as markers on which doms need to have a ripple effect. The javascript library for the ripple then attaches those doms to the marked doms. As long as the footer script gets executed first before the the material design script/library, it may work. I'm gonna have to test it. — Abel Callejo, Apr 23 '17 at 15:49

score 2 · Accepted Answer · edited May 23 '17 at 12:02

2

You can do a str_replace on the html which will happen before the page has loaded:

Just need to work out the selectors or then parse it with DOMDocument

function callback($buffer) {

    $buffer = str_replace('wp-first-item', 'wp-first-item my-custom-class', $buffer);

    return $buffer;
}

function buffer_start() { ob_start("callback"); }

function buffer_end() { ob_end_flush(); }

add_action('admin_head', 'buffer_start');
add_action('admin_footer', 'buffer_end');

edited May 23 '17 at 12:02

Community

1
1

answered Apr 22 '17 at 15:00

Jack

3,271
11
48
57

this answer is going to the right direction however it currently doesn't get the objective output – Abel Callejo Apr 22 '17 at 15:06

birgire · Answer 2 · 2017-04-23T09:26:23.797

We can actually do it with a simple plugin like this one:

<?php
/** Plugin Name: Custom Admin Submenu CSS Class **/

add_action( 'admin_menu', function() use ( &$submenu )
{
    $class = 'my-class'; // Edit to your needs!

    if( ! isset( $submenu['edit.php'][5] ) )
        return;

    if( ! empty( $submenu['edit.php'][5][4] ) ) // Append if css class exists
        $submenu['edit.php'][5][4] .= ' ' . $class;
    else                                      
        $submenu['edit.php'][5][4] = $class;

} );

We constructed it this way by spotting out this this part of the _wp_menu_output() core function:

if ( ! empty( $sub_item[4] ) ) {
    $class[] = esc_attr( $sub_item[4] );
}

Here's how the modified HTML looks like:

<ul class='wp-submenu wp-submenu-wrap'>
    <li class='wp-submenu-head' aria-hidden='true'>Posts</li>
    <li class="wp-first-item current my-class">
        <a href='edit.php' class="wp-first-item current my-class">All Posts</a>
    </li>
    <li>
        <a href='post-new.php'>Add New</a>
    </li>
    <li>
        <a href='edit-tags.php?taxonomy=category'>Categories</a>
    </li>
    <li>
        <a href='edit-tags.php?taxonomy=post_tag'>Tags</a>
    </li>
</ul>

where the custom css class is added to both the <li> tag and the <a> tag.

In general I don't like modifying a global variable, but there doesn't seems to be a workaround to add the class to the submenu via add_submenu_page() or other explicit filters.

If you want to modify the css classes for the first level items (menu), you can e.g. look into the add_menu_classes filter.

If you feel strongly that the css classes for the submenus should be directly adjustable via a filter, then you can create a trac ticket, explain in detail why this is needed and e.g. suggest a new add_submenu_classes filter.

I hope it helps!

Jack · Answer 3 · 2017-04-22T14:52:45.040

1

This should do it:

function add_admin_class() {
    $find = '.wp-submenu li';
    $add_class = 'my-custom-class';

    echo '"<script type="text/javascript">
        jQuery(function() {
            jQuery("' . $find . '").addClass("' . $add_class . '");
        });
    </script>"';
}
add_action('admin_footer', 'add_admin_class');

edited Apr 22 '17 at 14:52

answered Apr 22 '17 at 14:46

Jack

3,271
11
48
57

this answer uses javascript to append the class name after the page has been safely loaded. What I'm trying to achieve is to append the class names right from the server-side process – Abel Callejo Apr 22 '17 at 14:52

score 1 · Answer 4 · answered Apr 22 '17 at 23:29

1

I have researched this. You cannot add css-classes to Admin Menu Items unless you hack the core files.

To add a new sub menu item you can use delete_submenu_page() and then add_submenu_page() but it does not allow you to specify a css class for it.

answered Apr 22 '17 at 23:29

Adam Rehal

154
1
6

score 1 · Answer 5 · answered Apr 25 '17 at 08:57

Please try this:

This worked for me.

add_action('admin_init','add_custom_class_adminMenu');
function add_custom_class_adminMenu() 
{
    global $menu;
    foreach($menu as $key => $value)
    {
        if('Posts' == $value[0])
        {
            $menu[$key][4] .= " custom-class-1";
        }

        if('Pages' == $value[0])
        {
            $menu[$key][4] .= " custom-class-2";
        }            
    }
}

How to add a custom HTML class name to admin screen submenu items?

5 Answers5