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 6 – Example #4 – Display a Grid of Custom Posts on the Front Page

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now that we have the system for adding a grid of post thumbnails to the front page in Genesis, the next thing we’re going to do is to display a grid of custom posts on the front page. And I’m going to do that for one of our member’s sites, Design on Media. He’s got a portfolio post type and he wants his portfolio to display down below this.

Frankly, there were some very odd tutorials he read about how to do this that were not helpful to him but we’re going to use the simple and straightforward way of adding his portfolio images and links to his portfolio stuff on his front page. It’s very much like what we’ve just done.

I’m going to head over to FileZilla and switch from the site we’ve been working on to his site, designonmedia. As you can see, byob-custom-functions.php is here because I already installed the Genesis Child Theme Editor plugin on his site.

The file is blank so I’m just going to dowload it back to myself here and open up my empty version of this.

Create the Function

We’re going to start modifying the existing function. First let’s say dom for Design on Media and it’s going to be display_portfolio_items and in this case, we’re not using ‘cat’ but we are going to use ‘posts_per_page’.

Specify the Post Type

Instead of this what we want to do is specify the post type. In this case, it’s post type agnostic. If you had portfolio items that had categories applied to them then this would bring up both posts and portfolio items but we’re not trying to separate them by any kind of taxonomy. We only want to show the portfolio post types.

So we have to come over here to WP_Query and go back up to our type parameters and the type parameter is post_type and the value is either ‘post’, ‘page’, it could be ‘revision’ or ‘attachment’ or ‘nav_menu_item’ but we’re going to use the slug of our custom post types here for this.

Instead of ‘cat’ it’ll be ‘post_type’ and instead of 2 it will be ‘portfolio’ and then we want this dom_display_portfolio_items. So the only thing we’re doing differently here is we are now selecting for a post type and I think what we’re going to do here is 12 images.

We’re selecting for a post type but it’s the same HTML that we want to use so that’s all there is to it really, it’s actually quite simple. It’s a very slight innovation on what we’ve already been doing.

Review Portfolio Items on the Site

When we refresh the site we’ve got these different portfolio items here. I’m actually going to show you essentially how to create this out of these.

Add Titles to the Images

Again, we’re going to add a couple of things to this. The first thing we’re going to do is note that below the image it has a header with a class of “entry-header”. Then the title has an h2 class of “entry-title”. Actually, display_full_portfolio_items I’m going to hide. So we’ve got our article and then inside the article we’ve got our image and then we’ve got header with a class of “entry-header”.

That is going to happen here header class=”entry-header” and then inside of that we’re going to do an h2 class=”entry-title”. And inside of that h2 instead of using get_the_title we’re going to say the_title because now we’re not echoing anything that’s happening here.

Difference Between Embedding PHP in HTML and HTML in PHP

Note the difference, here I’m embedding HTML inside of the PHP, here I’m embedding PHP inside of the HTML so I’m not using an echo statement I’m using HTML.

The reason I’m doing this is just to show you a different way of doing it. Generally speaking, I actually do it this way but the WordPress convention is actually do HTML while slipping PHP into this.

Review the Changes and Correct Class

We could probably stop right here for a second and upload it. Now we’re going to have our entry titles added. I must have gotten the class wrong, “entry-title”,h2 class=”entry-title”>. Look at that, .page .entry-title. It was getting that from article page so that’s what we need to do on our article, article class=”page entry” and now our entry title will look like what we want it to look like. Page “entry-header” needed that also. So we’ve got header class=”entry-header”, h2 class=”entry-title”.

Add an Excerpt

The next thing we want then is this excerpt. We’ve got our header class=”entry-header”, we’ve got our div class=”entry-content”. This is being controlled by something called featured-content. Did we add featured-content to this? Yes, we did. So we need entry-content. Below that is a div class=”entry-content”.

Now we want this excerpt like text and we are going to be using the excerpt. Again, the_excerpt is like the_title, it’s something that you’re probably familiar with but this is going to print out the_excerpt there.

Let’s upload that. And now we’ve got excerpts showing up here. The only real difference is these are two lines and this is all one line.

Add Links to the Titles

The other thing that we can do here is add a link to this and make these link. So if we’re going to make the title link, obviously we need to do a href= and then we’re going to join PHP and again, it’s the_permalink. And a href=”?php the_permalink and we need to close out that a. So we’ve got our a href= and then the_title and we’ll just take a look at it.

Add More Link

Now these link like that and then if we want to add the Learn More we just need to get the “entry-content”. There’s a More link, class=”more-link”. Then inside the “entry-content” we would say a href= and then we’ll just come back here and get this thing a href= and class=”more-link” and close out the a. Then we’ll just say View the Portfolio so now we have the link that does that.

Add Conditional Statement Limiting it to the Front Page

We have now used the secondary loop to essentially recreate these widgets but to do it for the portfolio items and these links just link off to the individual items. So there’s our portfolio item. We don’t have if is_front_page so we’ve still got this portfolio addition happening down there.

Now we want to get our if it’s not front-page return business happening. Again this conditional statement will limit the display of the items. So if !is_front_page return. This is only going to happen on the front page. Let’s double check it’s working. Yes, it’s only showing on our front page.

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