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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

JavaScript Ticker for Database Values

Posted on 6 years ago

Bhumi

A Beginner’s Guide To Composer

Posted on 1 year ago

Bhumi

How to use Pagination in CodeIgniter

Posted on 6 years ago

Bhumi

How to convert Object to array in PHP

Posted on 2 years ago

Bhumi

Where are the LOG of PHP,MySQL and Apache

Posted on 6 years ago

Bhumi