I am working on a services cpt and would like to display a list of other posts, within the same cpt on the single post.
The code I am using is:
<?php
$loop = new WP_Query( array(
'post_type' => 'services',
'posts_per_page' => 6
));
?>
<ul>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<h4><?php the_title(); ?></h4>
</a>
</li>
<?php endwhile; wp_reset_query(); ?>
</ul>
Now my question is, is there a way to add a class to the current post? The intention being to style it different to the other posts in the list.
This is very easy you can always add the class in before and after
Read this documentation https://developer.wordpress.org/reference/functions/the_title/
<?php the_title( '<div class="wrapper">', '</div>' ); ?>
Yes First get current post id and match that id with loop id and if it is same than just add class whereever you want just use below code
<?php
$current_post_id = get_the_ID();
$loop = new WP_Query( array(
'post_type' => 'services',
'posts_per_page' => 6, ));
?>
<ul>
<?php
while ( $loop->have_posts() ) : $loop->the_post();
$class = ($current_post_id == $loop->ID) ? "current-post" : '';
?>
<li class="<?php echo $class; ?>">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<h4><?php the_title(); ?></h4>
</a>
</li>
<?php endwhile; wp_reset_query(); ?>
</ul>
It will add class "current-post" to only current post and in other posts it will add nothing.
style using
<style>
li{
/*all posts*/
}
li.current-post{
/*specific for the current post*/
}
</style>
Using function
<?php post_class(); ?>
E.g:
<div <?php post_class(); ?>>
<?php
$loop = new WP_Query( array(
'post_type' => 'services',
'posts_per_page' => 6
));
?>
<ul>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li <?php post_class(); ?>>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<h4><?php the_title(); ?></h4>
</a>
</li>
<?php endwhile; wp_reset_query(); ?>
</ul>