Styling custom post loop

Hi there,

how has that loop been created ? As i think you will need to edit its HTML to get a similar style layout.

Hi David, Happy Sunday!

I've popped in a posts loop via hooks - I've got grid container here - but wondering what the column layout should be for gp

The DIV

<div class="row">
<?php // example post query
$the_query = new WP_Query( array(
	'post_type' => 'briefings_statements' , 'guidance' , 'consultations' , 'reports' , 
	'posts_per_page' => 9, // -1 shows all posts but you can set to a specific number
	'post_status' => 'publish', // only show published posts
    'orderby' => 'publish_date', // use the publish date to determine the order
	'order' => 'DESC' // order from highest to lowest, i.e. new to old
	// the query can be used quite flexibly with lots of options, so if you need to be more specific about what to show, this will often be possible here.
	));
			
	while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

	<!-- This is the loop. Any post meeting the query criteria set above will show as determined below -->

	<div class="grid container"><!-- using a bootstrap grid here but you can use another layout method as preferred -->
		<h4><?php the_title(); ?></h4> <!-- show post title -->
		<p class="listing-item-meta-date"><?php echo get_the_date( 'm F, Y' ) ?></p> <!-- show publish date -->
		<a href="<?php the_permalink()?>">Read more</a> <!-- link to post -->
		
	</div>
	<!-- end of loop -->

<?php endwhile; 
wp_reset_postdata(); ?>
</div>

Where did sunday go lol

Can you provide a password so i can see the site ?

What happened to the concept of a weekend? :-)

Open now. I really appreciate your time on this David

:)

Quick question - i notice some 'archives' are constructed with WP Show Posts. Whats stopping you using that in this case ?

Ah, yes. Love WPSP! and excited for the update!

Yes Indeed, I couldn't find a way to show 'All' posts with wpshow posts because of the way the CPTs are constructed. Also, I'm creating a filter search for these.

The new Query Block where working on is going to be great.

For your outer div.row you can use this:

<div class="generate-columns-container"></div>

And for the individual post you could use this wrapper:

<article class="generate-columns tablet-grid-50 mobile-grid-100 grid-parent grid-33">
	<div class="inside-article">
        <!-- your post content HTML -->
	</div>
</article>

The article tag you can swap for a div if you like

Thank you David! Brilliance.

I'm sure the Query Block will be a dream.

Best Wishes Ema

Glad to be of help!