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

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