Articles, Blog

How to Display Your WordPress Posts in a Grid Layout

September 3, 2019


Hey guys welcome to WPBeginner and
thanks for watching. In this video I’m gonna show you how you
can set up your website in a grid layout format. This script style format is
actually perfect for photographers and anyone who wants to show off their
portfolio on their website. To get this on your site just go to your dashboard
head over to plugins add new. In the search box we want to put in
postgrid and hit enter to search for it. This is the one we want so we’ll install and then we’ll activate it. Click activate. Alright now that we’ve installed that we
need to go ahead and create a post grid So we’re gonna go to post grid, new post grid and we’ll fill out the information. So we’ll go through each of the tabs and we want to query the post we want to just do the posts post posttype if you have a
portfolio or particular custom post type then that will show up here and you could
choose that. I’m gonna use post and I only want to show the ones that are
published and we’ll show about 10 per page you can exclude any of the IDs if
you want, and here you can either do it in ascending meaning oldest or descending meaning the most recent posts. We’re gonna do descending and then you want to order by however, random, we’re gonna do by date. Next thing we want to
look at is the layout and this is what it will look like. You can choose from
any of these and you see what it looks like when you change it. For me I’ll choose flat. Same thing with the different skins.
These are how it acts when somebody clicks on it. You see there’s nothing there flip that will flip when somebody hovers
over that. You see this one and how that changes and then just how that looks all
around. I’ll use the flip layout and then under layout settings. This is what you want to change if you
go to your site and things aren’t quite looking right, you want to adjust these. Everything looks good for me. And navigation that’s at the bottom if you want to show the
pagination. Alright now that I have all that done I actually want to click Publish on there. And then I want to go back to the shortcodes, make sure I’m there and we’re gonna grab
this shortcode here and now we want to go and create a page
that we’re going to put this on. And if you want this as your homepage I’ll show you how to do that as well. We’ll do portfolio, add the grid and we’ll hit publish. We’ll see what it looks like in action. And this is what it will look like if you don’t have a featured image already picked out. This is how mine is
showing up. To get that as your home page back into the dashboard and under
Settings>Reading you want your front page to be what we just created which
was the portfolio. Now when I visit my site that’s the main page. Obviously I’ll
want to tweak this to make it look a little bit be tter for what I’m doing but
now you have a grid layout on your site If you like this video click on the like
button and go ahead and leave us a comment there we’d love to hear from you
and subscribe to our YouTube channel to get the latest videos

92 Comments

  • Reply Misy Gamer April 4, 2016 at 3:15 pm

    Nice video.. Now im going to edit my new website,

  • Reply hitlar rajbhandari April 4, 2016 at 7:21 pm

    Liked!

  • Reply Kev Wood April 5, 2016 at 3:07 pm

    Great and very interesting video Thanks.
    Can randomize your pages so visitors can see more?

  • Reply PixemWeb April 17, 2016 at 7:46 pm

    This is why I use WordPress for all my websites. There's a Plugin that meets almost every need. And if there's not then it is easy to find affordable help. Thanks for the video.

  • Reply Galel Lopez April 26, 2016 at 7:37 pm

    Thanks, I really like your videos, are very simple and easy to understand. Galel from Honduras
    I have a question: Can you explain how to create a database in wordpress or if there are some pluging. Thanks.

  • Reply Paco Núñez-Romero Olmo May 2, 2016 at 2:29 pm

    Very interesting video. I have only one question: is it possible to select just one post category or several post categories to show in the post grid? Thanks!

  • Reply Nonglak Inpotong May 3, 2016 at 9:39 am

    Hi Thanks for sharing this great tutorial! May i ask where to add the image for the post? I am new WP user and could not figure out where to insert the featured image. Thanks in advance !

  • Reply Turas May 12, 2016 at 3:34 pm

    So I can't seem to find the dashboard with the Plugins option. Does anybody know why that is?

  • Reply DUCKY2333 May 16, 2016 at 12:11 am

    I am using Sela theme at wordpress.org and I am displaying my post according to categories. May I know if there's anyways to display my post in grid according to categoryies? Thanks.

  • Reply Musings From The Last Frontier June 11, 2016 at 10:48 pm

    Thanks. I wanted to setup my homepage as a grid layout in my Twenty Fourteen theme and couldn't figure out what I was doing wrong with Grid Post.

  • Reply Leading Edge Seminars July 4, 2016 at 2:31 am

    Thank you so much!! Very helpful!!

  • Reply KW Digital Solutions July 14, 2016 at 3:14 pm

    Can you use Post Grid on a Page rather than a Post ?

  • Reply icollectichiro July 25, 2016 at 7:19 pm

    I have a ton of pic's to post and would like to have at least 5 pic's across. Would this plugin allow me to do that?

  • Reply Eva Mohlin August 3, 2016 at 8:30 pm

    Hi
    I need a page with photos of people, with a small description, how do I get that?? Where do you upload the photoes????

  • Reply Elijelah Anyanwu August 14, 2016 at 7:47 am

    My question is that how can I make more than one post gris to be displaying in the homepage.. example… making all my page to display in grid mode on home page….thanks
    i'm using Awaken Them

  • Reply Terrible Beat September 21, 2016 at 1:03 am

    Hi, is there a way to edit CSS so I can apply styling to the post container? If so where do I do this?

  • Reply kbsaxlessons September 28, 2016 at 4:25 pm

    Hello, in the layout preferences, how do I add more posts per row?

  • Reply Hani yoco October 6, 2016 at 12:44 pm

    It was very useful for me, thank you very much

  • Reply pdonoso55 October 21, 2016 at 9:08 pm

    Basic and to the point. Thank you I was looking for just the posts page design and you got it.

  • Reply Colin JohnXon October 22, 2016 at 12:39 pm

    will it also play videos in grid?

  • Reply Helene De Los Reyes November 3, 2016 at 7:42 am

    as of writing this, the plugin is missing from wordpress search plugins page. fuck

  • Reply Ivan Lee November 16, 2016 at 1:27 pm

    Thanks for the video! It is really helpful, but is there anyway that I can make it to show 3 columns instead of 2?

  • Reply yossi ben david December 2, 2016 at 11:03 am

    how can i use this with pages? my goal is to have a pages with all categories in my site showen as grid formated images with a short description text for every category so when th user clicks on the category images he gets to the category page where he can see al posts under that category.
    can this be done with this plugin?
    thanks! 🙂

  • Reply eimaankhan786 Khan December 9, 2016 at 4:49 pm

    thanks this is very good post i like this post. u explained great.

  • Reply Lee Romi December 12, 2016 at 4:03 pm

    Wow! I can't believe how easy it was! Tutor's voice is very friendly! Subscribing now!

  • Reply NextStep NextLevel December 29, 2016 at 4:12 pm

    Hi your video is great and has helped me tremendously(subscribed!). I've been using the post grid plugin since oct 2016 but my last several post stop showing up and I have my settings in query to post ascending by date

  • Reply Ganga 9000 January 10, 2017 at 1:53 pm

    Just plain awesome – portfolio for events companies as all as media companies.

  • Reply Kristen Dikio January 11, 2017 at 5:44 pm

    Thanks for this tutorial! I have a lifestyle blog and am trying to figure out how to create post grids within each of my category pages… is this possible with this particular plugin?

  • Reply ankit Thakur January 24, 2017 at 10:42 am

    Thanks for this video. It is very good for help in word press.

  • Reply Artur Mendes Gonçalves February 7, 2017 at 12:20 am

    Hi, Thanks for the video !

    How to select the category of post I want to put on each grid ?
    I see there is "Taxonomy & Terms (Categories)", but it's written below "No categories found." even though I have categories created..

    Any help ?

  • Reply kailash singh February 17, 2017 at 12:45 am

    thanks
    nice video

  • Reply Mahesh Reddy Soparla February 25, 2017 at 8:09 am

    Hi,
    I am unable to show my post with image.. when create any post.. it is just showing my post title and my post text, though i have added my image..
    Please do the needful help.
    Thanks

  • Reply Đorđe Stanojević March 1, 2017 at 11:59 pm

    Can someone help me, how can I get this post grid to show post title over the image, so i don't have to hover over it with mouse to display the title and the content. I'm doing a news website so you kinda get idea of what i mean, to have a picture with post title over or next to that image.

  • Reply Matt Duncan March 13, 2017 at 1:13 pm

    hey thats front page, but what if you want to use the tool/grids on you front page whilst displaying latest posts??
    can anyone help??

  • Reply Kofi Tatum March 24, 2017 at 3:44 am

    I checked out two other videos before I made it here. Both videos didn't even have any audio, other than some high octane techno. Also, they didn't show how they ended up with some zip file before they went through the steps to use the post grid plug in. 100%. You really helped out here. Thanks so much! @wpbeginner

  • Reply Kofi Tatum March 24, 2017 at 5:01 am

    I followed your instruction for adding the post grid just about to a tee. As far as I could tell. However, when I tried to add the post grid to my homepage, which I had already built, which already included posts, I didn't see any of my images appear that I had already uploaded to individual posts.Effectively, no images related to my earlier posts would show on my main page. Wasn't sure if this might have something to do with the theme I am using. Or due to the fact I had already created the posts before adding the post grid plug in. Can you help with this challenge I am facing? Seems I can the grid fine on the "portfolio" page, but not on my main page. What's going on here? @wpbeginner

  • Reply LensOnWheels May 5, 2017 at 11:58 pm

    I have a few blog posts already created using add posts. I then created a page called Blog. I have linked them. Where do I put the short code so that the desired effect is visible. thanks.

  • Reply Musala Mbala May 11, 2017 at 9:37 am

    merci beaucoup or thanks a lot

  • Reply Totallysam's Channel May 24, 2017 at 5:57 am

    Hi! great vid is there a way to add to a section on the front page.

  • Reply Dragos Z May 28, 2017 at 9:53 pm

    So if you want to use this for a blog, which is also your homepage, do yo still select Front page displays -> A static page -> Blog?!

  • Reply Elvis Adjei May 30, 2017 at 10:10 am

    Mine is not displaying i guess we have to paste some php code somewhere

  • Reply ACM NEWS TV August 6, 2017 at 6:14 pm

    thanks my dear

  • Reply Taufiq Rahman August 28, 2017 at 4:18 am

    do u know wich plugin to show post with big date beside that post?

  • Reply nick pyathakkar September 8, 2017 at 6:32 pm

    Cool You explains so well

  • Reply Lan Anh Nguyen September 20, 2017 at 8:16 am

    hi, thank you for your video. I created a grid but if I want when I click on each part of grid will take us go to this post. How can we deal with the idea?

  • Reply Rachel Quintero October 1, 2017 at 1:07 am

    this is the second grid ive tried. The posts arfe on the page but the grid itself isnt there.

  • Reply Sarah Jack October 8, 2017 at 7:37 am

    Thank you for the video, what theme should I use?

  • Reply Erik Bush October 20, 2017 at 3:11 am

    This is a great plugin but…. it only gives you two rows/columns 🙁 I was hoping I could choose the layout like 3 x 3 or 6×6 etc

  • Reply Priya Jaisinghani Chimnani October 24, 2017 at 10:03 am

    Thank you so much! You explained it in a very easy and quick way.

  • Reply Nikola Sirovica October 27, 2017 at 6:49 pm

    how do you get rid of that side bar on the right side? I want the grid lay out to cover the whole screen but it seems like all the blog formats have that side bar on the right as a default

  • Reply Virtual Rc November 22, 2017 at 5:53 pm

    great plugin and great support

  • Reply Crazy Jerks December 22, 2017 at 2:01 am

    2 questions.
    1. Can I do this to display categories?
    2. Can I use a static image instead of the posts featured image?

  • Reply Chengeer Lee January 2, 2018 at 2:30 am

    Thank you! This was amazing. Helped me a lot with chengeerlee.com
    Cheers!

  • Reply Roman Labuš January 4, 2018 at 1:36 pm

    Amazing tutorials, keep up. GJ.

  • Reply Eric Quick January 13, 2018 at 9:11 pm

    Now show how to do this without using a Plugin?

  • Reply Mursidin Yunus January 20, 2018 at 6:59 am

    good tutorial, very helpfully.

  • Reply Krlos Chavarria Sauceda January 28, 2018 at 9:15 pm

    hello!; excellent video, but I have one issue, look. I build a page template and I want to show a grid with all the pages who has the actual template I build, so.. this way only will show the pages who has that page template, there is a way to do that with this plugin?. thanks!:

  • Reply UsaPlanB Forum February 4, 2018 at 10:25 pm

    Does the post grid work to reduce the existing posts? because it didn't work for me.

  • Reply Ally April 7, 2018 at 8:18 am

    Thanks! How do I change the fonts?

  • Reply Koimonster khaos April 11, 2018 at 4:31 am

    Can you add gifs?

  • Reply Zambo April 17, 2018 at 3:55 pm

    plugin. Noooooooo!

  • Reply Successful Life May 13, 2018 at 8:28 pm

    Perfect 🙂
    Thank you so much for this video

  • Reply QAMAR July 31, 2018 at 4:32 am

    I don't see the Appearance menu in my WordPress. That is my problem.

  • Reply Shapath Chowdhury August 2, 2018 at 7:11 am

    Hello. I am trying to add my trip packages as homepage but I cannot find the short code option. I am using WP Travel as plugin. Can you please help me regarding this issue?

  • Reply Lubys A August 26, 2018 at 5:48 am

    Hello, how can we use it in our custom category ,archive and single php pages? Shouldn't add get_query posts and instead use the PHP code generated by the Grid plugin?

  • Reply TecWeb Games September 1, 2018 at 9:58 pm

    como adiciono isso na homepage?

  • Reply RVing Live The Dream September 10, 2018 at 2:03 pm

    Nice video. I have been wanting to add this to my site but did not know what is was called. Thank you!

  • Reply Donnie Nongtdu September 10, 2018 at 8:45 pm

    How to add a search box in this particular page where the search results shows only the thumbnail and the title of a post not the entire post.(detailed post )

  • Reply Lubys A September 13, 2018 at 7:15 pm

    Doesn´t that create Duplicate Content? see We already have Posts in the Blog archive Page
    or maybe we should not publish the blog page and no index the archive page for blog?
    Please explain.
    Thanks again for your Videos

  • Reply lile zuka September 17, 2018 at 12:16 pm

    Great!!

  • Reply Erlinda Budoyan September 26, 2018 at 3:26 am

    Thanks, great. Now I know I want WordPress.org.

  • Reply Jacqueline Blankenstein October 2, 2018 at 9:46 am

    Does this also work for other pages like DIY or only posts?

  • Reply RishaRea October 16, 2018 at 1:32 pm

    Just wanna ask if how to make image on each box same size..?? Since some of my image get cuts..Thanks..

  • Reply Ramnicianu Anton November 10, 2018 at 5:34 am

    Thank you

  • Reply Sanjay Sahani December 1, 2018 at 6:22 am

    my pages mixed in post grid, how can i separate them with page

  • Reply Milica Stanojevic December 21, 2018 at 8:21 pm

    Is there a way to apply post grid on your blog recent posts on homepage? Whenever I do that I lose all the widgets from the side, header slider etc. and I want them to stay intact and just to apply the grid on recent posts. Any ideas? 😊

  • Reply Tanya January 3, 2019 at 9:49 am

    Why do all the adverts for post grid show 3 columns but two columns is the only option? I like post grid because you can tweak the grid sizes to make them all even and aligned but I would prefer to have 3 columns. Any suggestions?

  • Reply Alicia Jones January 8, 2019 at 12:08 am

    Thank you so much. I didn't have a front page option so I went to edit my homepage I copied and pasted the code there. It works great!

  • Reply David Hovsepian January 11, 2019 at 5:41 am

    Doesn't allow txonomy or categories? Wtf?

  • Reply Jonky Dawson February 20, 2019 at 3:32 am

    Thank you for not adding any obnoxious music, very well done, thank you!

  • Reply Oltjan Senja February 21, 2019 at 9:12 am

    i did the layout but i want to put post by myself because wordpress took it automatically all events that i have added to website,how to do ?

  • Reply Scott Allen March 1, 2019 at 8:32 pm

    Apparently plug ins only work if you upgrade to the business plan.

  • Reply Wolfmaan March 21, 2019 at 3:43 pm

    This is just what I needed. Thank you!

  • Reply Annie Chakraborty March 31, 2019 at 6:52 am

    What about for those who don't have a Premium website?

  • Reply Tino Gonsalves March 31, 2019 at 1:30 pm

    'Bohut Shukriya' that's many thanks in Hindi. I was trying to figure out how to pin my posts on the front page and knew I would find the answer here. Cheers!

  • Reply Sam A April 29, 2019 at 10:48 pm

    This is what I've been looking for, thanks! Liked your video.

  • Reply Zachary May 17, 2019 at 6:08 pm

    How do you add links to each individual block? I want to be able to click on them so it will take me to a new page with a full view of the image.

  • Reply Ivana Gložić June 13, 2019 at 4:51 am

    Great, thanks! 🙂

  • Reply henok-micrometre micrometre June 22, 2019 at 12:32 pm

    useless

  • Reply eBook store June 22, 2019 at 8:00 pm

    You Are An Awesome, short and sweet in this short video you covered a very big thing, THANK YOU SO MUCH!

  • Reply Bettye's Cooking Channel June 29, 2019 at 1:54 pm

    Great tutorial. Thanks for sharing.

  • Reply Health Glows August 31, 2019 at 2:15 pm

    Thank you for this great tutorial! 😀

  • Leave a Reply