Building the footer content with Widget Areas

Hire a WordPress Expert on Codeable
Updated On: January 14th, 2025 0 Comments

Just like the Header and the sidebar, it is the responsibility of the active theme to help you build the website’s footer.

And here is the footer design we are going after:

This footer design is designed with some of the best practices we discussed.

But actually, I had a different footer design in mind:

This footer design was easily created using the free version of the “GeneratePress” theme.

But there is no way we could create a footer like this with the free version of the “Neve” theme because:

  1. It has spacing issues
  2. Buttons don’t occupy the entire width of the column
  3. Limits us with the components that go inside the footer design

The thing is…

Free themes are always limiting in some or the other way

For example, the free “GeneratePress” theme doesn’t give us flexibility regarding the Header and the blog layout design.

But it helps us build a really good footer design.

On the other end, the free “Neve” theme gives us so much flexibility in terms of the Header and the blog layout design.

But it is very limiting in terms of the footer design.

One thing I hate about the free version of the “Neve” theme is that it doesn’t let me dynamically output the year of the copyright statement.

For example, here is the copyright statement for the year “2023”.

All Rights Reserved © 2023

Most free themes will make the year “2023” dynamic so that it automatically changes yearly.

But the “Neve” theme will force you to buy a premium theme to unlock this feature.

I can’t blame them because they were generous enough to give away their theme for free. But I feel like it’s an irritative practice from their side.

They can keep their branding “Powered by Neve” but I feel it’s ridiculous to stop us from outputting a dynamic copyright statement.  

Anyway…we have two options now:

  1. Upgrade to the premium version of the Neve theme to unlock options that helps us build the original footer design.
  2. Adjust the footer design to match the limitations of the “Free” Neve theme.

I am going with the second option for this course.

I have designed the footer area to play along with the limitations of the free Neve theme.

Anyway…

If you notice, this footer has divided its content into four columns.

The first column has a logo with a tagline and a copyright statement.

The remaining three columns are filled menus.

So, I am asking you again. How do we build this footer content?

Did you get it?

Using the “Menus” screen and the Widget Areas?

Correct!

Most free themes will let us build the footer content with the widget areas.

The “Neve” theme is no exception.

It provides four widget areas to help us build our footer design.

The intent here is if we add content inside the “Footer One” widget area, it should appear on the first column of the site’s footer on the frontend.

Similarly, if we add content to the “Footer Two” widget area, it should appear inside the second column of the site’s footer.

You get the idea, right?

💡
This changes from theme to theme. Some themes might not provide widget areas for each column of the footer.

Anyway, this is better shown than explained.

First, let’s go to the “Widgets” screen:

Admin Dashboard -> Appearance -> Widgets

Next, click on the “Footer One” widget area to open it up:

0:00

/

Next, inside the “Footer One” widget area, we need to add:

  1. The website logo – 75px of width
  2. Tagline – If it applies to your site
  3. Copyright Statement – Change its color to greyish-white (#757575)

Now, you already know how to add these blocks, right?

So, go ahead and add them.

Here is how I added them:

0:00

/

That’s all.

Now, here is my expectation based on the title of the widget area.

The content I added to this “Footer One” widget area should now appear on the left-hand side of the site’s footer.

Let’s check it out:

And Bang!

It is not getting displayed on the frontend.

It was supposed to get displayed in between the black bar and the post pagination:

Because the widget area was named “Footer One”, I thought its content would get displayed inside the first column of the footer.

So, why is it not getting displayed?

Well, the “Neve” theme is the culprit here.

In the next lesson, we will see how to fix this problem.