CODEWITHSUNDEEP
phpwordpresscustom-post-typecategoriesalternate
Henry Wood
Henry Wood

Reputation: 31

WordPress, change template layout based on post category?

I'm trying to output all posts under custom post type "philosophy" on a page in a list. Alternating between categories "img-left" and "img-right".

I can get the posts to display ALL "philosophy" posts however i want to lay out the posts in two layouts depending on their custom category.

If the category is "img-right" i want the post to be shown with the text on the left and image on the right and vice-versa for "img-left".

I have tried the below code which doesn't work at all.

<?php
        $args = array( 'post_type' => 'philosophy', 'posts_per_page' => 10 );
        $loop = new WP_Query( $args );
    if( in_category( 'img-right' ) ):
        while ( $loop->have_posts() ) : $loop->the_post();
        echo '<div class="col-md-12"><h2>';
        the_title();
        echo '</h2></div><div class="row content"><div class="col-md-6"';
        the_content();
        echo '</div><div class="col-md-5 offset-1 float-right">';
        the_post_thumbnail('array(100,100)');
        echo '</div></div>';



        endwhile;
    endif;
        ?>

by removing the "if" and "endif" i have the code that lists all the posts in one layout. What I need is conditionals that can output both "img-right" and "img-left" layouts based on the post's category. The only layout shown in my example above is "img-right".

Any help would be greatly appreciated. This PHP is making my head spin!

Upvotes: 1

Views: 490

Answers (2)

Henry Wood
Henry Wood

Reputation: 31

So...with all the help from the guys answering i figured it out using the CSS approach touched on by @Mohsin.

Here is my code:

<div id="content" class="col-12" role="main">
    <?php get_template_part('loops/page-content'); ?>
    </div>

    <div class="row">
        <?php
        $args = array( 'post_type' => 'philosophy', 'posts_per_page' => 10 );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post();
        echo '<div class="row content"><div class="col-md-12"><h2>';
        the_title();
        echo '</div><div class="col-md-6">';
        the_content();
        echo '</div><div class="col-md-6">';
        the_post_thumbnail();
        echo '</div></div>';



        endwhile;
        ?>

I then applied this:

.row.content:nth-child(even) {
    flex-direction: row-reverse;
}

and we're golden.

Thank you to everyone who helped.

Upvotes: 2

Kallmanation
Kallmanation

Reputation: 1182

If I understand correctly:

<?php $args = array( 'post_type' => 'philosophy', 'posts_per_page' => 10 ); ?>
<?php $loop = new WP_Query( $args ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

    <div class="col-md-12"><h2>
        <?php the_title(); ?>
    </h2></div>
    <div class="row content">

        <?php if( in_category( 'img-left' ) ): ?>
            <div class="col-md-5 offset-1 float-left">
                <?php the_post_thumbnail('array(100,100)'); ?>
            </div>
        <?php endif; ?>

        <div class="col-md-6">
            <?php the_content(); ?>
        </div>

        <?php if( in_category( 'img-right' ) ): ?>
            <div class="col-md-5 offset-1 float-right">
                <?php the_post_thumbnail('array(100,100)'); ?>
            </div>
        <?php endif; ?>
    </div>

<?php endwhile; ?>

The above code will output all of the posts, with a thumbnail to the left if it is category img-left and thumbnail to the right if in img-right (and outputting both if it is categorized as both, and neither if it is neither category. You may want different behavior, but it should be simple to adjust the conditionals).

If your template becomes anymore complicated, I would recommend moving sections out to template-parts/using functions like get_sidebar().

Upvotes: 0

Related Questions