Flexible horizontal sidebars in WordPress (using Twenty Thirteen child theme)

Flexible is good, at least when it comes to websites. After all, responsive has been THE buzzword of all buzzwords for quite some time. Using media queries, you can make a three column layout switch to two columns, than one, depending on width of device website is being displayed on. But what about setting number of columns based on content? Easy, using WordPress widget areas.

I’ll use Twenty Thirteen child theme in this example. If you don’t know how to create a WordPress child theme, read that post at ThematoSoup. Twenty Thirteen uses Masonry to display widgets in its main widget area (footer). In order to switch to grid based layout, you need to dequeue Masonry script first:

// Removes Masonry enqueued by Twenty Thirteen to handle vertical alignment of footer widgets.
function slbd_dequeue_masonry() {
   wp_dequeue_script( 'jquery-masonry' );
add_action( 'wp_print_scripts', 'slbd_dequeue_masonry' );

Once that’s been done, let’s create a helper function that will return a few classes to add to div.widget-area (comments inline):

And use the function in footer.php file, copied from child theme’s sidebar-main.php, copied from parent theme’s folder:

 * The sidebar containing the footer widget area.

if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
	<div id="secondary" class="sidebar-container" role="complementary">
		<div class="widget-area flexible-widget-area <?php echo slbd_count_widgets( 'sidebar-1' ); ?>">
			<?php dynamic_sidebar( 'sidebar-1' ); ?>
		</div><!-- .widget-area -->
	</div<>!-- #secondary -->
<?php endif; ?>

Now it’s easy set number of widgets shown per row, by using .per-row-2, .per-row-3 and .per-row-4 classes that were added to widget area:

/* Two per row */
.flexible-widget-area.per-row-2 .widget {
    width: 50%;
/* Three per row */
.flexible-widget-area.per-row-3 .widget {
    width: 33.33333%;
/* Four per row */
.flexible-widget-area.per-row-4 .widget {
    width: 25%;

And here’s full CSS file:

What you get as result will look like this:

Four widgets per row
Four widgets per row
Three widgets per row
Three widgets per row
Two widgets per row
Two widgets per row

You can also download the child theme. Let me know how you think this technique could be improved.

16 thoughts on “Flexible horizontal sidebars in WordPress (using Twenty Thirteen child theme)”

  1. This works great, but how would you go about setting the number of columns to use based on device width?

  2. Lepo, a kako srediti da na stranici budu 3 kolone? Ili recimo 2 reda, prvi red ceo, drugi 3 kolone i sl.


  3. Hello – Did you ever figure out the sidebar / footer overflow issue with the twenty thirteen theme? I hear it’s by design that long sidebars overlap the footer when the page is smaller than the sidebar height. – Cheers, Dave

  4. Any idea why it has eliminated the site info below the footer once this was implemented? It has also eliminated my ability to access the dashboard from the main site.

    Something in the sidebar-main.php in the child theme is causing the issue.

  5. Hi there its very good and works.
    however is it possible that I can stack widgets vertically and every widget use 100% width?

  6. Thanks for sharing your code. This lays out the footer widgets pretty well, however, my sidebar is still overlapping the footer, covering up that 4th widget anyway. It would seem that makes this whole exercise irrelevant. Am I missing something?

  7. Hi Slobodan

    I tried to adapt your scripts. But whatever i do, i always get three columns.
    How do achieve four of them? Do you simply delete the css for two and three columns?
    For when i do that i get four columns, but they do not stretch over the whole format?

    Thank you for your time.

    kind regards

  8. Hi Slobodan

    I could successfully adapt your scripts.
    Thank you very much for your efforts.

    Hope you are doing well.

    kind regards

Comments are closed.