WordPress.org

Forums

ormatting post title placement inside of the loop (3 posts)

  1. mlt34
    Member
    Posted 10 months ago #

    I'm trying to organize a display of posts in the category 'garage' on one page of my site.

    The top half of the page displays permanent content, and the bottom half of the page is supposed to display a list of posts in the 'garage' category.

    I want them to display in a sort of grid with the title directly below the thumbnail. So far the grid and thumbnails are working, but the title is displaying to the right of the thumbnail and not directly under the thumbnail.

    I'd link to the site but its currently not publicly visible since I'm still building it.

    here's my code:

    <?php $my_query = new WP_Query('post_type=post&category_name=Garage');
    					while ($my_query->have_posts()) : $my_query->the_post(); ?>
                        	<a href="<?php the_permalink();?>"><?php the_post_thumbnail('thumbnail');?><?php the_title();?></a>
    <?php endwhile; ?>

    Is there a change I can make in the loop code to get the title to display directly underneath the thumbnail. I've tried using but it ruins the grid effect by putting each thumbnail on a new line. Perhaps I just didn't place it correctly. Thanks in advance for the help!

    [moderator note: several duplicate topics removed - please start only one topic per problem - http://codex.wordpress.org/Forum_Welcome#Where_To_Post ]

  2. alchymyth
    Forum Moderator
    Posted 10 months ago #

    I'd link to the site but its currently not publicly visible since I'm still building it.

    unfortunately, formattng help mostly needs to have access to the live site tobe able to use a browser inspection tool to check the CSS.

    try working with one of the browser inspection tools...

    you might need to add some html tags with CSS classes to wrap the image, and/or title or both to make formatting more specific.

  3. vtxyzzy
    Member
    Posted 10 months ago #

    Try this for your loop:

    <?php
    $my_query = new WP_Query('post_type=post&category_name=bcategory');
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
       <div class="one-post">
          <a href="<?php the_permalink();?>"><?php the_post_thumbnail('thumbnail');?><?php the_title();?></a>
       </div>
    <?php endwhile; ?>

    If your theme provides a way to enter custom CSS, use that to add the CSS below. Otherwise, you should create a Child theme or use a CSS plugin such as Simple Custom CSS to make your changes. If you do not, all of your changes will be lost if you update your theme.

    You can test this by adding it to the end of your theme's style.css, but to make it permanent, you should do as suggested above:

    .one-post a img { display: block; }

Reply

You must log in to post.

About this Topic