How to remove the credit line from a theme

Most themes have a bit of text and a link at the bottom to the maker of the theme. Especially for their free versions, there is often not an option to hide these. However, when I develop a site, I don’t want someone else’s text on it — that should be my choice. So I generally want to hide the credit line.

First look whether there is an option to disable it. The theme developers may be a little dolorous about it if they provide it at all. If you feel bad, leave them a nice review or donate some money. That’s a fair trade.

You can remove the header by using CSS to change its style to “display: hidden”. That will usually work. Most themes nowadays — certainly any you would want to use — offer a way to add custom CSS rules. The only trick is to find out the “selector” of the thing you want to hide. You can do this by using the developer mode of the browser. Right-click on the text in question and select Inspect Element (or something similar, depending which browser you use).

screenshot of context menu showing Inspect Element link

This displays a “techie view” of the page alongside the page, and you can click on different parts of the HTML to see what corresponding parts of the page are highlighted.

screenshot of developer tools in browser

screenshot of adding a new ruleIn this example, selecting the section beginning ‘<div id=”developer”>’ highlights all the stuff we want to hide and nothing we don’t want to hide, so we’ll go with that. Having highlighted that section as shown above, find the styling portion of the inspector panel and click the plus sign button to Add new rule. There will be more than one “plus” control on the screen, so take care to find the one to add a rule.

completed rule reads: #developer { display: none }Doing this will show the selector of the highlighted entity, in this case “#developer”. Now press Enter and inside the curly braces, type the styling you want to apply, “display: none”. You should see the rule take effect immediately, and the credit line will no longer be visible.

Now copy that complete rule onto the clipboard, starting with the selector expression (#developer in this case) up to and including the final “}”. Close the browser developer tools. Get into the Customize screen of your website, and find the place where you can enter custom CSS rules. Paste this new rule there, make sure it’s working the way you want, then publish that change, and you are done!

Share...

Leave a Reply

Your email address will not be published. Required fields are marked *