The following is part of a question I received from a reader, Jim, last week.
I’ve noticed that a lot of designers today are hiding their “theme name” from their competitors. For example, this is a site that will show you which wordpress theme someone is using: http://whatwpthemeisthat.com/. I’ve seen a couple of others too.
All of the sites that I’ve seen are designated on a secure server: https instead of http (which I’ve read Google now prefers). It appears that they are changing the name of the theme, for example: Divi to EngageWP.
This may not be worth your time. Can I pay you to teach me this?
First, I did not charge Jim to write this post, although I greatly appreciated that he offered, and was willing to do so. Second, I do not use Divi on this site, I use Genesis (it’s amazing)! 😉
I replied to Jim’s email to confirm I understood what he was looking to do, and, essentially, he wants to remove the theme header that WordPress requires, so that it’s not visible to anyone with enough technical savvy (not much required here) to know where to look.
In this post, I’m going to show you how to prevent the WordPress theme header from being visible to users, and, in addition, to load a minified version of your theme’s stylesheet. These two go well together, as you’ll read.
The things you’ll need are:
- A minified version of your theme’s main stylesheet, style.css (i.e.
style.min.css
). This file can go anywhere in the theme’s folder, but keep it somewhere that makes sense, such as the root, or a “css” sub-folder. If you aren’t familiar with any development tools to automatically minify a stylesheet, you can use a browser tool to paste in your CSS, and receive back a minified version. Remember, a minified file is one that will contain no comments, spacing, indents, etc., and is basically unreadable. Loading a minified stylesheet is preferred over a non-minified version because its footprint is smaller, and it takes less time to load. - A
style.css
file (not minified) that is free of any actual styling. This file must include the normal theme header, as required by WordPress. If it does not, WordPress will not recognize your theme, and it will not activate (or it will be deactivated and replaced with a default theme). The header information is all this file should contain. - A backup of your theme. This is “optional” in the sense that we won’t be using it in this tutorial, but it’s good to have if anything goes wrong.
Since your theme now has a style.css
file with a valid theme header, but no actual CSS, it will properly activate, but nothing will be styled. To fix that, paste this snippet of code into your theme’s functions.php
file.
What this code is doing is telling WordPress to load the minified stylesheet, rather than the normal style.css
file. This is done via the stylesheet_uri
filter. However, this code does not relieve us of having to include a style.css
file in the theme, which is why it must be included – remember, this file is how WordPress recognizes a theme.
Since the minified stylesheet, the file now being loaded on the frontend of your website, does not contain any comments, it will not include any header information. Also, since WordPress now loads this file over the default style.css
file, no one will be able to see your theme’s header information. Not only is this method blocking users from seeing that information, it’s also allowing your website to load faster (even just a little bit) since the file size of your stylesheet is smaller.
Before I wrap this up, I want to point out that this method is not going to prevent everyone from knowing you use WordPress, nor will it entirely block ALL information that can indicate which theme you are running. For example, someone who knows how can look at the source of your site, and easily discover the directory name of your theme. While some plugins can get you close, I don’t believe it’s possible to completely, 100% hide the fact that you use WordPress.
Jessica @FitnessEquipmentsLab says
Hi Ren, is there a plugin that makes this process?
Chris says
Hello Ren just fyi you can inline the theme CSS then minify using these 2 plugins at same time:
https://wordpress.org/plugins/inline-styles-littlebizzy
https://wordpress.org/plugins/minify-html-littlebizzy
So you can keep normal style.css in that way. Gluck ~~
Henry says
Nice use of that filter!
Is it mandatory to remove the actual styles from style.css? If WordPress isn’t loading it on the front end I see no reason why we shouldn’t keep the styles for dev purposes.
Ren says
Hey, Henry. Yes, it’s perfectly fine to leave the styles there if you prefer to have them there.
John Crawford says
Hi Ren,
First, let me appreciate your work. Secondly, Thanks for this wonderful tutorial. I have been wondering how to hide theme name or the theme CSS and your tutorial is spot on. I have a quick question for you, does use of caching plugins like W3Total cache help hide the theme since it has a check box option for minify stylesheet?
Ren says
Hi, John. I’m not 100% sure, but I would imagine they also generate and load an alternate stylesheet where the comments (including theme header) have been removed.
Ami Shah says
Hi Ren,
Tried doing this; however I still see theme name when I right click and view source.
1) I created a minified version of parent theme’s main stylesheet, style.css and uploaded to root.
2) Not touched my child theme’s stylesheet.
3) I pasted the code snippet in function.php of child theme.
Am I going wrong anywhere?
Ren says
There must be something wrong somewhere, but I can’t say exactly what without seeing everything. Make sure your minified stylesheet is named something other than style.css, and that your path to the file is correct in the PHP snippet.
Sunil Williams says
The question that I have is this: why would anyone want to hide the name of theme that they are using?
I can’t think of why this would be useful.
Ren says
Some people don’t want the theme information to be as open. It boils down to mostly a matter of preference. I can see how some people who do client work using theme-builders, like Divi, may not want anyone knowing they use something like Divi to build the site. For example, every child theme indicates (in the style.css) the parent theme. In the case of themes like Divi, some people may want to hide that Divi, etc., are the parent themes.
This method makes determining a theme a little more difficult than simply pulling up the style.css using a browser’s developer tools. Also, it has use aside from just hiding the theme header – it allows for loading an alternate (i.e. minified) stylesheet. This post covered two use cases of the stylesheet_uri filter.
Damien Carbery says
As you said, style.css still has to be available, so someone could look for it after finding style.min.css – unless you can somehow block access in .htaccess.
Ren says
Since it’s not being used for anything other than for WordPress to parse and activate the theme, you could prevent access to the style.css file using something like:
This would return a 403 (forbidden) error when someone tries to directly access the style.css file.