Creating custom post-listing templates in twentyseventeen child theme

Question

I'm using a child theme based on 'Twenty Seventeen' and have created a custom post type ('review'). I want to make two Pages, one which lists 'reviews' and the other which lists a mixture of 'posts' and 'reviews' (ordered by recency). For the first of those I've made a copy of Twenty Seventeen's index.php, as page-reviews.php, and added code like this at the start: $args = array( 'post_type' => 'review', 'orderby' => 'date', 'order' => 'DESC', 'posts_per_page' => 10, ); $the_query = new WP_Query( $args ); Then, further down, replaced have_posts() and the_post() with $the_query->have_posts() and $the_query->the_post() respectively. If I choose to use that template for a Page then it works in that the 'reviews' are listed, but the layout is all messed up. There are a lot of classes in the which mess up the layout. For example, the standard blog front page, using index.php, has these classes in its and looks fine: blog logged-in admin-bar hfeed has-header-image has-sidebar colors-light customize-support While my custom page has these: page-template page-template-page-postslist page-template-page-postslist-php page page-id-15071 logged-in admin-bar has-header-image page-two-column colors-light customize-support How can I make a custom template that acts more like index.php in terms of the classes it adds?

hamdirizal · Answer

In this case, I will create a shortcode which you can put on any page you want. Paste the following code to the functions.php file

add_shortcode('review-list', 'show_review_list');

function show_review_list($attr){
    $args = array(
        'post_type' => 'review',
        'orderby' => 'date',
        'order' => 'DESC',
        'posts_per_page' => 10,
    );
    $the_query = new WP_Query( $args );

ob_start();

//...
    //Put code from index.php here to get the correct HTML structure
    //just like what you did before
    //

return ob_get_clean();
}

To use, put [review-list] anywhere on the page/post.

majick · Answer

You can use the Body Class Filter for this to adjust the classes being added to the body tag.

add_filter('body_class','review_pages_classes');
function review_pages_classes($classes) {
    $classes[] = 'blog';
    return $classes;
}

Which classes you need to add or remove is probably a matter of trial and error, or looking at the stylesheets in more detail.

Creating custom post-listing templates in twentyseventeen child theme

2 Answers

Add your own answers!

Ask a Question