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 4 – Example #2 – Add Links to the List of Posts from a Single Category

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

At this point in this lesson on Using Secondary Loops to Customize Genesis with PHP we have created a function to add a lists of posts from a single category and we’ve examined secondary loops in detail. So now that we’ve done that, let’s make the function we created a little bit more useful.

Add Styling to the List of Posts

One of the things I want to do to make it more useful is to include the Genesis HTML into it. I left it out in order for the function to be simple so you could understand how it works.

Really, we want this list to be styled in the same way as the rest of the content is being styled on the site. And the easiest way to do that is to simply reuse the HTML that’s being used by the child theme rather than creating our own.

Let’s take a look at this function and this is our ul and these are our lis. If you look at this, this is in a section with the class of “widget” and then inside of that there’s a class of “widget-wrap”.

Insert HTML from Child Theme into the Function

So what we’re going to do now is borrow this code and insert it into our little function. What we’re going to do is leave PHP and then enter PHP again for this. What we’ll say here is, section class=”widget”.

We’ve got section class=”widget” and I don’t think we need “widget_text” for anything. We’re fine with that so section class=”widget” and then inside of that we’re going to give ourselves div class=”widget-wrap”. So section class=”widget” and we just need the same thing down here below. Let’s copy it and then I’ll just delete. And closing section so we know these two sections go together here.

Inside that section we’ll do a div class=”widget-wrap”. So inside of this there’s our closing div for that and then inside of that now we’ve got our ul. And keeping character with this what we’ve said is, let’s wrap the results in section, inside that section we’ll have a div with a class of “widget-wrap” and then we’ll have our ul and our li.

Once we do that we will be taking all of the styles that exist in the skin and adding them. So heres what it looks like in the skin. Now this is all formatted, it’s got its nice little background and the border around it looks like it belongs here.

Add Links to the Titles

So the other thing we want to do with this is add a link and right now we’re echoing out this get_the_title but what we really want to do next is a href=. And let’s go get the link to this.

Use get_permalink

The function that we’re going to use for that is called get_permalink. Again, it doesn’t display the link it just gets the information. We’re going to use an echo statement, we’re going to embed it in our echo statement.

It takes two parameters. The first parameter is the $id of the post whose link you want. Although that’s optional in that you don’t need it inside of the secondary loop because it will get the id from inside the loop itself.

Then you can have this second option which is $leavename. It’s really an odd sort of thing. It just does something weird that I think is not useful at all. But what’s useful is get_permalink. So we’re going to say echo here and then get_permalink.

These are concatenation symbols and what’s happening is we have a string here that is some text that’s going to be echoed exactly as it is and then we have a concatenation symbol which means it’s going to tuck on to that, the result of get_the_permalink.

Then we’re going to add another concatenation symbol because we actually need a complete link and so that’s a href=. We’ll just stop there and close out the a tag. So a href=” get_the_permalink and then inside of the a tag is the title itself. Then we put in our closing a. And now we’ve created a link.

So now each one of these is the link to the post. I need to fix the permalinks here oddly enough. Settings, Permalinks, so %category%/%postname%/. Save it and that continues to work. Now, it’s taking us to Apples, Yellow Apples so on.

Add a Heading to the List

The next thing we want to do inside of this is to add a heading to this and then we’re going to break this up into its component parts. This is really Red Apples, Yellow Apples and Green Apples.

Note that this widget title here is an h4 inside of a class of “widgettitle” and so if we want to do that here inside of “widget-wrap” we can do an h4 class=”widget-title” Apple Posts closing h4. You can see we are very deliberately borrowing the class names so that we can embrace the styles of the child theme.

Add Subtitles to the List

Now, what happens if we want to take these Apple Posts and divide them up into Red Apples, Green Apples and Yellow Apples? In that case, we just end up with 3 different queries like this.

Create 3 Different Queries and 3 Different Sets of Query Arguments

What we’ll do is say $red_args and $red_query and then we’re just going to copy this again twice, $red_args, $yellow_args and$green_args. Then we’ll do the same thing with this, $red_query, $yellow_query and $green_query.

Then $yellow_args will come into the $yellow_query and $green_args will come into the $green_query. So we’re creating 3 queries and if none of the queries have a post we don’t want to display this subheading. To do that we’ll say if $red_query->have_posts or and now the or symbol are the two straight lines (||) so if $red_query->have_posts || $$yellow_query->have_posts || or $green_query->have_posts then we’re going to do this.

Having said that, then we’re going to come down here to our “widget-wrap”. Let’s see, h4 class=”widgettitle”. So that’s $red_query->have_posts then we just copy this three times. So then this is Red Apple Posts, this is Green Apple Posts and this is Yellow Apple Posts. Then instead of $red_query here, now we have $green_query and $yellow_query.

So we have 3 sets of query arguments, we have 3 individual queries, we have 1 big question.

Actually, we want a second smaller question which is if $red_query->have_posts. First, we’re asking if all 3 of them do, if all 3 of them do then we’re going to come in here. It’s the other way around isn’t it? Yes, we’re back into PHP.

Then if $red_query->have_posts then we’ve got while $red_query->have_posts and then we just come back down then we close out that function.

We don’t want the Red Apple Posts title if there aren’t any red posts, right? The same thing is true with the Green Apple Posts.

So then we will come down there and say if then the $green_query->have_posts and then if the $yellow_query->have_posts, we close it out if $green_query->have_posts we close it out, if that has post we close it out.

And now we have a working function. The point of this is that we are defining 3 different sets of query arguments then we are creating 3 different queries. Then we are creating 3 different secondary queries.

Of course, these “cats” aren’t right so we need to go figure out what the categories are. So Red Apples is 8, Green Apples is 5 and Yellow Apples is 10. We’re saying 8, 5 and 10. When we upload this we will have 3 loops displaying here, Red Apple Posts, Green Apple Posts and Yellow Apple Posts.

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