Search for a plugin or theme

How to Edit WordPress Footer in Four Easy Steps

How to Edit WordPress Footer in Four Easy Steps

The Footer of a website is the last section that appears at the bottom of every WordPress page.

It is the closing section that usually contains useful links to other pages and some copyright text.

Because WordPress has thousands of themes and every theme has its own footer, it will be impossible for us to tackle each of them.

Yet, there are many similarities between the footers and common ways to change or edit them.

In this article, I am going to show you all the possible ways to edit your WordPress footer. The methods below can be used on most footers and are easily implemented.

I’ll provide you with general guidelines to try on your footer and by the end of this article, you’ll be able to apply them to your needs.

Edit the Theme Footer File

In this first way, we are going to dive deep and play with the theme footer.php file.

If you never dealt with or unfamiliar with core files, you may find it scary to jump right into it. Yet, have no fear, we will only use it for small tasks like removing copyright text.

In this example, we will work with the default Twenty-Twenty theme and remove the ‘Powered by WordPress’ text.

Powered by WordPress text in footer

To know which section of the footer to delete, we will need to know first what’s the section class or ID.

That way, we will be able to find it in the footer.php file and delete it from there.

Inspect the item class that you would like to edit

One way to find the item class is by using the inspect option of your browser. Right-click your mouse on the element that you would like to inspect (the copyright paragraph) and chose ‘inspect’.

Inspect element

The ‘inspect’ screen may look intimidating but we are only going to use it for a brief second to find the right class.

As you can see in the image below, the ‘Powered by WordPress’ is a paragraph with a class of ‘powered-by-wordpress’.

Find the element class

If you got lost and couldn’t find what you were looking for, you can also try a chrome extension called ‘CSS Peeper’ to expose the class of the element.

It is very easy and friendly to use. All you need to do is to install the extension and hover over your desired element to find its class.

Find it in the footer file

After we found the desired element that we would like to delete, it’s a good time to delete it from the footer.php file.

Navigate to Appearance -> Theme Editor and make sure you’re editing your desired theme from the list on the top right corner.

Edit the right theme

Please note: if you editing the parent theme, the changes will be overwritten on the next theme update. Please make sure to install and work with a child-theme.

Search and click on the footer.php file from the list of files on the right.

Look for the footer file

Now, all we have left to do is to target the item that we would like to change or delete.

Delete it

Let’s search for the element that contains the ‘powered-by-wordpress’ class and delete it.

Click on CTRL + F on Windows or Command + F on Mac and search for ‘powered-by-wordpress’. If we inspected it correctly and found the right element, it should find it there in the footer file.

Before editing the footer, copy all the footer content and paste it into a note editor for a backup. If we’re making any mistake, we can always recover and start again.

After we found the right element, we can delete or modify it based on our needs.

Edit the footer

Once finished, save and revisit your website. If we did it right, the copyright text should be gone.

Footer without the text

Hopefully, as I told you above, you didn’t find it complicated as you may think it could be.

If you managed to find the element class but couldn’t find it in the footer.php file, we will tackle it in a different way. It may be because it was generated by a function and not hardcoded into the footer itself.

Don’t lose hope, in that case, we can still hide or edit it using some CSS rules.

Edit the Footer With CSS

CSS rules are another great way to modify the whole or certain parts of the WordPress footer.

As I showed you earlier, when using this method, we still need to inspect and find the class of the item that we would like to manipulate. The good news is that you already know how to do it 🙂

To enter CSS into your website, click on the Customize option from your WordPress admin bar.

Customize the theme

On this screen, based on your active theme, you’ll have some options (some themes have many and some little) on the left side.

Doesn’t matter which theme you are using, all the themes have the ‘Additional CSS’ option.

Click on it and enter the code below:

.powered-by-wordpress {
display: none;
}

In the code above we executed a CSS rule to hide the item with powered-by-wordpress class.

Please note that the code above will work for the twenty-twenty theme. If you have a different theme, you’ll need to change the powered-by-wordpress class with the class of the item that you’ll like to hide.

Another example of using a CSS rule could be to change the footer background color.

Just like I showed you earlier, we will need to find the footer class or ID and then paint it in the color that we want.

Once again, let’s click ‘Inspect’ on our footer and look for the footer ID or class.

We can see that the footer contains both ID and class attributes and in that case, we always going to target the ID.

Inspect the footer ID

Back in the Additional CSS screen, we can use the code below to paint the footer with a purple color.

#site-footer {
background-color: purpule;
}

Again, the code above targeted the ID #site-footer of the default theme. If you are using a different theme, you’ll have to find the ID or the class of your themes’ footer.

Footer and Theme Customization

The theme customization screen provides us many options to customize our footer section.

Unlike the other two methods above, this way is more theme-dependent.

Some themes, such as Hello by Elementor giving you very minimal options in the customization screen. Other themes, such as oceanWP will provide you with many customization options to change the footer layout. Some of the options are the colors, text size, copyright text, and much more.

When the options are available, change the layout of the footer along with the copyright text from the footer tab. Style-related options like colors or text size can be found in the typography tab.

Footer customization options

The amount of the customization options does not reflect the quality of the theme. More doesn’t always mean better. Many themes will now let you build a custom footer using a page builder like Elementor.

In this example, we are going to use the oceanWP theme because it comes preloaded with many options to edit the footer in the customization screen.

If, for example, we would like to change our footer background color, navigate to the Footer Bottom option, and change it from there.

There, we will have many options to change the footer background color or text color to any color that we want.

Change the background color

After we are satisfied, we will click on Save and revisit our website.

Footer Widgets

Widgets are blocks of content that can be placed on various parts of your website. The most common parts are the header, sidebar, and footer.

Again, not all the themes will have the option to place widgets in them but the majority will. I tested many themes during my years as a developer and I only ran into two that didn’t have that option.

To see if the option exists for your theme, navigate to Appearance -> Widgets.

On the left side, you’ll have all the available widgets that you can use and on the right side, you’ll see all the locations where you can display the widgets.

Widgets list

As we can see in the image below, our default twenty-twenty theme has two columns to display widgets inside the footer.

We can now drag many widgets as we want into or out from the widget column and re-organize their order by dragging them up or down inside the column.

In this example, I display three widgets in the left column and three widgets in the right column.

Footer widgets

As you can see, the website now displays all the widgets in the right order as we set it up above.

Widgets in live website

More Ways to Edit the Footer

The methods above are the most common ways to design the footer and they should work with most themes.

Today, there is a high demand from users to be able to edit various parts of their theme without any single line of code.

The good news is that it’s possible. Visual drag-&-drop page builders such as Elementor or Divi will let you do that. I recommend you to go that route if you didn’t build your website yet.

Elementor will let you design a footer from scratch and display it instead of your default theme footer.

If you already have a live website and you don’t want to install a page builder just for one section, I hear ya.

There are many plugins in the WordPress plugin repository to help you change your websites’ footer without any single line of code.

We recommend you go through some of them and explore how they can help you to achieve the tasks that you want.

Feel free to install some of them on your website and do some experiments. If they helped you, good. If they didn’t, just delete them and try different ones.

Conclusion

This article taught you in detail how to edit the footer of your website. We tried to hit as many themes as we could and hopefully we managed to do so.

We understand that your theme may be different and the methods above may not help you. However, we still want to help.

If you need any help with your footer, write us a comment down below and we will try to help you in any way that we can.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply