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!