Customize the WordPress back-office menu

Customizing the WordPress back-office menu is a crucial step in improving the user experience for both administrators and customers. After all, your customers don’t need access to all WordPress settings, so it’s a good idea to think of them by simplifying the interface. A well-structured menu, adapted to specific needs, not only facilitates navigation, but also optimizes site management, saving valuable time and improving efficiency.

Add menu items

Using the admin_menu hook

The admin_menu hook is an anchor point in WordPress that allows developers to add, modify, or remove items in the back-office menu. It is triggered when WordPress generates the admin menu, making it an ideal location to customize the interface according to the specific needs of your clients or your project.

Sample code for adding a new menu item

To add a new item to the back-office menu, you’ll use the add_menu_page() function as part of the admin_menu hook. Here’s an example code:

PHP

function add_menu_item() {
    add_menu_page(
        'Page Title',          // Page title
        'Menu Name',           // Menu name in the back-office
        'manage_options',      // Capability required to view this menu
        'page_slug',           // Unique slug to identify this page
        'display_page_content', // Callback function to display the page content
        'dashicons-admin-generic', // Menu icon (optional)
        20                     // Menu position (optional)
    );
}
add_action('admin_menu', 'add_menu_item');

Explanation of parameters

Page Title: The title that will appear in the <title> tag of the browser tab when this page is opened.
Menu Name: The text that will appear in the back-office menu.
Capability: The capability required to access this menu item. manage_options is typically used for administrators.
Slug: A unique identifier for this page, used in the URL (e.g., admin.php?page=page_slug).
Callback: The function that is executed to display the content of the associated page.
Icon: An icon for the menu; you can use one of WordPress’s built-in icons (like dashicons-admin-generic).
Position: The position of this item in the menu. Lower numbers will appear higher in the list.

Create a new associated page

Once you’ve added a new menu item, you need to create the administration page associated with it.

How to link a new menu item to a customized administration page

The callback function you passed as an argument to add_menu_page() will be used to display the page content when the menu item is clicked. Here’s a simple example of code to create a customized administration page.

Example of code to display a simple page

PHP

function display_page_content() {
    ?>
    <div class="wrap">
        <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
        <p>Welcome to your custom admin page!</p>
        <form method="post" action="options.php">
            <?php
                // WordPress settings form fields
                settings_fields( 'options_group' );
                do_settings_sections( 'page_slug' );
                submit_button();
            ?>
        </form>
    </div>
    <?php
}

Code explanation

get_admin_page_title(): This function retrieves the title of the page that you defined in add_menu_page().
settings_fields(): This function is used to generate the hidden fields required for the WordPress options form.
do_settings_sections(): Used to display the settings sections and associated fields.
submit_button(): Generates a submit button.

This custom administration page is now linked to the menu item you’ve added. You can enrich this page with forms, options sections or any other content relevant to your project.

Modifying existing elements

Changing the title of a menu item

Using the global $menu function

To modify the title of an existing menu item in the WordPress back office, you can use the global variable $menu. This variable contains a multi-dimensional array representing all menu items.

Example of code to modify the title of an existing element

Here’s how to change the title of the “Articles” menu (which normally has the title “Posts” in English):

PHP

function modify_menu_title() {
    global $menu;
    
    foreach ( $menu as $key => $value ) {
        if ( $value[2] == 'edit.php' ) { // Check if the slug matches 'edit.php' (the slug for "Posts")
            $menu[$key][0] = 'New Posts'; // Modify the title of this menu item
        }
    }
}
add_action( 'admin_menu', 'modify_menu_title' );

Explanation:

global $menu: Allows you to access the global $menu variable where all menu items are stored.
$value[2]: Corresponds to the slug of the menu item (in this case, 'edit.php' for Posts).
$menu[$key][0]: Modifies the title displayed in the menu.

Rearrange the order of elements

To rearrange the order of menu items, you can also use the global variable $menu. The order of items is determined by the key of the $menu array, where items with smaller keys appear first.

Practical example with a simple code

For example, to move “Pages” before “Articles”, you can use this code:

PHP

function reorganize_menu() {
    global $menu;

    // Store the "Pages" menu item
    $pages = $menu[20]; // 20 is the default index for "Pages"
    
    // Remove "Pages" from its current position
    unset($menu[20]);

    // Reinsert "Pages" before "Posts"
    $menu[5] = $pages; // 5 is the default index for "Posts"
}
add_action( 'admin_menu', 'reorganize_menu' );

Explanation:

$menu[20]: Represents the “Pages” menu item.
unset($menu[20]): Removes “Pages” from its current position.
$menu[5] = $pages;: Re-inserts “Pages” before “Posts”.

Modify an item’s icon

WordPress uses Dashicons, a library of icons, for menu items. You can change the icon of an existing item by accessing the global variable $menu and modifying the associated icon.

Example of icon modification

Here’s how to change the “Pages” icon to another Dashicon icon:

PHP

function modify_menu_icon() {
    global $menu;

    foreach ( $menu as $key => $value ) {
        if ( $value[2] == 'edit.php?post_type=page' ) { // Slug for Pages
            $menu[$key][6] = 'dashicons-welcome-write-blog'; // Change the icon
        }
    }
}
add_action( 'admin_menu', 'modify_menu_icon' );

Explanation:

$value[2]: Checks if the slug matches “Pages”.
$menu[$key][6]: Modifies the icon of the menu item. The parameter 'dashicons-welcome-write-blog' refers to an icon from the Dashicons library. You can replace this value with any available Dashicons icon name.

Delete menu items

Deleting an element with remove_menu_page

The remove_menu_page() function is used to remove a main menu item from the WordPress back office. This function takes as argument the unique slug of the menu item you wish to remove. It’s a simple and effective way to clean up the menu and leave only the essential items for your users.

Example of deleting a standard element such as “Comments” or “Plugins”.

Suppose you want to remove access to “Comments” and “Plugins” from the back-office menu. Here’s how to do it:

PHP

function remove_menu_items() {
    remove_menu_page('edit-comments.php'); // Removes the "Comments" menu item
    remove_menu_page('plugins.php');       // Removes the "Plugins" menu item
}
add_action('admin_menu', 'remove_menu_items');

Explanation:

remove_menu_page('edit-comments.php'): Removes the “Comments” menu.
remove_menu_page('plugins.php'): Removes the “Plugins” menu.

Each main menu item has a specific slug, and it’s this slug that you need to pass as an argument to remove_menu_page().

Deleting a submenu with remove_submenu_page

Practical example of sub-menu deletion

If you only wish to remove a specific submenu rather than an entire main menu item, you can use the remove_submenu_page() function. This function takes two arguments: the slug of the parent menu and the slug of the submenu to be removed.

Let’s suppose you want to remove access to the “Theme Editor” submenu under the “Appearance” menu. Here’s how to do it:

PHP

function remove_submenu() {
    remove_submenu_page('themes.php', 'theme-editor.php'); // Removes the "Theme Editor" submenu
}
add_action('admin_menu', 'remove_submenu');

Explanation:

remove_submenu_page('themes.php', 'theme-editor.php'):
- themes.php: The slug of the parent menu, here “Appearance”.
- theme-editor.php: The slug of the submenu, here “Theme Editor”.

This method is particularly useful for masking advanced or unnecessary functions for certain users, while maintaining access to other menu items.

Manage access permissions

Understanding the roles and capabilities of WordPress

Brief overview of roles and capabilities

WordPress uses a system of roles and capabilities to control what each user can do on the site. Here’s an overview of the main roles:

Administrator: Has access to all WordPress features.
Editor: Manages and publishes other users’ content.
Author: Manages and publishes your own content.
Contributor: Writes articles but cannot publish them.
Subscriber: Can only manage his/her profile.

Capabilities are specific permissions that allow you to control specific actions. For example, edit_posts allows you to modify articles, while manage_options gives you access to site settings.

How to manage access to menu items according to user role

When you add or modify a menu item in the WordPress back office, you can specify which capabilities are required to display that item. This allows you to restrict access to certain menu items depending on the role of the logged-in user.

Example of code to restrict access to a menu item to certain roles :

PHP

function add_custom_menu_item() {
    add_menu_page(
        'Custom Page',               // Page title
        'Custom Menu',               // Menu name
        'manage_options',            // Capability required to access this menu
        'custom_slug',               // Unique slug for the page
        'display_custom_content',    // Callback function to display the content
        'dashicons-admin-site',      // Menu icon
        25                           // Position in the menu
    );
}
add_action('admin_menu', 'add_custom_menu_item');

Explanation:

manage_options: This parameter specifies that only users with this capability (usually administrators) will be able to see this menu.

Practical example

Restrict access to a specific menu for certain users

Let’s imagine you want to create a specific menu accessible only to administrators, while other roles, such as editors or authors, won’t be able to access it. Here’s an example of practical code to manage this restriction:

PHP

function add_restricted_menu() {
    if ( current_user_can('manage_options') ) { // Checks if the user has the 'manage_options' capability
        add_menu_page(
            'Advanced Settings',       // Page title
            'Advanced Settings',       // Menu name
            'manage_options',          // Capability required to access this menu
            'advanced_settings_slug',  // Unique slug for the page
            'display_settings_page',   // Callback function to display the content
            'dashicons-admin-tools',   // Menu icon
            30                         // Position in the menu
        );
    }
}
add_action('admin_menu', 'add_restricted_menu');

function display_settings_page() {
    ?>
    <div class="wrap">
        <h1>Advanced Settings</h1>
        <p>This page is reserved for administrators to configure the advanced settings of the site.</p>
    </div>
    <?php
}

Explanation:

current_user_can('manage_options'): This condition checks if the logged-in user has the manage_options capability, which is generally reserved for administrators. If the condition is true, the menu is added.
Function display_settings_page: This function generates the content for the page reserved for administrators.

Conclusion

Summary of key points

In this article, we’ve explored several methods for customizing the WordPress back-office menu. Here’s a summary of the key points covered:

Adding New Menu Items: By using the admin_menu hook and the add_menu_page() function, you can easily add custom menu items to provide additional features to your users.
Modifying Existing Items: We have seen how to change titles, reorder items, and modify icons by manipulating the global $menu variable.
Removing Menu Items: With the remove_menu_page() and remove_submenu_page() functions, you can remove unnecessary or irrelevant items for certain users.
Managing Access Permissions: By leveraging WordPress roles and capabilities, you can restrict access to certain menu items based on the logged-in user’s role, providing a more secure and tailored interface.

Encouraging experimentation

Back-office menu customization is a great way to create a bespoke user experience in WordPress. I encourage you to go further and experiment with these methods to tailor the interface to the specific needs of your projects. Feel free to explore other aspects of the back-office, such as customizing admin pages, creating custom widgets or adding custom scripts and styles.