Skip to content

Instantly share code, notes, and snippets.

@userabuser
Last active December 15, 2021 18:19
Show Gist options
  • Save userabuser/89580ef1c333359a47a802a965404d8e to your computer and use it in GitHub Desktop.
Save userabuser/89580ef1c333359a47a802a965404d8e to your computer and use it in GitHub Desktop.
Add classes to add_submenu_item menu items in WordPress
<?php
add_action( 'admin_menu', function() {
$parent_slug = 'options-general.php'; // customize to suit
$menu_slug = 'my-submenu-item'; // customize to suit
$position = 6; // customize to suit
add_submenu_page(
$parent_slug,
__( 'Submenu Item', 'my-submenu-item' ),
__( 'Submenu Item', 'my-submenu-item' ),
'manage_options',
$menu_slug,
'render_submenu_page',
$position
);
// after calling add_submenu_page() your sub menu page
// is now available on the global $submenu array...
global $submenu;
// if you don't supply a $position arg to add_submenu_page() or you are targeting
// submenu items you have no or limited control over, you can find the positional
// index by searching the submenu context for the parent slug by your menu slug.
// UNCOMMENT THE NEXT TWO LINES TO SEARCH DYNAMICALLY BY MENU SLUG
// $position = array_search( $menu_slug, array_column( $submenu[ $parent_slug ], 2 ) ); // get the offset (indexes are numerical strings)
// $position = key( array_slice( $submenu[ $parent_slug ], $position, 1, true ) ); // find the actual $position assigned by core
// add your classes to the fourth index of the submenu item for the $parent_slug
// at your $menu_slug $position, where this index holds element classes, this will
// add the same classes to the outer <li> submenu item and child <a> element
// @see _wp_menu_output() in wp-admin\menu-header.php:L199
$submenu[ $parent_slug ][ $position ][4] = "{$menu_slug} dashicons-before dashicons-admin-settings";
});
add_action( 'admin_head', function() {
?>
<style>
/** hide the dashicons-before:before attributes on li element */
ul.wp-submenu li.my-submenu-item.dashicons-before:before {
display: none;
}
/** adjust to suit your preferences here if required */
ul.wp-submenu a.my-submenu-item.dashicons-before:before {
margin-right: 5px;
}
</style>
<?php }
);
@userabuser
Copy link
Author

image

Example output above..

@userabuser
Copy link
Author

Alternatively you can target the anchor href attribute using pure css alone:

ul.wp-submenu a[href^="options-general.php?page=my-submenu-menu-slug"]:before {
    margin-right: 5px;
    font-family: dashicons;
    display: inline-block;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    speak: never;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 20px;
    height: 20px;
    font-size: 20px;
    vertical-align: top;
    text-align: center;
    transition: color 0.1s ease-in;
    content: "\f180";
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment