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 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.

			'name' 		=> __( 'Footer Area Four', 'twentyeleven' ),
			'id'  		=> 'sidebar-6',
			'description'  	=> __( 'An optional widget area for your site footer', 'twentyeleven' ),
			'before_widget' => '",
			'before_title'  => '

', 'after_title' => '

', ) );

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

if ( is_active_sidebar( 'sidebar-6' ) )

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

case '4':
	$class = 'four';

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

function twentyeleven_footer_sidebar_class() {
	$count = 0;
	if ( is_active_sidebar( 'sidebar-3' ) )
	if ( is_active_sidebar( 'sidebar-4' ) )
	if ( is_active_sidebar( 'sidebar-5' ) )
	if ( is_active_sidebar( 'sidebar-6' ) )
	$class = '';

	switch ( $count ) {
		case '1':
			$class = 'one';
		case '2':
			$class = 'two';
		case '3':
			$class = 'three';
		case '4':
			$class = 'four';
if ( $class )
    echo 'class="' . $class . '"';

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.

/* Four Footer Widget Areas */
#supplementary.four .widget-area {
	float: left;
	margin-right: 2.5%;
	width: 220px;
#supplementary.four .widget-area + .widget-area + .widget-area + .widget-area {
	margin-right: 0;

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


    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


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

Really! PHP touches the 200 Million Mark

Posted on 6 years ago

John Pitt

Event Delegation in jQuery

Posted on 3 years ago


The Readers’ Poll – July 2013

Posted on 5 years ago


Mysql String Function FIND_IN_SET( )

Posted on 7 years ago


The Reader’s Poll – June 2015

Posted on 3 years ago


The Reader’s Poll – August 2014

Posted on 4 years ago


The Reader’s Poll – June 2014

Posted on 4 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 5 years ago