CODEWITHSUNDEEP
csswordpresstwitter-bootstrap
user3836151
user3836151

Reputation: 231

bootstrap specifically for a widget in wordpress

boostrap has overide my theme's style when I put it on th . The problem is I have to because the widget appear even on homepage. so how to use bootstrap specifically for a widget in wordpress?

I thought of a way but it's quite hilarious, which is add !important to my theme file but there are tons of classes there.

Upvotes: 0

Views: 1961

Answers (1)

Aibrean
Aibrean

Reputation: 6412

When you register the sidebar, you can apply classes to the widget proper.

Example:

    <?php $args = array(
    'name'          => __( 'Sidebar name', 'theme_text_domain' ),
    'id'            => 'unique-sidebar-id',
    'description'   => '',
        'class'         => '',
    'before_widget' => '<div id="%1$s" class="widget %2$s col-sm-4">',
    'after_widget'  => '</div>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' ); ?>

As you can see from this example, the col-sm-4 class has been applied to this widget. You will need to update the functions that register your sidebars accordingly, but applying Bootstrap utilities like this can give you greater flexibility (for instance, a footer area with three vertical columns can easily be done with one Sidebar and three widgets, as they will fill up the 12 column space).

Alternatively, you can wrap the sidebar with Bootstrap utilities so all the widgets appear inside. For example:

<div class="container">
   <div class="row">
    <div class="col-sm-8">
      <?php the_title(); ?>
      <?php the_content(); ?>
    </div>
    <div class="col-sm-4">
      <?php dynamic_sidebar( 'unique-sidebar-id' ); ?>
    </div>
   </div>
</div>

Upvotes: 1

Related Questions