0

I am trying to list my news items in 3 columns in a vertical design: image, date, title. I'm having some trouble calling the featured image. Is there a specific function that would help me with this? Also add CSS style to list them in 3 columns?

Website Example: http://www.enterpriseflorida.com/why-florida/infrastructure/

My Code:

    <?php 
        $posts = get_posts( 'numberposts=2&order=DESC&orderby=post_title&category_name=news' );

        foreach ( $posts as $post ) : start_wp();
    ?>
            <?php toolbox_posted_on(); ?>
            <h4><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title() ; ?></a></h4>
    <?php endforeach; ?>
</div>
<a href="#" class="btn blue">Read All News</a>
  • Please leave feedback to the two answers given. Also, accept one if it solved your issue by clicking on the checkmark next to it – Pieter Goosen May 8 '15 at 11:08
0

Some of the code you have in here is really outdated and has been deprecated for quite some time. I am going to use updated code so that it's more useful to those who will stumble on this thread.

<div class='news_item'>
    <?php 
    $posts = get_posts( 'numberposts=2&order=DESC&orderby=post_title&category_name=news' );

        foreach ( $posts as $post ) : setup_postdata($post);  ?>
            <?php toolbox_posted_on();

            //Check if post has thumbnail 
            if ( has_post_thumbnail() ) :

                //Output img tag automatically
                the_post_thumbnail();

            //Output
            ?>
            <?php endif; ?>
            <h4>
                <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
                    <?php the_title() ; ?></a>
            </h4>
        <?php endforeach;
        wp_reset_postdata(); ?>
</div>
<a href="#" class="btn blue">Read All News</a>

Your CSS

.news_item {
    float: left;
    padding: 5px;
    width: 33.33%;
}
0

The function for showing the featured image is http://codex.wordpress.org/Post_Thumbnails

To show your content in columns best way would be to wrap your content in a html element then float it. eg.

In your template you might have:

<?php 
    $posts = get_posts('numberposts=2&order=DESC&orderby=post_title&category_name=news' );
    foreach ( $posts as $post ) : start_wp();

    echo "<div class='news_item'>";

        toolbox_posted_on();

        if ( has_post_thumbnail() ) {
            the_post_thumbnail();
        } 
?>
        <h4>
            <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
                <?php the_title() ; ?>
            </a>
         </h4>

<?php 
    echo "</div>";    
    endforeach; 
?>

Then you css would be something like:

.news_item {
    float: left;
    padding: 5px;
    width: 33.33%;
}

Updated Answer, with excerpt stuff

To customize the read more function you should read this page: Customizing the Read more

But in summary just use this:

// Replaces the excerpt "more" text by a link
function new_excerpt_more($more) {
       global $post;
    return '<a class="moretag" href="'. get_permalink($post->ID) . '"> Read the full article...</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
  • there is no need for the conditional check of the post thumbnail, unless you want to add extra html around it. – Michael Feb 27 '15 at 10:18
  • Thanks for your updated code. I am also calling some description of the text of the news with limited character with <?php the_excerpt() ;?> but I'm trying to figure out how to add a read more.. Any help would be much appreciated. Thanks – Ray Williams Feb 27 '15 at 14:39
  • See my updated answer. – ngearing Feb 28 '15 at 0:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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