0
310
ViewsHow to add a custom HTML class name to admin screen submenu items?
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?
3 answers
Answer question0
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');
0
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!
0
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');
