How to hide top Admin Bar using a WordPress filter ?
Last Updated :
09 Jun, 2024
Whenever you log in to your WordPress site you notice a toolbar at the top of the page which is know as "Top Admin Bar". This toolbar is always present, whether you’re viewing the site from your dashboard or the front page of your website. This is frustrating for many people, and it’s much more so while you’re constructing the site.
Approximately 30% of WordPress users are developers or have some coding knowledge, making customization a common need. If you’re a developer, this toolbar may seriously mess up the appearance of your main page, especially if you have some CSS detail that the admin bar obscures. Even if you’re not a developer, the admin bar may be too distracting. In this article, we'll explore how to hide top admin bar using a WordPress filter. This handy trick can enhance your workflow, ensuring an undisturbed view of your website.
What is the top admin bar in WordPress?
The top admin bar in WordPress, also known as the admin toolbar, is a persistent navigation element displayed when users are logged into the WordPress dashboard. It offers quick access to various admin functions, making site management more convenient.
How To Hide Top Admin Bar Using a WordPress Filter?
If you find the top admin bar in WordPress distracting or disruptive to your site's appearance, you can easily hide the Top Admin Bar using a WordPress filter or by adding a code snippet to the theme's functions.php file or a custom plugin. This customization proves invaluable for developers and users alike, providing an unobstructed view of their website while working on design, content, or other aspects of site development.
Follow this step-by-step guide to remove the admin bar and create a cleaner look for your website.
1. Removing the toolbar directly from the dashboard
To conceal the admin toolbar, go to your site's WordPress Dashboard first. To remove the admin bar, go to Users and find your Profile. Simply uncheck the "Show toolbar when accessing the site" button.

2. Using Custom CSS
Using custom CSS to Hide Top Admin Bar comes in a close second in terms of complexity. All you need to do is copy and paste the CSS code below into Appearance >> Customize >> Additional CSS or your style.css file.
To deactivate the toolbar, use the CSS code:
#wpadminbar { display:none !important;}

3. Using a WordPress Plugin
Another simple option to Hide top Admin Bar is by using a plugin. You have a plenty of plugins at your disposal that can assist you with the same issue. The most often used plugin is the Hide Admin Bar Plugin.

Fortunately, there is nothing to configure here; simply download the plugin, activate it, and your toolbar will be gone. It doesn't get much simpler than that.
Finally, whether you believe the toolbar is interfering with your design or is simply distracting you, you may remove it entirely at any time. We hope this short article shows that removing the admin bar is not a difficult task.
Conclusion
Managing the visibility of the top admin bar in WordPress is a straightforward task, offering users various options to suit their preferences and needs. Whether through the user profile settings, custom CSS, or utilizing plugins, website administrators and developers have the flexibility to customize their WordPress experience.
By following the step-by-step guide outlined above, users can easily hide top Admin Bar using a WordPress filter , achieving a cleaner and more focused design for their websites.
Similar Reads
How to White Label WordPress admin area ? Customizing the WordPress admin area to fit your brand is a great way to provide a unique experience for your clients. White labeling the WordPress admin area means removing WordPress branding and replacing it with your own. This can make your website look more professional and personalized. WordPre
9 min read
How to hide admin login link to custom link of WordPress website ? WordPress security is crucial for website owners. One effective way to enhance security is by customizing the login URL for your WordPress admin panel. In this article, weâll explore how to hide the default login link and replace it with a custom one.In WordPress, the login URL is like this e.g. www
4 min read
How to Create a Scroll Back-to-Top Button in WordPress? The "Scroll Back-to-Top Button" in the website is a feature that looks like a button in the website, typically in the lower corner of the screen, which allows users to easily scroll back to the top of the page with a single click. A "Back to Top" button is a very easy little feature you often see on
3 min read
How to Hide Post and Page Titles in WordPress? Hiding posts and page titles in WordPress can be useful for creating cleaner, more professional-looking web pages. Whether you want to use a custom design or just prefer a minimalist look, this guide will show you how to hide titles without affecting your content. This process is straightforward and
3 min read
How to disable scrollbar without hiding using jQuery ? A vertical or horizontal bar that is located at the corners of the page helps us to scroll the pages or containers upwards, downwards or sideways. So, the process is to disable the scroll bar but the scroll bar should be visible. In this article, we will disable the scroll bar by using .on() functio
2 min read
Create a Responsive Admin Dashboard using HTML CSS and JavaScript An Admin Panel typically has several sections that enable the administrator to manage and control various activities on a website. The layout usually consists of a header and a sidebarnavigation bar, which allows the admin to easily navigate between the various sections of the panel. In the header,
9 min read