If you need to add a grid display of posts with thumbnails in wordpress, you will need to edit your theme and add some codes. First of all you have to make sure that you actual theme support the posts thumbnails, you have also to be sure about your WordPress images size to use and how many columns you need to display.

Grid Display With Thumbnails

WordPress Grid Display With Posts Thumbnails

First, we will setup the loop queries :

[php]

[/php>

What you will have to edit is the posts_per_page to suit your needs. You can also add other query parameters if you so desire.

Now we will start to make our Grid Display, The counter 1 is the left grid. We simply go in and start a div with a custom css class “griditemleft”. Inside it we added the post thumbnail and the post title. In this example the thumbnails are calling an additional image size. You will have to replace the size-name with your own size that you created.

[php]


[/php]

Now the final code looks like this :

[php]


[/php]

We will call the Output of this Code like this :

[css]

Post Image

Post Title

Post Image

Post Title

[/css]

Then we add the Stylesheet :

[css]
#gridcontainer{margin: 20px 0; width: 100%; }
#gridcontainer h2 a{color: #77787a; font-size: 13px;}
#gridcontainer .griditemleft{float: left; width: 278px; margin: 0 40px 40px 0;}
#gridcontainer .griditemright{float: left; width: 278px;}
#gridcontainer .postimage{margin: 0 0 10px 0;}
[/css]

That’s all! Goodluck

Republished by Imagincreation