Creating custom post-listing templates in twentyseventeen child theme

Question

Creating custom post-listing templates in twentyseventeen child theme

Phil Gyford

2022年3月29日 23:00

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 body which mess up the layout.

For example, the standard blog front page, using index.php, has these classes in its body 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?

Topic body-class page-template templates css Wordpress

Category Web

hamdirizal · Accepted Answer · 2020年2月19日 06:12

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 · Accepted Answer · 2017年2月17日 09:49

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

About