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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | register_sidebar( array( 'name' => __( 'Footer Area Four', 'twentyeleven' ), 'id' => 'sidebar-6', 'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ), 'after_widget' => "</aside>", 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); |
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
1 2 3 4 | if ( is_active_sidebar( 'sidebar-6' ) ) $count++; |
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
1 2 3 4 5 | case '4': $class = 'four'; break; |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | function twentyeleven_footer_sidebar_class() { $count = 0; if ( is_active_sidebar( 'sidebar-3' ) ) $count++; if ( is_active_sidebar( 'sidebar-4' ) ) $count++; if ( is_active_sidebar( 'sidebar-5' ) ) $count++; if ( is_active_sidebar( 'sidebar-6' ) ) $count++; $class = ''; switch ( $count ) { case '1': $class = 'one'; break; case '2': $class = 'two'; break; case '3': $class = 'three'; break; case '4': $class = 'four'; break; } 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.
1 2 3 4 5 6 7 | <?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?> <div id="four" class="widget-area"> <?php dynamic_sidebar( 'sidebar-6' ); ?> </div> <!-- #fourth .widget-area --> |
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.
1 2 3 4 5 6 7 8 9 10 11 | /* 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)