Each user on my website has a profile tab that displays their submitted posts.
To showcase these posts, I utilize the following code:
<?php while ($ultimatemember->shortcodes->loop->have_posts()) { $ultimatemember->shortcodes->loop->the_post(); $post_id = get_the_ID(); ?>
<div class="um-item">
<div class="um-item-link"><i class="um-icon-ios-paper"></i><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<?php if ( has_post_thumbnail( $post_id ) ) {
$image_id = get_post_thumbnail_id( $post_id );
$image_url = wp_get_attachment_image_src( $image_id, 'full', true );
?>
<div class="um-item-img"><a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( $post_id, 'thumbnail' ); ?></a></div>
<?php } ?>
<div class="um-item-meta">
<span><?php echo sprintf(__('%s ago','ultimatemember'), human_time_diff( get_the_time('U'), current_time('timestamp') ) ); ?></span>
<span>in: <?php the_category( ', ' ); ?></span>
<span><?php comments_number( __('no comments','ultimatemember'), __('1 comment','ultimatemember'), __('% comments','ultimatemember') ); ?></span>
</div>
</div>
<?php } ?>
Despite this setup, the display of each post is stacked one below the other in a single column. My goal is to present them in a grid-like format with two or three adjacent columns instead. To experiment with this, I initially attempted the following:
<?php while ($ultimatemember->shortcodes->loop->have_posts()) { $ultimatemember->shortcodes->loop->the_post(); $post_id = get_the_ID(); ?>
<div id = "left" class="um-item">
<div class="um-item-link"><i class="um-icon-ios-paper"></i><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<?php if ( has_post_thumbnail( $post_id ) ) {
$image_id = get_post_thumbnail_id( $post_id );
$image_url = wp_get_attachment_image_src( $image_id, 'full', true );
?>
<div class="um-item-img"><a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( $post_id, 'thumbnail' ); ?></a></div>
<?php } ?>
<div class="um-item-meta">
<span><?php echo sprintf(__('%s ago','ultimatemember'), human_time_diff( get_the_time('U'), current_time('timestamp') ) ); ?></span>
<span>in: <?php the_category( ', ' ); ?></span>
<span><?php comments_number( __('no comments','ultimatemember'), __('1 comment','ultimatemember'), __('% comments','ultimatemember') ); ?></span>
</div>
</div>
<div id = "right" class="um-item">
<div style="height: 10px; class="um-item-link"><i class="um-icon-ios-paper"></i><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<?php if ( has_post_thumbnail( $post_id ) ) {
$image_id = get_post_thumbnail_id( $post_id );
$image_url = wp_get_attachment_image_src( $image_id, 'full', true );
?>
<div class="um-item-img"><a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( $post_id, 'thumbnail' ); ?></a></div>
<?php } ?>
<div class="um-item-meta">
<span><?php echo sprintf(__('%s ago','ultimatemember'), human_time_diff( get_the_time('U'), current_time('timestamp') ) ); ?></span>
<span>in: <?php the_category( ', ' ); ?></span>
<span><?php comments_number( __('no comments','ultimatemember'), __('1 comment','ultimatemember'), __('% comments','ultimatemember') ); ?></span>
</div>
</div>
<?php } ?>
The layout was not successful as everything appeared broken and messy. How can this be enhanced? My aim is to create a structured post grid like this:
Post 1 Post 2 Post 3
Post 4 Post 5 Post 6
Post 7 Post 8 Post 9
Post 10 Post 11 Post 12
Thank you for your valuable assistance.