As a new developer diving into the world of WordPress, I am aiming to create a sleek and minimalistic grid/card layout for my website. Struggling to achieve this, I seek guidance on how to replicate the design seen in the following link: desired result
Here is the current state of my layout: current look
My attempt involved using Bootstrap and card components but failed because it did not maintain image consistency. Below is the code snippet I have been working on:
<?php
global $post;
get_header();
the_post();
global $user_ID;
?>
<section class="blog-header-container">
<div class="container">
<!-- blog header -->
<div class="row">
<div class="col-md-12 blog-classic-top">
<h2><?php _e("Promotions",ET_DOMAIN) ?></h2>
<form id="search-bar" action="<?php echo home_url() ?>">
<i class="fa fa-search"></i>
<input type="text" name="s" placeholder="<?php _e("Search by city",ET_DOMAIN) ?>">
</form>
</div>
</div>
<!--// blog header -->
</div>
</section>
<section >
<?php query_posts('post_type=promotions&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>
<?php
// Get total posts
$total = $wp_query->post_count;
// Set indicator to 0;
$i = 0;
?>
<?php while( have_posts() ): the_post(); ?>
<?php if ( $i == 0 ) echo '<div class="row container" style="margin-top:25px">'; ?>
<div class="col-sm-3" style="margin:40px">
<p class="text-align:center">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'my-custom-size' ); ?></a>
<?php endif; ?>
</p>
<strong><p><a style="color: black;font-size:12" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p></strong>
<p>Location: <?php echo get_post_meta($post->ID, 'promo_location', true); ?></p>
<p>Expires: <?php echo get_post_meta($post->ID, 'promo_expiration', true); ?></p>
<span class="avatar-author">
Offered By: <a style="color: black;" href="<?php echo get_author_posts_url($post->post_author ); ?>"><?php the_author();?></a>
</span>
</div><!-- col -->
<?php $i++; ?>
<?php
if ( $i == $total ) {
echo '</div>';
} else {
if ( $i % 3 == 0 ) {
echo '</div><div class="row">';
}
}
?>
<?php endwhile; ?>
</div><!-- container -->
</section>
<?php
get_footer();
?>
Your help is greatly appreciated!