Custom Front Page Template Design for Blog Website in Genesis
3

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.

  • In the first section of the block, you are seeing a hero banner with a heading, a sub-heading, 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.

Creating Custom FrontPage Template Design for Blog in Genesis

If you have experience with HTML and PHP a bit, the following code snippets and templates will be easier for you to understand.

For this widgetized template, we need to register five widget areas. Add the following snippet in functions.php file to register widget areas in the Genesis child theme.

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.
Custom Front Page Template Design WidgetsIn the main template, we have used conditional tags; Genesis body attributes to filterfull-width-content filter, and so on. Let’s build the custom front page template.

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.

Custom Front Page Template Design Inspect Body ElementLet’s move to the next part. We made the template full-width content adding this line into the front-page.php template.

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.

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.

 

We have done creating a custom front page template for our blog. With all of the codes above, your template will look like the template in the URL below.

https://gist.github.com/anwerashif/bc82ce3b5ece8c8db9de21d945b70a95

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.

And with the following CSS code, we achieved the looks of the first block of custom front page template design.

Creating a custom frontpage template design is as easy as customizing and modifying an existing template for a website. 🙂 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.

Editorial Staff
 

Editorial Staff is an in-house team of native WordPress developer and industry columnists.

  • Ainul D says:

    Hello, Anwer Ashif, many thanks for your definitive tutorial.
    I’m a big fan of Genesis theme also, but as a newbie and has a lot of lack of Genesis customization. And your article is rock, helps me learning a lot.

    I’m very glad if you make videos for your genesis tutorial, it will make more sense.

    Can I request a tutorial? I already searching in the whole internet, but all of them are outdated. I need tutorials to make custom genesis theme based on Genesis sample. Ex: creating a custom homepage, custom post type, front end etc.

    Thanks for your help.

    • Anwer Ashif says:

      Hi Ainul,

      Thanks for your feedback. This post is for creating a front page template, you can create a homepage template flowing all steps in this post. We have more than 30 posts on custom website development using Genesis Framework. You can access all them here on WordPress and Genesis Framework Tutorials for Beginners.

      • Ainul D says:

        Thanks for your response, Ashif Anwer.
        I already read and learn a lot from your blogs when first time find out it.

        Can you make tutorial about custom post type in genesis within custom field without any plugin?

        I glad if you can do that.

  • >