Quantcast
Viewing all articles
Browse latest Browse all 23

Multiple rows of footer widget areas

I have a function on my functions.php that adds a bootstrap col class to the footer sidebars depending on the number of active sidebars.

What I intend to achieve with this is having footer widgets expand to the maximum space available. So, for example if I have only one footer widget area active a class of col-md-12 with be applied. If I have two a class of col-md-6 would be applied and so on. This is my code:

// Count the number of footer sidebars to enable dynamic classes for the footer top row.
if( ! function_exists( 'mytheme_footer_sidebars_top' ) ) {
    function mytheme_footer_sidebars_top() {

        $active_sidebars = 0;

        if ( is_active_sidebar( 'footer-sidebar-1' ) ) {
            $active_sidebars++;
        }

        if ( is_active_sidebar( 'footer-sidebar-2' ) ) {
            $active_sidebars++;
        }

        if ( is_active_sidebar( 'footer-sidebar-3' ) ) {
            $active_sidebars++;
        }

        if ( is_active_sidebar( 'footer-sidebar-4' ) ) {
            $active_sidebars++;
        }

        $class = '';

        switch ( $active_sidebars ) {
            case '1':
                $class = ' col-sm-12';
                break;
            case '2':
                $class = ' col-sm-6';
                break;
            case '3':
                $class = ' col-sm-4';
                break;
            case '4':
                $class = ' col-sm-3';
                break;
        }

        echo $class;
    }
}

// Count the number of footer sidebars to enable dynamic classes for the footer bottom row.
if( ! function_exists( 'karnivorz_footer_sidebars_bottom' ) ) {
    function karnivorz_footer_sidebars_bottom() {

        $active_sidebars = 0;

        if ( is_active_sidebar( 'footer-sidebar-5' ) ) {
            $active_sidebars++;
        }

        if ( is_active_sidebar( 'footer-sidebar-6' ) ) {
            $active_sidebars++;
        }

        if ( is_active_sidebar( 'footer-sidebar-7' ) ) {
            $active_sidebars++;
        }

        if ( is_active_sidebar( 'footer-sidebar-8' ) ) {
            $active_sidebars++;
        }

        $class = '';

        switch ( $active_sidebars ) {
            case '1':
                $class = ' col-sm-12';
                break;
            case '2':
                $class = ' col-sm-6';
                break;
            case '3':
                $class = ' col-sm-4';
                break;
             case '4':
                 $class = ' col-sm-3';
                 break;
        }

        echo $class;
    }
}

then my sidebar-footer.php looks like this:

<?php
    // Check if the any of the footer widget areas has widgets.
    if ( ! is_active_sidebar( 'footer-sidebar-1' )
            && ! is_active_sidebar( 'footer-sidebar-2' )
            && ! is_active_sidebar( 'footer-sidebar-3' )
            && ! is_active_sidebar( 'footer-sidebar-4' )
            && ! is_active_sidebar( 'footer-sidebar-5' )
            && ! is_active_sidebar( 'footer-sidebar-6' )
            && ! is_active_sidebar( 'footer-sidebar-7' )
            && ! is_active_sidebar( 'footer-sidebar-8' )
    )
    return;

    // Check which footer widget areas are active and apply formatting classes to them according to the number of active areas.
    ?>
    <div class="footer-sidebar" role="complementary">
        <div id="footer-top-sidebar-container" class="container">
            <div class="row">
                <?php if ( is_active_sidebar( 'footer-sidebar-1' ) ) : ?>
                    <div class="footer-widget-area col-xs-12 <?php mytheme_footer_sidebars_top(); ?>">
                        <?php dynamic_sidebar( 'footer-sidebar-1' ); ?>
                    </div><!-- end footer-widget-area -->
                <?php endif; ?>

               <?php if ( is_active_sidebar( 'footer-sidebar-2' ) ) : ?>
                   <div class="footer-widget-area col-xs-12 <?php mytheme_footer_sidebars_top(); ?>">
                      <?php dynamic_sidebar( 'footer-sidebar-2' ); ?>
                   </div><!-- end footer-widget-area -->
               <?php endif; ?>

               <?php if ( is_active_sidebar( 'footer-sidebar-3' ) ) : ?>
                   <div class="footer-widget-area col-xs-12 <?php mytheme_footer_sidebars_top(); ?>">
                       <?php dynamic_sidebar( 'footer-sidebar-3' ); ?>
                   </div><!-- end footer-widget-area -->
               <?php endif; ?>

               <?php if ( is_active_sidebar( 'footer-sidebar-4' ) ) : ?>
                   <div class="footer-widget-area col-xs-12 <?php mytheme_footer_sidebars_top(); ?>">
                       <?php dynamic_sidebar( 'footer-sidebar-4' ); ?>
                   </div><!-- end footer-widget-area -->
              <?php endif; ?>
          </div><!-- end row -->
     </div><!-- end container -->

<div id="footer-bottom-sidebar-container" class="container">
    <div class="row">
        <?php if ( is_active_sidebar( 'footer-sidebar-5' ) ) : ?>
        <div class="footer-widget-area col-xs-12 <?php mytheme_footer_sidebars_bottom(); ?>">
            <?php dynamic_sidebar( 'footer-sidebar-5' ); ?>
        </div><!-- end footer-widget-area -->
        <?php endif; ?>

        <?php if ( is_active_sidebar( 'footer-sidebar-6' ) ) : ?>
        <div class="footer-widget-area col-xs-12 <?php mytheme_footer_sidebars_bottom(); ?>">
            <?php dynamic_sidebar( 'footer-sidebar-6' ); ?>
        </div><!-- end footer-widget-area -->
        <?php endif; ?>

        <?php if ( is_active_sidebar( 'footer-sidebar-7' ) ) : ?>
        <div class="footer-widget-area col-xs-12 <?php mytheme_footer_sidebars_bottom(); ?>">
            <?php dynamic_sidebar( 'footer-sidebar-7' ); ?>
        </div><!-- end footer-widget-area -->
        <?php endif; ?>

        <?php if ( is_active_sidebar( 'footer-sidebar-8' ) ) : ?>
        <div class="footer-widget-area col-xs-12 <?php mytheme_footer_sidebars_bottom(); ?>">
            <?php dynamic_sidebar( 'footer-sidebar-8' ); ?>
        </div><!-- end footer-widget-area -->
        <?php endif; ?>
    </div><!-- end row -->
</div><!-- end container -->

This works fine for a single row of widget areas. But, what I want to achieve now is to be able to have another row exactly with the same functionality so the users could also add multiple rows of widgets in the footer. If I repeat exactly the same code and have another function called mytheme_footer_sidebars_bottom, for example, I will be able to achieve this but I am sure its not the best way as I will be repeating and renaming code. So I am wondering whats the best way to achieve this functionality without repeating all the code I have above.


Viewing all articles
Browse latest Browse all 23

Trending Articles