WordPress, change template layout based on post category?

1
votes

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!

2
phpwordpresscustom-post-typecategoriesalternate
please check this page's html joblogic.com/hvac-software , i approached similar layout with CSS selectors without html class i.e. ::odd ::even selectors , with flex direction reverse ... so each row will have two items, and via CSS we can have them reversed every second row... , element.style { } .sections>.row:nth-of-type(even)>.container>.row { flex-direction: row-reverse; } .sections>.row>.container>.row { display: flex; align-items: center; flex-wrap: wrap; } if you like this approach i can expand on it in answer below. - Mohsin
@Mohsin, I gave a php/html only answer, but I personally would be interested in a css version, even if its a little off track of what OP was explicitly asking for. I think it would be an interesting alternative for those searching this problem. - Kallmanation
@Mohsin I too would be interested in seeing how this might work. If i understand it would allow me to use the code i currently have with little modification and change the behaviour in CSS. It will also simplify things for anyone using the CMS as they would have less parameters to change to ensure the correct behaviours. - Henry Wood

2 Answers

2
votes

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.

0
votes

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().