One of my Facebook group’s member is requested it. In this article I am dividing the “site-footer” inner markup in two widget areas. If user is not activating the any widget area then default copyright text will show there. Checkout the steps at below:
Step 1
Registering the two widget areas: Footer Left and Footer Right. Open your functions.php file and enter this code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/** * Dividing the site footer in 2 parts * * @author Chinmoy Paul * @link https://www.paulchinmoy.com * @copyright Copyright (c) 2015 - 2016 Genesis Developer * @license GPL - 2.0+ */ //* Register two new widget areas: Footer Left and Footer Right genesis_register_sidebar( array( 'id' => 'footer-left', 'name' => __( 'Footer Left', 'themeprefix' ), 'description' => __( 'This widget area will show at left side.', 'themeprefix' ), ) ); genesis_register_sidebar( array( 'id' => 'footer-right', 'name' => __( 'Footer Right', 'themeprefix' ), 'description' => __( 'This widget area will show at right side.', 'themeprefix' ), ) ); |
Step 2
Adding this two widget areas inside site footer markup. Again add this code in your functions.php file:
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 |
//* Add this 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>', ) ); } } |
02: Select the “genesis_footer” hook and set the priority 9.
04-05: Returning early if widget areas are not activate. is_active_sidebar() conditional tag checks if a given sidebar is active (in use). it is a boolean function, meaning it returns either TRUE or FALSE.
08: Unhook the default site footer area. Site copyright text is displaying by “genesis_do_footer” callback function. So I am removing this callback function by remove_action hook.
11: Enabling the shortcode in Text Widget.
13-25: Echoing the footer left and/or footer right widget area if anyone is activated.
Step 3
Add the following CSS in your style.css file. I used flexbox method here.
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
.site-footer, .site-footer .wrap { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; vertical-align: top; width: 100% } .footer-widget-area { -webkit-flex: 1; flex: 1; line-height: 1.4; } .footer-left { text-align: left; } .footer-right { text-align: right; } .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; } @media only screen and (max-width: 800px) { .footer-right { -webkit-order: -1; order: -1; margin-bottom: 10px; } .footer-left, .footer-right { flex: 0 0 100%; text-align: center; } } |
Step 4
Login to dashboard and navigate to Appearance -> Widgets. You will get two new sidebar “Footer Left” and “Footer Right”. Setup the widgets as per your requirement. Now refresh your site.
Leave a Reply