Remove WordPress Admin Bar from Page Cache
- By Steven North
- In Technology, WordPress
I've been working with WordPress since I heard about this concept called 'Moveable Type' many years ago, then I went from building my own website to being employed to work for others. Today, working on wordpress websites is what I'm doing on an almost daily basis. One of the things that I dived into was speed & security but one thing I noticed when working on my own website was how the Admin Bar in wordpress would show up on cached page views, something wasn't correct. I thought it was an issue with Cloudflare or caching rules but it turns out to be something much simpler.
All WordPress websites have the wp-admin toolbar.
To improve my own website performance, I used an incredible caching plugin called Swift Performance Pro, as can be seen in the image above. I also use the free version of WP Fastest Cache if I get stuck. So, when the cache view is being generated, I visit the website, the WP-Admin toolbar shows up, with the admin user logged in. Well, to me, this isn't a good thing at all but even with specific rules in Cloudflare to not cache /wp-admin/ folder, it would still show up, thanks to the WordPress community, I figured out what was happening.
Exclude the Admin Bar
Now there are a few ways to exclude the admin bar from being cached and if you are caching a website, chances are, you're merging CSS & JS files but we want to exclude a specific file from being merged within the CSS files and this file is called admin-bar.min.css and can be located in /wp-includes/css/ folder.
To achieve this, what we want to do is to exclude a specific file from being cached and/or being merged. So how did I do it?
In the WP Fastest Cache settings, you can choose to exclude specific CSS files from being included in the cache, all you need to do is navigate to the 'exclude' tab in the plugin settings and add 'admin-bar.min.css' in the exclude section, as can be seen in the screenshot below. This turned out to be the fix that I needed.
In Swift Performance, you need to navigate to Settings > Optimization > Styles and in the 'Exclude Styles' settings, add the admin-bar.min.css to this section. This should be visible in the Simple & Advanced View. You can see a quick view in the image below.
WP Fastest Cache
Swift Performance
Both methods have been working for me nicely and I'm very grateful that they are working, more so since I run all sites that I manage with Cloudflare's CDN and have had troubles in the past trying to figure out why the wp-admin bar kept showing up.
It was because I found an article by Russel Random on Stackpath, which is another CDN service that answered the question as to why the WordPress Admin Bar was showing up in cached sites using their CDN, how to purge it from their cache systems and other methods on how to prevent the admin bar from being cached...
Finally, if you do want to get your hands on a copy of Swift Performance, it is one incredible plugin for WordPress and the developers are not only supportive but beyond helpful. You can CLICK HERE to view the software. It has been one of the greatest pieces of software I've purchased.
If you're in need of assistance with WordPress or your website, connect with Steven North at Star Point 9 or CLICK HERE.
