{"id":3993,"date":"2023-01-29T17:30:18","date_gmt":"2023-01-29T17:30:18","guid":{"rendered":"https:\/\/devclouds.io\/blog\/?p=3993"},"modified":"2023-01-29T17:30:19","modified_gmt":"2023-01-29T17:30:19","slug":"how-to-display-wordpress-posts-in-a-grid-layout","status":"publish","type":"post","link":"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/","title":{"rendered":"How To Display WordPress Posts In a Grid Layout"},"content":{"rendered":"\n

Hi guys Today we\u2019re going to see How To Display WordPress Posts In a Grid Layout. Let\u2019s say you have a website And you want to display posts in a grid layout, which looks more organized. You can do that by reading this article. And anyone who is visiting your website can easily go through your posts and find what they\u2019re looking for.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"plain<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Let\u2019s display our posts in a grid layout. First, let\u2019s see the website, where we want to change the posts layout Here it is. Now if we click on adventure, You can see that, we have the posts, of this category. So now let\u2019s see how to display these posts in a grid layout. so to display the post in a grid layout We\u2019re going to do 4 steps.<\/p>\n\n\n\n

Install \u2018Content Views\u2019 plugin – To Display WordPress Posts In a Grid Layout<\/h3>\n\n\n\n
<\/div>\n\n\n\n
\"Install<\/figure>\n\n\n\n
<\/div>\n\n\n\n

The first step is to install a plugin in WordPress. So to install the plugin, Let\u2019s go to our WordPress dashboard. Now go to plugins, And click add new, Now search for a plugin called \u2018content views\u2019. And you\u2019ll get this plugin, This is the plugin, which is going to help us display our posts in a grid layout. So to install the plugin, Let\u2019s click install and then click \u2018activate\u2019.<\/p>\n\n\n\n

So now we\u2019ve successfully installed the plugin, Once you\u2019ve installed the plugin, In order to show your posts in a grid layout to display in WordPress, You need to first create a layout for your posts.<\/p>\n\n\n\n

Create a layout for your posts<\/h3>\n\n\n\n
<\/div>\n\n\n\n
\"Create<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So let\u2019s go to the second step, Which is to Create a layout for your posts. So to create the layout, Just go here, And click add new. Now here you need to give a name for your layout, I\u2019m going to enter \u2018blogs\u2019.<\/p>\n\n\n\n

Select Categories<\/h4>\n\n\n\n
<\/div>\n\n\n\n
\"Select<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Scroll down, And here you need to select which posts you want to display in a grid layout. Now as we want to display the posts of a particular category. Let\u2019s click here, And then select Taxonomy (categories, Tags…). As soon as you select it, Here it\u2019ll ask you to select the category of posts, for which you want to create the grid layout. So to select it, Just click here, And here you can see all the categories of your posts. Now You can select the category you want. I\u2019m going to select \u2018adventure\u2019.<\/p>\n\n\n\n

Now all the posts under adventure will be displayed in a grid layout to display WordPress posts. Now if you want to display more categories in the grid layout You can click here and select more categories. Okay, So once you\u2019ve selected the categories.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"content<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now to complete creating your layout, Just scroll up, And go to display settings. Now here you need to select the type of layout you want for your posts. As you can see by default grid layout is selected. Next, here you need to select the number of posts you want to display in a row. Let\u2019s say you want to display 3 posts in a row. So just enter 3, Now to see a preview of how your posts will look, Just click update preview. And here you can see how your posts will appear on your site.<\/p>\n\n\n\n

Okay, now to save this layout, Just click save, And now we\u2019ve successfully created our layout, Once you\u2019ve created the layout.<\/p>\n\n\n\n

Add the layout to your website<\/h3>\n\n\n\n

Next, let\u2019s go to the 3rd step, which is to add the this layout to your site.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"shortcode<\/figure>\n\n\n\n
<\/div>\n\n\n\n

In order to add the layout to your site, First, we need to copy this shortcode. So let\u2019s copy this code, once you have copied the code. Now to add the layout to our site We need to create a new page and then paste this code.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Create<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So to create a new page, Go to \u2018pages\u2019 and click add new. Now enter a title for your page, As we\u2019re displaying posts of the adventure category. I\u2019m going to enter \u2018adventure\u2019. Now to add the layout to this page, Just click here And then paste the shortcode which we copied before, Once you\u2019ve done that, To publish this page Let\u2019s click publish.<\/p>\n\n\n\n

And our layout will be added to our site, So to check that, Let\u2019s click \u2018view page\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"grid<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And you can see that we\u2019ve now got our posts in Grid Layout to display in WordPress. So now we\u2019ve successfully added the grid layout to our site.<\/p>\n\n\n\n

Add the page to your menu<\/h4>\n\n\n\n

Once you\u2019ve added the layout, We can go to the final step, Which is to add this page to our menu.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Menus\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So to add the page to our menu, Let\u2019s go to appearance And click menus. Now here you can see the page which we just created, So to add this page to our menu, Just select it And then click \u2018add to menu\u2019. And here you can see our page is added.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"delete<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now if you see here, we have another page with the same name called adventure. This is the page which we already had on our site. So now as we don\u2019t need this page anymore, Let\u2019s remove it from our menu. To remove it, Just click here, then click remove, And the page will be removed. So to save the changes, Let\u2019s click save.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And if we go to our website, And click refresh, You can see that our new page has been added to our menu. Now if we open this menu You can see that, we have got our posts in the grid layout. Okay, so this is To Display WordPress Posts In a Grid Layout.<\/p>\n\n\n\n

Now, If you want to know more about WordPress<\/a>, visit out blog page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Let\u2019s say you have a website And you want to display posts in a grid layout, which looks more organized.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3993","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"yoast_head":"\nHow To Display WordPress Posts In a Grid Layout<\/title>\n<meta name=\"description\" content=\"How To Display WordPress Posts In a Grid Layout | Install \u2018Content Views\u2019 plugin | Create layout for posts | Add layout to website\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Display WordPress Posts In a Grid Layout\" \/>\n<meta property=\"og:description\" content=\"How To Display WordPress Posts In a Grid Layout | Install \u2018Content Views\u2019 plugin | Create layout for posts | Add layout to website\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"The Official DevClouds Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-29T17:30:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-29T17:30:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devclouds.io\/blog\/wp-content\/uploads\/2023\/01\/Screenshot_3-46-1024x498.jpg\" \/>\n<meta name=\"author\" content=\"hammad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"hammad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/\",\"url\":\"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/\",\"name\":\"How To Display WordPress Posts In a Grid Layout\",\"isPartOf\":{\"@id\":\"https:\/\/devclouds.io\/blog\/#website\"},\"datePublished\":\"2023-01-29T17:30:18+00:00\",\"dateModified\":\"2023-01-29T17:30:19+00:00\",\"author\":{\"@id\":\"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d\"},\"description\":\"How To Display WordPress Posts In a Grid Layout | Install \u2018Content Views\u2019 plugin | Create layout for posts | Add layout to website\",\"breadcrumb\":{\"@id\":\"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devclouds.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Display WordPress Posts In a Grid Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devclouds.io\/blog\/#website\",\"url\":\"https:\/\/devclouds.io\/blog\/\",\"name\":\"The Official DevClouds Blogs\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devclouds.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d\",\"name\":\"hammad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devclouds.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g\",\"caption\":\"hammad\"},\"url\":\"https:\/\/devclouds.io\/blog\/author\/hammad\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Display WordPress Posts In a Grid Layout","description":"How To Display WordPress Posts In a Grid Layout | Install \u2018Content Views\u2019 plugin | Create layout for posts | Add layout to website","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/","og_locale":"en_US","og_type":"article","og_title":"How To Display WordPress Posts In a Grid Layout","og_description":"How To Display WordPress Posts In a Grid Layout | Install \u2018Content Views\u2019 plugin | Create layout for posts | Add layout to website","og_url":"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/","og_site_name":"The Official DevClouds Blogs","article_published_time":"2023-01-29T17:30:18+00:00","article_modified_time":"2023-01-29T17:30:19+00:00","og_image":[{"url":"https:\/\/devclouds.io\/blog\/wp-content\/uploads\/2023\/01\/Screenshot_3-46-1024x498.jpg"}],"author":"hammad","twitter_card":"summary_large_image","twitter_misc":{"Written by":"hammad","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/","url":"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/","name":"How To Display WordPress Posts In a Grid Layout","isPartOf":{"@id":"https:\/\/devclouds.io\/blog\/#website"},"datePublished":"2023-01-29T17:30:18+00:00","dateModified":"2023-01-29T17:30:19+00:00","author":{"@id":"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d"},"description":"How To Display WordPress Posts In a Grid Layout | Install \u2018Content Views\u2019 plugin | Create layout for posts | Add layout to website","breadcrumb":{"@id":"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/devclouds.io\/blog\/how-to-display-wordpress-posts-in-a-grid-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devclouds.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Display WordPress Posts In a Grid Layout"}]},{"@type":"WebSite","@id":"https:\/\/devclouds.io\/blog\/#website","url":"https:\/\/devclouds.io\/blog\/","name":"The Official DevClouds Blogs","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devclouds.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d","name":"hammad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devclouds.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g","caption":"hammad"},"url":"https:\/\/devclouds.io\/blog\/author\/hammad\/"}]}},"_links":{"self":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts\/3993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/comments?post=3993"}],"version-history":[{"count":1,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts\/3993\/revisions"}],"predecessor-version":[{"id":4006,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts\/3993\/revisions\/4006"}],"wp:attachment":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/media?parent=3993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/categories?post=3993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/tags?post=3993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}