Website Guider

The Ultimate Resource for WPadmins and Geeks

How To Create Custom Homepage In Genesis

Do you want to know how to create custom homepage in Genesis?

By default, the Genesis theme framework doesn’t have any modern-looking homepage; instead shows the latest posts.

Many Genesis child themes have a custom-built homepage. The best part of these child themes is that they register widgets to add content to the homepage.

If you are looking for a tutorial on creating a custom homepage, you have landed in the right place.

In this tutorial, we will learn how to create custom homepage in genesis.

Let’s start.

Custom Homepage in genesis

To create custom homepage we have to play with code. So be ready to code.

Note: You must use FTP or Hosting File Manager to edit, create, or delete files. Also, take a full backup of your website before proceeding.

Head towards wp-content/themes/genesis. There create a file named as front-page.php or home.php

You might ask yourself “What is the difference between the two?”

Let’s discuss this in list.

Home.php

  • WordPress uses this template as a blog index by default.
  • If home.php exists, then it has more priority than index.php.

Front-page.php

  • If you want to show a static page, this template will be used if it exists.
  • If the user lands on the root page of your website, this template will be shown.

Above we discussed these two things, so we will use front-page.php.

Before that we have to write other code also.

We will register the sidebars first because these will help us in the widgets section to place content.

Open your functions.php file and scroll to bottom and this code.

//* Register widget areas
genesis_register_sidebar(
array(
'id' => 'home-top',
'name' => __( 'Home - Top', 'websiteguider' ),
'description' => __( 'This is the top section of the homepage.', 'websiteguider' ),
) );
genesis_register_sidebar( 
array(
'id' => 'home-middle',
'name' => __( 'Home - Middle', 'websiteguider' ),
'description' => __( 'This is the middle section of the homepage.', 'websiteguider' ),
) );
genesis_register_sidebar( 
    array(
        'id' => 'home-middle-2',
'name' => __( 'Home - Middle 2', 'websiteguider' ),
'description' => __( 'This is the second middle section of the homepage.', 'websiteguider' ),
) );
genesis_register_sidebar( array(
'id' => 'home-bottom',
'name' => __( 'Home - Bottom', 'websiteguider' ),
'description' => __( 'This is the bottom section of the homepage.', 'websiteguider' ),
) );

The above code registers four sidebars we will use in homepage.

genesis_register_sidebar() It is a function provided by Genesis to add sidebar areas to the theme.

Now let’s do the rest of work.

Let’s create the homepage file. Go inside your genesis theme folder and create a file front-page.php.

Inside it, we will write some code to make our awesome root page or home page.

Here is the overall code you have to paste in your front-page.php.

<?php
/**
* This file adds the Home Page to the Genesis Theme.
*
* @author WebsiteGuider
* @package Genesis Theme
* @subpackage Customizations
*/

add_action( 'genesis_meta', 'wg_home_genesis_meta' );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function wg_home_genesis_meta() {

if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-middle-2' ) || is_active_sidebar( 'home-bottom' ) ) {

add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

add_filter( 'body_class', 'wg_body_class' );

remove_action( 'genesis_loop', 'genesis_do_loop' );

add_action( 'genesis_loop', 'wg_homepage_widgets' );

}
}

function wg_body_class( $classes ) {

$classes[] = 'wg-custom-home';
return $classes;

}

function wg_homepage_widgets() {

genesis_widget_area( 'home-top', array(
'before' => '<div class="home-top widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-middle', array(
'before' => '<div class="home-middle widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-middle-2', array(
'before' => '<div class="home-middle-2 widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-bottom', array(
'before' => '<div class="home-bottom widget-area">',
'after' => '</div>',
) );

}

genesis();

Let me explain this code snippet.

First thing I am doing is forcing a full width layout using the filter.

<code>add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' ); </code>

After forcing full-width layout, I am adding a class to the homepage, and after that, I am replacing the default loop { remove_action( 'genesis_loop', 'genesis_do_loop' ); } with custom loop { add_action( 'genesis_loop', 'wg_homepage_widgets' ); }.

Then I am registering widget areas to show content on the front-end by using genesis_widget_area() function.

Remember, you have to pass the ID of the sidebar to it. For example, we earlier registered a sidebar ‘Home – Top’. There we assigned the sidebar an ID of ‘home-top’ and the same ID we are using here to show content on that place.

We are registering four widget areas as we earlier registered four sidebars only. Here is the screenshot.

Widget areas in genesis

What to do after registering the widget areas?

The first step towards designing starts. You will have to insert the widget areas in the Widgets section like Genesis Featured Posts or Pages, Simple Social Shares, Custom HTML, Text, etc.

But to give an example I will use Custom HTML to create a manual design.

<section class="top-section">
    <div class="section-wrap">
        <div class="sec-left">
            <h2>Right Side</h2>
            <p>Welcome to hero section......</p>
        </div>
        <div class="sec-right">
            <p>Image Here</p>
        </div>
    </div>
</section>

I added some text and images on the left and right sides in the above HTML markup.

Now it is time for styling the front-page. If you apply the above code to any child theme, then styles may vary. So I am coding this CSS using Genesis 2.9.

.wg-custom-home .site-inner {
    max-width: 100%;
}

.wg-custom-home .section-wrap {
    max-width: 1280px;
margin: auto;
}

.wg-custom-home .sec-left, .wg-custom-home .sec-right {
    width: 49%;
    display: inline-block;
}

.wg-custom-home .sec-right {
text-align: center;
}

In the above CSS code, I am first changing the default. Site-inner width to 100%. Then, I am setting the width to .section-wrap and margin to auto . Then I am giving a little designing to the two sections of the .section-wrap element. To make them inline, I am applying a width :49% and to each.

Remember: You have to design the code as per your theme style. So it isn’t all CSS code; it is just an example.

Conclusion

That is all; you can now design your website homepage as per your needs. You have to register the widget areas and sidebars also. After that, add content to the sidebars using widgets.

I hope you loved this tutorial on creating a custom homepage in genesis. If you need any help, please leave us a message, and we will surely help you.

Also, don’t forget to share the content with your friends.

Raashid Din Dar

Raashid Din Dar is a web developer and designer. He specialises in WordPress Theme and Plugin development. Also, Web Designing is what he loves.He loves to read books and play with friends.

Leave a Reply

Your email address will not be published.

Back to top