Wordpress Understrap display posts on a page

Question

I'm learning how to use wordpress API. I'm a newbie with this framework, so I've decided to install Understrap to use the Bootstrap 4 framework and create a simple portfolio website. After googling a bit, I've started experimenting with the code, but there are many aspects of this wordpress theme that are unclear to me. I want to display some posts on a page and style how they will appear using the bootstrap classes markup. Is there any valid tutorial about or anyone can suggest to me the correct modifications I need to make to the template theme files?

I've tried to create a page named postpage.php with this code inside, but it will not be recognized from wordpress as a template model for a page. CODE:

<?php

$args = array(
'posts_per_page' => 6,
'offset' => 0,
'category' => 'portfolio',
'category_name' => '',
'orderby' => 'date',
'order' => 'DESC',
'include' => '', 'exclude' => '',
'meta_key' => '',
'meta_value' => '',
'post_type' => 'post', 'post_mime_type' => '',
'post_parent' => '',
'author' => '',
'post_status' => 'publish',
'suppress_filters' => true
);

$myposts = get_posts( $args );

foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php
endforeach;
wp_reset_postdata();
?>

Answer 1

First you need to specify that this is a page template by adding the following code to the top of your file:

<?php /* Template Name: Example Template */ ?>

Then it will show up in your page template dropdown. More info about page templates here .

In order to add Boostrap classes, you need to wrap the foreach statement in the Bootstrap containers and then change the ul to bootstrap columns:

 <div class="container"> <div class="row"> <?php foreach ( $myposts as $post ) : setup_postdata($post ); ?> <div class="col-sm-4"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </div> <?php endforeach; wp_reset_postdata(); ?> </div> </div> 

Answer 2

If you want to use custom layout then you need to make a custom template and there you will add a page for using your custom templet. your custom template code will like this

 <?php /* Template Name: Your custom templete */ get_header(); ?><?php $the_query = new WP_Query(array( 'category_name' => 'popular', 'posts_per_page' => '6', 'order' => 'DESC', // Show only the published posts ));?> <?php if( $the_query->have_posts() ): ?> <?php while( $the_query->have_posts() ) : $the_query->the_post();?> <div class="story-info"> <a class="category-name arts texunset" href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"> <span class="daycolor" style="background:<?php the_field('colorpost'); ?>;">&nbsp;</span> <span> <?php the_title(); ?> </span> </a> <div class="date"> <?php the_time('F jS, Y') ?> &nbsp;|&nbsp; <i class="fa fa-signal"></i> </div> </div> <hr> <?php endwhile; ?> <?php endif; ?> <?php get_footer();?>