{"id":2679,"date":"2024-08-21T18:14:57","date_gmt":"2024-08-21T16:14:57","guid":{"rendered":"https:\/\/wypo.io\/?p=2679"},"modified":"2024-08-21T18:21:50","modified_gmt":"2024-08-21T16:21:50","slug":"customize-wordpress-back-office-menu","status":"publish","type":"post","link":"https:\/\/wypo.io\/en\/customize-wordpress-back-office-menu\/","title":{"rendered":"Customize the WordPress back-office menu"},"content":{"rendered":"\n<p class=\" hf_animated fade_bottom default \">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&#8217;t need access to all WordPress settings, so it&#8217;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.<\/p>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-add-menu-items\">Add menu items<\/h2>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-using-the-admin_menu-hook\">Using the admin_menu hook<\/h3>\n\n\n\n<p class=\"\">The <code>admin_menu<\/code> 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.<\/p>\n\n\n\n<p class=\"\"><strong>Sample code for adding a new menu item<\/strong><\/p>\n\n\n\n<p class=\"\">To add a new item to the back-office menu, you&#8217;ll use the <code>add_menu_page()<\/code> function as part of the <code>admin_menu<\/code> hook. Here&#8217;s an example code:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1365339027\"\n        id=\"codemirror-1365339027\"\n      >function add_menu_item() {\n    add_menu_page(\n        &#039;Page Title&#039;,          \/\/ Page title\n        &#039;Menu Name&#039;,           \/\/ Menu name in the back-office\n        &#039;manage_options&#039;,      \/\/ Capability required to view this menu\n        &#039;page_slug&#039;,           \/\/ Unique slug to identify this page\n        &#039;display_page_content&#039;, \/\/ Callback function to display the page content\n        &#039;dashicons-admin-generic&#039;, \/\/ Menu icon (optional)\n        20                     \/\/ Menu position (optional)\n    );\n}\nadd_action(&#039;admin_menu&#039;, &#039;add_menu_item&#039;);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1365339027'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\"><strong>Explanation of parameters<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong>Page Title<\/strong>: The title that will appear in the <code>&lt;title&gt;<\/code> tag of the browser tab when this page is opened.<\/li>\n\n\n\n<li class=\"\"><strong>Menu Name<\/strong>: The text that will appear in the back-office menu.<\/li>\n\n\n\n<li class=\"\"><strong>Capability<\/strong>: The capability required to access this menu item. <code>manage_options<\/code> is typically used for administrators.<\/li>\n\n\n\n<li class=\"\"><strong>Slug<\/strong>: A unique identifier for this page, used in the URL (e.g., <code>admin.php?page=page_slug<\/code>).<\/li>\n\n\n\n<li class=\"\"><strong>Callback<\/strong>: The function that is executed to display the content of the associated page.<\/li>\n\n\n\n<li class=\"\"><strong>Icon<\/strong>: An icon for the menu; you can use one of WordPress&#8217;s built-in icons (like <code>dashicons-admin-generic<\/code>).<\/li>\n\n\n\n<li class=\"\"><strong>Position<\/strong>: The position of this item in the menu. Lower numbers will appear higher in the list.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-create-a-new-associated-page\">Create a new associated page<\/h3>\n\n\n\n<p class=\"\">Once you&#8217;ve added a new menu item, you need to create the administration page associated with it.<\/p>\n\n\n\n<p class=\"\"><strong>How to link a new menu item to a customized administration page<\/strong><\/p>\n\n\n\n<p class=\"\">The callback function you passed as an argument to <code>add_menu_page()<\/code> will be used to display the page content when the menu item is clicked. Here&#8217;s a simple example of code to create a customized administration page.<\/p>\n\n\n\n<p class=\"\"><strong>Example of code to display a simple page<\/strong><\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1891180328\"\n        id=\"codemirror-1891180328\"\n      >function display_page_content() {\n    ?&gt;\n    &lt;div class=&quot;wrap&quot;&gt;\n        &lt;h1&gt;&lt;?php echo esc_html( get_admin_page_title() ); ?&gt;&lt;\/h1&gt;\n        &lt;p&gt;Welcome to your custom admin page!&lt;\/p&gt;\n        &lt;form method=&quot;post&quot; action=&quot;options.php&quot;&gt;\n            &lt;?php\n                \/\/ WordPress settings form fields\n                settings_fields( &#039;options_group&#039; );\n                do_settings_sections( &#039;page_slug&#039; );\n                submit_button();\n            ?&gt;\n        &lt;\/form&gt;\n    &lt;\/div&gt;\n    &lt;?php\n}<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1891180328'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\"><strong>Code explanation<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong><code>get_admin_page_title()<\/code><\/strong>: This function retrieves the title of the page that you defined in <code>add_menu_page()<\/code>.<\/li>\n\n\n\n<li class=\"\"><strong><code>settings_fields()<\/code><\/strong>: This function is used to generate the hidden fields required for the WordPress options form.<\/li>\n\n\n\n<li class=\"\"><strong><code>do_settings_sections()<\/code><\/strong>: Used to display the settings sections and associated fields.<\/li>\n\n\n\n<li class=\"\"><strong><code>submit_button()<\/code><\/strong>: Generates a submit button.<\/li>\n<\/ul>\n\n\n\n<p class=\"\">This custom administration page is now linked to the menu item you&#8217;ve added. You can enrich this page with forms, options sections or any other content relevant to your project.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-modifying-existing-elements\">Modifying existing elements<\/h2>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-changing-the-title-of-a-menu-item\">Changing the title of a menu item<\/h3>\n\n\n\n<p class=\"\"><strong>Using the global <code>$menu<\/code> function<\/strong><\/p>\n\n\n\n<p class=\"\">To modify the title of an existing menu item in the WordPress back office, you can use the global variable <code>$menu<\/code>. This variable contains a multi-dimensional array representing all menu items.<\/p>\n\n\n\n<p class=\"\"><strong>Example of code to modify the title of an existing element<\/strong><\/p>\n\n\n\n<p class=\"\">Here&#8217;s how to change the title of the \u201cArticles\u201d menu (which normally has the title \u201cPosts\u201d in English):<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-156619993\"\n        id=\"codemirror-156619993\"\n      >function modify_menu_title() {\n    global $menu;\n    \n    foreach ( $menu as $key =&gt; $value ) {\n        if ( $value&#91;2&#93; == &#039;edit.php&#039; ) { \/\/ Check if the slug matches &#039;edit.php&#039; (the slug for &quot;Posts&quot;)\n            $menu&#91;$key&#93;&#91;0&#93; = &#039;New Posts&#039;; \/\/ Modify the title of this menu item\n        }\n    }\n}\nadd_action( &#039;admin_menu&#039;, &#039;modify_menu_title&#039; );<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-156619993'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\"><strong>Explanation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong><code>global $menu<\/code><\/strong>: Allows you to access the global <code>$menu<\/code> variable where all menu items are stored.<\/li>\n\n\n\n<li class=\"\"><strong><code>$value[2]<\/code><\/strong>: Corresponds to the slug of the menu item (in this case, <code>'edit.php'<\/code> for Posts).<\/li>\n\n\n\n<li class=\"\"><strong><code>$menu[$key][0]<\/code><\/strong>: Modifies the title displayed in the menu.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-rearrange-the-order-of-elements\">Rearrange the order of elements<\/h3>\n\n\n\n<p class=\"\">To rearrange the order of menu items, you can also use the global variable <code>$menu<\/code>. The order of items is determined by the key of the <code>$menu<\/code> array, where items with smaller keys appear first.<\/p>\n\n\n\n<p class=\"\"><strong>Practical example with a simple code<\/strong><\/p>\n\n\n\n<p class=\"\">For example, to move \u201cPages\u201d before \u201cArticles\u201d, you can use this code:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-163524612\"\n        id=\"codemirror-163524612\"\n      >function reorganize_menu() {\n    global $menu;\n\n    \/\/ Store the &quot;Pages&quot; menu item\n    $pages = $menu&#91;20&#93;; \/\/ 20 is the default index for &quot;Pages&quot;\n    \n    \/\/ Remove &quot;Pages&quot; from its current position\n    unset($menu&#91;20&#93;);\n\n    \/\/ Reinsert &quot;Pages&quot; before &quot;Posts&quot;\n    $menu&#91;5&#93; = $pages; \/\/ 5 is the default index for &quot;Posts&quot;\n}\nadd_action( &#039;admin_menu&#039;, &#039;reorganize_menu&#039; );<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-163524612'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\"><strong>Explanation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong><code>$menu[20]<\/code><\/strong>: Represents the &#8220;Pages&#8221; menu item.<\/li>\n\n\n\n<li class=\"\"><strong><code>unset($menu[20])<\/code><\/strong>: Removes &#8220;Pages&#8221; from its current position.<\/li>\n\n\n\n<li class=\"\"><strong><code>$menu[5] = $pages;<\/code><\/strong>: Re-inserts &#8220;Pages&#8221; before &#8220;Posts&#8221;.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-modify-an-items-icon\">Modify an item&#8217;s icon<\/h3>\n\n\n\n<p class=\"\">WordPress uses <strong>Dashicons<\/strong>, a library of icons, for menu items. You can change the icon of an existing item by accessing the global variable <code>$menu<\/code> and modifying the associated icon.<\/p>\n\n\n\n<p class=\"\"><strong>Example of icon modification<\/strong><\/p>\n\n\n\n<p class=\"\">Here&#8217;s how to change the \u201cPages\u201d icon to another Dashicon icon:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-2017619785\"\n        id=\"codemirror-2017619785\"\n      >function modify_menu_icon() {\n    global $menu;\n\n    foreach ( $menu as $key =&gt; $value ) {\n        if ( $value&#91;2&#93; == &#039;edit.php?post_type=page&#039; ) { \/\/ Slug for Pages\n            $menu&#91;$key&#93;&#91;6&#93; = &#039;dashicons-welcome-write-blog&#039;; \/\/ Change the icon\n        }\n    }\n}\nadd_action( &#039;admin_menu&#039;, &#039;modify_menu_icon&#039; );<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-2017619785'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\"><strong>Explanation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong><code>$value[2]<\/code><\/strong>: Checks if the slug matches &#8220;Pages&#8221;.<\/li>\n\n\n\n<li class=\"\"><strong><code>$menu[$key][6]<\/code><\/strong>: Modifies the icon of the menu item. The parameter <code>'dashicons-welcome-write-blog'<\/code> refers to an icon from the Dashicons library. You can replace this value with any available Dashicons icon name.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-delete-menu-items\">Delete menu items<\/h2>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-deleting-an-element-with-remove_menu_page\">Deleting an element with remove_menu_page<\/h3>\n\n\n\n<p class=\"\">The <code>remove_menu_page()<\/code> 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&#8217;s a simple and effective way to clean up the menu and leave only the essential items for your users.<\/p>\n\n\n\n<p class=\"\"><strong>Example of deleting a standard element such as \u201cComments\u201d or \u201cPlugins\u201d.<\/strong><\/p>\n\n\n\n<p class=\"\">Suppose you want to remove access to \u201cComments\u201d and \u201cPlugins\u201d from the back-office menu. Here&#8217;s how to do it:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1989176505\"\n        id=\"codemirror-1989176505\"\n      >function remove_menu_items() {\n    remove_menu_page(&#039;edit-comments.php&#039;); \/\/ Removes the &quot;Comments&quot; menu item\n    remove_menu_page(&#039;plugins.php&#039;);       \/\/ Removes the &quot;Plugins&quot; menu item\n}\nadd_action(&#039;admin_menu&#039;, &#039;remove_menu_items&#039;);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1989176505'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\"><strong>Explanation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong><code>remove_menu_page('edit-comments.php')<\/code><\/strong>: Removes the &#8220;Comments&#8221; menu.<\/li>\n\n\n\n<li class=\"\"><strong><code>remove_menu_page('plugins.php')<\/code><\/strong>: Removes the &#8220;Plugins&#8221; menu.<\/li>\n<\/ul>\n\n\n\n<p class=\"\">Each main menu item has a specific slug, and it&#8217;s this slug that you need to pass as an argument to <code>remove_menu_page()<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-deleting-a-submenu-with-remove_submenu_page\">Deleting a submenu with remove_submenu_page<\/h3>\n\n\n\n<p class=\"\"><strong>Practical example of sub-menu deletion<\/strong><\/p>\n\n\n\n<p class=\"\">If you only wish to remove a specific submenu rather than an entire main menu item, you can use the <code>remove_submenu_page()<\/code> function. This function takes two arguments: the slug of the parent menu and the slug of the submenu to be removed.<\/p>\n\n\n\n<p class=\"\">Let&#8217;s suppose you want to remove access to the \u201cTheme Editor\u201d submenu under the \u201cAppearance\u201d menu. Here&#8217;s how to do it:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1237979449\"\n        id=\"codemirror-1237979449\"\n      >function remove_submenu() {\n    remove_submenu_page(&#039;themes.php&#039;, &#039;theme-editor.php&#039;); \/\/ Removes the &quot;Theme Editor&quot; submenu\n}\nadd_action(&#039;admin_menu&#039;, &#039;remove_submenu&#039;);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1237979449'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\"><strong>Explanation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong><code>remove_submenu_page('themes.php', 'theme-editor.php')<\/code><\/strong>:\n        \n    \n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong><code>themes.php<\/code><\/strong>: The slug of the parent menu, here &#8220;Appearance&#8221;.<\/li>\n\n\n\n<li class=\"\"><strong><code>theme-editor.php<\/code><\/strong>: The slug of the submenu, here &#8220;Theme Editor&#8221;.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"\">This method is particularly useful for masking advanced or unnecessary functions for certain users, while maintaining access to other menu items.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-manage-access-permissions\">Manage access permissions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-understanding-the-roles-and-capabilities-of-wordpress\">Understanding the roles and capabilities of WordPress<\/h3>\n\n\n\n<p class=\"\"><strong>Brief overview of roles and capabilities<\/strong><\/p>\n\n\n\n<p class=\"\">WordPress uses a system of roles and capabilities to control what each user can do on the site. Here&#8217;s an overview of the main roles:<\/p>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong>Administrator<\/strong>: Has access to all WordPress features.<\/li>\n\n\n\n<li class=\"\"><strong>Editor<\/strong>: Manages and publishes other users&#8217; content.<\/li>\n\n\n\n<li class=\"\"><strong>Author<\/strong>: Manages and publishes your own content.<\/li>\n\n\n\n<li class=\"\"><strong>Contributor<\/strong>: Writes articles but cannot publish them.<\/li>\n\n\n\n<li class=\"\"><strong>Subscriber<\/strong>: Can only manage his\/her profile.<\/li>\n<\/ul>\n\n\n\n<p class=\"\"><strong>Capabilities<\/strong> are specific permissions that allow you to control specific actions. For example, <code>edit_posts<\/code> allows you to modify articles, while <code>manage_options<\/code> gives you access to site settings.<\/p>\n\n\n\n<p class=\"\"><strong>How to manage access to menu items according to user role<\/strong><\/p>\n\n\n\n<p class=\"\">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.<\/p>\n\n\n\n<p class=\"\">Example of code to restrict access to a menu item to certain roles :<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1166569874\"\n        id=\"codemirror-1166569874\"\n      >function add_custom_menu_item() {\n    add_menu_page(\n        &#039;Custom Page&#039;,               \/\/ Page title\n        &#039;Custom Menu&#039;,               \/\/ Menu name\n        &#039;manage_options&#039;,            \/\/ Capability required to access this menu\n        &#039;custom_slug&#039;,               \/\/ Unique slug for the page\n        &#039;display_custom_content&#039;,    \/\/ Callback function to display the content\n        &#039;dashicons-admin-site&#039;,      \/\/ Menu icon\n        25                           \/\/ Position in the menu\n    );\n}\nadd_action(&#039;admin_menu&#039;, &#039;add_custom_menu_item&#039;);<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1166569874'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\"><strong>Explanation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong><code>manage_options<\/code><\/strong>: This parameter specifies that only users with this capability (usually administrators) will be able to see this menu.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading   \" datalink=\"content-practical-example\">Practical example<\/h3>\n\n\n\n<p class=\"\"><strong>Restrict access to a specific menu for certain users<\/strong><\/p>\n\n\n\n<p class=\"\">Let&#8217;s imagine you want to create a specific menu accessible only to administrators, while other roles, such as editors or authors, won&#8217;t be able to access it. Here&#8217;s an example of practical code to manage this restriction:<\/p>\n\n\n    <div class=\"wp-block-habefast-code  \">\n      <header class=\"habefast-code-header\">\n        <div class=\"habefast-code-lang is-lang-php\">\n          PHP        <\/div>\n      <\/header>\n      <textarea\n        class=\"habefast-code-source\"\n        name=\"codemirror-1973030806\"\n        id=\"codemirror-1973030806\"\n      >function add_restricted_menu() {\n    if ( current_user_can(&#039;manage_options&#039;) ) { \/\/ Checks if the user has the &#039;manage_options&#039; capability\n        add_menu_page(\n            &#039;Advanced Settings&#039;,       \/\/ Page title\n            &#039;Advanced Settings&#039;,       \/\/ Menu name\n            &#039;manage_options&#039;,          \/\/ Capability required to access this menu\n            &#039;advanced_settings_slug&#039;,  \/\/ Unique slug for the page\n            &#039;display_settings_page&#039;,   \/\/ Callback function to display the content\n            &#039;dashicons-admin-tools&#039;,   \/\/ Menu icon\n            30                         \/\/ Position in the menu\n        );\n    }\n}\nadd_action(&#039;admin_menu&#039;, &#039;add_restricted_menu&#039;);\n\nfunction display_settings_page() {\n    ?&gt;\n    &lt;div class=&quot;wrap&quot;&gt;\n        &lt;h1&gt;Advanced Settings&lt;\/h1&gt;\n        &lt;p&gt;This page is reserved for administrators to configure the advanced settings of the site.&lt;\/p&gt;\n    &lt;\/div&gt;\n    &lt;?php\n}<\/textarea>\n      <script>\n        CodeMirror.fromTextArea( document.getElementById('codemirror-1973030806'), {\n          mode: {name:'php',startOpen:true},\n          readOnly: true,\n          lineNumbers: true,\n          firstLineNumber: 1,\n          matchBrackets: true,\n          indentUnit: 4,\n          tabSize: 4,\n          lineWrapping: true,\n        } );\n      <\/script>\n    <\/div>\n    \n\n\n<p class=\"\"><strong>Explanation:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong><code>current_user_can('manage_options')<\/code><\/strong>: This condition checks if the logged-in user has the <code>manage_options<\/code> capability, which is generally reserved for administrators. If the condition is true, the menu is added.<\/li>\n\n\n\n<li class=\"\"><strong>Function <code>display_settings_page<\/code><\/strong>: This function generates the content for the page reserved for administrators.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-style-smallbordertop   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:var(--wp--preset--spacing--50);padding-top:var(--wp--preset--spacing--50)\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-conclusion\">Conclusion<\/h2>\n\n\n\n<p class=\"\"><strong>Summary of key points<\/strong><\/p>\n\n\n\n<p class=\"\">In this article, we&#8217;ve explored several methods for customizing the WordPress back-office menu. Here&#8217;s a summary of the key points covered:<\/p>\n\n\n\n<ul class=\"wp-block-list   \">\n<li class=\"\"><strong>Adding New Menu Items<\/strong>: By using the <code>admin_menu<\/code> hook and the <code>add_menu_page()<\/code> function, you can easily add custom menu items to provide additional features to your users.<\/li>\n\n\n\n<li class=\"\"><strong>Modifying Existing Items<\/strong>: We have seen how to change titles, reorder items, and modify icons by manipulating the global <code>$menu<\/code> variable.<\/li>\n\n\n\n<li class=\"\"><strong>Removing Menu Items<\/strong>: With the <code>remove_menu_page()<\/code> and <code>remove_submenu_page()<\/code> functions, you can remove unnecessary or irrelevant items for certain users.<\/li>\n\n\n\n<li class=\"\"><strong>Managing Access Permissions<\/strong>: By leveraging WordPress roles and capabilities, you can restrict access to certain menu items based on the logged-in user&#8217;s role, providing a more secure and tailored interface.<\/li>\n<\/ul>\n\n\n\n<p class=\"\"><strong>Encouraging experimentation<\/strong><\/p>\n\n\n\n<p class=\"\">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.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;t need access to all WordPress settings, so it&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_habefastfse_class":"","hf_wpseo_meta_title":"Customize the WordPress back-office menu [separator] [sitetitle]","hf_wpseo_meta_description":"Learn how to add, modify and delete menu items in the WordPress back office. Discover how to manage access permissions for a tailored user experience.","hf_wpseo_meta_robots_index":"","hf_wpseo_meta_robots_follow":true,"hf_wpseo_meta_robots_advanced":"{}","hf_wpseo_meta_canonical_url":"","footnotes":""},"categories":[28],"tags":[],"class_list":["post-2679","post","type-post","status-publish","format-standard","hentry","category-developer"],"_links":{"self":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts\/2679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/comments?post=2679"}],"version-history":[{"count":6,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts\/2679\/revisions"}],"predecessor-version":[{"id":2685,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/posts\/2679\/revisions\/2685"}],"wp:attachment":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/media?parent=2679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/categories?post=2679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/tags?post=2679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}