Pop Up Image

Get the Full PDF guide to creating an online store with WooCommerce (88 pages) for FREE

A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

remove proudly powered by wordpress

How to Remove “Proudly Powered by WordPress”

There are many great reasons why you’d want the fruit of your creative labor to be available online, free of charge. You might be expressing creativity as part of a hobby, and just want the people to see what you’re capable of creating.

You can use it to draw attention to your body of work. This often happens on photo stock websites, where it’s okay to download and share other people’s content as long as they’re given proper credit. That’s why a couple of CC licenses include attribution.

Giving away things for free is also a good marketing trick. You can draw in a crowd with free stuff, and then dazzle them into buying the premium version. WordPress themes and plugins sometimes follow this model — they offer some basic functionalities in the free version, and put access to the full version behind a paywall.

The Issue with Using Free Stuff

The problem is that, even in the free version, a little part of the original author remains. In free WordPress themes, it’s usually their mark. At the very least, it’s a “proudly powered by WordPress” copy, something you’d rightfully want to not appear on your website.

In the past, WordPress theme authors didn’t pay much attention to making this part of the website difficult to remove. That has changed, however, and authors are much more clever when it comes to hiding these words in hard-to-find classes.

So if you really want to remove that copy from your website, you shouldn’t aim at the words themselves. You should aim at the class under which they’re being added. When you block the class, you’ll also block the copy. Let’s see how you can do it.

Finding a Class or an ID

If you never came into contact with code, you can be forgiven for thinking that finding a class is difficult. It’s incredibly easy – all you need is to understand how to inspect the web element you want to change. The line of code you want to find is the line that, when you click on it or hover over it, selects the whole row that contains the copy you want to remove. Let’s use the Marvel free theme as an example:

Finding a class or an ID to remove element

In this theme, it’s incredibly easy to find the correct line of code. What you need here is the class, and you can clearly see it’s “copytext.” You can see it on the left in the editor, as well as on the right where all the characteristics of the code are listed.

By deleting the contents of this class, you’ll erase the copy. The black field that contains the copy in the live version will stay there, as you still haven’t blocked it. To do that, you’ll have to inspect elements again until you find the line of code that selects the whole field:

Deleting the element

Once again, you’ve found what you’re looking for when the line of code that highlights the whole field is identified. In this case, you’re not dealing with a class but an ID. These are the only two things you need to worry about when you’re trying to remove this annoying copy and the element that contains it. Here, the ID of the element you want to identify is copyright.

Blocking Its Display

Now that you’ve determined the class or ID of the copy or the element you want to block, all you need is a line of code to block its display. To find where you need to paste it, you should choose the Customize item in the Appearance option of the menu in a website’s admin area.

Customize Theme

Once there, you should find the Additional CSS option where you’ll be entering the code so that it’s applied to the whole website.

Add aditional CSS

The line of code you want to import is display:none !important;. That’s the line you import when you want to stop something from displaying. To make it all work, you first had to find the class and the ID of what you were trying to stop from displaying.

The contents of the code start with a mark of whatever it is you want to block. If it’s a class, you preface it with a period — in this case, it would be .copytext. If it’s an ID, you preface it with a hashtag – #copyright. You follow that with opened braces (or curly brackets), and the display:none !important line.

This is how the code would look in our case, depending on what you want to block:

.copytext { 
Display:none !important;
}

Or

#copyright {
Display:none !important;
}
remove proudly powered by wordpress

Changing the Contents

But what happens when you find the field useful, and you just want to change the copy within it? You can do that too with a couple of lines of code, but you first need to find the class or ID of the element that contains the copy, not the whole row. Here, it’s the class copytext.

The code you want to insert comes in two parts:

.copytext {
visibility: hidden;
}
.copytext:after {
visibility: visible;
position: absolute;
left: 50px;
content: "This text replaces the original.";
}

As opposed to display:none rule you used earlier, here you’re using another rule – visibility:hidden. These two might look the same to an untrained eye, but they are completely different. Use the former to delete the element and make it disappear from the page, changing its structure.

With the latter, however, you don’t remove an element. You just bestow upon it the value of hidden, preserving the space it occupies and the structure of the page.

So the first line of code makes space for our copy. The second line adds it. With it, you make the whole element visible again, and you give it different copy to display. It’s important to get the positioning right, and it varies from one theme to another. If you wouldn’t add it to the code, the new copy would appear floating behind the space where the original copy was. So use the position: absolute; left:50px; to give it instructions on the positioning, and adjust the value of pixels to fit the position as you’ve intended.

Let’s Sum It Up!

If you’re starting any kind of endeavor on a shoelace budget, you’ll depend a lot on the resources and assets you can get for free. Website themes are such an asset, and they’re great because you can get so much use from them. But if you want to really make them your own, you might want to remove the “Proudly powered by WordPress” and similar copy from it. But what’s a couple of lines of code to add when you get a whole theme for free, right?

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply