{"id":1581,"date":"2019-07-25T08:49:13","date_gmt":"2019-07-25T03:49:13","guid":{"rendered":"https:\/\/webplover.com\/hosting\/?p=1581"},"modified":"2020-10-21T09:38:40","modified_gmt":"2020-10-21T04:38:40","slug":"display-wordpress-posts-in-grid-layout","status":"publish","type":"post","link":"https:\/\/webplover.com\/hosting\/display-wordpress-posts-in-grid-layout\/","title":{"rendered":"How to Display Your WordPress Posts in Grid Layout"},"content":{"rendered":"<p>There are many WordPress plugins for Post Grid Layout, but some of these are useful.<\/p>\n<p>So here I will tell you the best <strong>Post Grid Layout <\/strong>plugin and its use with all about its options in detail.<\/p>\n<p>In my opinion the <strong>Content Views \u2013 Post Grid &amp; List for WordPress <\/strong>is the best WordPress <i>Post Grid &amp; List Layo<\/i>ut plugin, it is a free plugin, and iam using this plugin personally.<\/p>\n<p>Let&#8217;s start the step by step guide of this plugin.<\/p>\n<h2 style=\"color: #28a745;\">Video Tutorial<\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/zOYW5wx3kb4\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Step 1:<\/h3>\n<p>First of all download <strong>Content Views <\/strong>plugin.<\/p>\n<p>For this go to <strong>Plugins \u2192Add New<\/strong><\/p>\n<p>and search for <strong>Content Views<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wpr-hr-img img-thumbnail alignnone wp-image-1611 size-full\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/wp_post_grid6.png\" alt=\"display wordpress posts in grid layout\" width=\"808\" height=\"394\" \/><\/p>\n<p>Install and activate it.<\/p>\n<h3>Step 2:<\/h3>\n<p>Now click on <strong>Content Views <\/strong>in the side bar then on <strong>Add New<\/strong> to add a view.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/wp_post_grid5.jpg\" alt=\"display wordpress posts in grid layout\" width=\"807\" height=\"412\" \/><\/p>\n<h3>Step 3:<\/h3>\n<p>Enter a name in <strong>Title<\/strong> to identify your view.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wpr-hr-img img-thumbnail alignnone wp-image-1608 size-full\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/wp_post_grid4.jpg\" alt=\"display wordpress posts in grid layout\" width=\"810\" height=\"197\" \/><\/p>\n<p>Under the <i>Title<\/i> in <strong>Filter Settings, <\/strong>there are three sections<\/p>\n<blockquote>\n<ul>\n<li><strong><i>Content type<\/i><\/strong><\/li>\n<li><i><strong>Common<\/strong><\/i><\/li>\n<li><strong><i>Advance<\/i><\/strong><\/li>\n<\/ul>\n<\/blockquote>\n<h2 class=\"h2-note\">Content type :<\/h2>\n<p>Here yo can select Post or Page<\/p>\n<p>If you want to <strong>Post Grid Layout <\/strong>then select Post , or select Page for <strong>Page Grid Layout<\/strong><\/p>\n<h2 class=\"h2-note\">Common :<\/h2>\n<p>In this section there are three options<\/p>\n<ol>\n<li><strong><u>Include<\/u><\/strong><\/li>\n<li><strong><u>Exclude<\/u><\/strong><\/li>\n<li><u><strong>Limit<\/strong><\/u><\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wpr-hr-img img-thumbnail alignnone wp-image-1617 size-full\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/wp_post_grid7.jpg\" alt=\"display wordpress posts in grid layout\" width=\"808\" height=\"344\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wpr-hr-img img-thumbnail alignnone wp-image-1618 size-full\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/wp_post_grid3.jpg\" alt=\"display wordpress posts in grid layout\" width=\"808\" height=\"303\" \/><\/p>\n<ul>\n<li><strong>Limit<\/strong><\/li>\n<\/ul>\n<p>I mention the <u>Limit<\/u> option first. Here you can able to enter the total number of posts in digits, then the limited posts will be showing in view, or if you want to show all your posts in Grid Layout, then leave it empty.<\/p>\n<ul>\n<li><strong>Exclude<\/strong><\/li>\n<\/ul>\n<p>This option is working with <u><strong>Limit<\/strong><\/u> option, here you can enter the <a href=\"https:\/\/webplover.com\/hosting\/blog\/find-post-id-in-wordpress\/\"><strong>Posts ID<\/strong><\/a> with (comma-separated values, for example: 1,2,3) to exclude these posts from view.<\/p>\n<p>Learn about Post ID <a href=\"https:\/\/webplover.com\/hosting\/blog\/find-post-id-in-wordpress\/\">What is Post ID?<\/a><\/p>\n<ul>\n<li><strong><u>Include:<\/u><\/strong><\/li>\n<\/ul>\n<p>This option is working alone (mean without the <strong>Exclude <\/strong>&amp; <strong>Limit<\/strong> options)<br \/>\nHere you can include posts to view by adding the <strong><a href=\"https:\/\/webplover.com\/hosting\/blog\/find-post-id-in-wordpress\/\">Post ID<\/a><\/strong><strong>.<\/strong><\/p>\n<p>You can include Posts ID with comma-separated values, for example: 1,2,3<\/p>\n<p>After including <strong>Posts ID, <\/strong>only that posts will be showing in Grid Layout.<\/p>\n<h2 class=\"h2-note\">Advance :<\/h2>\n<p>In this section there are five options<\/p>\n<blockquote>\n<ul>\n<li><i><strong>Taxonomy (Categories, Tags&#8230;)<\/strong><\/i><\/li>\n<li><strong><i>Sort by<\/i><\/strong><\/li>\n<li><strong><i>Author<\/i><\/strong><\/li>\n<li><strong><i>Status<\/i><\/strong><\/li>\n<li><strong><i>Keyword<\/i><\/strong><\/li>\n<\/ul>\n<\/blockquote>\n<ul>\n<li><strong><u>Taxonomy (Categories, Tags&#8230;)<\/u><\/strong><\/li>\n<\/ul>\n<p>Here you can choose the posts to showing in view by choosing Categories &amp; Tags.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wpr-hr-img img-thumbnail alignnone wp-image-1647 size-full\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/postgrid5.jpg\" alt=\"display wordpress posts in grid layout\" width=\"809\" height=\"380\" \/><\/p>\n<ul>\n<li><strong><u>Sort by<\/u><\/strong><\/li>\n<\/ul>\n<p>Here you can choose the posts to showing in view by selecting <strong>ID, Title, Published Date &amp; Modified Date <\/strong>by Ascending order or Descending order.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wpr-hr-img img-thumbnail alignnone wp-image-1646 size-full\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/postgrid4.jpg\" alt=\"display wordpress posts in grid layout\" width=\"807\" height=\"414\" \/><\/p>\n<ul>\n<li><strong><u>Author<\/u><\/strong><\/li>\n<\/ul>\n<p>Here you can select the posts to showing in view by choosing author.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wpr-hr-img img-thumbnail alignnone wp-image-1645 size-full\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/postgrid3.jpg\" alt=\"display wordpress posts in grid layout\" width=\"808\" height=\"313\" \/><\/p>\n<ul>\n<li><u><strong>Status<\/strong><\/u><\/li>\n<\/ul>\n<p>Here you can choose the posts to showing in view by selecting the post status (For Example: Published, Private, Pending, Draft etc)<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wpr-hr-img img-thumbnail alignnone wp-image-1649 size-full\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/postgrid2.jpg\" alt=\"display wordpress posts in grid layout\" width=\"809\" height=\"319\" \/><\/p>\n<ul>\n<li><u><strong>Keyword<\/strong><\/u><\/li>\n<\/ul>\n<p>Here you can choose the posts to showing in view by entering keyword to searching for posts.<br \/>\nIt will search keyword in title, excerpt, content of posts.<\/p>\n<h3>Step 4 :<\/h3>\n<p>Now click on <strong>Display Settings, <\/strong>there are six sections.<\/p>\n<blockquote>\n<ul>\n<li><strong><i>Layout<\/i><\/strong><\/li>\n<li><i><strong>Responsive<\/strong><\/i><\/li>\n<li><strong><i>Format<\/i><\/strong><\/li>\n<li><i><strong>Fields settings<\/strong><\/i><\/li>\n<li><strong><i>Pagination<\/i><\/strong><\/li>\n<li><strong><i>Others<\/i><\/strong><\/li>\n<\/ul>\n<\/blockquote>\n<p><strong>1 <\/strong>: <u><strong>Layout<\/strong><\/u><\/p>\n<p>Here you can choose the layout of your choice in <i><u>Grid<\/u><\/i>, <i><u>Collapsible List<\/u><\/i> &amp; <u><i>Scrollable List<\/i><\/u>.<\/p>\n<p>and also enter a number to showing items <i>(posts or pages) <\/i>per row, in desktop version.<\/p>\n<p><strong>2 : <\/strong><strong><u>Responsive<\/u><\/strong><\/p>\n<p>In this section you can enter a number to showing items <i>(posts or pages) <\/i>per row, in <i>Tablet<\/i> &amp; <i>Mobile<\/i> versions.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wpr-hr-img img-thumbnail alignnone wp-image-1614 size-full\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/wp_post_grid8.jpg\" alt=\"display wordpress posts in grid layout\" width=\"808\" height=\"407\" \/><\/p>\n<p><strong>3 : <\/strong><strong><u>Format<\/u><\/strong><\/p>\n<p>Here you can choose the <i>Thumbnail<\/i> and the <i>Text<\/i> style by selecting <strong><i>Show thumbnail &amp; text vertically<\/i><\/strong> OR <i><strong>Show thumbnail on the left\/right of text<\/strong><\/i><\/p>\n<p><strong>4 : <\/strong><u><strong>Fields settings<\/strong><\/u><\/p>\n<p>Here yo can <strong>First:<\/strong> Select or Deselect the fields of post to show. <strong>2nd: <\/strong>Set the <i>Title<\/i> text style. <strong>3rd:<\/strong> Select the <i>Thumbnail<\/i> size. <strong>4th: <\/strong>Select the post <i>Excerpt<\/i> length.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wpr-hr-img img-thumbnail alignnone wp-image-1615 size-full\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/wp_post_grid2.jpg\" alt=\"display wordpress posts in grid layout\" width=\"808\" height=\"351\" \/><\/p>\n<p><strong>5 : <\/strong><strong><u>Pagination<\/u><\/strong><\/p>\n<p>Here you can enable or disable the <i>Pagination<\/i> by check or uncheck the box.<\/p>\n<p><strong>6 : <\/strong><u><strong>Others<\/strong><\/u><\/p>\n<p>Here you can choose an option to enable item in <i>Current tab<\/i> or in <i>New tab<\/i> ,when user click on Title, Thumbnail, Read-more button.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wpr-hr-img img-thumbnail alignnone wp-image-1616 size-full\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/wp_post_grid1.jpg\" alt=\"display wordpress posts in grid layout\" width=\"807\" height=\"488\" \/><\/p>\n<h3>Step 5 :<\/h3>\n<p>After customize the setting of this <i>plugin<\/i> click on <strong><i>Save<\/i><\/strong> button to save the view.<\/p>\n<p>Now you can show the view in pages, posts or widgets by using <i>Shortcode<\/i>, and also show the view in <i>Theme Files<\/i> by using the <i>PHP<\/i> code.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wpr-hr-img img-thumbnail alignnone wp-image-1653 size-full\" src=\"https:\/\/webplover.com\/hosting\/wp-content\/uploads\/2018\/07\/s.jpg\" alt=\"display wordpress posts in grid layout\" width=\"808\" height=\"233\" \/><\/p>\n<h3>Here are a few tutorials for you to read next:<\/h3>\n<ul class=\"related-posts-li\">\n<li><a href=\"https:\/\/webplover.com\/hosting\/blog\/install-wordpress-plugin\">How to Install WordPress Plugin Step by Step<\/a><\/li>\n<li><a href=\"https:\/\/webplover.com\/hosting\/blog\/add-social-icons-to-wordpress-menu\/\">How To Add Social Media Icons To WordPress Menu<\/a><\/li>\n<li><a href=\"https:\/\/webplover.com\/hosting\/blog\/find-post-page-category-user-id-wordpress\/\">How to Find Post, Page, Category, or User ID in WordPress<\/a><\/li>\n<li><a href=\"https:\/\/webplover.com\/hosting\/blog\/create-table-in-wordpress\/\">How to create Table in WordPress [With Pictures]<\/a><\/li>\n<li><a href=\"https:\/\/webplover.com\/hosting\/blog\/exclude-specific-category-posts-from-wordpress-homepage\/\">How to Exclude Specific Category Posts From Your WordPress Home Page<\/a><\/li>\n<\/ul>\n<p><strong>If you have any questions, don\u2019t hesitate to let me know through comment or email, i will try to help you.<\/strong><\/p>\n<p><script src=\"https:\/\/apis.google.com\/js\/platform.js\"><\/script><\/p>\n<div class=\"g-ytsubscribe\" data-channelid=\"UCArLhGLL14dgeiIKwlu4jYA\" data-layout=\"full\" data-count=\"hidden\"><\/div>\n<p><strong>If you find this article helpful, then please Subscribe to our <\/strong><strong><a href=\"https:\/\/m.youtube.com\/channel\/UCArLhGLL14dgeiIKwlu4jYA\" target=\"_blank\" rel=\"noopener noreferrer\">YouTube Channel<\/a><\/strong><strong> for video tutorials, and share this article on social media.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are many WordPress plugins for Post Grid Layout, but some of these are useful. So here I will tell you the best Post Grid Layout plugin and its use with all about its options in detail. In my opinion the Content Views \u2013 Post Grid &amp; List for WordPress is the best WordPress Post&#8230;<\/p>\n","protected":false},"author":220,"featured_media":1714,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[228],"tags":[],"class_list":["post-1581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/posts\/1581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/users\/220"}],"replies":[{"embeddable":true,"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/comments?post=1581"}],"version-history":[{"count":0,"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/posts\/1581\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/media\/1714"}],"wp:attachment":[{"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/media?parent=1581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/categories?post=1581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webplover.com\/hosting\/wp-json\/wp\/v2\/tags?post=1581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}