{"id":698,"date":"2017-06-04T13:27:53","date_gmt":"2017-06-04T13:27:53","guid":{"rendered":"http:\/\/genesiswp.net\/?p=126"},"modified":"2018-04-23T16:52:08","modified_gmt":"2018-04-23T16:52:08","slug":"display-genesis-blog-grid-layout","status":"publish","type":"post","link":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/","title":{"rendered":"How to Display Your Genesis Blog in Grid Layout"},"content":{"rendered":"<p>I&#8217;m a big fan of grid layout when it comes to modern design elements. Not only it looks aesthetic but it also allows your visitors to view more content above the fold. That&#8217;s why I prefer using grid loop in almost all my projects.<\/p>\n<p>Bill Erickson has written<a href=\"https:\/\/wordpress.org\/plugins\/genesis-grid-loop\/\"> a plugin<\/a> for Genesis Grid and it&#8217;s very handy if you&#8217;re looking for a nifty plugin to display your blog posts in grid format. However, instead of using the plugin, you can simply use a few line of php codes in your functions.php and some css to achieve a grid view.<\/p>\n<p>In fact, the code in this post belongs to Bill Erickson, but I&#8217;ve modified it slightly for my own projects.<\/p>\n<p>Before we dive into the <code>functions.php<\/code> file, I must warn you that you shouldn&#8217;t try editing your <code>functions.php<\/code> file without using any FTP software.<\/p>\n<p>Assuming you&#8217;re fully familiar with FTP client, let&#8217;s proceed with the tutorial.<\/p>\n<p>Add the following code to your <code>functions.php<\/code> file.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/topleague\/c4f8cef721930d86e0d1d995a22bc33a.js\"><\/script><\/p>\n<p>That&#8217;s all. you should see your blog split into two or three column grid.<\/p>\n<p><strong>Note<\/strong>: The code above code will apply grid view to your blog home as well as category archives. Moreover, if you want to show three column grid, you need to replace\u00a0<code>one-half<\/code> with <code>one-third<\/code>, and change <code>current_post % 2<\/code> to\u00a0<code>current_post % 3<\/code>.<\/p>\n<p>This is just a basic guide on how to apply grid layout to your Genesis blog. If we change the location of the featured image and other surround elements such as post meta and post info, then it will look even better. However, let&#8217;s save that for a future post.<\/p>\n<p>Please, let me know if you have any questions.<\/p>\n<p><strong>Demo<\/strong>: Here&#8217;s what the Genesis Sample Theme looks like after the above code is applied.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-128 size-full\" src=\"http:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/Grid-Genesis-Sample-Theme-e1496582400268.png\" alt=\"Grid Genesis Sample Theme\" width=\"950\" height=\"654\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Display your Genesis blog posts in grid loop without using any plugin. Modify code to display your blog in 2-column or 3-column grid view.<\/p>\n","protected":false},"author":2,"featured_media":946,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[3],"tags":[19],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Display Your Genesis Blog in Grid Layout - League WP<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/leaguewp.com\/display-genesis-blog-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 Your Genesis Blog in Grid Layout - League WP\" \/>\n<meta property=\"og:description\" content=\"Display your Genesis blog posts in grid loop without using any plugin. Modify code to display your blog in 2-column or 3-column grid view.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"League WP\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-04T13:27:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-23T16:52:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/How-to-Display-Your-Genesis-Blog-in-Grid-Layout-e1524502312673.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"949\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Susanta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@league_wp\" \/>\n<meta name=\"twitter:site\" content=\"@league_wp\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Susanta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/\"},\"author\":{\"name\":\"Susanta\",\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/person\/c84e33b8731dd0a38753b3b74c664b37\"},\"headline\":\"How to Display Your Genesis Blog in Grid Layout\",\"datePublished\":\"2017-06-04T13:27:53+00:00\",\"dateModified\":\"2018-04-23T16:52:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/\"},\"wordCount\":308,\"commentCount\":16,\"publisher\":{\"@id\":\"https:\/\/leaguewp.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/How-to-Display-Your-Genesis-Blog-in-Grid-Layout-e1524502312673.jpeg\",\"keywords\":[\"Grid\"],\"articleSection\":[\"Guides\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/\",\"url\":\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/\",\"name\":\"How to Display Your Genesis Blog in Grid Layout - League WP\",\"isPartOf\":{\"@id\":\"https:\/\/leaguewp.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/How-to-Display-Your-Genesis-Blog-in-Grid-Layout-e1524502312673.jpeg\",\"datePublished\":\"2017-06-04T13:27:53+00:00\",\"dateModified\":\"2018-04-23T16:52:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#primaryimage\",\"url\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/How-to-Display-Your-Genesis-Blog-in-Grid-Layout-e1524502312673.jpeg\",\"contentUrl\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/How-to-Display-Your-Genesis-Blog-in-Grid-Layout-e1524502312673.jpeg\",\"width\":949,\"height\":500,\"caption\":\"How to Display Your Genesis Blog in Grid Layout\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/leaguewp.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Display Your Genesis Blog in Grid Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/leaguewp.com\/#website\",\"url\":\"https:\/\/leaguewp.com\/\",\"name\":\"League WP\",\"description\":\"WordPress Development\",\"publisher\":{\"@id\":\"https:\/\/leaguewp.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/leaguewp.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/leaguewp.com\/#organization\",\"name\":\"Top League Technologies Pvt. Ltd.\",\"url\":\"https:\/\/leaguewp.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2020\/09\/League-WP-Web-2.svg\",\"contentUrl\":\"https:\/\/leaguewp.com\/wp-content\/uploads\/2020\/09\/League-WP-Web-2.svg\",\"width\":\"1920\",\"height\":\"960\",\"caption\":\"Top League Technologies Pvt. Ltd.\"},\"image\":{\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/league_wp\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/person\/c84e33b8731dd0a38753b3b74c664b37\",\"name\":\"Susanta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/leaguewp.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f363d580b703f602b2169f4beaf96d4c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f363d580b703f602b2169f4beaf96d4c?s=96&d=mm&r=g\",\"caption\":\"Susanta\"},\"url\":\"https:\/\/leaguewp.com\/author\/suskanchan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Display Your Genesis Blog in Grid Layout - League WP","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:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/","og_locale":"en_US","og_type":"article","og_title":"How to Display Your Genesis Blog in Grid Layout - League WP","og_description":"Display your Genesis blog posts in grid loop without using any plugin. Modify code to display your blog in 2-column or 3-column grid view.","og_url":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/","og_site_name":"League WP","article_published_time":"2017-06-04T13:27:53+00:00","article_modified_time":"2018-04-23T16:52:08+00:00","og_image":[{"width":949,"height":500,"url":"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/How-to-Display-Your-Genesis-Blog-in-Grid-Layout-e1524502312673.jpeg","type":"image\/jpeg"}],"author":"Susanta","twitter_card":"summary_large_image","twitter_creator":"@league_wp","twitter_site":"@league_wp","twitter_misc":{"Written by":"Susanta","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#article","isPartOf":{"@id":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/"},"author":{"name":"Susanta","@id":"https:\/\/leaguewp.com\/#\/schema\/person\/c84e33b8731dd0a38753b3b74c664b37"},"headline":"How to Display Your Genesis Blog in Grid Layout","datePublished":"2017-06-04T13:27:53+00:00","dateModified":"2018-04-23T16:52:08+00:00","mainEntityOfPage":{"@id":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/"},"wordCount":308,"commentCount":16,"publisher":{"@id":"https:\/\/leaguewp.com\/#organization"},"image":{"@id":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/How-to-Display-Your-Genesis-Blog-in-Grid-Layout-e1524502312673.jpeg","keywords":["Grid"],"articleSection":["Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/","url":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/","name":"How to Display Your Genesis Blog in Grid Layout - League WP","isPartOf":{"@id":"https:\/\/leaguewp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#primaryimage"},"image":{"@id":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/How-to-Display-Your-Genesis-Blog-in-Grid-Layout-e1524502312673.jpeg","datePublished":"2017-06-04T13:27:53+00:00","dateModified":"2018-04-23T16:52:08+00:00","breadcrumb":{"@id":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#primaryimage","url":"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/How-to-Display-Your-Genesis-Blog-in-Grid-Layout-e1524502312673.jpeg","contentUrl":"https:\/\/leaguewp.com\/wp-content\/uploads\/2017\/06\/How-to-Display-Your-Genesis-Blog-in-Grid-Layout-e1524502312673.jpeg","width":949,"height":500,"caption":"How to Display Your Genesis Blog in Grid Layout"},{"@type":"BreadcrumbList","@id":"https:\/\/leaguewp.com\/display-genesis-blog-grid-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/leaguewp.com\/"},{"@type":"ListItem","position":2,"name":"How to Display Your Genesis Blog in Grid Layout"}]},{"@type":"WebSite","@id":"https:\/\/leaguewp.com\/#website","url":"https:\/\/leaguewp.com\/","name":"League WP","description":"WordPress Development","publisher":{"@id":"https:\/\/leaguewp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/leaguewp.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/leaguewp.com\/#organization","name":"Top League Technologies Pvt. Ltd.","url":"https:\/\/leaguewp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/leaguewp.com\/#\/schema\/logo\/image\/","url":"https:\/\/leaguewp.com\/wp-content\/uploads\/2020\/09\/League-WP-Web-2.svg","contentUrl":"https:\/\/leaguewp.com\/wp-content\/uploads\/2020\/09\/League-WP-Web-2.svg","width":"1920","height":"960","caption":"Top League Technologies Pvt. Ltd."},"image":{"@id":"https:\/\/leaguewp.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/league_wp"]},{"@type":"Person","@id":"https:\/\/leaguewp.com\/#\/schema\/person\/c84e33b8731dd0a38753b3b74c664b37","name":"Susanta","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/leaguewp.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f363d580b703f602b2169f4beaf96d4c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f363d580b703f602b2169f4beaf96d4c?s=96&d=mm&r=g","caption":"Susanta"},"url":"https:\/\/leaguewp.com\/author\/suskanchan\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/posts\/698"}],"collection":[{"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/comments?post=698"}],"version-history":[{"count":0,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/posts\/698\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/media\/946"}],"wp:attachment":[{"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/media?parent=698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/categories?post=698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leaguewp.com\/wp-json\/wp\/v2\/tags?post=698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}