How to Create or Display WordPress Post in Thumbnail Grid View Design

When creating WordPress site design, have you ever had the urge to create a grid display of posts or pages? The Grid View layout works great for media centric sites such as our WordPress Gallery, Portfolio or another showcase type site, many premium wordpress site has already a built in functionality for this, however if you’re trying to create same functionality in your wordpress development theme or for your personal site then might this tutorial help you, I’ll show you How to Create or Display WordPress Post in Thumbnail Grid View Design in your WordPress theme.

HTML and PHP code

This PHP and HTML code display thumbnail post under Gallery category


Look at below for all function description.

  • has_post_thumbnail(): Returns a boolean if a post has a Post Thumbnail attached (true) or not (false).
  • the_post_thumbnail(): This display Post Thumbnail as set in post’s edit screen
  • Others are self explanatory, and I also included comments.

So now our PHP code is ready, lets create some CSS classes to make it look elegant.

HTML Output

Here’s an HTML output that looks like.


Here are CSS codes to make our post grid display professional and elegant.

That’s it hope you find this tutorial helpful.

Happy coding ^_^

by Ryan Sutana

  • ysidnem

    Hi I really like your code for post thumbnail grid. I tried to use it but I kept getting an error. It may be because I don’t want to limit it to any specific category, so I tried to remove the cat=4 but I don’t think I did it right because I don’t know php much.

    Also I am trying to put this in a widget. Could you please help me with getting rid of the category limit.

    My widget is 610px wide that is 610px in width.

    I would appreciate any help you can give.

    Thank you.

  • Ryan S

    @ysidnem you can use
    query_posts( ‘posts_per_page=-1’ );

    please post your code error message here, for us to help more on your problem.

  • ysidnem

    Hi this is the error I am getting. I haven’t changed anything in the code but I am using it in a php enabled text widget. I changed the plugin for the text widget and am still getting the same error.

    Parse error: syntax error, unexpected ‘

    • In what line of code you’re getting that error?

      Ryan S

  • Ryan S

    @sidnem review the line that cause the error and fine the “‘” that means that there is a “‘” out there.


    You can remove it or apply another “‘” to escape other variable.

    You can post your code that cause the error directly here.

  • I feel stasiifed after reading that one.

  • Really like, adore, Adore this blog! You say every little thing that Im thinking and more. Youve certainly shed light on a subject that not numerous individuals can argue with. Youre so great at finding what you need to say available in a way thats intelligent and entertaining. Im actually impressed, man. Genuinely impressed.

  • nasir

    thank you for the post. Where is file where the script I must paste? is it Gallery-page.php (new file)?

    • You can add the code anywhere in you theme, the best way to use this code is to add a new page template or in new category file e.g for Gallery category category-gallery.php that’s it.

      Ryan S

  • jtaddep

    Hi. I am trying to use your code. But I get a syntax error because it seems like I cant have a < ?php tag inside a < ?php tag.

    < ?php //If i remove this, the code works.

    < ?php
    query_posts( 'cat=4' );


    • I updated the code, some typos, sorry didn’t update some of the code this due to my old code highlighter before.

  • mint_maison

    I’m having a similar issue to @fd2a659e3a2a87e0b343e940b9e719aa:disqus. I don’t want to limit the grid to any specific category, but if I use the posts_per_page=-1, no posts are displayed. What can I do?

    • I’ve updated the code above to the latest WP code

  • Nguyen

    you can create a video tutorial, please?

    • Hi, I’ll do if I have time and I also updated the code above and hope it’s a bit easy to understand now compare to the old one.

  • Đặng Tuấn

    Hi Ryan,
    Thanks for your sharing. My theme is SilveOrchide. I put your code in the and of style.css but nothing change. Please advice!

    • What you mean it didn’t changed? btw my sample code above display all posts from Gallery category.

  • yavar

    hey could u help me i want to show 2-3lines of the blog and excerpt the summary and if the feautre image is nott there then the blog image

    • use the_excerpt() to display post excerpt and limit/filter excerpt content using “excerpt_length” hook

  • yavar

    and i have a prb if the title is long it goes out of the box