Blog Posts Wordpress Customizing

Question

I am creating my own custom theme from scratch and have run into a bit of trouble. On the blog page, each time a new post is displayed, it is smaller than the last. This is due to me setting the width of the blog post to 33.3%. Also each blogpost gets displayed slightly right of the one previous to it. How can I have each blog post be 33.3% of the content area and be displayed side by side, 3 per row? I am using wordpress functions to call each blog post. I am only displaying the blog posts thumbnail and when you click the thumbnail it takes you to the post. So basically 3 images side by side.

[BONUS]: How could I get text to display horizontally and vertically on hover over each blog post image?

I know this is a lot to ask, but I have been trying to work this out for days. A JS Fiddle or Codepen would be greatly appreciated.

Index.php:

<?php get_header(); ?>
        <div class="blog-posts">
             <?php while (have_posts()) : the_post(); ?>
                 <div id="page-content">   
                     <a href="<?php the_permalink(); ?>">
                         <?php the_post_thumbnail(); ?>
                             <h3><?php the_title(); ?></h3>
                                 </a>   
                                     <?php endwhile; ?>   
                 </div>             
       </div>
<?php get_footer(); ?>

There's no way to run PHP scripts in JSFiddle as this service is mostly client side. — Yaron
the php is only to call the blog posts but if someone just uses a mockup for that blogpost with html that's what I mean. Not actually using php, but just creating a visual with divs. — ERIC

JazZ JazZ · Accepted Answer · 2016-08-04T11:15:13

You should use bootstrap and do something like this :

<?php get_header(); ?>
        <div class="blog-posts">
             <?php while (have_posts()) : the_post(); ?>
                 <div class="col-md-4">
                     <div id="page-content">   
                         <a href="<?php the_permalink(); ?>">
                             <?php the_post_thumbnail(); ?>
                             <h3><?php the_title(); ?></h3>
                         </a>   
                     </div>
                 </div>  
             <?php endwhile; ?>           
       </div>
<?php get_footer(); ?>

Take care to remove the width: 33.33%; CSS rule and close your <div> tags in the loop, not after.

Hope it helps

[EDIT]

See this link for more information about how to use column classes with bootstrap : grid example basic

[EDIT #2]

You could do it without bootstrap but it will be a bit more difficult. You'll have to set the "display" to "inline-block" and set the width of the divs with taking care of the inherit margin of these tags. In this example, I had to set it to 32%. Here is the fiddle

Blog Posts Wordpress Customizing

1 Answers