Nearly every WordPress theme since the dawn of time has in part of it’s footer template something like “©2020 Blah Blah Blah” the “Powered By WordPress” assertion, and often a theme credit link.
Maybe no one pays it much attention, but it seems forced to me to have a copyright statement and then somewhere else have to put a Creative Commons statement.
With a self hosted site, it’s something I typically do away with by making a child theme, and overwriting the footer template. I have two child themes, Kid Hamilton and Kid Hitchcock where I even made it something to override in the customizer, which I also do on my Calling Card themes. There is the Remove Footer Credit plugin that makes it something you can do without theme mods of making child themes.
But if you are running a site on someone else’s Multisite or even WordPress.com, you cannot do any of this. Here I outline a duct tape-like approach to do it solely by adding some custom CSS in in the Customizer.
This example comes from the H5P Pressbooks Kitchen site I have set up, hosted at the openETC, and maybe while not the most elegant, is set here to let you know there is a lot you can do to hide, change things on themes with some CSS fiddling.
I’m using the stock Chaplin theme and changed my footer from:
to
Be an Inspector
All of this kind of work (and a lot of other things I do on a daily basis) comes from using the Inspect capability in my browser. I use Chrome mostly, but you can do this in Firefox, Safari, and probably most other ones. See Mozilla’s reference for finding/using this feature.
The first step is seeing how your theme has formatted the footer credits/copyright statement. So I highlight the text in the footer, and do a control-click (Mac, that would be a right click for others), and select Inspect.
“But you said there would be no code!”
Well, it lay look code-y, but it’s just Old Time HTM&L (And I like it). I do this almost daily in web work. I change/add CSS on the right to test things out. All changes are reflected in the view in the browser (and gone when I close this window). Sometimes I edit the HTML on the left; I can do stuff I did years ago in Mozilla X-Ray Goggles. Often I make things disappear by adding a display:none on the the right when I need a cleaner screenshot.
I love the Inspector.
In this case what I need to know is the class names for things I want to change, what I am working with is:
|
1 2 3 4 5 6 7 8 |
<div class="footer-credits"> <p class="footer-copyright">© 2020 <a href="https://kitchen.opened.ca/" rel="home">The H5P PB Kitchen</a> </p> <p class="theme-credits color-secondary"> Theme by <a href="https://www.andersnoren.se" class="customize-unpreviewable">Anders Norén</a> </p><!-- .theme-credits --> </div> |
You cannot remove content in CSS, like the ©2020 but you can do things to change them up.
My approach was to change the color of everything in the .footer-copyright class white (the background color), and then add the color back for the link within.
I test things out in the inspector, but putting it into play is done in WordPress but opening the Customizer, and selecting the panel for Additional CSS. You can do this on any multisite (on WordPress,com they upsell you to get this feature). On the panel, I add first:
|
1 2 3 4 |
/* color all copyright white */ p.footer-copyright { color: #fff; } |
and poof! It’s gone (well not really, you can select it and see it)
And restore the link color with:
|
1 2 3 4 |
/* just color on the link */ .footer-copyright a { color: #333 } |
yielding:
This is fine, but we can do more.
And here’s where the fun is. I said we could not remove text with CSS, but we can add to it. Behold the ::before selector, which allows you to add things before a given element.
|
1 2 3 4 |
/* insert text before link */ .footer-copyright a::before { content: "All content CC BY at "; } |
Now I can put a Creative Commons assertion here!
It’s a bit crude, the whole thing links to the home page of the site. You cannot put anything like a hypertext link in the content: directive, but you could put an image (see more from CSS tricks).
I can do one more thing I can hide the theme credit (sorry Anders, you know I am a major fan of your themes) with:
|
1 2 3 4 |
/* Hide credits, we love ya Anders */ p.theme-credits { display: none; } |
Just to make to make it simple.
Or, an alternative, to keep the theme credit, you might try something instead like:
|
1 2 3 4 |
/* Add to credits */ p.theme-credits::after { content: " mods by @cogdog" } |
I just tried that while writing the post, so I might leave it like this:
Again, this is really crude, but getting a small handle on this kind of CSS painting should give you a clue that there is much you can manage on a WordPress theme where you cannot make any modifications to it.
Get out your CSS paint brushes, you do not have to be forced to splat © on yer footers.
Featured Image: Pixabay image by Atner Yegorov with modifications Photoshopped in my Alan Levine using screenshots of the footer on the H5P Kitchen site and the Customizer showing the fancy CSS.
