Designing/Laying out the WordPress Loop

[csstree33]

Another newbie asking stupid questions today.

I have watched and read some of Chris’s stuff about the wordpress loop, as well as read up on some other stuff over at wordpress.org. Either I am an idiot (which is possible) but somehow I have not really found something that talks about the layout/design/look of the loop when you spit it out on a page.

For instance, I am working on building a site for a Latvian Youth organization (which I have created from scratch with help from css-tricks!). Click HERE to see the layout of what will be the homepage for the site.

As you can see the main-content area shows a thumbnail, title, author info, and a teaser/excerpt for what should be the four latest posts.

Now, I understand that I can construct a loop to show the latest four posts on my home page, but I seem to be completely lost when I try and consider how to arrange/layout/design the look of those posts that the loop pulls. I understand that I can throw some HTML in there to style up things that are linked to my CSS sheet, but I still am completely stupid when it comes to laying out the posts in this 2 up/2 down sort of way.

Any links, advice, slaps in the face for my stupidity are completely welcome. Thanks!

[cybershot]

the first thing that you need that can be very helpful is to get firebug for firefox. You can right click on an area of the page and choose..Inspect element. WordPress adds classes and Id’s to the page that you can use to style the page. The 2 up 2 down post problem. I would make the posting area just wide enough for 2 posts. Then the third post will have no choice but to go underneath the first post. google the wordpress featured image. There is code to set the featured image to a specific size so that you can use it as the thumbnail. I would then have them write a short excerpt and use wordpress default function for the_excerpt() to spit the intro of the post out on the homepage and then have the loop output the content on the post page.

The most important thing you do need though is firebug. Read through the code to get the classnames and ID’s that wordpress outputs. This will help you a lot.

[Author]

Posts