Adding Additional Menu Tabs to My Account Page
If you’ve implemented the My Account page on your WordPress site and want to add additional menu tabs to display extra content or link to another page or resource, this article is for you.
Adding Menu Tabs that Link to a URL
See the code snippet below to add a menu tab that links to a URL.
add_filter('ppress_myaccount_tabs', function ($tabs) {
$tabs['custom_tab_id'] = [
'title' => esc_html__('Custom Tab Title', 'wp-user-avatar'),
'priority' => 20,
'icon' => 'settings',
'url' => 'https://yourwebsite.com/custom-tab-url'
];
return $tabs;
});
Replace the settings in the “icon” array element is the icon to display on the menu tab. To change the icon, replace it with another Material Icons name.
Use the priority array element determines how far above or below the menu should be displayed. A lesser number would cause the menu tab to be displayed closer to the top. Conversely, a higher number would cause it to show at the bottom.
Adding Menu Tabs that Displays Custom Content
If you want to add a menu tab to the My Account page, which, when clicked, displays custom content, see the code snippet below.
add_filter('ppress_myaccount_tabs', function ($tabs) {
$tabs['custom_tab_id'] = [
'title' => esc_html__('Custom Tab Title', 'wp-user-avatar'),
'endpoint' => 'custom_tab_id',
'priority' => 20,
'icon' => 'settings',
'callback' => function () {
echo 'Add your custom content in this callback function';
}
];
return $tabs;
});
How to Implement the Above Code Snippets
If you are new to PHP or WordPress development, we recommend adding these code snippets using the Code Snippets plugin. This allows you to add the code directly within your WordPress dashboard.
Alternatively, you could add the snippets directly to your theme or child theme’s functions.php file.
Please Note: Whenever you add a new custom tab, you need to navigate to Dashboard >> General >> Permalinks and simply click the Save Changes button. This will update your permalink structure and prevent any 404 errors you might have.
Showing a Tab Only to Some Users
Give a tab a visible callback to show it only when it applies. Return false to hide the tab from the current user. Its address keeps working, so links to it don’t break.
add_filter('ppress_myaccount_tabs', function ($tabs) {
$tabs['vip-lounge'] = [
'title' => 'VIP Lounge',
'priority' => 40,
'icon' => 'star',
'callback' => function () {
echo '<p>Welcome to the VIP lounge.</p>';
},
'visible' => function () {
return current_user_can('edit_posts');
},
];
return $tabs;
});
Tabs Added by Courses and Addons
These tabs appear automatically, each only for people it applies to:
| Tab | Comes from | Shown to |
|---|---|---|
| My Courses | Courses | Everyone, once the site has a published course; anyone enrolled in a course |
| Instructor Dashboard | Advanced Courses addon | Course instructors, once an instructor dashboard page is chosen |
| Teams | Team Memberships addon | Team owners, managers and members |
Hide any of them, or any tab added by an addon or with code, under ProfilePress » Settings » General » My Account » Disable My Account Tabs.