{"id":2626,"date":"2021-01-08T14:17:47","date_gmt":"2021-01-08T14:17:47","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2626"},"modified":"2023-02-28T05:50:47","modified_gmt":"2023-02-28T05:50:47","slug":"how-to-display-your-wordpress-posts-in-a-grid-layout","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/how-to-display-your-wordpress-posts-in-a-grid-layout\/","title":{"rendered":"How to Display Your WordPress Posts in a Grid Layout"},"content":{"rendered":"<p>Do you want to display WordPress posts in a grid layout?<\/p>\n<p>A grid layout gives you more flexibility when displaying your posts in WordPress. This can be helpful when creating custom pages.<\/p>\n<p>In this article, we\u2019ll show you how to easily display your WordPress posts in a grid layout anywhere on your site.<\/p>\n<h4>When Do You Need a Grid Layout for WordPress?<\/h4>\n<p>Every\u00a0WordPress theme\u00a0supports the traditional vertical layout of blog posts, and this works well for most kinds of websites. However, this layout can take up a lot of space, especially if you have a lot of posts.<\/p>\n<p>If you\u2019re creating a\u00a0custom homepage\u00a0for your site, then you may want to use the grid layout to display your recent posts.<\/p>\n<p>This will give you more space to add other elements to your home page.<\/p>\n<p>Plus, your post grid will highlight your\u00a0featured images, so it\u2019s visually appealing and clickable.\u00a0You can also use the post grid to show off your creative portfolio and other types of custom content.<\/p>\n<p>Many\u00a0magazine themes\u00a0and\u00a0photography themes\u00a0already use the grid-based layout to display posts. However, if your theme doesn\u2019t support this functionality, then you\u2019ll need to add it.<\/p>\n<p>With that said, let\u2019s show you how to display your WordPress posts in a grid layout. Simply use the quick links below to jump straight to the method you want to use.<\/p>\n<ul>\n<li>Create a grid layout with WordPress block editor<\/li>\n<li>Create a grid layout with Post Grid plugin<\/li>\n<li>Create a grid layout using SeedProd page builder<\/li>\n<li>Create a grid layout by adding code to WordPress<\/li>\n<\/ul>\n<h4 id=\"create-grid-layout-wordpress-block-editor\">Method 1. Create a WordPress Post Grid Layout with Block Editor<\/h4>\n<p>This method lets you simply display your posts and thumbnails in a post grid layout using the\u00a0WordPress block editor. There\u2019s a built-in post grid block that lets you create your own grid.<\/p>\n<p>To do this, open up the page you want to edit, then click the \u2018Plus\u2019 add block button and search for \u2018Query Loop\u2019, then click the block to add it.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119142 lazyloaded\" title=\"Add query loop block\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/add-query-loop-block.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/add-query-loop-block.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/add-query-loop-block-300x101.png 300w\" alt=\"Add query loop block\" width=\"680\" height=\"229\" data-ll-status=\"loaded\" \/><\/figure>\n<p>This block adds your post loop to your page.<\/p>\n<p>Then, click the \u2018Start Blank\u2019 option at the top of the block to create a post grid.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119143 lazyloaded\" title=\"Click start blank option\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/click-start-blank.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/click-start-blank.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/click-start-blank-300x85.png 300w\" alt=\"Click start blank option\" width=\"680\" height=\"192\" data-ll-status=\"loaded\" \/><\/figure>\n<p>This gives a few different choices depending on the type of information you want to display with your post grid.<\/p>\n<p>We\u2019ll select the \u2018Image, Date, &amp; Title\u2019 option, but you can choose whatever you like.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119144 lazyloaded\" title=\"Select the type of query loop\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/select-type-of-query-loop.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/select-type-of-query-loop.png 680w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/select-type-of-query-loop-300x83.png 300w\" alt=\"Select the type of query loop\" width=\"680\" height=\"187\" data-ll-status=\"loaded\" \/><\/figure>\n<p>After that, hover over the image and select the \u2018Grid View\u2019 option.<\/p>\n<p>This turns your list into a post grid.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119145 lazyloaded\" title=\"Click on grid view option\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/click-grid-view.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/click-grid-view.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/click-grid-view-300x78.png 300w\" alt=\"Click on grid view option\" width=\"680\" height=\"176\" data-ll-status=\"loaded\" \/><\/figure>\n<p>Next, you can customize the information you want to display.<\/p>\n<p>First, we\u2019re going to delete the pagination at the bottom of the block. To do this, simply click on it, and click the \u2018Three Dots\u2019 options menu.<\/p>\n<p>Then, click on \u2018Remove Pagination\u2019.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119146 lazyloaded\" title=\"Click on delete pagination\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/remove-pagination.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/remove-pagination.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/remove-pagination-300x81.png 300w\" alt=\"Click on delete pagination\" width=\"680\" height=\"183\" data-ll-status=\"loaded\" \/><\/figure>\n<p>This will automatically remove the element from the block.<\/p>\n<p>You can delete the dates from the posts the same way or leave more post information for your visitors.<\/p>\n<p>Next, we\u2019ll add links to both the post thumbnail and post title.<\/p>\n<p>Simply click on your post thumbnail and turn on the \u2018Link to Post\u2019 toggle in the right-hand options panel.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119137 lazyloaded\" title=\"Turn on link to post toggle\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/make-image-link.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/make-image-link.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/make-image-link-300x98.png 300w\" alt=\"Turn on link to post toggle\" width=\"680\" height=\"221\" data-ll-status=\"loaded\" \/><\/figure>\n<p>Then, do the same thing for your post title.<\/p>\n<p>Once you\u2019re finished, click the \u2018Update\u2019 or \u2018Publish\u2019 button to make your post grid live.<\/p>\n<p>Now, you can visit your\u00a0WordPress website\u00a0to see your new WordPress post grid.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119136 lazyloaded\" title=\"Block editor post grid example\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/block-editor-post-grid-example.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/block-editor-post-grid-example.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/block-editor-post-grid-example-300x83.png 300w\" alt=\"Block editor post grid example\" width=\"680\" height=\"187\" data-ll-status=\"loaded\" \/><\/figure>\n<p>You can add this block to any page or post. If you\u2019d like to use this as your blog archive page, then you can see our guide on\u00a0how to create a separate page for blog posts in WordPress.<\/p>\n<h4 id=\"create-grid-layout-post-grid-plugin\">Method 2. Create a WordPress Post Grid Layout With the Post Grid Plugin<\/h4>\n<p>This method offers a simple way to add a customizable post grid that you can add anywhere on your website.<\/p>\n<p>First thing you need to do is install and activate the\u00a0<a title=\"Post Grid\" href=\"https:\/\/wordpress.org\/plugins\/post-grid\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Post Grid<\/a>\u00a0plugin. For more details, see our guide on\u00a0how to install a WordPress plugin.<\/p>\n<p>Upon activation, you need to visit\u00a0<strong>Post Grid \u00bb Add New<\/strong>\u00a0to create your first post grid.<\/p>\n<p>Then, give your post grid a title. This won\u2019t appear anywhere on your page it\u2019s just to help you remember.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119122 lazyloaded\" title=\"Post Grid plugin create new layout\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/post-grid-plugin-create-new.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/post-grid-plugin-create-new.png 680w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/post-grid-plugin-create-new-300x70.png 300w\" alt=\"Post Grid plugin create new layout\" width=\"680\" height=\"159\" data-ll-status=\"loaded\" \/><\/figure>\n<p>Below this, you\u2019ll find the post grid settings divided into different sections with multiple tabs.<\/p>\n<p>First, you need to click on the \u2018Query Post\u2019 tab. This is where you\u2019ll define the\u00a0post types\u00a0that you want to display in the \u2018Post types\u2019 box.<\/p>\n<p>By default, it will only display posts, but you can add pages and even\u00a0custom post types.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119123 lazyloaded\" title=\"Set post query type settings\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/post-query-type-settings.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/post-query-type-settings.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/post-query-type-settings-300x73.png 300w\" alt=\"Set post query type settings\" width=\"680\" height=\"166\" data-ll-status=\"loaded\" \/><\/figure>\n<p>After that, you need to click on the \u2018Layouts\u2019 tab.<\/p>\n<p>Then, click the \u2018Create layout\u2019 button. This will open in a new window.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119124 lazyloaded\" title=\"Click create layout button\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/create-layout.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/create-layout.png 680w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/create-layout-300x76.png 300w\" alt=\"Click create layout button\" width=\"680\" height=\"172\" data-ll-status=\"loaded\" \/><\/figure>\n<p>You need to name your layout. Then, click on the \u2018General\u2019 option, and it will open up a list of tags.<\/p>\n<p>These tags are the information that will display in your post grid.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119125 lazyloaded\" title=\"Layout editor screen\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/layout-editor-screen.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/layout-editor-screen.png 680w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/layout-editor-screen-300x86.png 300w\" alt=\"Layout editor screen\" width=\"680\" height=\"196\" data-ll-status=\"loaded\" \/><\/figure>\n<p>We\u2019ll select the \u2018Thumbnail with link\u2019 option and the \u2018Post title with link\u2019 option.<\/p>\n<p>Then, click \u2018Publish\u2019 or \u2018Update\u2019 to save your layout.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119126 lazyloaded\" title=\"Choose tags and save layout\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/publish-save-layout.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/publish-save-layout.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/publish-save-layout-300x80.png 300w\" alt=\"Choose tags and save layout\" width=\"680\" height=\"182\" data-ll-status=\"loaded\" \/><\/figure>\n<p>Now, go back to the original post grid editor in the previous tab, and there will be a new layout option available that you can select.<\/p>\n<p>Simply click on the new layout in the \u2018Item layouts\u2019 section at the bottom of the screen.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119134 lazyloaded\" title=\"Click new item layout\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/click-new-item-layout.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/click-new-item-layout.png 680w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/click-new-item-layout-300x82.png 300w\" alt=\"Click new item layout\" width=\"680\" height=\"185\" data-ll-status=\"loaded\" \/><\/figure>\n<p>Next, click the \u2018Item style\u2019 tab. Here you can set the size of your grid.<\/p>\n<p>The default settings should work for most sites, but if not, then you can change them here.<\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119128 lazyloaded\" title=\"Change item style size\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/change-item-style-size-1024x229.png\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/change-item-style-size-1024x229.png 1024w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/change-item-style-size-300x67.png 300w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/change-item-style-size-768x172.png 768w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/change-item-style-size-1536x344.png 1536w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/change-item-style-size.png 1724w\" alt=\"Change item style size\" width=\"1024\" height=\"229\" data-ll-status=\"loaded\" \/><\/figure>\n<p>Once you\u2019re finished, click the \u2018Publish\u2019 button at the top of the page, and your grid will be ready to add to your\u00a0WordPress blog.<\/p>\n<p>Now, you need to click the \u2018Shortcode\u2019 tab and then copy the shortcode in the \u2018Post Grid Shortcode\u2019 box.<\/p>\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119129 lazyloaded\" title=\"Copy post grid shortcode\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/copy-post-grid-shortcode-1024x233.png\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/copy-post-grid-shortcode-1024x233.png 1024w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/copy-post-grid-shortcode-300x68.png 300w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/copy-post-grid-shortcode-768x175.png 768w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/copy-post-grid-shortcode-1536x349.png 1536w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/copy-post-grid-shortcode.png 1724w\" alt=\"Copy post grid shortcode\" width=\"1024\" height=\"233\" data-ll-status=\"loaded\" \/><\/figure>\n<p>After that, open up the page where you want to display your post list and click the \u2018Plus\u2019 add block button.<\/p>\n<p>Then, search for \u2018Shortcode\u2019 and select the \u2018Shortcode\u2019 block.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119130 lazyloaded\" title=\"Add shortcode block\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/add-shortcode-block.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/add-shortcode-block.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/add-shortcode-block-300x95.png 300w\" alt=\"Add shortcode block\" width=\"680\" height=\"216\" data-ll-status=\"loaded\" \/><\/figure>\n<p>Next, paste the shortcode you copied earlier into the box.<\/p>\n<p>Then, click the \u2018Update\u2019 or \u2018Publish\u2019 button.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119131 lazyloaded\" title=\"Paste shortcode and save\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/paste-shortcode-save.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/paste-shortcode-save.png 680w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/paste-shortcode-save-300x100.png 300w\" alt=\"Paste shortcode and save\" width=\"680\" height=\"226\" data-ll-status=\"loaded\" \/><\/figure>\n<p>Now, you can view your page to see your WordPress post grid layout live.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119132 lazyloaded\" title=\"Post Grid plugin example\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/post-grid-plugin-example.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/post-grid-plugin-example.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/post-grid-plugin-example-300x83.png 300w\" alt=\"Post Grid plugin example\" width=\"680\" height=\"187\" data-ll-status=\"loaded\" \/><\/figure>\n<h4 id=\"create-grid-layout-seedprod\">Method 3. Create a WordPress Post Grid Layout With the SeedProd Page Builder Plugin<\/h4>\n<p>Another way to create a post grid layout is using the\u00a0<a title=\"SeedProd - Best Drag &amp; Drop WordPress Website Builder\" href=\"https:\/\/www.seedprod.com\/\" target=\"_blank\" rel=\"noopener\">SeedProd<\/a>\u00a0page builder plugin. It\u2019s the\u00a0best drag and drop WordPress page builder\u00a0in the market used by over 1 million websites.<\/p>\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.seedprod.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119114 lazyloaded\" title=\"SeedProd\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/seedprod-plugin.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/seedprod-plugin.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/seedprod-plugin-300x129.png 300w\" alt=\"SeedProd\" width=\"680\" height=\"293\" data-ll-status=\"loaded\" \/><\/a><\/figure>\n<p>SeedProd helps you easily create custom pages and even completely\u00a0custom WordPress themes\u00a0without writing any code. You can use the plugin to create any kind of page you want, like\u00a0404 pages,\u00a0coming soon pages,\u00a0landing pages, and more.<\/p>\n<p>To learn more, see our guide on\u00a0how to create a custom page in WordPress.<\/p>\n<p>In the SeedProd builder, as you\u2019re customizing your page, simply click the plus \u2018Add Section\u2019 button anywhere on the page.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119115 lazyloaded\" title=\"Click to add a new section\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/click-to-add-section.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/click-to-add-section.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/click-to-add-section-300x107.png 300w\" alt=\"Click to add a new section\" width=\"680\" height=\"243\" data-ll-status=\"loaded\" \/><\/figure>\n<p>This will bring up an option to add a new block.<\/p>\n<p>Next, drag the \u2018Posts\u2019 block over to your page, and it will automatically add a list of posts to your page.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119150 lazyloaded\" title=\"Drag over blog post block\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/drag-blog-post-block.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/drag-blog-post-block.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/drag-blog-post-block-300x93.png 300w\" alt=\"Drag over blog post block\" width=\"680\" height=\"211\" data-ll-status=\"loaded\" \/><\/figure>\n<p>Now, you can customize this block with the left-hand options panel.<\/p>\n<p>First, scroll down to the \u2018Layout\u2019 section. Here you can set the number of columns for your blog post grid and turn on the \u2018Show Feature Image\u2019 and \u2018Show Title\u2019 toggles.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119117 lazyloaded\" title=\"Set number of columns, title, and image\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/set-columns-title-image.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/set-columns-title-image.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/set-columns-title-image-300x103.png 300w\" alt=\"Set number of columns, title, and image\" width=\"680\" height=\"234\" data-ll-status=\"loaded\" \/><\/figure>\n<p>Next, scroll down to the \u2018Show Excerpt\u2019 toggle and the \u2018Show Read More\u2019 toggles and turn them off to create a simple blog post grid layout.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119118 lazyloaded\" title=\"Turn off read more and excerpt toggles\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/turn-off-read-more-excerpt.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/turn-off-read-more-excerpt.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/turn-off-read-more-excerpt-300x73.png 300w\" alt=\"Turn off read more and excerpt toggles\" width=\"680\" height=\"165\" data-ll-status=\"loaded\" \/><\/figure>\n<p>If you want to customize the color scheme, text, and more, then click the \u2018Advanced\u2019 tab at the top of the left-hand column.<\/p>\n<p>Then, click the \u2018Text\u2019 drop down and make your changes.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119119 lazyloaded\" title=\"Customize post grid text\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/customize-display-text.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2016\/02\/customize-display-text.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2016\/02\/customize-display-text-300x86.png 300w\" alt=\"Customize post grid text\" width=\"680\" height=\"196\" data-ll-status=\"loaded\" \/><\/figure>\n<p>You can continue customizing your page and blog post grid layout as much as you\u2019d like.<\/p>\n<p>Once you\u2019re done, click the \u2018Save\u2019 button and select the \u2018Publish\u2019 drop down at the top of the page to make your changes live.<\/p>\n<p>Now, you can view your new post grid on your website.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-119120 lazyloaded\" title=\"SeedProd post grid example\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/seedprod-post-grid-example.png\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2016\/02\/seedprod-post-grid-example.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2016\/02\/seedprod-post-grid-example-300x74.png 300w\" alt=\"SeedProd post grid example\" width=\"680\" height=\"167\" data-ll-status=\"loaded\" \/><\/figure>\n<h4 id=\"create-grid-layout-add-code-to-wordpress\">Method 4. Create a WordPress Post Grid Layout by Adding Code to WordPress<\/h4>\n<p>This method requires some basic understanding of how to add code to WordPress. If you haven\u2019t done this before, then see our guide on\u00a0how to copy and paste code in WordPress.<\/p>\n<p>Before you add code, you need to create a new image size that you\u2019ll be using for your post grid. To learn more, see our guide on\u00a0how to create additional image sizes in WordPress.<\/p>\n<p>Next, you\u2019ll need to find the right WordPress theme file where you\u2019ll be adding the code snippet. For example, you can add it to your single.php, so it appears at the bottom of all of your posts.<\/p>\n<p>You can also create a\u00a0custom page template\u00a0and use it to display your blog post grid layout with thumbnails.<\/p>\n<p>To learn more, see our\u00a0WordPress template hierarchy\u00a0cheat sheet to help find the right theme template file.<\/p>\n<p>Once you\u2019ve done that, you can start adding code to WordPress. Since the code snippet is quite long, we\u2019ll break it down section by section.<\/p>\n<p>First, add the following code snippet to your theme template file.<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_590007\" class=\"syntaxhighlighter php\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<div class=\"line number7 index6 alt2\">7<\/div>\n<div class=\"line number8 index7 alt1\">8<\/div>\n<div class=\"line number9 index8 alt2\">9<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"php plain\">&lt;?php<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"php variable\">$counter<\/code> <code class=\"php plain\">= 1; <\/code><code class=\"php comments\">\/\/start counter<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"php spaces\">\u00a0<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"php variable\">$grids<\/code> <code class=\"php plain\">= 2; <\/code><code class=\"php comments\">\/\/Grids per row<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"php spaces\">\u00a0<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"php keyword\">global<\/code> <code class=\"php variable\">$query_string<\/code><code class=\"php plain\">; <\/code><code class=\"php comments\">\/\/Need this to make pagination work<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"php spaces\">\u00a0<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"php comments\">\/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*\/<\/code><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"php plain\">query_posts(<\/code><code class=\"php variable\">$query_string<\/code> <code class=\"php plain\">. <\/code><code class=\"php string\">'&amp;caller_get_posts=1&amp;posts_per_page=12'<\/code><code class=\"php plain\">);<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"php spaces\">\u00a0<\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"php keyword\">if<\/code><code class=\"php plain\">(have_posts()) :\u00a0 <\/code><code class=\"php keyword\">while<\/code><code class=\"php plain\">(have_posts()) :\u00a0 the_post();<\/code><\/div>\n<div class=\"line number12 index11 alt1\"><code class=\"php plain\">?&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<p>This code snippet sets up the post loop query. You can change the \u2018posts_per_page\u2019 variable to display more posts per page if you\u2019d like.<\/p>\n<p>Then, add the following code snippet to your theme template file.<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_158367\" class=\"syntaxhighlighter php\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<div class=\"line number7 index6 alt2\">7<\/div>\n<div class=\"line number8 index7 alt1\">8<\/div>\n<div class=\"line number9 index8 alt2\">9<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<div class=\"line number17 index16 alt2\">17<\/div>\n<div class=\"line number18 index17 alt1\">18<\/div>\n<div class=\"line number19 index18 alt2\">19<\/div>\n<div class=\"line number20 index19 alt1\">20<\/div>\n<div class=\"line number21 index20 alt2\">21<\/div>\n<div class=\"line number22 index21 alt1\">22<\/div>\n<div class=\"line number23 index22 alt2\">23<\/div>\n<div class=\"line number24 index23 alt1\">24<\/div>\n<div class=\"line number25 index24 alt2\">25<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"php plain\">&lt;?php<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"php comments\">\/\/Show the left hand side column<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"php keyword\">if<\/code><code class=\"php plain\">(<\/code><code class=\"php variable\">$counter<\/code> <code class=\"php plain\">== 1) :<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"php plain\">?&gt;<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;div <\/code><code class=\"php keyword\">class<\/code><code class=\"php plain\">=<\/code><code class=\"php string\">\"griditemleft\"<\/code><code class=\"php plain\">&gt;<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;div <\/code><code class=\"php keyword\">class<\/code><code class=\"php plain\">=<\/code><code class=\"php string\">\"postimage\"<\/code><code class=\"php plain\">&gt;<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;a href=<\/code><code class=\"php string\">\"&lt;?php the_permalink(); ?&gt;\"<\/code> <code class=\"php plain\">title=<\/code><code class=\"php string\">\"&lt;?php the_title_attribute(); ?&gt;\"<\/code><code class=\"php plain\">&gt;&lt;?php the_post_thumbnail(<\/code><code class=\"php string\">'category-thumbnail'<\/code><code class=\"php plain\">); ?&gt;&lt;\/a&gt;<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;\/div&gt;<\/code><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;h2&gt;&lt;a href=<\/code><code class=\"php string\">\"&lt;?php the_permalink(); ?&gt;\"<\/code> <code class=\"php plain\">title=<\/code><code class=\"php string\">\"&lt;?php the_title_attribute(); ?&gt;\"<\/code><code class=\"php plain\">&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;\/div&gt;<\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"php plain\">&lt;?php<\/code><\/div>\n<div class=\"line number12 index11 alt1\"><code class=\"php comments\">\/\/Show the right hand side column<\/code><\/div>\n<div class=\"line number13 index12 alt2\"><code class=\"php keyword\">elseif<\/code><code class=\"php plain\">(<\/code><code class=\"php variable\">$counter<\/code> <code class=\"php plain\">== <\/code><code class=\"php variable\">$grids<\/code><code class=\"php plain\">) :<\/code><\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"php plain\">?&gt;<\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"php plain\">&lt;div <\/code><code class=\"php keyword\">class<\/code><code class=\"php plain\">=<\/code><code class=\"php string\">\"griditemright\"<\/code><code class=\"php plain\">&gt;<\/code><\/div>\n<div class=\"line number16 index15 alt1\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;div <\/code><code class=\"php keyword\">class<\/code><code class=\"php plain\">=<\/code><code class=\"php string\">\"postimage\"<\/code><code class=\"php plain\">&gt;<\/code><\/div>\n<div class=\"line number17 index16 alt2\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;a href=<\/code><code class=\"php string\">\"&lt;?php the_permalink(); ?&gt;\"<\/code> <code class=\"php plain\">title=<\/code><code class=\"php string\">\"&lt;?php the_title_attribute(); ?&gt;\"<\/code><code class=\"php plain\">&gt;&lt;?php the_post_thumbnail(<\/code><code class=\"php string\">'category-thumbnail'<\/code><code class=\"php plain\">); ?&gt;&lt;\/a&gt;<\/code><\/div>\n<div class=\"line number18 index17 alt1\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;\/div&gt;<\/code><\/div>\n<div class=\"line number19 index18 alt2\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;h2&gt;&lt;a href=<\/code><code class=\"php string\">\"&lt;?php the_permalink(); ?&gt;\"<\/code> <code class=\"php plain\">title=<\/code><code class=\"php string\">\"&lt;?php the_title_attribute(); ?&gt;\"<\/code><code class=\"php plain\">&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;<\/code><\/div>\n<div class=\"line number20 index19 alt1\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;\/div&gt;<\/code><\/div>\n<div class=\"line number21 index20 alt2\"><code class=\"php plain\">&lt;div <\/code><code class=\"php keyword\">class<\/code><code class=\"php plain\">=<\/code><code class=\"php string\">\"clear\"<\/code><code class=\"php plain\">&gt;&lt;\/div&gt;<\/code><\/div>\n<div class=\"line number22 index21 alt1\"><code class=\"php plain\">&lt;?php<\/code><\/div>\n<div class=\"line number23 index22 alt2\"><code class=\"php variable\">$counter<\/code> <code class=\"php plain\">= 0;<\/code><\/div>\n<div class=\"line number24 index23 alt1\"><code class=\"php keyword\">endif<\/code><code class=\"php plain\">;<\/code><\/div>\n<div class=\"line number25 index24 alt2\"><code class=\"php plain\">?&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<p>This code snippet creates two columns for our posts and will display the title and post image. It also creates a CSS class that we\u2019ll show you how to style later.<\/p>\n<p>It also references \u2018postimage\u2019, so you\u2019ll need to change this to the name of the image size you created earlier.<\/p>\n<p>After that, add the following code snippet at the end.<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_95488\" class=\"syntaxhighlighter php\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"php plain\">&lt;?php<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"php variable\">$counter<\/code><code class=\"php plain\">++;<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"php keyword\">endwhile<\/code><code class=\"php plain\">;<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"php comments\">\/\/Post Navigation code goes here<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"php keyword\">endif<\/code><code class=\"php plain\">;<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"php plain\">?&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<p>This code snippet simply closes the loop. It also gives the option to add post navigation, but most website owners use a different plugin for this, so we didn\u2019t include it to avoid code conflicts.<\/p>\n<p>Here\u2019s how the final code snippet looks altogether.<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_947634\" class=\"syntaxhighlighter php\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<div class=\"line number7 index6 alt2\">7<\/div>\n<div class=\"line number8 index7 alt1\">8<\/div>\n<div class=\"line number9 index8 alt2\">9<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<div class=\"line number17 index16 alt2\">17<\/div>\n<div class=\"line number18 index17 alt1\">18<\/div>\n<div class=\"line number19 index18 alt2\">19<\/div>\n<div class=\"line number20 index19 alt1\">20<\/div>\n<div class=\"line number21 index20 alt2\">21<\/div>\n<div class=\"line number22 index21 alt1\">22<\/div>\n<div class=\"line number23 index22 alt2\">23<\/div>\n<div class=\"line number24 index23 alt1\">24<\/div>\n<div class=\"line number25 index24 alt2\">25<\/div>\n<div class=\"line number26 index25 alt1\">26<\/div>\n<div class=\"line number27 index26 alt2\">27<\/div>\n<div class=\"line number28 index27 alt1\">28<\/div>\n<div class=\"line number29 index28 alt2\">29<\/div>\n<div class=\"line number30 index29 alt1\">30<\/div>\n<div class=\"line number31 index30 alt2\">31<\/div>\n<div class=\"line number32 index31 alt1\">32<\/div>\n<div class=\"line number33 index32 alt2\">33<\/div>\n<div class=\"line number34 index33 alt1\">34<\/div>\n<div class=\"line number35 index34 alt2\">35<\/div>\n<div class=\"line number36 index35 alt1\">36<\/div>\n<div class=\"line number37 index36 alt2\">37<\/div>\n<div class=\"line number38 index37 alt1\">38<\/div>\n<div class=\"line number39 index38 alt2\">39<\/div>\n<div class=\"line number40 index39 alt1\">40<\/div>\n<div class=\"line number41 index40 alt2\">41<\/div>\n<div class=\"line number42 index41 alt1\">42<\/div>\n<div class=\"line number43 index42 alt2\">43<\/div>\n<div class=\"line number44 index43 alt1\">44<\/div>\n<div class=\"line number45 index44 alt2\">45<\/div>\n<div class=\"line number46 index45 alt1\">46<\/div>\n<div class=\"line number47 index46 alt2\">47<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"php plain\">&lt;div id=<\/code><code class=\"php string\">\"gridcontainer\"<\/code><code class=\"php plain\">&gt;<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"php plain\">&lt;?php<\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"php variable\">$counter<\/code> <code class=\"php plain\">= 1; <\/code><code class=\"php comments\">\/\/start counter<\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"php spaces\">\u00a0<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"php variable\">$grids<\/code> <code class=\"php plain\">= 2; <\/code><code class=\"php comments\">\/\/Grids per row<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"php spaces\">\u00a0<\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"php keyword\">global<\/code> <code class=\"php variable\">$query_string<\/code><code class=\"php plain\">; <\/code><code class=\"php comments\">\/\/Need this to make pagination work<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"php spaces\">\u00a0<\/code><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"php spaces\">\u00a0<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"php comments\">\/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) *\/<\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"php plain\">query_posts(<\/code><code class=\"php variable\">$query_string<\/code> <code class=\"php plain\">. <\/code><code class=\"php string\">'&amp;caller_get_posts=1&amp;posts_per_page=12'<\/code><code class=\"php plain\">);<\/code><\/div>\n<div class=\"line number12 index11 alt1\"><code class=\"php spaces\">\u00a0<\/code><\/div>\n<div class=\"line number13 index12 alt2\"><code class=\"php spaces\">\u00a0<\/code><\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"php keyword\">if<\/code><code class=\"php plain\">(have_posts()) :\u00a0 <\/code><code class=\"php keyword\">while<\/code><code class=\"php plain\">(have_posts()) :\u00a0 the_post(); <\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"php plain\">?&gt;<\/code><\/div>\n<div class=\"line number16 index15 alt1\"><code class=\"php plain\">&lt;?php<\/code><\/div>\n<div class=\"line number17 index16 alt2\"><code class=\"php comments\">\/\/Show the left hand side column<\/code><\/div>\n<div class=\"line number18 index17 alt1\"><code class=\"php keyword\">if<\/code><code class=\"php plain\">(<\/code><code class=\"php variable\">$counter<\/code> <code class=\"php plain\">== 1) :<\/code><\/div>\n<div class=\"line number19 index18 alt2\"><code class=\"php plain\">?&gt;<\/code><\/div>\n<div class=\"line number20 index19 alt1\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;div <\/code><code class=\"php keyword\">class<\/code><code class=\"php plain\">=<\/code><code class=\"php string\">\"griditemleft\"<\/code><code class=\"php plain\">&gt;<\/code><\/div>\n<div class=\"line number21 index20 alt2\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;div <\/code><code class=\"php keyword\">class<\/code><code class=\"php plain\">=<\/code><code class=\"php string\">\"postimage\"<\/code><code class=\"php plain\">&gt;<\/code><\/div>\n<div class=\"line number22 index21 alt1\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;a href=<\/code><code class=\"php string\">\"&lt;?php the_permalink(); ?&gt;\"<\/code> <code class=\"php plain\">title=<\/code><code class=\"php string\">\"&lt;?php the_title_attribute(); ?&gt;\"<\/code><code class=\"php plain\">&gt;&lt;?php the_post_thumbnail(<\/code><code class=\"php string\">'category-thumbnail'<\/code><code class=\"php plain\">); ?&gt;&lt;\/a&gt;<\/code><\/div>\n<div class=\"line number23 index22 alt2\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;\/div&gt;<\/code><\/div>\n<div class=\"line number24 index23 alt1\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;h2&gt;&lt;a href=<\/code><code class=\"php string\">\"&lt;?php the_permalink(); ?&gt;\"<\/code> <code class=\"php plain\">title=<\/code><code class=\"php string\">\"&lt;?php the_title_attribute(); ?&gt;\"<\/code><code class=\"php plain\">&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;<\/code><\/div>\n<div class=\"line number25 index24 alt2\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;\/div&gt;<\/code><\/div>\n<div class=\"line number26 index25 alt1\"><code class=\"php plain\">&lt;?php<\/code><\/div>\n<div class=\"line number27 index26 alt2\"><code class=\"php comments\">\/\/Show the right hand side column<\/code><\/div>\n<div class=\"line number28 index27 alt1\"><code class=\"php keyword\">elseif<\/code><code class=\"php plain\">(<\/code><code class=\"php variable\">$counter<\/code> <code class=\"php plain\">== <\/code><code class=\"php variable\">$grids<\/code><code class=\"php plain\">) :<\/code><\/div>\n<div class=\"line number29 index28 alt2\"><code class=\"php plain\">?&gt;<\/code><\/div>\n<div class=\"line number30 index29 alt1\"><code class=\"php plain\">&lt;div <\/code><code class=\"php keyword\">class<\/code><code class=\"php plain\">=<\/code><code class=\"php string\">\"griditemright\"<\/code><code class=\"php plain\">&gt;<\/code><\/div>\n<div class=\"line number31 index30 alt2\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;div <\/code><code class=\"php keyword\">class<\/code><code class=\"php plain\">=<\/code><code class=\"php string\">\"postimage\"<\/code><code class=\"php plain\">&gt;<\/code><\/div>\n<div class=\"line number32 index31 alt1\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;a href=<\/code><code class=\"php string\">\"&lt;?php the_permalink(); ?&gt;\"<\/code> <code class=\"php plain\">title=<\/code><code class=\"php string\">\"&lt;?php the_title_attribute(); ?&gt;\"<\/code><code class=\"php plain\">&gt;&lt;?php the_post_thumbnail(<\/code><code class=\"php string\">'category-thumbnail'<\/code><code class=\"php plain\">); ?&gt;&lt;\/a&gt;<\/code><\/div>\n<div class=\"line number33 index32 alt2\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;\/div&gt;<\/code><\/div>\n<div class=\"line number34 index33 alt1\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;h2&gt;&lt;a href=<\/code><code class=\"php string\">\"&lt;?php the_permalink(); ?&gt;\"<\/code> <code class=\"php plain\">title=<\/code><code class=\"php string\">\"&lt;?php the_title_attribute(); ?&gt;\"<\/code><code class=\"php plain\">&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;<\/code><\/div>\n<div class=\"line number35 index34 alt2\"><code class=\"php spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"php plain\">&lt;\/div&gt;<\/code><\/div>\n<div class=\"line number36 index35 alt1\"><code class=\"php plain\">&lt;div <\/code><code class=\"php keyword\">class<\/code><code class=\"php plain\">=<\/code><code class=\"php string\">\"clear\"<\/code><code class=\"php plain\">&gt;&lt;\/div&gt;<\/code><\/div>\n<div class=\"line number37 index36 alt2\"><code class=\"php plain\">&lt;?php<\/code><\/div>\n<div class=\"line number38 index37 alt1\"><code class=\"php variable\">$counter<\/code> <code class=\"php plain\">= 0;<\/code><\/div>\n<div class=\"line number39 index38 alt2\"><code class=\"php keyword\">endif<\/code><code class=\"php plain\">;<\/code><\/div>\n<div class=\"line number40 index39 alt1\"><code class=\"php plain\">?&gt;<\/code><\/div>\n<div class=\"line number41 index40 alt2\"><code class=\"php plain\">&lt;?php<\/code><\/div>\n<div class=\"line number42 index41 alt1\"><code class=\"php variable\">$counter<\/code><code class=\"php plain\">++;<\/code><\/div>\n<div class=\"line number43 index42 alt2\"><code class=\"php keyword\">endwhile<\/code><code class=\"php plain\">;<\/code><\/div>\n<div class=\"line number44 index43 alt1\"><code class=\"php comments\">\/\/Pagination can go here if you want it.<\/code><\/div>\n<div class=\"line number45 index44 alt2\"><code class=\"php keyword\">endif<\/code><code class=\"php plain\">;<\/code><\/div>\n<div class=\"line number46 index45 alt1\"><code class=\"php plain\">?&gt;<\/code><\/div>\n<div class=\"line number47 index46 alt2\"><code class=\"php plain\">&lt;\/div&gt;<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<p>Now, you\u2019ll need to add the following CSS to your site to make sure your post grid displays nicely.<\/p>\n<p>If you haven\u2019t done this before, then see our guide on\u00a0how to easily add custom CSS to your WordPress site.<\/p>\n<div class=\"wp-block-syntaxhighlighter-code \">\n<div>\n<div id=\"highlighter_380154\" class=\"syntaxhighlighter css\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<div class=\"line number2 index1 alt1\">2<\/div>\n<div class=\"line number3 index2 alt2\">3<\/div>\n<div class=\"line number4 index3 alt1\">4<\/div>\n<div class=\"line number5 index4 alt2\">5<\/div>\n<div class=\"line number6 index5 alt1\">6<\/div>\n<div class=\"line number7 index6 alt2\">7<\/div>\n<div class=\"line number8 index7 alt1\">8<\/div>\n<div class=\"line number9 index8 alt2\">9<\/div>\n<div class=\"line number10 index9 alt1\">10<\/div>\n<div class=\"line number11 index10 alt2\">11<\/div>\n<div class=\"line number12 index11 alt1\">12<\/div>\n<div class=\"line number13 index12 alt2\">13<\/div>\n<div class=\"line number14 index13 alt1\">14<\/div>\n<div class=\"line number15 index14 alt2\">15<\/div>\n<div class=\"line number16 index15 alt1\">16<\/div>\n<div class=\"line number17 index16 alt2\">17<\/div>\n<div class=\"line number18 index17 alt1\">18<\/div>\n<div class=\"line number19 index18 alt2\">19<\/div>\n<div class=\"line number20 index19 alt1\">20<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"css plain\">#gridcontainer{<\/code><\/div>\n<div class=\"line number2 index1 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">margin<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">20px<\/code> <code class=\"css value\">0<\/code><code class=\"css plain\">; <\/code><\/div>\n<div class=\"line number3 index2 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">width<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">100%<\/code><code class=\"css plain\">; <\/code><\/div>\n<div class=\"line number4 index3 alt1\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number5 index4 alt2\"><code class=\"css plain\">#gridcontainer h<\/code><code class=\"css value\">2<\/code> <code class=\"css plain\">a{<\/code><\/div>\n<div class=\"line number6 index5 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">color<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">#77787a<\/code><code class=\"css plain\">; <\/code><\/div>\n<div class=\"line number7 index6 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">font-size<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">13px<\/code><code class=\"css plain\">;<\/code><\/div>\n<div class=\"line number8 index7 alt1\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number9 index8 alt2\"><code class=\"css plain\">#gridcontainer .griditemleft{<\/code><\/div>\n<div class=\"line number10 index9 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">float<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">left<\/code><code class=\"css plain\">; <\/code><\/div>\n<div class=\"line number11 index10 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">width<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">278px<\/code><code class=\"css plain\">; <\/code><\/div>\n<div class=\"line number12 index11 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">margin<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">0<\/code> <code class=\"css value\">40px<\/code> <code class=\"css value\">40px<\/code> <code class=\"css value\">0<\/code><code class=\"css plain\">;<\/code><\/div>\n<div class=\"line number13 index12 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number14 index13 alt1\"><code class=\"css plain\">#gridcontainer .griditemright{<\/code><\/div>\n<div class=\"line number15 index14 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">float<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">left<\/code><code class=\"css plain\">; <\/code><\/div>\n<div class=\"line number16 index15 alt1\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">width<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">278px<\/code><code class=\"css plain\">;<\/code><\/div>\n<div class=\"line number17 index16 alt2\"><code class=\"css plain\">}<\/code><\/div>\n<div class=\"line number18 index17 alt1\"><code class=\"css plain\">#gridcontainer .postimage{<\/code><\/div>\n<div class=\"line number19 index18 alt2\"><code class=\"css spaces\">\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><code class=\"css keyword\">margin<\/code><code class=\"css plain\">: <\/code><code class=\"css value\">0<\/code> <code class=\"css value\">0<\/code> <code class=\"css value\">10px<\/code> <code class=\"css value\">0<\/code><code class=\"css plain\">;<\/code><\/div>\n<div class=\"line number20 index19 alt1\"><code class=\"css plain\">}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n<p>You can modify the different CSS selectors to see how they change different elements of your post loop.<\/p>\n<p>We hope this article helped you learn how to display your WordPress posts in a grid layout. You may also want to see our guide on\u00a0how to choose the best web design software\u00a0and our expert picks of the\u00a0best live chat software\u00a0for small businesses.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to display WordPress posts in a grid layout? A <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/how-to-display-your-wordpress-posts-in-a-grid-layout\/\" title=\"How to Display Your WordPress Posts in a Grid Layout\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3838,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[119,114,120,125],"newstopic":[],"class_list":{"0":"post-2626","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-wordpress","8":"tag-design-tips","9":"tag-web-design-trends","10":"tag-web-designers","11":"tag-wordpress-grid-layout"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=2626"}],"version-history":[{"count":2,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2626\/revisions"}],"predecessor-version":[{"id":2629,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2626\/revisions\/2629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3838"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2626"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}