I run a web design agency that uses WordPress as a CMS intensively because it is one of the requirements for most of our clients. We spend a lot of time customizing the backend to enhance the user experience.
A common pain point I see is client confusion about a feature or how to contact our team after e hand off the website. They forget how certain features work, where to update the “Employee of the Month” section, or the best image size for the blog. This leads to unnecessary support emails, phone calls, and a feeling of frustration for the client.
In some cases, the client does not want a custom dashboard. as he/she is accustomed to the one provided by WordPress by default. Therefore, we cannot make changes there to make it easier to use. The solution is often hiding in plain sight: the Help tab at the top right of your WordPress dashboard. By default, this tab offers generic links to WordPress.org documentation. While useful for general queries, it does nothing to explain the unique, custom-built features of the site you delivered or information about the developer. This is the ideal location since it’s the “Help” section and is accessible from every internal page in the backend. In addition, plugins usually ignore it and the location makes it the perfect candidate to provide useful information for the user. Also, having the info there about support, improves the UX significantly because it makes sense to the user that needs “help” when creating a page, a post, or the functionality of the site.
From Generic to Genuinely Helpful
The idea is to replace the default WordPress help content with custom instructions, tutorials, and contact information tailored to the specific website. Think about adding emails, links to WordPress videos, your portal, and even news to keep the users informed. This simple change accomplishes several key goals:
- Empowers Users: Gives clients the confidence to manage their site independently.
- Reduces Support Overhead: Answers common questions before they are even asked.
- Improves Client Relationships: Shows you’ve considered their experience from start to finish.
- Creates a Professional Deliverable: A self-documenting website is a hallmark of a high-quality project.
Hooking into the Admin Area
We can achieve this by adding a small code snippet to your theme’s functions.php file or use a plugin like FluentSnippets to run the snippet without modifying the functions.php file.
A crucial word of caution: Always make a backup of your functions.php file before editing it. A single error can bring down your site. Better yet, use a child theme for all your customizations. This ensures your changes aren’t lost when the parent theme is updated. I prefer creating a plugin for changes that can be used across multiple WordPress installations rather than modifying the functions.php file. Sometimes we take on projects with customized WordPress changes or unique templates. In such cases, using a plugin is often a better solution. Just for testing purposes, use the functions.php but consider using a plugin instead. This way, you can even remove the functionality without modifying the files of your theme.
The Code Snippet
Open your child theme’s functions.php file and add the following PHP code:
/**
* Customize the WordPress Admin Help Tab
*
* This function removes the default help tabs and adds a custom one
* with project-specific information.
*/
function my_custom_admin_help_content() {
// Get the current screen object
$screen = get_current_screen();
// Optional: Remove all default help tabs
$screen->remove_help_tabs();
// Add a new, custom help tab
$screen->add_help_tab( array(
'id' => 'my-project-help-tab', // A unique ID for the tab
'title' => 'Website Guide', // The title of the tab
'content' => '
<h2>Welcome to Your Website Guide!</h2>
<p>Here you will find quick tips and instructions for managing your website content.</p>
<h3>Editing the Homepage Slideshow</h3>
<ul>
<li>Navigate to "Slideshow" in the left-hand menu.</li>
<li>To add a new slide, click "Add New".</li>
<li>Ensure your images are at least 1920px wide for best results.</li>
</ul>
<h3>Need More Help?</h3>
<p>If you have questions that aren\'t covered here, please email us at <a href="mailto:[email protected]">[email protected]</a>.</p>
',
));
}
// Add the function to the admin_head hook
add_action('admin_head', 'my_custom_admin_help_content');Breaking Down the Code & Customizing
Let’s look at what this code does, piece by piece, so you can tailor it perfectly.
- function my_custom_admin_help_content() { … }: This defines our function. You can rename my_custom_admin_help_content to anything you like, as long as it’s unique. Something like company_admin_help_content where company is the name of the company owning the website or your company.
- $screen = get_current_screen();: This is the key. It gets information about the specific admin page the user is currently viewing (e.g., the Dashboard, the Pages editor, etc.).
- $screen->remove_help_tabs();: This line is optional, but I highly recommend it. It removes the default “Documentation” and “Support” tabs to reduce clutter and keep the focus on your content.
- $screen->add_help_tab( array(…) );: This is where you add the new tab.
- ‘id’: This needs to be a unique identifier for your tab. Something like ‘my-site-help’ is perfect.
- ‘title’: This is the text that will appear on the tab itself. Keep it short and descriptive, like “Site Guide” or “Project Help.”
- ‘content’: This is the HTML that will be displayed when the user clicks the tab. You can put almost anything here: paragraphs, headings, lists, links, and even images. Remember to escape any single quotes within your content by putting a backslash before them (\’), as seen in the example.
Conclusion
Customizing the admin help tab enhances your website, turning it into a user-friendly product with just a small-time investment. You are anticipating your user’s needs and providing solutions right where they work. This is the essence of good UX design because it’s empathetic, practical, and makes dashboard feel less intimidating.