Custom Front Page Template Design for Blog Website in Genesis (RainaStudio Map 101)
RainaStudio
Custom Front Page Template Design for Blog Website in Genesis (RainaStudio Map 101)
Do you have a WordPress website using the Genesis Framework? Have a new design concept for the front page/homepage of your blog? Yes! Sure, you want to make a custom front page template according to that design. And here in this post today, you going to learn how you can create a custom front-page template design for your blog website. You may hear about the widgetized template in Genesis. No! Well, a widgetized template is a PHP template, and the content of this template can be modified or customized using Appearance > Widgets from your site’s Dashboard. But here in this tutorial, we will put custom content(HTML, TEXT, ICONS) along with the widgets. Before starting, I want you to take a look at the homepage of RainaStudio.com. There are six content blocks.
Custom Front Page Template Design for Blog Website in Genesis (RainaStudio Map 101) In the first section of the block, you are seeing a hero banner with a heading, a subheading, and a CTA button. ●
●
●
●
●
Next FEATURED RESOURCES, there are a couple of brand icons of renowned online resources. The following block was divided into two sections, and both are widgetized. The first block is for posts of the “FEATURED TOOLS REVIEW” category. Three of the most recent or updated published posts show here. In the right block, we pull ten latest posts from the blog. We widgetized the 5th block also. On this block, we wanted to display a subscription form. The last block is for posts from the “WordPress and Genesis Tutorial” category. As sooner as a new blog post published in this category, the job will be visible here. This article is a sub-post of the RainaStudio Map 101 blog series. If you have not checked previous posts of this series yet, don’t miss them, they are following.
●
Add Custom Heading Style Formats to WP Visual Editor Without Plugin
●
Custom Related Posts After Entry Footer in Genesis
●
Custom Social Share Buttons with Counter in Genesis
Creating Custom FrontPage Template Design for Blog in Genesis
Creating Custom FrontPage Template Design for Blog in Genesis
Creating Custom FrontPage Template Design for Blog in Genesis
After including those code into the file, you’ll see five new registered widget areas are showing on the page Appearance > Widgets like the following screenshot.
Creating Custom FrontPage Template Design for Blog in Genesis
In the main template, we have used conditional tags; Genesis body attributes to filter, full-width-content filter, and so on. Let’s build the custom front page template.
Creating Custom FrontPage Template Design for Blog in Genesis
We included this piece of code into the front-page.php template. This template only runs if any of those widgets are active.
Add Class to the body element in Genesis I wanted to add a custom class & id to the body element of this template, following code doing that for us.
After adding this code to that template you’ll see a new class and ID to the body element. Inspect the template page to see it, below is the screenshot of the example.
Add Class to the body element in Genesis
Let’s move to the next part. We made the template full-width content adding this line into the front-page.php template.
Add Class to the body element in Genesis
Next, we gonna add first widget and some HTML for FEATURED RESOURCES section. The below code snippet is doing that. Add this code to that template. We hooked the function before Genesis content sidebar.
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Including this code, we have covered the first two blocks of the template. In the next step, we are removing the Genesis default loop and adding the rest of the widgets to the front-page loop.
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Add Class to the body element in Genesis
We have done creating a custom front page template for our blog. With all of the codes above, your template will look like below.
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Now it’s time to add widgets to the widget areas. Go to Appearance > Widgets, add widgets to front page widget areas. I have added a Custom HTML widget with some HTML in Front Page 1 – Hero Featured widget area. It looks like the snippet below.
Add Class to the body element in Genesis
And with the following CSS code, we achieved the looks of the first block of custom front page template design.
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Add Class to the body element in Genesis
Creating a custom frontpage template design is as easy as customizing and modifying an existing template for a website. đ&#x;™‚ Keep adding new widgets to the rest of widget areas according to your needs. And after finishing this step, you’ll be needed to do CSS to match layout like the design you have. Have questions or want to leave feedback? Yes! Use the replying form to leave your input. We will be in touch in a short time.