Custom Genesis Layout Setting Using CSS Grid

This code enables you to add a custom layout setting which uses CSS Grid. You can select the setting under Layout Settings on any single page, post or archive page Edit screen.

This solution enables you to determine the stacking order on mobile devices so you can set the sidebar to display before the content at any screen width using the grid-template-areas property in your media queries.

Demo Video

Shows how the custom layout setting enables you to control the stacking order of the content and sidebar on smaller screens.

Works in the following modern browsers.

Tested using the Genesis Sample child theme by StudioPress.

Code Installation

There’s 3 steps :

Step 1 : From the download folder, upload the image named css-grid.jpg to your child themes root directory.

Step 2 : From the download folder, copy & paste the PHP code from the functions.php file and paste it at the end of your child themes functions.php file.

Step 3 : From the download folder, copy & paste the CSS from the style.css file to the end of your child themes style sheet and clear caching.

Register or login to access the download folder :