Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Martin Švec
Martin Švec
8,208 Points
Posted by Martin Švec
Martin Švec
8,208 Points

Post customization

Hello,

I am trying to make a front page, which would display recent posts and I ran into following difficulties:

First, I managed to insert featured image so that the text would be on the right from it, but I have a problem with the text spreading across the whole width of the page. I have the front page template as full width since i don't need any widgets or sidebars on the sides and since I need it for my cover picture for the front page. What I need is that the exceprt of my posts would create ''narrow columns '' so they would not take up the whole width of the page.

The second problem I have is with the posts vertical alignmnet. My featured images have set post thumbnail size , but their alignemnt is yet all messed up. For some reason they are alternately off either few cm to the right or few cm to the left.

Thank you for any advice on these problems.

Jacob Arriola
Jacob Arriola
12,805 Points

Can you post your PHP and CSS on this post so that we can see your code? Thanks!

Martin Švec
Martin Švec
8,208 Points
Martin Švec
Martin Švec
8,208 Points

This is what I have in my home.php

 <article class="post">

            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p><em>
              By <?php the_author(); ?> 
              on <?php echo the_time('l, F jS, Y');?>
              in <?php the_category( ', ' ); ?>.
              <a href="<?php comments_link(); ?>"><?php comments_number(); ?></a>
            </em></p>  


            <?php
              if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
               the_post_thumbnail();       

                  }
            ?>    

              <?php the_excerpt(); ?>

            <hr>

          </article>

In my style.css 

.wp-post-image {
float: left;
padding-right:20px;
padding-bottom:20px;
margin-left: 20px;
}

This code basically just allows me to have the text to the right from the featured image. I don't know what code to use to make the text shorter on each line next to the featured image and how to allign the posts.

Thanks for any help Jacob

2 Answers

Jacob Arriola
Jacob Arriola
12,805 Points

One approach would be to place a width constraint on the .post class. See my CodePen as an example. Give it a try a let me know your thoughts. http://codepen.io/jacobarriola/pen/zryBOE

Regarding the vertical alignment issue with your images, I'm not quite sure I follow the problem your facing. Could you be a bit more specific?

Martin Švec
Martin Švec
8,208 Points
Martin Švec
Martin Švec
8,208 Points

Thanks Jajob! Your code was excatly what I was looking for and could not find anywhere

My second problem was that some of my posts were not corecctly vertically alligned. Meaning that they were not directly one underneath the other .Some of them had no margin from the browser window for instance. I managed to figure the problem out by replacing my have_set post_thumbnail_size tag with add_image_size to my function.php. Don't really understand why it worked though.