Add Two Row Of Widgets in Footer

Travelify
1

Thank you for a nice theme. If offers a lot.

I would like to add two rous of widgets in the footer.

When I add another row of 3 widgets the widgets in the second row shift to the right.
I am working on two possible ways to handle this.

  1. Adding the following code in the 3rd widget in row one to clear.
    <div style=”clear: both;”></div> I was sure this code would work. But it does not. I also tried adding CSS to make the three widgets in row one the same height thinking that would make row two widgets line up right, but that did not work either.

I am attaching an image to demonstrate my challenge.

  1. The other option I am trying which could be helpful is I tried creating another sidebar widget for footer which would be a full width widget for the footer. I created a Child theme and included the following code.

CSS.php
#footerarea .col-1 {
width: 100%;
float: left;
margin-left: 2.5%;
}

I registered a new widget in the functions.php in the file folder Library
// Registering footer widgets
register_sidebar( array(
‘name’ => __( ‘Footerfull’, ‘travelify’ ),
‘id’ => ‘travelify_footerfull_widget’,
‘description’ => __( ‘Shows widgets at footerfull.’, ‘travelify’ ),
‘before_widget’ => ‘<div class=”col-1″><aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside></div>’,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’
)
);
I added the following to the file folder Libary Structure footer-extension.php
add_action( ‘travelify_footer’, ‘travelify_footerfull_widget_area’, 10 );
/**

  • Displays the footer full widgets
    */
    function travelify_footerfull_widget_area() {
    get_sidebar( ‘footerfull’ );
    }

I added the following to the Library Structure sidebar-extensions.php
add_action( ‘travelify_footerfull_widget’, ‘travelify_display_footerfull_widget’, 10 );
/**

  • Show widgets on Footer of the theme.
  • Shows all the widgets that are dragged and dropped on the Footerfull Sidebar.
    */
    function travelify_display_footerfull_widget() {
    if( is_active_sidebar( ‘travelify_footerfull_widget’ ) ) {
    ?>
    <div class=”widget-wrap”>
    <div class=”container”>
    <div class=”widget-area clearfix”>
    <?php
    // Calling the footerfull sidebar if it exists.
    if ( !function_exists( ‘dynamic_sidebar’ ) || !dynamic_sidebar( ‘travelify_footerfull_widget’ ) ):
    endif;
    ?>
    </div><!– .widget-area –>
    </div><!– .container –>
    </div><!– .widget-wrap –>
    <?php
    }
    }

I cannot see my new widget in the customize or widget screen in WordPress. I am trying to figure out what I am missing.

Why doesn’t the newly created widget show up in Wordpress Custoomize Dashboard?

Any ideas would be most appreciated.

Thanks again for the great theme. I believe it has so much potential.

Thank you for your efforts

2

Hi @moses,

I hope you are well today and thank you for your question.

When I add another row of 3 widgets the widgets in the second row shift to the right.

Could you please share me your site URL where it’s displaying so that i can help you to resolve it?

Best Regards,
Movin

3

Htanks for your help.

Here is the URL to a page which shows what happens when I tried to add two rows of widgets.

http://bedroomideas.findoutmorequickly.com/

I will want to add more than two rows of widgets.

Thank you so much for your ideas.

I am continuing to explore Travelify. It is a real nice theme. Thanks for creating it.

4

You can try resolving it by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Travelify Other Options

#footerarea .widget-area .col-3:nth-child(3n+1){
    clear: both;
    margin-left: 0;
}
5

Perfect!! The clear: both put in the right place solved my problem.
Thank you very much. Your theme is flexible enough so I can add my style to it. Thanks for making such a great theme. For my next step I will be trying Woocommerce. From what I can see this theme is well integrated with Woocommerce. I have tried several themes that are not well integrated.

I am also impressed how very modern looking your theme is. I am having to update my websites. Your theme is looking very good.

I am also impressed by the speed your theme has when I test my site using testmysite.thinkwithgoogle. Not that this is the only thing to focus on, but having a theme that will display quickly on mobile devices matters more and more.

Thanks for making life easier for those of us build websites

6

Thank you for your kind words and you are most welcome here :slight_smile: