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 2 – Add the Magazine Style Loops to the Front Page

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now we’re going to begin working on customizing the front page template using Genesis child theme options. This actually starts off fairly easily with a custom loop that we created in Lesson 6.

The Custom Loop We’re Using

We created this custom loop that displayed portfolio items and this is secondary loops. So the query args in this case were ‘post_type’ and ‘posts_per_page’ and then inside that secondary loop we built the HTML structure and then hooked it into a specific location on that front page.

Well, we are going to do that again so I’m going to copy that rather than going through all this from scratch again. Let’s come over here to our byob-custom-functions.php file and paste it there.

Using the BYOB Genesis Child Theme Editor Plugin

Now, if you’ve been following along in this series you know that I strongly suggest that you never customize your functions.php file and your child theme but instead, use my plugin, the Child Theme Editor plugin. It creates this file for you and then you put your customization there.

The benefit is that when the theme updates you don’t lose the customization that you’ve made. You’re essentially separating your customization from the skin itself. So we’re going to be working in this byob-custom-functions.php file.

Modify the Custom Loop

We’re going to rename this custom loop from ‘dom_display_portfolio_items’, to ‘byob_front_page_featured_categories’. Copy that. We’re going to hook it to the same hook that we did last time, so it’s going to still be hook to the ‘genesis_loop’.

We’re just going to stick that in there. So we’ve got the add_action ‘genesis_loop’, and then there’s the name of our function and then it’s number 11 so it happens after the loop.

Set Up 3 Different Queries and Arguments

We’re actually creating 3 of these columns. One column for one category, one column for another category and the last column for the third category so we really need 3 different queries and 3 different sets of arguments.

We’ll set up the first one. Now in this case, we don’t need to specify a post type. If you don’t specify a post type then automatically it chooses posts and since we’re showing posts of a specific category we don’t have to do that.

Choose Display by ID

Let’s go over to WP_Query for a second. I look at this so often that it automatically comes up. If we look at WP_Query, Category Parameters and then Tag Parameters, you can see that you can pick it by id or you can pick it by name.

We’re going to go ahead and pick it by id. At the moment, we’re going to use ‘cat’ as our query arg and we use category id as the element. So in this case, ‘cat’ => and let’s go find 3 category ids here on this site.

We’ll pick Cherries which is id 4, we’ll pick Oranges which is id 6 and we’ll pick Red Apples which is id 8. So 4, 6 and 8 are the 3 category ids we’ll choose.

We’ll begin with category 4. For post per page we’re going to just show 3. Instead of $red_args let’s just say $args1. So we have $args1 is category 4, posts per page, 3. Actually, I’m making a mistake here, let’s go look at this reference again.

Difference Between a Number and an Integer

This is actually using an integer. The difference between a number and an integer, in this case, are these single quote marks. So it’s not ‘cat’ => ‘4’ in quote marks it’s just ‘cat’ => 4. This is an integer, this is a string.

This is going to be important here when we get to the settings, so ‘cat’ => 4 and then ‘cat’ => 6 and then ‘cat’ => 8. And we have our 3 query args set up.

Then we’ll just say $first_query = new WP_Query( $args1 ) and we may as well create all 3 queries now. That’s $args1, $args2 and $args3. Each of these queries is different and these are the arguments that are controlling these queries.

Set Up Structural Element

Now we need to set up our structural element and this is using that bottom widget area set up. We’re not going to really do that here so let’s take this div out of the loops and we’ll put it above the loops.

Pardon me, I think we are going to break it. Open up PHP again and we’ll take out portfolio, we don’t care about that here. And “home-bottom widget-area” I think that’s going to be fine.

Add Columns Inside Each Wrapper

There’s where our top is, here is our bottom and we want it to be outside of the if statement. So we’re going to come back down to here, close out and then open up PHP again. Now we’ve got our main wrapper there and then inside of each wrapper is going to be a column.

Using Genesis Class “one-third”

We’re going to start here with a div class=. Genesis has this series of classes and we’re going to say “one-third” and for the first one, we need to say first.

You may have been in one of these classes where the one-third didn’t work quite right because the one-third was too wide. But I’d failed to take into account the requirement to have “first”. What happens is the first one-third is actually narrower than the rest of them so the first one needs to be identified as being first.

So now what we want to do is to create the our other two columns, so div class=”one-third” and then we’ll just repeat that one more time. And in each one of these is going to possess a loop.

Then we have our if $first _query->have_posts, while $first_query->have_posts, $first_query->the_post and $first_query->the_post->ID, ‘featured-image’.

Content Limit

Then we’re going to make this content_limit smaller so we’re going to say 0 and then we’re going to say (Read More…). So we’re going to get the content limit. It’s going to be a fairly short excerpt, we’re going to have a Read More under that and then let’s remove this “View the Portfolio”. We don’t need that here so we’re just going to take that out.

So “entry-content”, “entry-title”, “entry-header” and it’s all about the $first_query. So $first _query->have_posts, while $first_query->have_posts and then we’re going to say “widget featured-content”, “widget-wrap”, “page-entry”, “entry-header”, “entry-title”, “entry-content” and article and section.

We may have to mess around with this a little bit because there maybe some CSS that’s going to kick in here that we don’t really want to affect us. In any case though, here’s one of our queries. Just come down here and copy it and then paste it.

Then we’ve got our $second_query. Just replace all those references to $second_query and then the same thing is true with $third_query. I’m going through this part quickly because this class is not really about writing secondary loops. That’s what Lesson 6 was about. This class is really about how to control those secondary loops on specific templates from skin options.

Review on the Site and Make Changes

So we have that down now, I think we’re just going to upload this and see how we fair. Upload it and then let’s look at the front page. Well, it’s not as good as it ought to be. First, we have a “Notice: Undefined property”, “Trying to get property of a non-object in categories on line 42”. On line 42, $first_query->the_post and then this one was in line 65.

You can see what’s happened here is that each one of these has been made into one-third of the width of the column and I think that’s probably because one of the things that we borrowed in this section.

Let’s see .home-bottom, .featured-content, width, .home-bottom .widget. We just have to change that name, it’s not .home-bottom. We’ll call it “featured-categories”. Let’s save that, upload that and that should give us a little bit more breathing room here, okay it does because now we’ve got them stacked 9 up.

“Undefined property: WP_Query::$the_post”. Clearly I have said something incorrect here, $first_query->have_posts, that’s odd. Well, $first_query->have_posts, $first_query->the_post and actually, it looks perfect to me. I see. I messed up when I cut and paste it, $red_query->the_post, $red_query = new WP_Query( $red_args ), $first_query = new WP_Query( $args1 ), $first_query->have_posts, $first_query->the_post. There’s a dollar sign in front of the_post, it doesn’t make any sense to me.

Let’s see, let’s search for the dollar sign in it. That’s some kind of cut and paste error here. “Trying to get property of non-object”, this is really where it comes from on line 42, on line 65 and on line 89.

On line 42, $first_query->the_post->ID, ‘featured-image’, does it look like it’s actually picking up? Yes, it’s got Cherries, Oranges and Apples just fine. So the query isn’t actually failing but 42, 65 and 89 these are notices. 42, 65, same thing and 89.

It’s actually doing what it’s supposed to do. That is, it’s picking up the post id ‘featured-image’ so it’s actually displaying it correctly. So where is my typo? I have no idea but you can see that it doesn’t like it. Well, for the moment I’m going to turn off notices and we may have to come back to this next week and I’ll tell you what the problem was but in the short term we’re going to turn off that kind of error reporting. Site Root, wp-config.php there we go.

I like to do this kind of work with debug on because those kinds of things generally are instructive. Well, that didn’t make it go away, did it? That’s because I didn’t upload it. There we go. So we are getting the images and the title of the post, we’re not getting the post content out of this. That’s actually not a problem, we can just leave it alone because it’s not going to do us any good if we don’t get the post content.

get_the_content_limit should be producing the correct result because we are in the middle of a loop and so it’s getting the post thumbnail just fine and it’s getting the title and the permalink just fine. Let’s see why we can’t get the content. Pardon me, that’s not what I want really. That’s not a WordPress function, that’s a Genesis function I’ve forgotten about that so let’s see what we’re doing wrong today that worked just fine before.

So under formatting.php, function get_the_content_limit it takes $max_characters, the link and $stripteaser is false so get_the_content_limit should be working just fine. Well, obviously I’m messing this up and that error that we have is preventing get_the_content_limit from finding the information because it worked perfectly in Lesson 6. I’ll try something simple here, the_excerpt.

That’s essentially what the content limit is supposed to be doing except that we’re modifying it. Let’s upload it again and refresh this page. So the first 3 are serving us with excerpt, oh that’s because I only did it on the first 3, get_the_excerpt so get_the_content_limit, function get_the_content_limit.

get_the_content_limit is inside the loop, it does not need a post id. For the time being we’re going to take this out and we’re going to use the excerpt. I’m not exactly sure why that’s not working, it actually isn’t the critical part of the class, it just happens to be the stumbling block.

Modify the Length of the Excerpt

We can actually change the excerpt so that it can be smaller and we’ll do that here right now. So, excerpt limit filter, the_excerpt. That’s fine and then add_filter( ‘excerpt_length’, ‘custom_excerpt_length’, I guess I got everything except for that function part. Let’s come down here, we’ll put it below our link here.

This is the standard filter here. ‘excerpt_length’ returns the actual length of the excerpt in words and then all we’re doing is modifying that on this template. So instead of 55, we’re going to take it down to 15.

Read More Link

And since we’re not using that little more function in Genesis I think we’re going to add the Read More button to that the same way we did last time but it’s not going to say View the Portfolio, we’re just going to say Read More.

We have our Read More link here and we’ll put that below the excerpt in each of these cases. Now we should have a working template. There we go. We’ve got Rainier Sweet Cherry, Bing Cherry and Van Black Cherries and with the little Read More links and then this one is the Jaffa Oranges, Hamlin Oranges and Read More.

On the top of each one of these things I’d like to put a heading. Let’s just use this h2 “entry-title”, and then what we want to do is get the category name from this. Since we’ve hard coded it we can say Cherries, Oranges and Apples but ultimately what we’re going to do is extract that information from the settings that we set up in the Child Theme Options.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment