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!

  • Do you mean you are not showing posts, just data from custom fields? Presumably in an array? You can unshift data to that array, so it will be inserted on the front. Or are you using a custom field to order the custom posts that are being displayed.
    – Derk-Jan
    Jan 16, 2013 at 19:36
  • Hi Derk, the page is using custom fields to order the elements within the page. So currently it looks like: custom fields: image, image, image, text, text, text, link. VERY tedious to update.
    – MMSI
    Jan 16, 2013 at 22:44

1 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">
  <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>

Instead you could do this:

$news = new WP_Query();

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


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.

  • Thanks so much Tom, this gives me a ton of reading on WP-Query to follow up on. I'm not sure if your code covers for this (and perhaps I wasn't clear), the new posts should bump the previous post and the posts before that to the right and/or down to the next row (if a post is the last item in a row). In effect moving steadily down the page, like Space Invaders. :)
    – MMSI
    Jan 16, 2013 at 23:45
  • It will always list the posts, the list is generated on page load. Or are you referring to AJAX updates? If so that's not a trivial thing, and would require its own question
    – Tom J Nowell
    Jan 17, 2013 at 0:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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