Create a Static Front Page With Widgets, Too

Create a Static Front Page With Widgets, Too

Use a static front page with widgets, too.
One area of WordPress which seems to consistently take more explaining to clients than others is the website’s front page setup.

When you first install WordPress, your site is set up to show your most recent posts as your site’s home (or front) page. This is great if you’re a blogger and want that, but slightly less so if you are putting together a more standard site and want something other than a news feed opening up your site.

One approach StudioPress/Genesis (affiliate link) have taken is to create a widgetized home page. If content exists in any widgets designated as home/front page widgets, then those show on your front page, rather than your most recent posts. This option can give you a lot of flexibility, as you can put anything you like in your widgets.

Another option is to go to Settings > Reading and change “Front page displays” to be a static page, and use a separate page as your blog page (no blog template required; WordPress sets this page up to display your blog posts).

So you have (at least) three options for outputting your front page, and none of them are wrong, which is great. However, on a couple of pending projects, I’ve realized a need for another option, which probably makes a bit more sense to the average user. I think.

You see, when I set up a site to use page A as a static front page and page B as a blog, it makes sense to me. I can populate the front page with whatever content I need from an SEO perspective, and then, if I want to have a fancy schmancy home page layout, I can build it out completely with widgets. Which, again, makes sense to me, because at this point, that’s how I’ve been taught.

However, I’m working on a site where I’m doing the programming and someone else is entering the content. She worked on the site and then sent me an email saying, “I updated the copy on the front page the other day and for some reason I am not seeing the updated version. It is in WordPress…” Although I had shown her the widgets and explained how they worked to build out the front page, she saw the static page and assumed that this was where she should add the site’s front page content. I explained the mistake and showed her the widget areas and we moved on.

Except.

I think she was not wrong. Why should I create a static page, mark it as the front page, and then tell her that it won’t actually display on the site, since she’s using all these fancy widgets? That she can put content in the front page, but it needs to be copied to the widgets in order to show?

Seems a little redundant to me, too.

Now, this isn’t an ideal solution for everyone, and maybe not even most people, but what I did for this situation was this: I created a front-page template that shows both the page content, if it is a static page, and any front page widget areas which are so designated. If the WordPress site is set up to display the latest posts on the front page, they will show, unless the front page widget areas are populated. If those widgets have any content, then they will override the latest posts.

This creates three possible front page scenarios on one site:

  1. a “standard” WordPress front page showing the most recent posts, no widget areas
  2. a static front page with no special widget areas
  3. a static front page with additional widget areas (the solution needed for my client)

It’s fairly easy to set up, so let’s walk through it.

Register the Front Page Widget Areas

To have widget areas available for your use, you need to create them. Add this code to your functions.php file. You can create more or fewer widget areas as your heart desires.

<?php
// Do not include the opening php tag! Add this code to your functions.php file.
/** Register widget areas */
genesis_register_sidebar( array(
'id' => 'home-top',
'name' => __( 'Home Top', 'robin-works' ),
'description' => __( 'This is the home top section.', 'robin-works' ),
) );
genesis_register_sidebar( array(
'id' => 'home-left',
'name' => __( 'Home Left', 'robin-works' ),
'description' => __( 'This is the home left section.', 'robin-works' ),
) );
genesis_register_sidebar( array(
'id' => 'home-right',
'name' => __( 'Home Right', 'robin-works' ),
'description' => __( 'This is the home right section.', 'robin-works' ),
) );
view raw functions.php hosted with ❤ by GitHub

Create the Front Page Template

This is where the work is really being done. I’ve commented throughout the code, but the high points are:

  • In my main function, I check to see if any of my front page widget areas are active at all. Because my Home Left and Home Right widgets are both half width, I have my function set up to check for both of them being active–if only one is, it won’t display. In my world, there needs to be balance in the Force.
  • Then I check if WordPress is set to use a static front page. If so, I remove the title, and call a function to show the featured image in the page content header.
  • If WordPress is using the most recent posts for the home page instead, AND home page widgets are active, the loop is removed.
  • No matter what, if those widget areas are active, we’re going to show them.
  • The final function of the template actually lays out the widget areas. This layout has one full width widget area, and then two which have a class of one-half.

One thing this template does not do is force the front page to be full width, which many templates do. The reason I chose this is because you can change the front page layout when you’re editing the page itself, under the Genesis Layout Options. You can use your default layout, as I have in my screenshot, or you can change it.

<?php
/**
* Front Page template for Robin Works theme. Optionally adds widget areas to be used in addition
* to a static home page.
*
*
* @author Robin Cornett
* @license GPL-2.0+
* @link http://robincornett.com/
*/
add_action( 'genesis_meta', 'robin_works_front_page_meta' );
function robin_works_front_page_meta() {
if ( is_active_sidebar( 'home-top' ) || ( ( is_active_sidebar( 'home-left' ) && is_active_sidebar( 'home-right' ) ) ) ) { // check for active home widgets. if using right/left, both must have content. for balance.
if ( is_singular() ) { // check if the home page is a static page
remove_action( 'genesis_entry_header', 'genesis_do_post_title' ); // if it is, remove the page title.
add_action( 'genesis_entry_header', 'robin_works_home_featured_image' ); // if it is, display the featured image in the page header
}
else {
remove_action( 'genesis_loop', 'genesis_do_loop' ); // if it's not a static page and widget areas are active, remove the loop (latest posts)
}
add_action( 'genesis_loop', 'robin_works_home_widgets' ); // regardless, show the widgets.
}
}
function robin_works_home_featured_image() { // display the featured image for the front page. Large, please.
global $post;
$image = get_the_post_thumbnail( $post->ID, 'original', array( 'alt' => the_title_attribute( 'echo=0' ), 'title' => the_title_attribute( 'echo=0' ) ) );
echo $image;
}
function robin_works_home_widgets() {
if ( is_active_sidebar( 'home-top' ) ) {
echo '<div class="home-top">';
genesis_widget_area( 'home-top' );
echo '</div>';
}
if ( is_active_sidebar( 'home-left' ) && is_active_sidebar( 'home-right' ) ) { // both left and right widget areas need to have content. balance.
echo '<div class="home-left one-half first">';
genesis_widget_area( 'home-left' );
echo '</div>';
echo '<div class="home-right one-half">';
genesis_widget_area( 'home-right' );
echo '</div>';
}
}
genesis();
view raw front-page.php hosted with ❤ by GitHub

Add a Teeny Bit of Style

Since the front page template assigned the left and right widget areas a class of one-half, a fair amount of work has already been accomplished on those. Anything else you need is kind of cosmetic. The following style makes the featured image for the static page be full width, larger than the content below, and adds a background and padding to the widget areas. You can, of course, go crazy with this.

.home .entry {
padding: 0;
}
.home .entry-content {
padding: 40px;
}
.home-top,
.home-left,
.home-right {
background: #fff;
border-radius: 3px;
margin-bottom: 40px;
padding: 40px;
}
view raw style.css hosted with ❤ by GitHub

…and that’s it. You can go a lot of different directions with this tutorial and the widget areas you want to add. But this gives you the flexibility of fully using your static front page, which makes sense to more users, I think. If you want to see it in action, check out my playground site.

Do something awesome. Tell a friend:

subscribe by email

If you're an email kind of person, that's totally cool. Go ahead and sign up here to get the latest blog entries in your inbox! No worries, I never share your address.
  • This field is for validation purposes and should be left unchanged.

Reader Interactions

Comments

  1. April 24, 2015

    Brilliant! Thanks for sharing! Really helped a newbie like me in Genesis 🙂

  2. February 3, 2017

    Nice description, this is a good solution for custom frontpages.
    But it seems your code is invisible? You wrote “Add this code to your functions.php file.” but I cannot see any code?!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Bars Code Check chevron-down chevron-left chevron-right chevron-up Envelope Laptop Search Times Facebook GitHub Google Plus Instagram LinkedIn Pinterest Twitter WordPress Logo Wordpress Simple