post: Dynamic widgets in horizontal sidebars

Home

Dynamic widgets in horizontal sidebars

Working With WordPress

  

Tutorials

Bootstrap CSS WordPress

Dynamic multi-widget horizontal sidebars have been the holy grail for WordPress template developers for a while. Here I show you several methods – both programmatic and css – how to do this. The solutions are suitable for css frameworks such as bootstrap, and non-css frameworks alike.

First, here is the traditional multi-widget-area approach

This involves registering 3 or 4 grouped sidebar widget areas. In this case we’ll wrap this into a footer widgets area which is where horizontal sidebars are most commonly found, and set this to 4 widget areas. So in your theme’s functions.php file you would add the following:


function mytheme_widgets_init() {

    $footer_sidebars = array(
        array( 'id'            => 'sidebar-footer-1',
               'name'          => __( 'Footer Sidebar #1', 'mytheme' ),
               'description'   => __( 'Footer sidebar. Appears above footer section.', 'mytheme' ),
               'before_widget' => '<div id="%1$s" class="widget %2$s">',
               'after_widget'  => '</div>',
               'before_title'  => '<h4 class="widget-title widgettitle">',
               'after_title'   => '</h4>' ),
        array( 'id'            => 'sidebar-footer-2',
               'name'          => __( 'Footer Sidebar #2', 'mytheme' ),
               'description'   => __( 'Footer sidebar. Appears above footer section.', 'mytheme' ),
               'before_widget' => '<div id="%1$s" class="widget %2$s">',
               'after_widget'  => '</div>',
               'before_title'  => '<h4 class="widget-title widgettitle">',
               'after_title'   => '</h4>' ),
        array( 'id'            => 'sidebar-footer-3',
               'name'          => __( 'Footer Sidebar #3', 'innovate' ),
               'description'   => __( 'Footer sidebar. Appears above footer section.', 'mytheme' ),
               'before_widget' => '<div id="%1$s" class="widget %2$s">',
               'after_widget'  => '</div>',
               'before_title'  => '<h4 class="widget-title widgettitle">',
               'after_title'   => '</h4>' ),
        array( 'id'            => 'sidebar-footer-4',
               'name'          => __( 'Footer Sidebar #4', 'innovate' ),
               'description'   => __( 'Footer sidebar. Appears above footer section.', 'mytheme' ),
               'before_widget' => '<div id="%1$s" class="widget %2$s">',
               'after_widget'  => '</div>',
               'before_title'  => '<h4 class="widget-title widgettitle">',
               'after_title'   => '</h4>' )
    );

    // Register sidebars
    foreach ( $footer_sidebars as $sidebar ) {	register_sidebar( $sidebar ); }
}

// Kickstart sidebar widget areas
add_action( 'widgets_init', 'mytheme_widgets_init' );    

You’ll note that I’ve also set the widget and title parameters for each of the sidebars. While this isn’t strictly required I prefer to do this, replacing the default ul list with divs. The styling in your theme may require a bit of extra css for this. Alternatively you can remove the before_widget and after_widget parameters and the widget display will automatically revert to the WordPress list default.

In the genesis framework this can be easily done with the following:


// Add support for 4-column footer widgets
add_theme_support( 'genesis-footer-widgets', 4 );

In your wordpress admin section under the widgets tab your new sidebar widget areas will show up under their sidebar names: Footer Sidebar #1, Footer Sidebar #2, Footer Sidebar #3, Footer Sidebar #4.

To display the footer widgets in your theme requires a couple of additional steps. Firstly, to create the sidebar file containing the html and sidebar functionality, and secondly from within your theme’s template file to call the new sidebar file.

The standard sidebar file is sidebar.php this is called from within your theme template file via the get_sidebar() function. To extend this for the footer sidebar create a new file called sidebar-footer.php and place the following code inside. This file goes in your theme folder next to sidebar.php.


<section id="sidebar-footer" class="footer-widgets widgets-4">
    <div class="footer-widget">
        <?php dynamic_sidebar('sidebar-footer-1'); ?>
    </div>
    <div class="footer-widget">
        <?php dynamic_sidebar('sidebar-footer-2'); ?>
    </div>
    <div class="footer-widget">
        <?php dynamic_sidebar('sidebar-footer-3'); ?>
    </div>
    <div class="footer-widget">
        <?php dynamic_sidebar('sidebar-footer-4'); ?>
    </div>
</section>

Then within your theme’s template file, normally directly after or before the get_sidebar() function, add the following:


<?php get_sidebar('footer'); ?>

The new and updated files need moving to your live theme folder. In our current example for simplicity we have added a simple text widget to each of the 4 widget areas and labelled them accordingly. If you have correctly added everything then when the page supporting the template is refreshed – e.g. single.php for blog posts or page.php for single pages – then the new footer sidebar & widgets will appear. Example markup corresponding to the processed sidebar-footer page is displayed below. Depending on how you have wrapped the code around the dynamic_sidebar() functions this may be different. It just corresponds to our current example.


<section id="sidebar-footer" class="footer-widgets widgets-4">
    <div class="footer-widget">
        <div id="text-3" class="widget widget_text">
            <h4 class="widget-title widgettitle">Text Area #1</h4>
            <div class="textwidget">Suspendisse et suscipit magna. Suspendisse suscipit est vel vulputate dignissim. Integer nulla felis, commodo at lacus vitae, sollicitudin blandit erat. Nullam vel gravida leo.</div>
        </div>
    </div>
    <div class="footer-widget">
        <div id="text-4" class="widget widget_text">
            <h4 class="widget-title widgettitle">Text Area #2</h4>
            <div class="textwidget">Phasellus nisl purus, faucibus nec rhoncus sed, maximus condimentum est. Ut sit amet auctor leo, euismod hendrerit mauris. Nunc commodo fringilla lectus vel volutpat. Proin aliquet in diam sodales eleifend. </div>
        </div>
    </div>
    <div class="footer-widget">
        <div id="text-5" class="widget widget_text">
            <h4 class="widget-title widgettitle">Text Area #3</h4>
            <div class="textwidget">Fusce commodo, libero vitae finibus aliquam, nisi nibh laoreet nisl, vitae ultrices eros justo id nibh. Pellentesque vulputate hendrerit velit sit amet hendrerit. </div>
        </div>
    </div>
    <div class="footer-widget">
        <div id="text-6" class="widget widget_text">
            <h4 class="widget-title widgettitle">Text Area #4</h4>
            <div class="textwidget">Mauris purus justo, dictum dignissim sem ut, luctus ultrices ante. Etiam scelerisque ultricies quam ornare volutpat. Nunc consequat tincidunt sem. Nulla vel sagittis neque. Morbi porttitor gravida dui eu egestas.</div>
        </div>
    </div>
</section>

With some simple css the footer widget area and footer widgets can be styled to integrate with your theme, for example:


.widget:before { content: " "; display: table; }
.widget:after {	clear: both; content: " "; display: table; }

.widget { word-wrap: break-word; }

.footer-widgets { background-color: #E6E9ED; }
.footer-widgets:before { content: " "; display: table; }
.footer-widgets:after {	clear: both; content: " "; display: table; }

.footer-widgets.widgets-2 .footer-widget { float: left; width: 50%; }
.footer-widgets.widgets-3 .footer-widget { float: left; width: 33.3333333333%; }
.footer-widgets.widgets-4 .footer-widget { float: left; width: 25%; }

.footer-widgets .widget { margin-bottom: 25px; }
.footer-widgets .widget > div { padding: 0 20px; font-size: 20px; line-height: 1.5; }

.widget-title { font-size: 20px; padding: 12px 0 10px; margin-bottom: 15px; text-align: center; }

.footer-widgets .widget-title { color: #fff; }
.footer-widgets .footer-widget:nth-of-type(1) .widget-title { background-color: #DA4453; }
.footer-widgets .footer-widget:nth-of-type(2) .widget-title { background-color: #37BC9B; }
.footer-widgets .footer-widget:nth-of-type(3) .widget-title { background-color: #967ADC; }
.footer-widgets .footer-widget:nth-of-type(4) .widget-title { background-color: #D770AD; }

.footer-widgets .footer-widget { padding-left: 0; padding-right: 0; }

The final output should display as below.

In the following parts we’ll demonstrate a couple of alternative ways in with to display widgets in a single dynamic sidebar, as well as some code tweaks to the traditional method to mimic this.

comments powered by Disqus