Build Your Own Business Website header image

How to Display Testimonials in Thesis 2.1 Using Custom Post Types & Taxonomies – Part 4 – Setup the Testimonial Post Type Template

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

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.

We’re now going to set up our testimonial template as part of this seminar on Displaying Testimonials in Thesis 2.1 using Custom Post Types and Taxonomy.

Let’s take a look at this testimonial we created and you can see that all we have here is “I love the way you teach” and then its got all this stuff that we don’t want. Then “You already know. You Da Man”. Do I have a date for when this was done? I don’t actually, so we won’t worry about the date but you could include a date there too. But here’s what that looks like.

Configure the Testimonial Template

So, now we need to set up our testimonial template. Start by editing our testimonial template and come down to the Content Area and Main Content.

Remove Unwanted Areas

The first thing I want to do is get rid of everything associated with Post Navigation, Comments, and everything else. So I’m going to shift+drag Post Navigation out, shift+drag that out, shift+drag that out, shift+drag that out and shift+drag that because I don’t need that.

Use WP Featured Image

Then in my Single Post Box, I’ve got my Post Heading and here I’m going to use a different image size. Actually, I’m going to get rid of the Large Image entirely and use the WP Featured Image. I’m going to make it left with text wrap, I’m not going to link the image to the post. I’m going to take it up above post content. Let’s save this image.

I don’t think Sammy’s featured image got saved though so we’ll come back down here. It didn’t, so I’m just going to remove that featured image and set this featured image. I’m going to search for Sammy. I’ll get rid of the description entirely and we’re going to set that featured image.

I’m having an issue with the image in my media library so I’m going to do a save as and then come back over here to edit the testimonial. Upload file, select the file. Let’s go find Sammy in here then we’ll set this featured image, update it, view the testimonial. Okay, now we’ve got that set up.

Remove Author, Date and Categories

I want to get rid of the “By Rick Anderson” and that sort of stuff. So we’ll come over here to Post Heading and then we’re going to take Author, Date and Categories out and then drag them down to the tray.

Using the BYOB Post Meta Fields Extended Box

So we’ve got the headline, featured image and content. Let’s see, the headline in here is definitely H1. Let’s save the template. Let’s refresh the template. Obviously we don’t have his name or anything else like that here. So now this is where we use another one of my boxes, and that is the BYOB Post Meta Fields Extended Box for Thesis 2.1.

We’ll come back over to Thesis and Boxes, and upload a box, choose a file, add box. Click ok. We’ll go ahead and activate this and once that’s done, we’ll come back over to the Skin Editor and then back to our Single testimonial template.

Add Fields in the Template

Now we’re going to add some fields. So, we’ll come down to the byob post meta field extended, and this is going to be the Testimonial Name Meta and at the moment, I’m just going to wrap it in a span tag and give it a class of testimonial-name. And now what you need to know is the name of that Post Meta Field.

If we edit the testimonial and scroll down here to Custom Fields. We can see wpcf-testimonial-name, that is the value that you want to place in the box. So back here to the Post Meta (Custom Field) to be displayed is that wpcf-testimonial-name.

Now we can either insert contents before the custom fields or not. I think what I’m going to do here is add “b” for bold there. Save that. Shift+drag it into the post heading down below the headline. Save the template and view the testimonial.

Now we have Sammy Bright. Next to that we could put his URL. This is a little bit complicated because we’re going to need two more boxes, two more of those BYOB Post Meta Fields Extended Boxes. This time we’re going to put no html wrapper and now the custom field we’re going to use is the website url first.

And the html which should be displayed before the custom fields, we’re going to say a href=”… and actually we should probably do it an opening span, span class=”address”, a href=” and then afterwards, we’ll put another colon, href= and then the closing of the opening “a” tag and we’re going to call this Testimonial URL. Click Ok.

Then we’re going to say the testimonial name or testimonial website name, so we’ll go back to one more time, BYOB Post Meta Fields Extended: Testimonial Website Name Meta. Again, no html wrapper and again, now we’re taking the website name. Before that, we’re going to do nothing but after it we’re going to do the closing “a” tag and then the closing span tag.

So essentially, these two fields together creates the name with its own link and now you’ll see how that works in a second. Now we’ll take this down and this down, and the name meta goes to the bottom and the URL goes there. We save the template and refresh it and now we’ve got something that we can click here. We may as well actually give ourselves additional stuff there.

So, we go to the Skin Editor and under Testimonial URL, we may as well say span class=”address” then we can do space hyphen space a href=”. That gives us a little something extra. Okay, so now we’ve got the Sammy Bright and www.sammybright.com. And we have this testimonial.

0 Comments… add one
0 comments… add one

Leave a Comment