Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 5 – Example #2 Create a Widgetized Content Area on the Front Page

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this final example for this Using Custom Sidebars in the Genesis Theme lesson we’re going to see some of the more detailed things you can do with sidebars in the context of creating a content area on the front page.

Genesis Front Page Missing SEO Benefits

I think most of these Genesis child themes do not have any good indexable content on their front pages which is, from an SEO standpoint, horrible. This doesn’t have an h1 tag anywhere on it and it doesn’t have a main content area.

Often There is No Original Indexable Content

In fact, the way this markup is done here, Google is going to say there is no main content on this page because everything in this is essentially asides or sections or secondary content. It’s actually duplicate content because its content is being taken from its original pages.

Adding a Content Area can Fix this Problem

To the extent that you want there to be some reason for Google to index your front page you need to add content to it. Well, by creating a content area and using the text widget and the visual editor widget from BlackStudio TinyMCE plugin you can add content to the front page.

This is one way you can easily add content to this. This has an h1 tag and that’s indexable and has all the appropriate schema and markup and everything else. Anybody serious about their website is going to do that on their home page because it just doesn’t make any sense for you to have a home page without any indexable content on it.

Add the Sidebar on the Front Page

So that’s what we’re going to work on here. And, of course, the very first thing we’re going to do is register the sidebar. The id is going to be ‘front-page-content’, it will say ‘Front Page Content’ and then ‘This widget area provides a content area on the front page below the slider’.

Now, we’re going to add something else to this but not quite yet. We’re going to look at other things first. We’re just going to keep it at this, ‘id’, ‘name’ and ‘description’ and then we’ll copy this. It’s going to be byob_front_page_content_widget and the id is going to be ‘front-page-content’.

Add a Conditional Statement

For the moment we’re just going to say that the class is “front-content”. We’re going to do more with all of this here in a few minutes but I’m going to start with this. So byob_front_page_content. We need our conditional statement and the conditional statement in this case, if is_front_page put this there otherwise, don’t.

Let’s take a look at conditional statements for just a second and look at our conditional tags in WordPress. You can see the conditions for the main page and the front page.

Conditional Tags for Front Page in Genesis

Now, it can be a little bit confusing which of these to use. In Genesis is_home() and is_front_page() will behave the same because most Genesis child themes do this entirely ass backward.

For whatever reason, Genesis made a value judgement that people can’t go to Reading Settings and say I’ve got a static front page on my site and select a page to be their front page and another page to be their posts page. So they have their own system which we may as well learn to work around even though I think it’s actually not a good system.

As people become more and more acquainted with the way WordPress works I find people get confused by this whole setting a static front page in Genesis if they’ve come to it from another theme.

In our case, we could use is_home or is_front_page but because it’s behaving like a static front page, I’m going to use is_front_page as our conditional tag for this.

Add the Hook

So if ‘is_front_page’ then ‘front-page-content’ and we want ‘genesis_after_header’. You can see that by looking at the front page template here for a moment. If we look at where it’s putting things, add_action ‘genesis_after_header’, enterprise_home_top_widgets’ that’s where the slider is so that’s the hook I want to use rather than ‘genesis_footer’, ‘genesis_after_header’.

Add a Priority

The only other thing to say about that, of course, is that because we’ve got so many things hooking into that section we really want to give it a priority. We want this to be last so if you are worried about it you could just say 99. So our priority is 99 which means it’s going to come after everything 98 to nothing and we’re going to save that.

Add Front Page Content to the Widget Area

Then we’ll come over here to our widget areas, Appearance and Widgets. We’ve got a brand new widget area, our Front Page Content. “This is the Main page heading for the front page” and then we’ve got a bunch of lorem ipsum text and hit save.

Let’s come back over and look at our site. Whoops. I’ve got the wrong add_action going on there. Let’s fix that. This is actually ‘genesis_footer’ and that. And we didn’t want the priority on that one we wanted the priority on this one. So ‘genesis_after_header’, byob_front_page_content_widget’, 99. Now we’re going to be okay.

Review the Widget Area and Make Changes

And we’ve got our widget area on here, we’ve got all this text down here. It doesn’t look right though, does it? That’s an easy fix actually. We’re going to come over here and take a look at what the content should look like in this case.

Start by inspecting the element of this content and you can see that wrap is the thing that specifies a width, div class=”wrap” that’s 114. So we want this stuff to be contained inside of something called “wrap” and then note we also have a main section here that we want to include so that we can tell that it’s supposed to be the main section.

Add Schema Markup

In fact, what we’re going to do here is instead of div class=”front-content” we’re going to say div class=”wrap” main class=”front-content”. And we may as well go grab this role and itemprop as well.

So we’re going to take role being main because from an SEO standpoint this schema markup is what you want. Okay, itemprop=m”mainContentofPage”. Now we’re actually setting this up both by giving it a dimension and then by giving it main, of course we need our closing main tag.

Let’s save this, upload it and reload it. Now at least it’s got some dimension and we’ve got our div class=”wrap” that’s giving it its dimension. We’ve got our main with that in it, then we go to a section and we’ve got “widget-wrap” whereas over here, there’s our main and then the next thing is an article.

So we’ve got our article, inside of article we have a header and that kind of thing so we’re going to do exactly the same thing here. We’re going to say article and then in Genesis, this class name “entry” is really important so we’re going to say article class=”entry” and then we’ll do the itemscope, itemtype.

I think I did itemprop wrong actually. I did, itemprop. So that’s where the ‘before-widget’ and ‘after-widget’ comes in so we’ll come over here now and we’ll look at some new stuff.

That’s going to be ‘before-widget’ and we’re going to say article class=”entry” and then we may as well do our itemscope and itemtype and let’s get the right itemtype. Let’s go to schema.org for the correct schema markup.

This is not a CreativeWork. I’ll call this an Article and so it’s there. Our itemtype is Article. So we’ll come back over here to this, itemtype=”article”. Actually, let’s take that, itemtype=https://schema.org/Article so we have it correct.

That’s our ‘before-widget’ then we have our ‘after-widget’ and, of course, this is just closing article and then we have ‘before-title’ and ‘after-title’.

Let’s come back over and look at the site here and look at the title. This is a header with a class of “entry-header” and then it’s an h1 with a class of “entry-title” and it’s got an itemprop of “headline”. So this is what we really want to add to that.

Let’s do that, it’s header class=”entry-header”, h1 class=”entry-title”. Then we say ‘before-title’, ‘header class=”entry-header” and then it was an h1 class=”entry-title” and we had our itemprop=”headline”.

So we’ve got our schema in here, we’ve got our h1 and then we just have our ‘after-title’ and ‘after-title’ is going to be our closing h1 and our closing header. Now we can save this and upload and reload it.

Let’s just make sure that we’ve got that right. So register_sidebar, oh it’s underscore that’s what it is, before_. These are little kinds of things that you can’t get wrong if you want things to work correctly. I learned a long time ago that if code I think should be working correctly and it isn’t, it’s my fault, it’s operator error.

Let’s try that again. There we go. Now, we’ve got nice big text we’ve got a big heading. We can see that we’ve got our main, we’ve got our article, we’ve got our “entry-header”, our “entry-title”, come back down to our header.

Add the Article Body

Now, the one thing we are missing from this is the article body for the schema and we are going to add that in an odd way but let’s come over here. I always want to get the schema right. Schema is playing such an important role these days.

Here we get to our “entry-content” itemprop=”text”. And this is the part that we are missing and we’re going to add that here after the title. So div class=”entry-content” itemprop= and to tell you the truth, you could say “text” here, for articles but I prefer “articleBody”.

That’s ‘after_title’ but now what we’re going to have to do is come down here and add the closing div for this because this ‘after_title’ is opening up a div. Down here we’re going to have to close the div because this comes right after the content.

That’s a little trickier but what I hope it does is provide you with complete and accurate schema. There it is, “entry-content”, “articleBody”, so it’s opening and closing there. It’s wrapping around the text widget and so we’ve got all of our appropriate article, header, div class=”entry-content”, articles all closed out.

You’ve got essentially everything you want both from a structured markup standpoint and also from an HTML standpoint.

Add Top Margin

I think the one thing I would like to do is add some top margin. Let’s try that, margin-top:48px that did it. So we could just come over here to “front-content” and add 4rem, is what they’re using, that’s fine.

Then just come back over here to our “front-content”, we’re going to put above the secondary navigation actually, front-content margin-top:4rem. And now we have content on the front page that it needs and it’s all because we added a separate widget area.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment