• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Split the Genesis footer Credits in two or more widget-areas

Last Updated on July 8, 2019 Favorited: 0 times

This tutorial provides the steps to register and display two widgets in Genesis site footer by removing the default genesis_footer.

Idea:
1. Register two widget areas and display them (default) in site footer.
2. Use is_active_sidebar as a conditional tag to make sure particular widget is active otherwise return early.
3. Removing the default site footer markup.
4. Add support for SHORTCODES.

Step 1

Registering the two widget areas: i) Footer Left and ii) Footer Right. Paste the following in your child-theme/functions.php

//* Register 'footer-left' and 'footer-right' widget areas.
genesis_register_sidebar(
    array(
    'id'          => 'footer-left',
    'name'        => __('Footer Left', 'theme-prefix'),
    'description' => __('This is a footer left widget area and will show at left side.', 'themeprefix'),
    ) 
);

genesis_register_sidebar(
    array(
    'id'          => 'footer-right',
    'name'        => __('Footer Right', 'theme-prefix'),
    'description' => __('This is a footer right widget area and will show at right side.', 'themeprefix'),
    ) 
);

Step 2

Adding this two widget areas inside site footer markup. Again add the following in your child-theme/functions.php

//* Add these two widget areas at site footer area.
add_action('genesis_footer', 'themeprefix_do_footer', 9);
function themeprefix_do_footer() {
    if(! is_active_sidebar('footer-left') && ! is_active_sidebar('footer-right') ) {
        return;
    }
     
    //* Remove default copyright text area .
    remove_action('genesis_footer', 'genesis_do_footer');
  
    //* Add a filter in Text widget. So shortcode will work in Text widget.
    add_filter('widget_text', 'do_shortcode');
  
    if(is_active_sidebar('footer-left') ) {
        genesis_widget_area(
            'footer-left', array(
            'before' => '<div class="footer-widget-area footer-left" id="footer-left">',
            'after'  => '</div>',
            ) 
        );
    }
  
    if(is_active_sidebar('footer-right') ) {
        genesis_widget_area(
            'footer-right', array(
            'before' => '<div class="footer-widget-area footer-right" id="footer-right">',
            'after'  => '</div>',
            ) 
        );
    }
}

OR use this if you not want footer widgets on Landing page.

//* Add these two widget areas at site footer area.
add_action('genesis_footer', 'themeprefix_do_footer', 9);
function themeprefix_do_footer() {
	
	if(! is_active_sidebar('footer-left') && ! is_active_sidebar('footer-right') || is_page_template('page_landing.php') ) {
        return;
    }
     
    //* Remove default copyright text area .
    remove_action('genesis_footer', 'genesis_do_footer');
  
    //* Add a filter in Text widget. So shortcode will work in Text widget.
    add_filter('widget_text', 'do_shortcode');
  
    if(is_active_sidebar('footer-left') ) {
        genesis_widget_area(
            'footer-left', array(
            'before' => '<div class="footer-widget-area footer-left" id="footer-left">',
            'after'  => '</div>',
            ) 
        );
    }
  
    if(is_active_sidebar('footer-right') ) {
        genesis_widget_area(
            'footer-right', array(
            'before' => '<div class="footer-widget-area footer-right" id="footer-right">',
            'after'  => '</div>',
            ) 
        );
    }
}

Here, we added additional condition to not output the function of pages where landing page is assigned.

|| is_page_template('page_landing.php')

OR You can remove this function by just changing add_action() to remove_action()

in page_landing.php before genesis(); ADD

//*  Remove these two widget areas at site footer area.
remove_action('genesis_footer', 'themeprefix_do_footer', 9);

here themeprefix_do_footer() is the function we are removing.

Step 3

Add the following CSS in your style.css file.

.site-footer,
.site-footer .wrap {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    vertical-align: top;
    width: 100%
}

.site-footer .footer-widget-area {
    margin: 0 !important;
    padding: 0 !important;
}

.site-footer .widget {
    margin-bottom: 0 !important;
}

.footer-right {
    -webkit-order: -1;
    order: -1;
    margin-bottom: 10px;
}

.footer-left,
.footer-right {
    flex: 0 0 100%;
    text-align: center;
}

.site-footer .widget_text {
    padding-top: 5px;
    font-size: 1.8rem;
}

.site-footer .simple-social-icons {
    /* vertical-align:  middle; */
    display: inline-block;
}

@media only screen and (min-width: 960px) {
    .footer-widget-area {
        -webkit-flex: 1;
        flex: 1;
        line-height: 1.4;
    }
    .footer-left {
        text-align: left;
    }
    .footer-right {
        text-align: right;
        -webkit-order: 1;
        order: 1;
    }
    .footer-widget-area .widget {
        display: inline-block;
        margin-bottom: 0;
        margin-left: 10px;
        vertical-align: middle;
    }
    .footer-widget-area .widget_nav_menu li {
        display: inline-block;
        margin: 0 0 0 10px;
        padding-bottom: 0;
    }
    .footer-widget-area .widget:first-child,
    .footer-widget-area .widget_nav_menu li:first-child {
        margin-left: 0;
    }
    .footer-widget-area .simple-social-icons ul li {
        margin-bottom: 0 !important;
    }
}

Step 4

Login to WordPress dashboard and navigate to Appearance > Widgets. Drag Your preferred widget i.e Simple Social Icons or HTML widget in each of footer left and right widget area.

Done!

Related Posts

  • Magazine style Singular Post Design in Genesis Sample
  • Post Page Blog Archive Template with Layouts in Genesis
  • Site Inner with container background in Genesis Sample
  • Remove Responsive Menus in Genesis Sample 3.0.0+
  • Change 3 columns footer widgets in 4 columns widgets in Genesis

Categories: Free Content, Genesis Tutorials Tags: Credits, Footer, Genesis Sample, site footer

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service