After a fair few years of using HTML and CSS i've finally decided to give PHP a go and build a Wordpress Theme for myself. I have setup a custom post type with the slug 'work' which is linked to a 'Work' page. I have successfully retrieved the 'posts' inside of my 'Work' post type and also have these linking to the correct post by retrieving the permalink. However, I am struggling to wrap each post thumb in a LI, wrapped in a UL and then reference this in my CSS.
After looking through multiple threads on here I have managed to get to where I am now but am stuck. I have referenced other answers and structured as others have however, when I reference the div class or ID in my stylesheet it is not changing the styling of the post thumbs.
<?php
/*
Template Name: Work
*/
?>
<?php get_header(); ?>
<section>
<?php $loop = new WP_Query( array( 'post_type' => 'work', 'posts_per_page' => '12' ) );?>
<?php if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="work-content">
<ul>
<li> <a href="<?php echo get_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<div class="thumbnail_title">
<h2><?php the_title(); ?></h2>
</div>
<div class="thumbnail_services">
<h4><?php $terms = get_the_terms( $post->ID, 'service' ); ?></h4>
</div>
<?php foreach ( $terms as $term ) {
echo $term->name;
}
?>
</a></li>
</ul>
</div>
<?php endwhile; ?>
<?php endif; ?>
</section>
<?php wp_reset_query(); ?>
<?php get_footer(); ?>
If I understand your question correctly, you just need to add a <ul> between the if and while loop, and then inside the while loop, wrap each item in an <li>.
<?php if ( $loop->have_posts() ) : ?>
<ul class="work">
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<li class="single-work">
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>
I'll note that some people really hate this "template" syntax, and although I was one of them in the past I've really grown to love it. If you do continue to use it, I would generally encourage you to do it line-by-line. So open a <?php, write you code, then close it with ?>, all on the same line. Some people really hate that, however I think the performance issues are moot in modern PHP, and even if there was an issue, in the grand scheme of things for a WordPress site it shouldn't be measurable compared to other things that can be optimized.