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 Genesis Framework? Have a new design concept for 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 gonna learn how you can create a custom front page template design for your blog website.

You may be heard about the widgetized template in Genesis. No! Well, a widgetized template is a PHP template and 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 out, I want you to take a look at the homepage of RainaStudio.com. There are six content blocks.

  • At the first section of the block, you are seeing 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.
  • Following block has divided into two sections and both are widgetized. The first block is for posts of “FEATURED TOOLS REVIEW” category. 3 of most recent or updated published posts shows here.
  • In right block, we pull 10 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 post will be visible here.

This is a sub-post of RainaStudio Map 101 blog series. You have not checked previous posts of this series yet! Don’t miss them, they are following.

Creating Custom Front Page 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 5 widget areas. Add the following snippet in functions.php file to register widget areas in Genesis child theme.

After including those code into the file, you’ll see 5 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 filterfull-width-content filter, and so on. Let’s build the custom front page template.

We included this piece of code into front-page.php template. This template only run 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 first two blocks of the template. In the next step, we removing the Genesis default loop and adding rest of widgets to 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 gist 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 front page 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 a feedback? Yes! Use the replying form to leave your input. We will be in touch in short time.

  • 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.

  • >