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?

Answer 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');

Answer 2

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!

Answer 3

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.