Getting started with WordPressget_bloginfo()Enqueuing scriptsMaking network requests with HTTP APIEnqueuing Styleshome_url()Custom Post Typestemplate_includeThe Loop (main WordPress loop)AJAXThe $wpdb ObjectActions and Filterswp_get_current_user()Add/remove contact info for users with user_contactmethods filter hookCreating a custom templateCustomizer Hello WorldCustomizer Basics (Add Panel, Section, Setting, Control)The Admin Bar (aka "The Toolbar")Querying postsAlternating main loop (pre_get_posts filter)ShortcodeCreate a Post Programmaticallyget_template_part()Taxonomiesget_template_part()ShortcodesPost FormatsCustom exerpts with excerpt_length and excerpt_morePlugin developmentSecurity in WordPress - EscapingTemplate hierarchyRemove Version from Wordpress and StylesheetsChild Theme Basicsadd_action()get_template_part()Shortcode with attributeSidebarsSecurity in WordPress - SanitizationinitCreate Template for Custom Post TypeFunction: add_action()Add ShortcodeHow Can I integrate Markdown editor with Advance Custom Field's repeater Add-on.Installation and Configurationwp_get_current_user()WP-CronSecure your installationOptions APIFunction : wp_trim_words()WP_Query() LoopUpdate WordPress ManuallyThemesWP-CLIDebuggingadd_menu_page()add_submenu_page()get_option()get_permalink()get_the_category()the_title()get_the_title()add_editor_style()add_theme_support()WordPress Plugin creationRun WordPress local with XAMPPAdmin Dashboard WidgetsSite MigrationMeta BoxRemove Auto Line Breaks From Content and Excerptget_home_path()Wordpress theme and child-theme developmentREST API

add_menu_page()

Other topics

Remarks:

Here is a list of the default positions (for $position)

  • 2 – Dashboard
  • 4 – Separator
  • 5 – Posts
  • 10 – Media
  • 15 – Links
  • 20 – Pages
  • 25 – Comments
  • 59 – Separator
  • 60 – Appearance
  • 65 – Plugins
  • 70 – Users
  • 75 – Tools
  • 80 – Settings
  • 99 – Separator

Adding the "Theme page title" item to the nav bar

Code

function add_the_theme_page(){
    add_menu_page('Theme page title', 'Theme menu label', 'manage_options', 'theme-options', 'page_content', 'dashicons-book-alt');
}
add_action('admin_menu', 'add_the_theme_page');
function page_content(){
    echo '<div class="wrap"><h2>Testing</h2></div>';
}

Output

enter image description here

Explanation

In the code, we created a function named add_the_theme_page and we used add_menu_page to add the item to the navbar. Please check the parameters part in this page to know about the arguments we passed in. Then we used add_action to run our add_the_theme_page function. Finally, we created the function page_content to display contents in the page.

OOP & how to load scripts/styles on menu page

<?php
/*
 *  Plugin Name: Custom Admin Menu
 */

class SO_WP_Menu {

    private $plugin_url;
    
    public function __construct() {
        $this->plugin_url = plugins_url( '/', __FILE__ );
        add_action( 'plugins_loaded', array( $this, 'init' ) );
    }

    public function init() {
        add_action( 'admin_menu', array( $this, 'add_menu' ) );
    }

    public function add_menu() {
        $hook = add_menu_page(
            'My Menu',                 // Title, html meta tag
            '<span style="color:#e57300;">My Menu</span>', // Menu title, hardcoded style
            'edit_pages',              // capability
            'dummy-page-slug',         // URL
            array( $this, 'content' ), // output
            null,                      // icon, uses default
            1                          // position, showing on top of all others
        );
        add_action( "admin_print_scripts-$hook", array( $this, 'scripts' ) );
        add_action( "admin_print_styles-$hook", array( $this, 'styles' ) );
    }

    public function content() {
        ?>
            <div id="icon-post" class="icon32"></div>
            <h2>Dummy Page</h2>
            <p> Lorem ipsum</p>
        <?php
    }

    # Printing directly, could be wp_enqueue_script
    public function scripts() {
        ?><script>alert('My page');</script><?php
    }

    # Enqueing from a CSS file on plugin directory
    public function styles() {
        wp_enqueue_style( 'my-menu', $this->plugin_url . 'my-menu.css' );
    }
}

new SO_WP_Menu();

What's important to note in this example is that, when using add_menu_page(), it returns a hook that can be used to target our exact page and load Styles and Scripts there.
A common mistake is to enqueue without targeting and that spills scripts and styles all over /wp-admin.
Using OOP we can store common variables to be used among internal methods.

Syntax:

  • add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position)

Parameters:

ParameterDetails
$page_title(string) The text to be displayed in the title tags of the page when the menu is selected.
$menu_title(string) The text to be used for the menu.
$capability(string) The capability required for this menu to be displayed to the user.
$menu_slug(string) The slug name to refer to this menu by (should be unique for this menu).
$function(callable) (optional) The function to be called to output the content for this page.
$icon_url(string) (optional) The URL to the icon to be used for this menu.
$position(int) (optional) The position in the menu order this one should appear.

Contributors

Topic Id: 9189

Example Ids: 28536,30617

This site is not affiliated with any of the contributors.