Rewriting a page driven by custom fields to populate a page dynamically, like posts

Question

I'm relatively new to Wordpress and I received a site theme that was developed by outsourced developers. Due to the inevitable scope creep, i've had to modify pages to work with the new scope.

http://dsi.sva.edu/news-and-events/ This page is populated by custom fields. Since it's a news page, we want the newest article to appear top left in the grid of pictures. Because the backend is set up with custom fields, we would need to manually re-enter all of the custom fields just to get the new article to appear before the others.

Can anybody recommend a way of rewriting the backend to allow for this? Or at least refer me to articles that may help?

Also, as new lines of posts are added to the bottom of the page, they're pushing the page up upon load, causing the header to get pushed up. Is there any way to fix that as well?

Thanks! Thanks! Thanks!

Answer 1

WP_Query is your friend. Combined with featured images, you should be able to do this as a page template with a WP_Query call and loop.

This is the html for the top post at the moment:

<li class="">
  <a href="http://dsi.sva.edu/cheryl-heller-named-in-top-100/">
      <img src="http://dsi.sva.edu/wp-content/uploads/2013/01/public-interest-design.jpg" width="332px">
  </a>
  <span><b><p style:="" color:="" #f15c25;=""><a href="http://dsi.sva.edu/cheryl-heller-named-in-top-100/">Cheryl Heller was named one of the top 100 leaders in Public Interest Design.</a></p></b></span>
</li>

Instead you could do this:

$news = new WP_Query();
if($news->have_posts()){
    while($news->have_posts()){
        $news->the_post();
        ?>

    <li class="<?php post_class(); ?>">
      <a href="<?php echo get_permalink(); ?>">
          <?php the_post_thumbnail('topnewsimage'); ?>
      </a>
      <span><b><p style:="" color:="" #f15c25;=""><a href="<?php echo get_permalink(); ?>"><?php the_title('',''); ?></a></p></b></span>
    </li>

        <?php
    }
}

You can use the css classes that get added by the post_class call to style things in your stylesheet ( remove those inline styles at once )

A final step, see how I put 'topnewsimage' as the size of the post thumbnail? You will need to let WordPress know about this new image size. You will need to add this to the functions.php of your theme and then regenerate your thumbnails using an appropriate plugin:

add_image_size( 'topnewsimage', 332, 248, true );

This will give you the featured images at the correct size without warping and stretching them.

Once you've done this, you can remove all your custom fields, you no longer need them.

You can control this further, including the number of posts, the type of posts, categories etc, by passing arguments into WP_Query. There's an extensive list of options on the WordPress codex entry for WP_Query.