{"id":942,"date":"2019-08-16T15:00:37","date_gmt":"2019-08-16T13:00:37","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=942"},"modified":"2023-05-30T15:22:54","modified_gmt":"2023-05-30T13:22:54","slug":"wordpress-admin-bar","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-admin-bar\/","title":{"rendered":"How to Hide the WordPress Admin Bar"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]As soon as you login to your WordPress admin dashboard, one of the first things you\u2019ll notice is the WordPress admin bar, located at the very top of the screen. This toolbar is useful because it contains multiple handy quick-links you can use for various purposes, such as creating new posts, pages, items, or for accessing the documentation, etc. Just like you can customize your <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\">WordPress theme<\/a>, you can modify even the admin toolbar, depending on your preferences.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, some people find it totally distracting and would rather remove it altogether from the screen. Website developers and, in particular WordPress editors, have a strong dislike for it, as it can often change the overall look of the page they are currently creating or editing. On the other hand, subscribers and customers can\u2019t see the admin bar, which makes sense, as those two <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-user-roles\/\">user roles<\/a> can\u2019t make edits on a WordPress site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The shortcuts and options available in the admin bar vary depending on a users\u2019 role. For instance, this is what admin bar looks like for administrators:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/08\/WordPress-Admin-bar.jpg\" class=\"attachment-full size-full\" alt=\"WordPress Admin bar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/08\/WordPress-Admin-bar.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/08\/WordPress-Admin-bar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/08\/WordPress-Admin-bar-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In this tutorial, we will show you three ways to remove the admin bar from your dashboard:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#hide-via-the-dashboard\">How to Hide the WordPress Admin Bar via the Dashboard<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#hide-using-a-plugin\">How to Hide the WordPress Admin Bar Using a Plugin <\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#hide-with-the-code\">How to Hide the WordPress Admin Bar With the Code <\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"hide-via-the-dashboard\"><\/a>How to Hide the WordPress Admin Bar via the Dashboard<\/h2>\n<p>[\/vc_column_text][vc_column_text]This is the most straightforward way of hiding the WordPress admin bar. And you can do it in just 4 steps:[\/vc_column_text][vc_empty_space height=&#8221;29px&#8221;][vc_column_text]1. Users &gt; All Users[\/vc_column_text][vc_column_text]Once you login to your WordPress website, access the admin dashboard. From there, click on <em><strong>Users<\/strong><\/em> and then select the <em><strong>All Users<\/strong><\/em> option. It doesn\u2019t matter if you\u2019re using Gutenberg or the Classic editor. These options are the same for everyone.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar.jpg\" class=\"attachment-full size-full\" alt=\"WordPress Admin Bar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]2. Edit[\/vc_column_text][vc_column_text]Since you\u2019ve selected <em>All Users<\/em> from the menu, you can now see all the user profiles you created for your website. To start applying the changes for a specific profile, <strong>click on the <em>Edit<\/em> button<\/strong> underneath the username.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-2.jpg\" class=\"attachment-full size-full\" alt=\"Hide the WordPress Admin Bar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-2.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-2-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019d like to remove the admin bar only for yourself, simply go to <em><strong>Users &gt; Your Profile<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-3.jpg\" class=\"attachment-full size-full\" alt=\"Hide Admin Bar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-3.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-3-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-3-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]3. Show Toolbar when viewing site[\/vc_column_text][vc_column_text]Scroll down to <em><strong>Toolbar<\/strong><\/em> (you\u2019ll find it under <em>Keyboard Shortcuts<\/em>) and <strong>uncheck the <em>Show Toolbar when viewing site<\/em><\/strong> box.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-4.jpg\" class=\"attachment-full size-full\" alt=\"Admin Toolbar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-4.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-4-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-4-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]4. Update User \/ Profile[\/vc_column_text][vc_column_text]To save the changes, <strong>click the<em> Update Profile<\/em> or<em> Update User<\/em> button<\/strong> at the bottom of the page. In case you chose<em> Users &gt; All Users<\/em> from the menu, you\u2019ll see the <em>Update User<\/em> button. If you went straight to <em>Users &gt; Your Profile<\/em>, the <em>Update Profile<\/em> button will appear.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-5.jpg\" class=\"attachment-full size-full\" alt=\"Update WordPress User\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-5.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-5-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-5-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;90px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"hide-using-a-plugin\"><\/a>How to Hide the WordPress Admin Bar Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Another way to remove the WordPress admin bar is by<strong> installing a plugin<\/strong>. This is handy if you want to hide the admin bar for all users at once, without having to disable it separately for each user profile.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are multiple plugins you can use, but the most popular one is definitely the <a href=\"https:\/\/wordpress.org\/plugins\/hide-admin-bar\/\" target=\"_blank\" rel=\"noopener noreferrer\">Hide Admin Bar plugin<\/a>. It currently has more than 40,000 active installations and a 4.5\/5 star rating on wordpress.org. It\u2019s super easy to use, as there\u2019s literally nothing to set up. All you need to do is install the plugin, activate it, et voil\u00e0, the admin bar is now gone.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"378\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-6.jpg\" class=\"attachment-full size-full\" alt=\"Hide Admin Bar plugin\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-6.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-6-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/Hide-the-WordPress-Admin-Bar-6-620x330.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Alternatively, you can try a plugin called <a href=\"https:\/\/wordpress.org\/plugins\/hide-admin-bar-based-on-user-roles\/\" target=\"_blank\" rel=\"noopener\">Hide Admin Bar Based on User Roles<\/a>, a toll with the most self-explanatory name ever. It is ideal if you want a choice of who gets to see the admin bar and who doesn\u2019t. For instance, you can hide the admin bar for all users, or set the plugin to hide it for guests alone. Depending on the roles you have, you can hide the admin bar for authors, contributors, editors, admins, etc. The developers have recently added a new feature &#8211; the ability to show or hide admin based on user capabilities, too. The plugin is very simple to use. Once you install it, you will find a section with options that allow you to show or hide the admin bar to the user roles and capabilities of your choice. Once you set those, click on Save Changes and that\u2019s it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/08\/Hide-Admin-Bar-Based-on-User-Roles.jpg\" class=\"attachment-full size-full\" alt=\"Hide Admin Bar Based on User Roles\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/08\/Hide-Admin-Bar-Based-on-User-Roles.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/08\/Hide-Admin-Bar-Based-on-User-Roles-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/08\/Hide-Admin-Bar-Based-on-User-Roles-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/08\/Hide-Admin-Bar-Based-on-User-Roles-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"hide-with-the-code\"><\/a>How to Hide the WordPress Admin Bar with Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]The WordPress admin bar can be easily removed using code as well. The best thing about it is that you don\u2019t need to be an experienced developer to do it. There are two code snippets you can use, depending on what you\u2019d like to achieve.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you\u2019d like to remove the admin bar for all users, <strong>this is the code you should use and add to your functions.php file<\/strong>:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">add_filter('show_admin_bar', '__return_false');<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;20px&#8221;][vc_column_text]On the other hand, if you\u2019d like to <strong>disable the WordPress admin for everyone except users with administrative privileges, go with this code instead<\/strong>:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\">add_action('after_setup_theme', 'remove_admin_bar');\r\nfunction remove_admin_bar() {\r\nif (!current_user_can('administrator') &amp;&amp; !is_admin()) {\r\nshow_admin_bar(false);\r\n}\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;59px&#8221;][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]And that\u2019s all, folks! The WordPress admin bar won\u2019t bother you any longer. In case you want to remove it, we showed you how to do it in three simple ways, without breaking a sweat. Now that you\u2019ve eliminated all distractions, you can enjoy creating some stellar WordPress pages.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>As soon as you login to your WordPress admin dashboard, one of the first things you\u2019ll notice is the WordPress admin bar, located at the very top of the screen. This toolbar is useful because it contains multiple handy quick-links you can use for various purposes, such as creating new posts, pages, items, or for accessing the documentation, etc.<\/p>\n","protected":false},"author":4,"featured_media":1197,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,15,13],"class_list":["post-942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-plugins","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=942"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/942\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/1197"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}