{"id":22551,"date":"2021-04-10T17:00:09","date_gmt":"2021-04-10T15:00:09","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=22551"},"modified":"2021-04-09T16:07:39","modified_gmt":"2021-04-09T14:07:39","slug":"how-to-arrange-wordpress-blog-posts-in-grid-layout","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-arrange-wordpress-blog-posts-in-grid-layout\/","title":{"rendered":"How to Arrange Your WordPress Blog Posts in a Grid Layout"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]With WordPress, anyone can create and design a website. That much is true. But if you want to truly express yourself and show off your design chops, you will find that WordPress\u2019s default themes often lack some functionalities that you want to use, or that there are effects which are difficult to achieve.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Displaying your WordPress content in a grid layout<\/strong> is one of those things which don\u2019t always come out-of-the-box with a WordPress theme. This is why many professionally made themes offer a grid layout \u2013 specifically, themes made for blogging<\/a> will typically have it. But maybe you don\u2019t have the means for a professionally made theme, or the theme you absolutely love simply doesn\u2019t have everything you want from it. Fortunately, that can be remedied: there are a couple of WordPress plugins which allow you to lay out your posts as a grid.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]We will show you how to arrange your WordPress posts into a grid layout<\/strong> using a plugin. But first, we\u2019ll take a while to talk to you about when a grid layout is useful \u2013 there are cases in which you might be better off with a different layout. If you are dead-set on a grid layout for your WordPress website, feel free to skip the why section, and head straight on to the how-to.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Why Would You Want a Grid Layout<\/h2>\n

[\/vc_column_text][vc_column_text]A grid, as opposed to a linear display, shows your posts arranged into a matrix, instead of one underneath the other. A grid means arranging your posts into rows and columns, often also displaying such data as title, featured image, post author, date, and so on. You can see a typical take on it in this demo of our Stockholm theme<\/a>:[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Stockholm <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]But what is it good for?[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]First of all, a grid layout is more efficient in terms of space<\/strong>, and will allow your website visitors a quick overview of your posts and their titles, making it easier for them to find the content they want \u2013 provided your titles are meaningful and informative, as they should be.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Secondly, a grid layout is a good way of bringing your featured images to prominence<\/strong>, making grids an especially interesting feature for visual-heavy blogs.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Thirdly, there\u2019s no reason to think your grid should hold all your posts. With a judicious use of filters, you can have many different grids<\/strong> on your WordPress website. You could, for instance, give your visitors an overview of all your latest posts, but you could also organize your grids by topic, category, tag, or any other characteristic (recent TV reviews, your shop\u2019s best deals, all your French language articles \u2013 whatever you want, really), or even allow your valued contributing authors to come to the fore by displaying all their content.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]There are also times when a grid layout is not the best solution for your WordPress website. Generally speaking, all content can be arranged into a grid, but we find a grid works best if you have a lot of content, most of which you want accessible at a glance at once. What good would a four-column grid be, for instance, if you only have three items to display in it? Only if you have a substantial amount of content<\/strong> will a grid save space and look good, which is a consideration you have to have in mind when laying out your grid.[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Create a WordPress Grid Layout Using a Plugin<\/h2>\n

[\/vc_column_text][vc_column_text]So, if you are sure you want a grid layout for your WordPress posts, and if your theme doesn\u2019t provide you with the requisite functionality, you\u2019ll likely be looking for a plugin. The plugin we will be using is The Post Grid<\/a>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]After you have installed and activated the plugin, you need to generate some new grids before you start posting them. First, navigate to The Post Grid\/Add New Grid<\/strong> from your WordPress dashboard.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]There you will find several tabs which govern the content and look of a grid as well as a preview underneath. You can use this plugin to generate any number of different grids.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In the Source<\/strong> tab, you can select which items you want to include in a grid. The default is post<\/em>, but you can also choose pages, custom CSS, or other items. You can also filter your posts by post ID, and set a limit to the number of posts in a grid.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Post <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You could also filter your posts by category and tags, order, author, status, or search keyword.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Post <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In the Layout<\/strong> tab, you can select between preset layout types, number of columns, featured image settings, excerpt settings, and link behaviour.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Layout <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The Field Selection<\/strong> tab allows you to pick which parts of post data will be displayed in the grid: title, excerpt, a read more button, post date, author, categories, tags, and comments.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Field <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Finally, in the Style<\/strong> tab, you have the options of styling your grid. You can change the colours of all the elements of your grid: title, button, button text, and so on. Note, though, that in some cases theme settings may override plugin settings regarding stylization, which was not the case with the Bridge theme we were using here[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Style\" <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once you have set your grid, you can give it a title and hit Publish<\/strong>. Your grid will now be ready to embed into your website. To do that, you will need the shortcode right underneath the title. Copy it.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Grid <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can now embed the shortcode into any shortcode-ready space on your website. We will show you how to do it on a page. To do that, create a page.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Next, click the plus<\/strong> sign and choose a Shortcode<\/strong> block. If you are a Gutenberg<\/strong> user, that is. If you are an Elementor<\/strong> user, use the shortcode element, while, if you are a Classic<\/strong> editor user, you can simply paste the shortcode wherever you want it on the page.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Gutenberg <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You then need to paste your shortcode into the block’s field. Once you have done that, simply click Publish<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Grid <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And your post grid page is ready!
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Post <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

In Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]And that\u2019s really all there is to creating a post grid in WordPress. You can create however many grids you like, and use them for various purposes: to showcase an author, to provide your visitors with the most recent news at a glance, or to make the best possible use of your media library in presenting your content. Whichever the reason or purpose, you can make your WordPress website richer by a grid or two or more easy and free.
\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Need an grid layout for your WordPress blog posts? Check out our handy how-to!<\/p>\n","protected":false},"author":16990,"featured_media":22686,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[46,27,4,13],"class_list":["post-22551","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-blogging","tag-content","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/22551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=22551"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/22551\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/22686"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=22551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=22551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=22551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}