Add Columns to Understrap / Underscores Blog Page Template Posts

Question

I'd like to customize the Underscores Wordpress Theme Blog Template to include columns around each blog post entry.

Ideally, these would become a grid of posts with pagination, but right now I'm just trying to get the grid to work.

This is from the content.php file:

<?php
/**
* Post rendering content according to caller of get_template_part.
*
* @package understrap
*/

?>

<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">

<header class="entry-header">

    <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
    '</a></h2>' ); ?>

    <?php if ( 'post' == get_post_type() ) : ?>

        <div class="entry-meta">
            <?php understrap_posted_on(); ?>
        </div><!-- .entry-meta -->

    <?php endif; ?>

</header><!-- .entry-header -->

<?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>

<div class="entry-content">

    <?php
    the_excerpt();
    ?>

    <?php
    wp_link_pages( array(
        'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' 
    ),
        'after'  => '</div>',
    ) );
    ?>

</div><!-- .entry-content -->

<footer class="entry-footer">

    <?php understrap_entry_footer(); ?>

</footer><!-- .entry-footer -->

</article><!-- #post-## -->
    </div>

Thanks for your help!

Answer 1

i assume you talking about UnderStrap, not about Underscores, right?

To add the Bootstrap grid ( http://getbootstrap.com/docs/4.1/layout/grid/ ) to your article/blog view you have to do two things: Step 1 Wrapping an outside row around your loop. To do this: open the themes index.php and search for: <main class="site-main" id="main">

Add the opening right behind this so that you have this:

<main class="site-main" id="main"><div class="row">

Now add the closing tag right before the closing tag:

</div></main>

Step 2 While the outside row wrapper needs to be added just once around all articles you need to add a Bootstrap col class plus the right size variable to your loop-templates/content.php file. So that it applies to all articles in your loop.

Open the file and add this:

<div class="col-6">

right before the opening <article> tag.

The col-6 class means "use 6/12 of space, eg 50%. So you will have two articels side-by-side. Of course you can use col-4 (4/12=33.33%) to have three articles side-by-side etc.

Depending on your needs another good starting point would be to utilize the Bootstrap card-deck component: http://getbootstrap.com/docs/4.1/components/card/#card-decks