Footer Fail? Level Up Your Footer With Our Expert Guide

Want to edit the footer on your WordPress website?

You know, the part of your website that usually has a ‘Powered by WordPress’?

It might also have a copyright statement, your social media links, contact information, an additional set of links such as privacy policy, disclaimers, and maybe even a Google map.

Your website visitors may feel the default statement is a little out of place and sometimes, a little unprofessional too.

So, it makes sense to edit the WordPress website footer and choose to display information related to your brand.

If you want to know how to edit a footer in WordPress, you’ll want to check this article out as we’ve got it all covered step-by-step!

What Is a WordPress Footer?

As the name suggests, the website footer is at the bottom, or foot, of a website.

For instance, at the bottom of this page (and for that matter, across our WP Astra site) you’ll notice the following:

In addition to the copyright statement and social media icons, you’ll notice a set of additional links. These can be added using footer widgets.

If planned carefully, the website footer can increase your user experience significantly by including a collection of links letting users access them from just about any page.

Examples of Website Footers to Inspire You

Here are some examples from our very own website templates.

While you could let your imagination run wild and get creative with your website footer design, these examples should serve as inspiration to get you started.

Online Health Coach

A simple straightforward website footer that includes a ‘Subscribe to Newsletter’ CTA, social media icons, copyright statement, and the ‘powered by’ line.

Business Consultancy Firm

In this example, the footer includes the address, in addition to the elements mentioned earlier.

Digital Marketing Agency

Want to promote your business? Want to remind your user of the services that you offer? Well, include them all in the website footer!

As shown in this example, the user is reminded of your business services as they scroll to the bottom of your website. This also works if you have an eCommerce store as you have another opportunity to showcase products.

Furniture Store

Like we mentioned in the earlier example, this footer includes links to individual product categories. This helps especially when you are limited for space on your top menu navigation.

Tech Blogger

On a final note, this example includes all the elements we just covered, i.e., the social media links, newsletter CTA, individual links, address, copyright, and a powered-by line.

How to Access and Edit the Website Footer in WordPress

Once you’ve set up a WordPress website, you’ll notice your website footer with a copyright statement and a ‘Powered by WordPress’ statement, similar to the image below.

The domain name mentioned in the copyright statement, i.e., ‘Copyright © 2020 Domain Name’, would typically be replaced by your own domain.

Whether you’re an organization wanting to display your brand name in the footer or a freelancer who’d like to include your contact information, editing the footer in WordPress gives you that additional customization you want.

Removing the ‘Powered by WordPress’ Text From WordPress Footer

Fortunately, editing the website footer in WordPress is pretty straightforward.

But, first things first.

How do you access the footer? Is it a file, and if so, where is it located?

Typically, there are two methods of editing your footer.

• Through a WYSIWYG editor (e.g., the built-in WordPress customizer, page builders such as Elementor, installing WordPress Plugins, and so on)

Or

• By accessing the ‘footer.php’ file

If we share the same sentiments, then editing the footer through the WYSIWYG (What You See Is What You Get) editor is much simpler than opening the PHP file with never-ending lines of code!

While the process of editing the footer is the same, what you should look out for is the location of the footer.

This may vary across different themes.

In 9 out of 10 themes, you can access the footer by going into the ‘Customize’ section, under ‘Appearance’ (Appearance > Customize), as shown below.

An alternate method, if you are using the Astra theme, is to head over to Appearance > Header Footer & Blocks.

So now you know how to find the footer, let’s jump to our first method.

Method 1: Edit Website Footer Using WordPress Customizer

Head over to ‘Appearance > Customize > Footer > Footer Bar’.

​​We are assuming you’re using the Astra theme, just as we have in this article.

If you are using any other theme, then the settings may look a little different. But you can still edit the footer via the WordPress customizer.

As shown in the above image, you can edit the Astra copyright link from the footer bar.

With the Astra footer bar setting, you can also add a widget and menu.

With the widget option, you can unlock limitless possibilities, such as adding social media icons, show recent posts, categories, and a whole lot more.

You’ll also notice built-in tags within the custom text areas, such as:

[current_year] and [site_title]

You should leave this as it is unless you’d like to come back every year and update the current year and site title!

Want to add some custom HTML here?

For instance, you might want to add the text ‘Hosted on BlueHost’ and hyperlink it in our example above.

The link could also be your affiliate link, just in case you’d like to earn a referral fee for recommending a hosting service.

How is that done?

Well, you will have to add some HTML tags.

To insert a link, you will need to include an ‘Anchor’ (<a>) tag. So, if you wanted to link only ‘Hosted on BlueHost,’ your line of code would be as follows,

Without link:

Website Hosted on BlueHost

With affiliate link (anchor tag):

Website <a href=”https://clone.wpastra.com/go/bluehost”>Hosted on BlueHost</a>

With affiliate link (anchor tag) opening in a new window:

Website <a href=”https://clone.wpastra.com/go/bluehost” target=”_blank”>Hosted on BlueHost</a>

Don’t forget to hit the ‘Publish’ button on the top once you’re done to save your changes.

Voila! Your footer has just been updated across your website.

Method 2: Using the Astra ​​Header Footer Builder

This method is exclusive to those using the Astra theme.

Astra has introduced a drag and drop Header and Footer Builder. This gives you the freedom to customize your website navigation and footer without writing a single line of code. Just drag and drop!

You have complete control over the positioning and styling of footer elements using a live editor.

Assuming you have Astra installed, head over to Appearance > Customize > Footer Builder.

Using the Visual Builder (as shown in the image), you can add and manage the various footer elements.

When it comes to customizing the elements you’ve just added, you can do so from the General and Design tab.

The new Visual Footer Builder is an advanced footer builder that allows you to make changes that reflect across your website instantly.

Simply drag and drop the required widgets into different sections, and you’re done.

Method 3: Edit the Footer in WordPress Using the Header Footer & Blocks Plugin

In our second method, we will assume you have Astra and the Elementor page builder installed. It just makes creating and editing web pages a lot easier.

To begin with, let’s install a plugin.

Head over to ‘Plugins > Add New’ and search for the ‘Elementor Header Footer & Blocks’ plugin.

Install and activate this plugin.

Once this plugin is activated, head over to ‘Appearance > Header Footer & Blocks.’ You will find the ‘Footer’ template.

Click on ‘Edit with Elementor’ under the ‘Footer’ template.

You’ll now be directed to the ‘Edit Copyright’ section within your Elementor page builder.

As you make the changes to the text, you can visually preview how it will appear on the website footer.

Once you’re done making the necessary changes and edits, click on ‘Update’ (at the bottom of the page). Your changes will now be live across your website.

Didn’t we say editing your website footer in WordPress is easy! Similarly, you can edit the WordPress header with Elementor.

Method 4: By Editing the footer.php File

While the above three methods were pretty straightforward, this method will involve a bit of coding. While this method isn’t too technical, you must cover all the steps mentioned here.

To begin with, you will need to install a child theme. Why?

Let’s say you made changes to the core PHP files and the next time you have a theme update notification, you go ahead and update your theme.

Which, of course, is the right thing to do. Always have your themes and plugins updated!

You will notice that once your theme is updated, all the changes you made in the PHP files will be gone. Overwritten by fresh new versions as part of the update.

To avoid this from happening, we recommend create a child theme.

This brings us to the all-important question.

How Do We Create a Child Theme?

Head over to ‘Astra Child Theme Generator.’

Enter a name for the Child Theme you would like to create. It can be any name of your choice.

For the sake of this article, we’ll create a child theme and call it ‘mychildtheme.’

You could now click on the ‘Generate’ button to download your child theme but we recommend you click on the ‘Advanced Options’ instead.

Under Advanced Options, you can customize fields such as Author, Author URL, Folder Name, and select a Screenshot (which appears as the cover design for the theme).

For instance, under ‘Author’, ‘Author URL’, and ‘Folder Name’, we’ve entered ‘My Child Theme’ (a name of your choice), ‘https://mychildthemedomain.com’ (this has to be the domain name, under which you are installing the child theme) and ‘mychildtheme’ (name of the folder under which the child theme will be installed on the live server), respectively.

Select a screenshot, preferably a 1200×900 image, in line with the Astra theme. This is, again, purely your choice.

Once all the above steps are completed, click on ‘Generate.’ Your child theme, in this case, ‘mychildtheme.zip’ will be downloaded.

Now, head over to ‘Appearance > Themes > Add New > Upload Theme.’

Upload the child theme, and then install and activate it.

Great, your child theme has now been activated.

Now, head over to ‘Appearance > Theme Editor.’

You may be prompted, at times, to avoid using the theme editor. As long as you’re careful and do not end up editing (or even deleting) the files, it is perfectly fine.

By default, you’ll notice the child theme you just installed is selected under the Theme Editor.

The default files under the child theme will be ‘style.css’ and ‘functions.php.’

So, if you would like to edit the ‘footer.php,’ you will have to copy the file from the parent theme into your child theme.

One such method is to create a new empty file called footer.php on your system and upload it to the child theme folder.

You can also copy and upload the footer.php of the parent theme (if you can’t create a footer.php file).

Just make sure you remove the code from inside it and only add the code you want to modify. This will override the parent theme’s footer.php

Once you are in the theme editor (back on the WordPress dashboard), look for the ‘footer.php’ file under ‘Theme files.’ This is amongst the files on the right hand of your dashboard.

Look out for the ‘Powered by WordPress’ text amongst the code (as highlighted below)

Replace the text with your branding, and once completed, click on ‘Update File.’

Now, that wasn’t too difficult was it?

Customizing the WordPress Footer

We mentioned earlier in this article how to edit the footer using the WordPress customizer.

Using the customizer, you can modify colors, add a background image and play around with the typography of your WordPress footer.

Once you’ve activated the Colors & Background module available with Astra Pro, you get an additional option to add a background image to your footer bar.

Once activated, head over to Appearance > Customize > Footer > Footer Bar.

Under the Background Color option, you’ll notice a tab to add an image. Go ahead and incorporate a background image that blends with your website footer.

The same goes for the typography as well.

Once the typography module is activated from the Astra Pro settings, you can find some dedicated typography options under Appearance > Customize > Footer > Footer Bar.

Want more styling options? Check out the Footer Widgets module that comes with Astra Pro Addon.

What You Should Not Be Doing

In addition to the methods mentioned above, there is yet another method to edit the footer in WordPress. That is by editing the ‘.css’ file.

While we’ll explain how it is done, this is an option we recommend you do not use. The reason for this will be covered soon.

Head back again to ‘Appearance > Theme Editor’, and this time around, select the file ‘style.css’ from the list of files on the right, under ‘Theme Files.’

Search (CTRL + F) for ‘.site’.

You will notice a block of code, all starting with ‘.site’. Like the one highlighted in the image above.

Include the following line of code.

.site-info {display: none;}

You could insert this line after the closing parentheses (}) and before the ‘.site-’.

E.g., in the image shown above, the original code is as follows (from line #1875).

}
.site-title {

This can be replaced with

}
.site-info {display: none;}
.site-title {

Once you’re done, click on ‘Update File.’ And that’s it.

While this option isn’t too technical, we wouldn’t recommend this option purely from an SEO standpoint.

The above line of code, i.e., .site-info {display: none;}, is a means of hiding the site info. Which boils down to hiding content on your web page.

Hiding content doesn’t go well with Google and can have negative SEO outcomes such as poor keyword ranking and, in some cases, not ranking at all!

Check out this article on Everything You Need to Know About Hidden Text & SEO by Search Engine Journal if you would like to know more.

So while we share how to do it, this is one method we highly recommend you don’t use.

How to Add Code to Your WordPress Footer

Want to add some custom code to your WordPress footer? Maybe embed a video, some website stats counter, or maybe even some tracking code?

Agreed, most tracking codes are incorporated into the header of your website, but, why rule that option out?

While there are a number of ways to add code to your WordPress website footer, we’ll cover one using the Custom Layouts that Astra Pro comes with.

Add Code to Your Website Footer Using the Astra Custom Layout Module

You’ll need the Astra Pro version to use the Custom Layouts. Go ahead, install and activate Astra Pro.

Once activated, head over to Appearance > Astra Options and scroll down to the part where you see Custom Layouts.

Go ahead and activate Custom Layouts.

You’ll notice a new tab under Appearance > Astra Options, which is Custom Layouts.

Click on Custom Layouts and then on Add New.

You’ll be directed to a page as shown below.

Go ahead and include the custom code in the area that says ‘<!– Add your snippet here. –>’.

If you scroll down a little, you notice some custom layout setting options.

One option is to select where you’d like to include the custom code, i.e., either in the header, footer, 404 page, or as hooks.

In this case, let’s select Footer.

Moving on, you’ve got a few more settings, such as Stick, Display On, and User Roles.

Notice those headers and footers that stick to the top or bottom of the screen? The Stick option allows you to do just that.

You get to decide where to display the code snippet using the Display On option. You could also choose not to show the code on select pages as well by adding an exclusion rule.

Once you are done with all your settings, don’t forget to save and publish it.

Your footer changes will now be displayed across the website.

Want more options to edit the website footer and add custom code? Check out our detailed article on how to add code to the WordPress header and footer.

FAQs on Editing the Footer in WordPress

1. Does a Website Require a Footer?

A website doesn’t require a footer but it benefits from using one. Typically your footer houses the copyright statements, the social media icons, a set of menu links, the address, a map in some cases, and other page elements.

Can we have these included elsewhere? Most definitely, you can. It all boils down to how you would like to organize your website links. Most organizations use the prime real estate of their website to highlight the most important links, such as their products and services.

Ideally, you wouldn’t want to overcrowd the prime real estate with links such as Privacy policy, Disclaimers, and FTC disclosures. Thus, while these links are equally important, we could have a secondary set of links (secondary menu) added to the footer menu.

2. Is It Legal to Remove “Proudly Powered By WordPress”?

Yes, it is legal to remove “Proudly Powered by WordPress” footer credit links. To begin with, WordPress is free. WordPress is licensed under the GPL, i.e., General Public License, which provides four core freedoms.​​

As shown in the above image, sourced from WordPress themselves, the platform gives us the freedom to use, modify, and even redistribute WordPress. This is not limited to only the WordPress platform but also any of the WordPress themes and plugins. Of course, the themes and plugins have to be from the official WordPress.org directory.

So, don’t fret. You can go ahead and edit the footer in WordPress.

3. Can I Add Images to the Footer?

Yes, you can add images to the footer, and here’s how. To begin, go to ‘Appearance > Customise > Footer > Footer Widgets’ (We’ve made it easier with the series of images below).

Under Footer Widgets, select the alternate layout option. Select the layout option that displays four boxes.

Now that you’ve selected the 4 widget layout option for the footer, go ahead and set the widgets for each block under Appearance > Customize > Widgets > Footer Widget Area 1/2/3/4.

Include the image within the respective footer widget area.

Alternatively if you have the latest version of WordPress installed, i.e., WordPress 5,8, head over to Appearance > Widgets.

Scroll down to the part where you notice the four footer widget areas. Click on the appropriate footer widget and add an image block.

Don’t forget to update your changes once you are done.

And that’s how simple it is to add an image to your WordPress footer!

4. How Do I Add Social Media Icons to the Footer?

It’s very easy to add social media icons to the footer. Instead of the ‘image widget,’ you add your social icons widget. Yes, you would require a social media plugin to make it happen but the rest is easy.

You could select from several options available in the WordPress plugin repository.

Once you have installed and activated the plugin, under the social icons, select ‘Add Widget’ into the Footer Widget of your choice, and your social media icons will appear in the footer.

5. How Do I Add a Contact Form in the Footer?

It’s very straightforward to add a contact form to the footer. As shown below, instead of adding the ‘Image Widget’ to your footer, add the ‘WPForms’ widget.

To get the WPForms widget, you first need to install the WPForms plugin and create a contact form.

Once you have added the WP Forms widget to your footer widget, e.g., Footer Widget Area 1, select the form you’d like to include in the footer.

E.g., select ‘Contact Form 1’ as shown in the image and click ‘Save’ when you are done.

Refresh your webpage, and you will notice the form in your footer.

6. How Do I Add a Google Map to the WordPress Footer?

You can add a Google Map to the WordPress footer with ease. Instead of using the image widget, there are two methods to add your Google Map to the footer.

The first method is by embedding the code. Consider a map you would like to include in your footer or website.

Copy the HTML code that appears under the ‘Embed a map.’

Then within the footer widget of your choice, add the ‘Custom HTML,’ block.

Once you have added the ‘Custom HTML’ block to the footer widget, paste the HTML code you’ve copied into the content area.

And then click ‘Save.’

The alternate option is to install a plugin, such as Maps Widget for Google Maps, and add the widget to your footer. And the rest of the procedure is the same as explained above.

Final Thoughts

While the footer is the last thing your visitors may notice, it’s a pretty important element of your WordPress website. It’s one more way of including important information and links that could serve as a reminder for your visitors as they scroll to the bottom of your website.

From including your social media links, listing your products or services, adding contact information, copyright statement, and a bunch of not so important yet useful links, your website footer can serve an important function.

Editing your website footer in WordPress is pretty straightforward. Whether it’s using a WYSIWYG editor or editing some PHP files, we’ve got it all covered here.

We’d like to hear from you now. How do you edit the website footer? Is there a method we missed out on? Do let us know.