Do you want to have easy access to your website’s documentation right from your WordPress admin dashboard? In this guide, we’ll show you how to add a “Documentation” menu item to your dashboard that opens a specific page from your website within the admin area. So, let’s jump in.
What You’ll Achieve?
By the end of this tutorial, you’ll have a new “Documentation” menu item in your WordPress admin dashboard.
- Clicking on it will display a specific page from your website (e.g., a page with the slug documentation) within the admin area.
- The documentation page will appear without the WordPress admin bar, providing a clean view.
I’ll give you also an alternative method, which replaces the default WordPress dashboard with your custom documentation page. Instead of adding a new menu item, your documentation becomes the first thing you see when you log into the admin area. (see the image below)
Video: How to Add a Documentation Page to Your WordPress Admin Dashboard?
How to Add a Documentation Page to Your WordPress Admin Dashboard?
I’ll walk you through two methods:
1. Using the Code Snippets Plugin (Recommended)
2. Editing the functions.php File
I’ll also explain why using the Code Snippets plugin is the preferred method, especially if you’re not comfortable with coding.
Method 1: Using the Code Snippets Plugin (recommended)
While you can add custom code to your theme’s functions.php file, it’s not the safest method:
- Risk of Errors: A small mistake can break your site.
- Theme Updates: Changes to functions.php can be lost when you update or change your theme.
- Ease of Management: The Code Snippets plugin provides an easy interface to manage all your custom code in one place.
Using the Code Snippets plugin is safer and more user-friendly, especially for those not familiar with coding.
Step 1: Install and Activate the Code Snippets Plugin
1. Go to Plugins > Add New in your WordPress admin dashboard.
2. Search for “Code Snippets”.
3. Install and activate the Code Snippets plugin.
Step 2: Add a New Snippet
1. Navigate to Snippets > Add New.
2. Enter a title, like “Add Documentation Menu”.
Step 3: Paste the Code
Copy and paste the following code into the code editor:
function register_documentation_menu_page(): void {
// Add a new top-level menu page
add_menu_page(
__('Documentation', 'textdomain'), // Page title
__('Documentation', 'textdomain'), // Menu title
'manage_options', // Capability
'documentation', // Menu slug
'render_documentation_page', // Function to display the page content
'dashicons-editor-help', // Icon
2 // Position in the menu
);
}
add_action('admin_menu', 'register_documentation_menu_page');
/**
* Render the documentation page content
*/
function render_documentation_page(): void {
// Verify user capabilities
if (!current_user_can('manage_options')) {
wp_die(esc_html__('You do not have sufficient permissions to access this page.', 'textdomain'));
}
// Get the documentation page by its slug
$page = get_page_by_path('documentation');
// Handle errors if the page is not found
if (!$page) {
printf(
'<div class="notice notice-error"><p>%s</p></div>',
esc_html__('Documentation page not found. Please create a page with the slug "documentation".', 'textdomain')
);
return;
}
// Get the page URL
$page_permalink = get_permalink($page->ID);
if (!$page_permalink) {
printf(
'<div class="notice notice-error"><p>%s</p></div>',
esc_html__('Unable to get the documentation page URL.', 'textdomain')
);
return;
}
// Render the iframe
?>
<div class="wrap documentation-wrapper">
<iframe
id="page-content"
src="<?php echo esc_url($page_permalink); ?>"
title="<?php esc_attr_e('Documentation Content', 'textdomain'); ?>"
></iframe>
</div>
<?php
}
// Enqueue styles and scripts only on the documentation page
add_action('admin_enqueue_scripts', function($hook) {
if ('toplevel_page_documentation' !== $hook) {
return;
}
// Add custom styles
$styles = "
.documentation-wrapper {
margin: 0;
padding: 0;
}
#page-content {
opacity: 0;
transition: opacity 0.3s ease-out;
position: fixed;
top: 0;
left: 160px; /* Adjust if needed */
width: calc(100% - 160px); /* Adjust if needed */
height: 100vh;
border: none;
z-index: 999;
}
#page-content.loaded {
opacity: 1;
}
@media screen and (max-width: 782px) {
#page-content {
left: 0;
width: 100%;
}
}";
wp_add_inline_style('admin-bar', $styles);
// Add custom script
$script = "
document.addEventListener('DOMContentLoaded', function() {
const iframe = document.querySelector('#page-content');
if (!iframe) return;
// Hide the admin bar inside the iframe after it loads
iframe.addEventListener('load', function() {
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
const adminBar = iframeDocument.querySelector('#wpadminbar');
if (adminBar) {
adminBar.style.display = 'none';
}
iframe.classList.add('loaded');
});
});";
wp_add_inline_script('jquery', $script);
});Step 4: Save and Activate the Snippet
1. Click the Save Changes and Activate button.
2. The snippet is now active on your site.
Step 5: Create the Documentation Page
1. Go to Pages > Add New.
2. Title the page “Documentation”.
3. Set the slug to documentation (this is crucial).
• In the permalink settings below the title, ensure it reads yourdomain.com/documentation.
4. Add your content to the page.
5. Publish the page.
How to Hide the WordPress Admin Top Bar for a Specific Page?
Here’s a code snippet that hides the WordPress admin bar for users only on pages with the slug “documentation.” If your page has a different slug, simply update it on line 3.
// Hide admin bar
function hide_admin_bar_on_documentation_page() {
if ( is_page( 'documentation' ) ) {
add_filter( 'show_admin_bar', '__return_false' );
}
}
add_action( 'template_redirect', 'hide_admin_bar_on_documentation_page' );Method 2: Editing the functions.php File
Warning: This method is riskier. A mistake can break your site. Always back up your site before proceeding.
Step 1: Access Your Theme’s functions.php File
1. Go to Appearance > Theme File Editor.
2. Find and click on functions.php in the list of theme files.
Step 2: Paste the Code
Scroll to the bottom of the file and paste the same code as in Method 1 (Step 3).
Step 3: Save the Changes
1. Click the Update File button.
2. If there’s an error, you’ll be notified. If not, the code is now active.
Step 4: Create the Documentation Page
Follow the same steps as in Method 1 (Step 5) to create the documentation page.
Customizing the Page Slug
If you want to use a different slug for your documentation page (e.g., user-guide instead of documentation):
1. Change the Slug in the Code
- In the code, find the line 25
$page = get_page_by_path('documentation');- Replace ‘documentation’ with your desired slug, like ‘user-guide’.
2. Ensure the Page Slug Matches
• When creating your page, set the slug to match (e.g., user-guide).
What the Code Does
- Adds a “Documentation” Menu Item: The add_menu_page function creates a new top-level menu item in your admin dashboard.
- Displays the Page in an iFrame: When clicked, it renders the specified page inside an iframe within the admin area.
- Hides the Admin Bar in the iFrame: The script hides the WordPress admin bar inside the iframe for a cleaner look.
- Responsive Design: The styles ensure that the iframe adjusts on different screen sizes.
How to Replace Your WordPress Admin Dashboard with Custom Content?
Do you want to have easy access to your website’s documentation right from your WordPress admin dashboard? In this part, I’ll show you how to add a “Documentation” page to your dashboard that displays a specific page from your website within the admin area.
This alternative method replaces the default WordPress dashboard with your custom documentation page. Instead of adding a new menu item, your documentation becomes the first thing you see when you log into the admin area.
Important Note: This method completely removes the default dashboard widgets and may affect the availability of other dashboard functionalities. Use this method only if you’re certain you don’t need the default dashboard features.
// Function to remove all default dashboard widgets
function remove_all_dashboard_widgets() {
global $wp_meta_boxes;
$wp_meta_boxes['dashboard']['normal']['core'] = array();
$wp_meta_boxes['dashboard']['side']['core'] = array();
$wp_meta_boxes['dashboard']['normal']['high'] = array();
$wp_meta_boxes['dashboard']['side']['high'] = array();
}
add_action('wp_dashboard_setup', 'remove_all_dashboard_widgets', 999);
// Function to output your custom content on the dashboard
function display_custom_dashboard_content() {
$page_slug = 'documentation'; // Replace with your page slug
$page = get_page_by_path($page_slug);
if ($page) {
$page_permalink = get_permalink($page->ID);
?>
<style>
#wpbody-content .wrap {
display: none;
}
#wpbody-content {
margin: 0;
padding: 0;
}
#page-content {
width: 100%;
min-height: 100vh;
height: calc(100vh - 32px); /* Adjust for admin bar */
border: 0;
}
</style>
<iframe id="page-content" src="<?php echo esc_url($page_permalink); ?>"></iframe>
<?php
} else {
echo '<div class="error"><p>Page not found.</p></div>';
}
}
// Hook the custom content function to the dashboard
function customize_dashboard() {
// Remove screen options and help tabs
add_filter('screen_options_show_screen', '__return_false');
add_filter('contextual_help', '__return_false');
add_filter( 'contextual_help', 'mycontext_remove_help', 999, 3 );
function mycontext_remove_help($old_help, $screen_id, $screen){
$screen->remove_help_tabs();
return $old_help;
}
// Output the custom content
add_action('in_admin_header', 'display_custom_dashboard_content', 100);
}
add_action('load-index.php', 'customize_dashboard');1. Change the Slug in the Code
- In the code, find the line 13
$page = get_page_by_path('documentation');- Replace ‘documentation’ with your desired slug, like ‘user-guide’.
Differences from the Previous Solution
- Replaces Dashboard vs. Adds Menu Item:
- This Method: Completely replaces the default WordPress dashboard with your documentation page.
- Previous Method: Adds a new menu item called “Documentation” without altering the default dashboard.
- Impact on Dashboard Functionality:
- This Method: Removes all default widgets and options, which might limit access to some admin features.
- Previous Method: Leaves the dashboard intact, providing additional functionality without removing existing features.
Use Case:
- This Method: Ideal if you want users to see the documentation immediately upon logging in and don’t need the default dashboard widgets.
- Previous Method: Better if you want to keep the default dashboard and provide optional access to documentation.
Conclusion
You’ve now added a custom “Documentation” page to your WordPress admin dashboard, making it easier to access important information without leaving the admin area.
