How to Create a Custom Submenu in the WordPress Admin Panel with add_theme

Created with:

Visibility:

public

June 1, 2023

As a WordPress developer, have you ever wanted to create a custom submenu in the admin panel, but didn’t quite know how to do it? Using the add_theme_page function, you can easily add a new submenu item to the Appearance menu. In this article, we’ll show you how to use add_theme_page to create a custom sub menu in the WordPress admin panel, making it easier for you to manage all of your site’s settings in one convenient location.

					function wpturbo_add_submenu_page() {
    add_theme_page(
        __( 'Custom Submenu Page', 'wpturbo' ),
        __( 'Custom Submenu', 'wpturbo' ),
        'manage_options',
        'wpturbo-custom-submenu',
        'wpturbo_render_custom_submenu_page'
    );
}

function wpturbo_render_custom_submenu_page() {
    ?>
    <div class="wrap">
        <h1><?php _e( 'Custom Submenu Page', 'wpturbo' ); ?></h1>
        <p><?php _e( 'This is a custom Submenu page created with add_theme_page function.', 'wpturbo' ); ?></p>
    </div>
    <?php
}
add_action( 'admin_menu', 'wpturbo_add_submenu_page' );

With the above code, you can create a custom submenu page in the WordPress admin panel. This is achieved by using the add_theme_page function, which is used to add a new top-level menu page in the admin panel. In this case, we are using it to add a custom submenu page instead.

The function wpturbo_add_submenu_page is responsible for creating the custom submenu page. Here's how it works:

The first argument is the text to be displayed in the browser window's title bar when the Custom Submenu Page is being displayed. This is specified as 'Custom Submenu Page' using the __() function to allow for language translations.
The second argument is the text that will appear in the menu sidebar. This is specified as 'Custom Submenu'.
The third argument is the capability required for a user to see the menu. In this case, manage_options capability is used which allows only users who can manage options to view the menu.
The fourth argument is the unique identifier for the menu. This will be used for the URL of the submenu itself, and for any subsequent submenu that is created using this one as a parent. In this case, it's 'wpturbo-custom-submenu'.
The fifth argument is the callback function that should be called to display the content of the submenu page. This function, wpturbo_render_custom_submenu_page, renders the actual HTML output of the page.

The wpturbo_render_custom_submenu_page function is responsible for outputting the HTML content of the submenu page. It creates a <div> element with a class of 'wrap', which is used for consistent styling. Inside the div element, there is a <h1> element that outputs the title of the page, which is 'Custom Submenu Page'.

Underneath that, we have a <p> element that outputs some text that describes the purpose of the custom submenu page. We are using the WordPress _e function once again to wrap the text in a localization function so that it can be translated to the user's language.

Finally, we add the add_action to the 'admin_menu' hook so that WordPress can add our custom submenu page in the WP admin dashboard.

How to Create a Custom Submenu in the WordPress Admin Panel with add_theme_page()

Add Snippet To Project