{"id":2859,"date":"2019-10-20T11:29:11","date_gmt":"2019-10-20T00:29:11","guid":{"rendered":"https:\/\/wpdevdesign.wpengine.com\/?p=2859"},"modified":"2020-10-09T13:46:53","modified_gmt":"2020-10-09T02:46:53","slug":"custom-easy-posts-layout-using-css-grid","status":"publish","type":"post","link":"https:\/\/wpdevdesign.com\/custom-easy-posts-layout-using-css-grid\/","title":{"rendered":"Custom Easy Posts Layout using CSS Grid"},"content":{"rendered":"
\n
\n

Updated on October 09, 2020<\/em><\/p>\n

This members-only<\/a> tutorial provides the steps to arrange posts output by Oxygen<\/a>'s Easy Posts component in a custom layout using CSS Grid's grid-template-areas<\/a>.<\/p>\n

\"\"<\/figure>\n

Post categories (linking to their category archives) will be positioned near the top left of posts' featured images.<\/p>\n

The entire image will be set to be clickable to the post's permalink.<\/p>\n

\"\"<\/figure>\n

From 767px and below, we shall set the posts to appear one below the other.<\/p>\n

Step 1<\/h3>\n

Since the maximum width taken up by the images for any given viewport is close to 800px (767px - 40px of padding = 727px to be exact), let's define a custom image size of say, 800px by 800px and display the images in this size.<\/p>\n

Install and activate Code Snippets<\/a> plugin.<\/p>\n

Go to Snippets > Add New.<\/p>\n

Title: Custom image sizes<\/strong><\/p>\n

Code:<\/p>\nadd_image_size( 'square-thumbnail', 800, 800, true );<\/code>\n

Regenerate thumbnails<\/a> if your posts already have featured images set.<\/p>\n

Step 2<\/h3>\n

Edit Page\/Template where you want to display the posts grid in Oxygen editor and add an Easy Posts component.<\/p>\n

In this example, we shall display the posts grid on a static Page.<\/p>\n

Go to Query and set the WP Query to custom<\/code>.<\/p>\n

Select post<\/code> Post Type and set Count to 5.<\/p>\n

Styles > Responsive. Set \"Posts are 50% Width Below\" to Never.<\/p>\n

Go to Templates > Template PHP. Replace all the code with<\/p>\n <\/div>\n

\n

This is a premium members-only content.<\/p>\n

To view the rest of the content, please sign up for membership ($47\/month or $599 one-time)<\/a>.<\/p>\n

Already a member? Log in below or here<\/a>.<\/p>\n <\/div>\n