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.

Leave A Reply

Your email address will not be published.