CODEWITHSUNDEEP
phphtmlwordpress
Lewis
Lewis

Reputation: 2178

How would one, wrap each widget output by Wordpress's - dynamic_sidebar?

So I currently have this;

<?php dynamic_sidebar( 'footerfull' ); // In footer.php ?>

which currently structures like so;

<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">
   Menu Widget 1
   Menu Widget 2
   Menu Widget 3
</div>

What I'm trying to achieve;

<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">
    Menu Widget 1 
</div>
<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">
    Menu Widget 2 
</div>
<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">
    Menu Widget 3 
</div>

The goal is to split my menus into columns like so;

<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">
  <h4 class="h6">Account</h4>

  <!-- List Group -->
  <ul class="list-group list-group-flush list-group-borderless mb-0">
    <li><a class="list-group-item list-group-item-action" href="../account/dashboard.html">Account</a></li>
    <li><a class="list-group-item list-group-item-action" href="../account/my-tasks.html">My tasks</a></li>
    <li><a class="list-group-item list-group-item-action" href="../account/projects.html">Projects</a></li>
    <li><a class="list-group-item list-group-item-action" href="../account/invite-friends.html">Invite friends</a></li>
  </ul>
  <!-- End List Group -->
</div>

Widgets.php

register_sidebar(
        array(
            'name'          => __( 'Footer Full', 'understrap' ),
            'id'            => 'footerfull',
            'description'   => __( 'Full sized footer widget with dynamic grid', 'understrap' ),
            'before_widget' => '<div id="%1$s" class="footer-widget %2$s dynamic-classes">',
            'after_widget'  => '</div><!-- .footer-widget -->',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );

Any help I could get on the subject would be greatly appreciated.

EDIT: 22 Jan 12:58

As @cabrerahector I needed to edit the following line to make the changes I was after.

'before_widget' => '<div id="%1$s" class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">',

Upvotes: 1

Views: 361

Answers (1)

cabrerahector
cabrerahector

Reputation: 3948

You already have a div element wrapping your widgets so you could just add your CSS classes (col-6, col-sm-4, etc) to before_widget:

register_sidebar(
    array(
        'name'          => __( 'Footer Full', 'understrap' ),
        'id'            => 'footerfull',
        'description'   => __( 'Full sized footer widget with dynamic grid', 'understrap' ),
        'before_widget' => '<div id="%1$s" class="footer-widget %2$s dynamic-classes col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0">',
        'after_widget'  => '</div><!-- .footer-widget -->',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    )
);

Alternatively, you could also add a new div element with said classes to before_widget / after_widget, a wrapper of a wrapper:

register_sidebar(
    array(
        'name'          => __( 'Footer Full', 'understrap' ),
        'id'            => 'footerfull',
        'description'   => __( 'Full sized footer widget with dynamic grid', 'understrap' ),
        'before_widget' => '<div class="col-6 col-sm-4 col-lg-2 mb-7 mb-lg-0"><div id="%1$s" class="footer-widget %2$s dynamic-classes">',
        'after_widget'  => '</div></div><!-- .footer-widget -->',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    )
);

Upvotes: 1

Related Questions