default or masonry posts index

functions.php

@@ -66,3 +66,8 @@ require get_template_directory() . '/inc/bootstrap-wp-gallery.php';
 * Load WooCommerce functions.
 */
 require get_template_directory() . '/inc/woocommerce.php';
+
+/**
+ * Load a utilities library.
+ */
+require get_template_directory() . '/inc/utilities.php';

home.php

@@ -0,0 +1,80 @@
+<?php
+/**
+ * The template for displaying all pages.
+ *
+ * This is the template that displays all pages by default.
+ * Please note that this is the WordPress construct of pages
+ * and that other 'pages' on your WordPress site will use a
+ * different template.
+ *
+ * @package understrap
+ */
+
+get_header();
+?>
+
+<?php
+$container   = get_theme_mod( 'understrap_container_type' );
+$sidebar_pos = get_theme_mod( 'understrap_sidebar_position' );
+$posts_style = get_theme_mod( 'understrap_posts_index_style' );
+?>
+
+<div class="wrapper" id="page-wrapper">
+
+	<div class="<?php echo $container ?>" id="content" tabindex="-1">
+
+		<div class="row">
+
+			<!-- Do the left sidebar check -->
+			<?php get_template_part( 'global-templates/left-sidebar-check', 'none' ); ?>
+			<?php if ( 'masonry' === $posts_style ): ?>
+			<div class="card-columns"><?php endif; ?>
+
+				<main class="site-main" id="main">
+
+					<?php if ( have_posts() ) : ?>
+
+						<?php /* Start the Loop */ ?>
+
+						<?php while ( have_posts() ) : the_post(); ?>
+
+							<?php
+							if ( 'masonry' === $posts_style ):
+								get_template_part( 'loop-templates/content-card' );
+							else:
+								/* Include the Post-Format-specific template for the content.
+								 * If you want to override this in a child theme, then include a file
+								 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
+								 */
+								get_template_part( 'loop-templates/content', get_post_format() );
+							endif;
+							?>
+
+						<?php endwhile; ?>
+
+						<?php the_posts_navigation(); ?>
+
+					<?php else : ?>
+
+						<?php get_template_part( 'loop-templates/content', 'none' ); ?>
+
+					<?php endif; ?>
+			<?php if ( 'masonry' === $posts_style ): ?></div><?php endif; ?>
+			</main><!-- #main -->
+
+		</div><!-- #primary -->
+
+		<!-- Do the right sidebar check -->
+		<?php if ( 'right' === $sidebar_pos || 'both' === $sidebar_pos ): ?>
+
+			<?php get_sidebar( 'right' ); ?>
+
+		<?php endif; ?>
+
+	</div><!-- .row -->
+
+</div><!-- Container end -->
+
+</div><!-- Wrapper end -->
+
+<?php get_footer(); ?>

inc/customizer.php

@@ -123,6 +123,29 @@ if ( ! function_exists( 'understrap_theme_customize_register' ) ) {
 				)
 			) );
 
+		// How to display posts index page (home.php)
+		$wp_customize->add_setting( 'understrap_posts_index_style', array(
+			'default'    => 'default',
+			'type'       => 'theme_mod',
+			'capability' => 'edit_theme_options',
+		) );
+
+		$wp_customize->add_control(
+			new WP_Customize_Control(
+				$wp_customize,
+				'understrap_posts_index_style', array(
+					'label'       => __( 'Posts Index Style', 'understrap' ),
+					'description' => __( "Choose how to display latest posts", 'understrap' ),
+					'section'     => 'understrap_theme_layout_options',
+					'settings'    => 'understrap_posts_index_style',
+					'type'        => 'select',
+					'choices'     => array(
+						'default'       => __( 'Default', 'understrap' ),
+						'masonry' => __( 'Masonry', 'understrap' ),
+					),
+					'priority'    => '30',
+				)
+			) );
 	}
 }
 add_action( 'customize_register', 'understrap_theme_customize_register' );

inc/utilities.php

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Utility functions
+ */
+
+/**
+ * Generate a custom length excerpt.
+ * If the content of the post is less than the provided length,
+ * the entire content is returned.
+ * @param $word_count
+ *
+ * @return string
+ */
+function understrap_excerpt_with_length( $post_id, $word_count ) {
+	$post = get_post( $post_id );
+	$permalink = get_post_permalink( $post_id );
+	$content   = strip_tags( $post->post_content );
+
+	if ( str_word_count( $content, 0 ) > $word_count ) {
+		$words   = str_word_count( $content, 2 );
+		$keys    = array_keys( $words );
+		$excerpt = substr( $content, 0, $keys[ $word_count ] );
+		$link_class = " class=\"btn btn-secondary understrap-read-more-link\"";
+		$excerpt = '<p>' . $excerpt . '[...]</p>';
+		$excerpt .= '<p><a href="' . $permalink . '"' . $link_class . '>Read More</a></p>';
+	} else {
+		return $content;
+	}
+
+	return $excerpt;
+}
+

loop-templates/content-card.php

@@ -0,0 +1,49 @@
+<?php
+/**
+ * @package understrap
+ */
+?>
+<div class="card">
+	<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
+
+		<header class="entry-header">
+			<?php if ( has_post_thumbnail() ): ?>
+				<?php
+				$alt = get_post_meta( get_post_thumbnail_id( $post->ID ), '_wp_attachment_image_alt', true );
+				?>
+				<img src="<?php echo get_the_post_thumbnail_url( $post->ID, 'large' ); ?>"
+				     alt="<?php echo $alt; ?>"
+				     class="card-img-top img-fluid">
+			<?php endif; ?>
+			<div class="card-block">
+				<?php the_title( sprintf( '<h2 class="entry-title card-title"><a href="%s" rel="bookmark">',
+					esc_url( get_permalink() ) ), '</a></h2>' ); ?>
+
+				<?php if ( 'post' === get_post_type() ) : ?>
+
+					<div class="entry-meta">
+						<p class="card-text"> <?php understrap_posted_on(); ?> </p>
+					</div><!-- .entry-meta -->
+
+				<?php endif; ?>
+			</div>
+		</header><!-- .entry-header -->
+
+		<div class="card-block">
+			<div class="entry-content card-text">
+				<?php
+				echo understrap_excerpt_with_length( $post->ID, 15 );
+				?>
+
+				<?php
+				wp_link_pages( array(
+					'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' ),
+					'after'  => '</div>',
+				) );
+				?>
+			</div><!-- .entry-content -->
+
+
+		</div>
+	</article><!-- #post-## -->
+</div>