Back to Top

To create Four Column footer in WordPress theme

Nowadays, I am working on one WordPress application and I wanted to add a fourth footer sidebar. I have used default Twentyeleven theme and Twentyeleven theme is a widgetized theme and comes with three column footer sidebar and I want four column footer sidebar.so If you are looking for getting the 4 Column footer in Twentyeleven theme then this tutorial might help you.

How To create fourth footer sidebar?

Let’s see step by step, how I have added fourth footer sidebar in WordPress default Twentyeleven theme.

Step 1: Register the Sidebars in the WordPress Theme

First of all, I have added below line of code in the function twentyeleven_widgets_init() in the functions.php file of your theme.

This code will register the sidebar in your WordPress theme. Here, In this function, You just need to pass name, id, description and some other details of the sidebar which is necessary to create sidebar in WordPress.

Step 2: Add Active Sidebar Class

Next, Add below code in the function twentyeleven_footer_sidebar_class() in the theme’s functions.php file

This code will check is sidebar is active. If yes, increase the count of sidebar display. If you want to add the custom field in WordPress quick edit, read how to Add Custom Field in QuickEdit Option WordPress.

Also, add one more code for the case, see in below

This code is one kind of condition or case used for your fourth sidebar for adding class to your sidebar.so the final function would be like below

Now, Fourth footer area in the widget area in the admin panel but fourth footer sidebar is not displaying now.

Step 3: Insert the Sidebars In the WordPress Theme

Now let’s insert following line of code in the file and you will get the fourth sidebars in the footer.

Step 4: Add Styles to display Sidebar

Finally, let’s add a style into styles.css for the ‘footer-sidebar’ so with the new fourth column of footer sidebar looks proper.

That’s it. By using the code explained in the tutorial you can create four column footer sidebar.

Further Reading: To use multiple headers in WordPress

I hope you have enjoyed this tutorial. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Comments (5)

  1. Hi

    Could do with some help Please

    I also would like to add a forth column to my twentyeleven child theme

    The 1st section of code you entered above goes into my child functions.php file ok and I can see in wordpress widgets the new optional sidebar

    The problem starts with the next bot of code if I copy from yours above I get an error

    I am very new to this but if you could reply with exactly what I need to put in functions.php and footer.php

    Thank you

    Paul

    1. for second step,you need to find “twentyeleven_footer_sidebar_class()” function in your function.php file and replace your function with given one.

  2. thank you, i found it, i place it in the sidebar-footer.php

  3. waseem chand says:

    wow!!! nice work.Thanks a lot :).It 100% works.

  4. pieter goosen says:

    Hi there

    How do I make these 4 footer widgets responsive, need these 4 one beneath the other for mobile screens

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular Posts

Create Custom Page Tabs for Facebook Page

Posted on 6 years ago

Bhumi

Overview of ECMAScript 6 new Features

Updated 18 years ago

Bhumi

Getting started with Amazon Web Services

Updated 18 years ago

Bhumi

Facade implementation in Laravel

Updated 18 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 2 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 3 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 4 years ago

Bhumi