In this tutorial, I’ll share tips on how to create a magazine template using CSS Grid. The front page bears striking similarity with News Pro child theme in Genesis.
We will create a custom loop on front-page.php, register and display some widget areas. And, style it using CSS Grid.
So, let’s do it.
Step #1: Add the following code to your functions.php file to register widget areas
Step #2: Create a front-page.php file and add the following code
Here, we are essentially creating a custom template featuring content-sidebar layout. Most importantly, we’re creating a custom loop and displaying our previously registered widget areas.
Step #3: Style it with CSS Grid
This is where the magic happens. With CSS Grid, you can display the widgets in a magazine or news theme format. What’s more, you can choose to display any pattern you like simply by playing around with the CSS code.
Step #4: Add Genesis Features Posts Widgets
Drag and drop as many widgets as you want. For this tutorial, I’ve added four widgets. If you add more, you may have to change the CSS accordingly.
That’s it! Now, hard refresh your browser, and enjoy the fruit of your labor.
Note: If you want to show multiple posts/pages on the top widget box, install Genesis Responsive Slider plugin. Don’t forget to customize the settings to match your theme.
If you’re curious, here’s what it looks like.
Let me know if you have any questions.
