Related posts in conditional columns. WordPress
- SOLVED
I have the following script that displays my related posts based on the category.
<?php // begin related posts based on categories
$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 4, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Articles:</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<li>
<div class="relatedcontent">
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>:</h3></div>
<div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail('large', array('class' => 'aligncenter')); ?></a></div>
</li>
<? }
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); // end related posts based on category ?>
This currently displays the 4 most recent related posts based on the same category in a list and uses the large images size. I would like the script to be modified so that:
If there is only one related post it is displayed in size 'large' and in a list as above however
if there are 2-4 related posts they are displayed in size 'medium' and in a 2 column layout.
Please also provide the css for cross browser usage.
Answers (3)
Daniel Yoen answers:
Hello,
try this :
PHP :
<?php
$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories)
{
$category_ids = array();
foreach ($categories as $individual_category)
$category_ids[] = $individual_category->term_id;
$args = array(
'category__in' => $category_ids,
'post__not_in' => array(
$post->ID
),
'posts_per_page' => 4,
'caller_get_posts' => 1
);
$my_query = new wp_query($args);
if ($my_query->have_posts())
{
$thumb = $cond = null;
$count = $my_query->post_count;
switch($count)
{
case 1:
$cond = "one";
$thumb = "large";
break;
case 2:
$cond = "two";
$thumb = "medium";
break;
case 3:
$cond = "three";
$thumb = "medium";
break;
case 4:
$cond = "four";
$thumb = "medium";
break;
}
echo '<div id="related_posts"><h3>Related Articles:</h3><ul>';
while ($my_query->have_posts())
{
$my_query->the_post(); ?>
<li class="<?php echo $cond; ?>">
<div class="relatedcontent">
<h3><a href="<?php the_permalink();?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>:</h3>
</div>
<div class="relatedthumb"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail($thumb, array('class' => 'aligncenter'));?></a></div>
</li>
<?php
}
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query();
?>
CSS :
#related_posts{
position: relative;
width: 100%;
overflow: hidden;
}
#related_posts ul{
position: relative;
width: 125%;
}
#related_posts ul li{
float: left;
}
#related_posts ul li img{
width: 100%;
}
#related_posts ul li.one{
width: 100%;
float: none !important;
}
#related_posts ul li.two{
width: 45%;
margin-right: 10%;
}
#related_posts ul li.three{
width: 32%;
margin-right: 4%;
}
#related_posts ul li.four{
width: 24%;
margin-right: 4%;
}
hope this help :-)
julesphoto comments:
Great solution Daniel!
Arnav Joy answers:
try this , it will display medium thumbnails
<?php // begin related posts based on categories
$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 4, // Number of related posts that will be shown.
'caller_get_posts'=>1
);
$my_query = new wp_query( $args );
$num_posts_found = $my_query->found_posts;
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Articles:</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<li>
<div class="relatedcontent">
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>:</h3></div>
<div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>">
<?php
if( $num_posts_found == 1)
the_post_thumbnail('large', array('class' => 'aligncenter'));
else
the_post_thumbnail('medium', array('class' => 'aligncenter'));
?>
</a>
</div>
</li>
<? }
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); // end related posts based on category ?>
Luis Abarca answers:
Change size of thumbnail and add special class for li's
<?php
// begin related posts based on categories
global $post;
$orig_post = $post;
$categories = get_the_category($post->ID);
if ( $categories ) {
$category_ids = array();
foreach($categories as $individual_category) {
$category_ids[] = $individual_category->term_id;
}
$args = array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page' => 4, // Number of related posts that will be shown.
'caller_get_posts' =>1
);
$my_query = new WP_Query( $args );
if ( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Articles:</h3><ul>';
$thumb_size = 'medium';
if ( $my_query->post_count < 2) {
$thumb_size = 'large'
}
while( $my_query->have_posts() ) {
$my_query->the_post();
?>
<li class="<?php echo $thumb_size ?>">
<div class="relatedcontent">
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>:</h3></div>
<div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail($thumb_size, array('class' => 'aligncenter')); ?></a></div>
</li>
<?php
} // endwhile
echo '</ul></div>';
} // endif $my_query
} // endif $categories
$post = $orig_post;
wp_reset_query();
// end related posts based on category ?>
Luis Abarca comments:
Then add this styles to show 2 columns
li.medium {
float: left;
size: 48%;
}