0

I want to move the title of the posts under the thumbnail of the post while keeping all 3 of the posts on the same row. This seems like a fairly easy thing to do, but I can't figure out the correct coding. If anyone could help I would really appreciate it.

image of what it looks like (I want the post title below the image thumbnail) enter image description here

related-posts.php

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<div class="related-posts">
    <?php $orig_post = $post;
    global $post;
    $categories = get_the_category($post->ID);
    if ($categories) {
        $category_ids = array();
        foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args=array(
            'category__in' => $category_ids,
            'post__not_in' => array($post->ID),
            'posts_per_page'=> 3, // Number of related posts that will be shown.
            'caller_get_posts'=>1
        );
        $my_query = new wp_query( $args );
        if( $my_query->have_posts() ) {
            echo '<div id="related-posts"><h3 class="related-posts-title">Related Posts</h3><ul>';
            while( $my_query->have_posts() ) {
                $my_query->the_post();?>
                <div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><span class="related-posts-image"><?php the_post_thumbnail(); ?></span></a></div>
                <div class="relatedcontent">
                    <h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
                </div>


                <?
            }
            echo '</ul></div>';
        }
    }
    $post = $orig_post;
    wp_reset_query(); ?>
</div>

css

.related-posts-title {
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
}
.related-posts-image img {
        height:259px;
    width:400px;

}
.relatedthumb {
    display: inline-block;
}
.relatedcontent {
display: inline-block;
}

closed as off-topic by Michael, cjbj, Dave Romsey, Howdy_McGee Jan 16 '17 at 17:21

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

0

Your problem is not WP specific, but for achieving your desired layout just change .relatedcontent style to :

.relatedcontent {
    display: block;
}
0

You need to warp .relatedthumb and .relatedcontent inside a li container and float it, than remove the display: inline-block; from the two class.

html:

 <li>
        <div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><span class="related-posts-image"><?php the_post_thumbnail(); ?></span></a></div>
                <div class="relatedcontent">
                    <h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
                </div>
      </li>

css:

ul {
  display: inline;
}

ul li {
  float: left;
  list-style: none;
  padding: 0 2px;
}

.relatedthumb {
  display: block;
}

.relatedcontent {
  display: block;
}

Demo here: https://jsfiddle.net/MatteoMnz/ndq8d2ud/

Not the answer you're looking for? Browse other questions tagged or ask your own question.