Build Your Own Business Website header image

How to Use Post Formats in Thesis Part 5 – Create a Quote Post Format

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.

In this session we show how to use post formats in Thesis by adding Thesis HTML structures so that the styling will apply to it. We use the title for the author’s name and the content for the quotation.

Video Transcript

This is something that we’ve already started, this whole conversation about post formats and we actually have started on this site. So if we come back over to this page and we go to all posts and look at one of these posts, you can see we’ve already added in previous lessons the post format to this.

So now what we’re going to do is we’re going to create the quote post format so that we get a different style or a different appearing style when we select the quote. And so I think first, actually, what I’m going to do is create a quote. So I’m going to add new and actually, I think first, we should talk about what the quote post format’s going to have in it. The quote post format, we’re going to let the title be the author of the quote and then the content will be the actual quote itself. And then we’re going  to want to have it wrapped in block quotes automatically so we’re not going to put the block quote thing in here.

So at the moment, I’m going to say the author is Rick Anderson and then the content of the quote is that and I’m going to make it a quote post format and I’m going to create a new category called quotes and I’m going to ad it to that category. And I think at this moment, we’re just going to hit publish. Now I’m not actually sure what it’s going to look like because we haven’t actually defined a quote post format yet so let’s just see what this thing turns out looking like. Yeah, it doesn’t have anything because we haven’t really defined a post quote format yet.

But if it was a standard post, let’s see it there for a moment, refresh it, here’s our little standard post, right? And I think if we’re going to make it look like a block quote, what we would do is select this and then use the block quote… no, here it is. Here’s the block quote tag for that. Hit update. And then the block quote style would show up here so it’s a little lighter color and it’s got the little line and so on. So this is what it looks like if it’s a regular post.

As a quote post format, we don’t want to leave a comment. We don’t want any of the post formatting information. All we want is the name or the title of the post and then this thing itself. And we don’t’ want to have to physically include this. We want to just.. we want that to happen automatically.

So actually, somebody is saying… can everybody hear me? Somebody is saying that they can’t hear me. But it seems like I should be heard. Okay, good.

Okay so here’s what our quote looks like if it’s not in the right post format. And so what we’re going to do is we’re going to create our own post format and in fact, we’re going to close… oh no actually, cancel that for a second. And in our previous lesson, what we did was we created this post format loop. So we said you know, function single, if has post format aside then we would do this stuff.

Now we’re going to say, else if has post format quote, we’re going to do something else here and that something else that we’re going to do is use a couple of different WordPress parts. We’re going to use the title and the content. And in WordPress, this is the title and this is the content. And so these things here are actually bits of Thesis post meta that we’re not going to bother with so all we really want is the title and the content.

So we’re going to start off simply by adding that to our loop. So if has post format aside while have posts the post and we’re going to start off by just taking this and then we’re missing a closing bracket there. So let’s indent it here again. So while have posts the post… so that’s the first part of this process and then under the post, what we’re going to say is the title and the content. Now this isn’t going to end up having any of the Thesis HTML around it. This is just going to deliver the title and the content. But that’s what we’re going to start off with.

So if we hit save to that and then upload this… oh of course, I’ve changed hosting companies in my… and this doesn’t work anymore. Okay so I have to change this actually, pardon me. So I’m going to copy over to here, see if that works. No, wrong password. So what I’m going to do is I’m going to copy this and I’m going to use it except that I’m going to disable synchronize browsing for the time being just to speed this process up. Okay, there we go.

So that is what I want. Open up Site Manager and Advanced and there is where we’re going to do now. And instead of BYOB Website here, we’re going to go to Categories. We’re going to connect. Oh, I don’t think I connect… I didn’t say synchronize browsing now. Okay, perfect. I’ve got that set up, sorry about that.

So then still working on 1.8… oh, let’s upload that. I didn’t realize I didn’t have Thesis 1.8.3 installed on that site but clearly, I didn’t so we’ll do that again quickly too. We’ll just cheat here for a minute while this stuff uploads. So what we’re going to be doing with this next is once we have this up and displaying the post and title or the title and the content, what we’ll be doing is then we’ll going to add Thesis HTML around this so that the Thesis styling will apply to it. And then we’re going to add a little bit more HTML to make the block quote work and then we’ll have that part done.

And let’s see how we’re doing here. The reason I’m talking about HTML is that all the CSS that you are used to seeing activated on a Thesis site is tied to the HTML. And so the reason why it works up here in this part of the loop is that we have added div class such and such to this thing and then the format text entry content and these closing divs and that kind of stuff. And we have to really do essentially the same thing here with this section. We’ll still use the title and the content but we’re going to end up wrapping the title and the content in Thesis HTML code.

So let’s see, are we done now? Almost. And while we’re over there, we’re going to actually activate Thesis 1.8.3 here. Don’t try to activate it until this is done though. Okay, perfect. So we’ll activate 1.8.3. Let’s take a look at it, make sure everything happened right. Okay, now we’ve activated 1.8.3 and now if we change the post format, we should be able to see this.

So now if we come back down to quote and hit update and view the post now, we should be able to see something. We can but you can see that all of the stuff is missing from it. The title is now a nice, big title and the text is all tiny and that’s because it doesn’t have any of the HTML structure around it that it needs in order to look right. So that’s the next thing to do then is to add that HTML structure.

If we will, for a moment, look at say, the HTML structure here and take a look at it, if we inspect this, you’d get a pretty good picture of what the HTML structure looks like, right? You have your page, your content box, your content, you post box class which is where we end starting. And then you have a div headline area and then you have an h1 class entry title around the title itself. And then once we get down to the content, you have div class format text entry content that wraps around it. That’s the HTML that we’re going to add to this.

Now, I think we can probably skip this post class stuff at the moment. So what we’ll do is we’ll add headline area h1 and then we will add format text entry content to the HTML.

So interestingly… well actually, we’ll start with this. So if we start by say, echo and we’re going to just say div opening… div class equals and it’s equals. What did I say that was? Headline area? Headline area so I did opening div there. Now we’ll put a closing div here… oh no, sorry, closing div. And then the way the title works is that you can put what the opening and closing thing should be here. And so we want this to be an h1 to open actually and we want it to close with h1 or what you’re really saying is I want h1 before and I want h1 after the title. In fact, I think maybe what we need to do is we probably do need to put it in tags. We probably just can’t say that.

Okay so we’ve got our div class headline area and then the title is going to open with an h1 and then close with an h1 and then have the title and then close with a div. And we may as well just do this one more time and in fact, we could just steal this stuff up here because it’s exactly the same thing. Format text entry content above the content and then we would steal that part.

And actually, if we wanted to make this look… make this section up here look like this, we would… what we’d really do is we’d do this. Add the same number of tabs in front of it and then we want to put an escape character in front of these quotation marks and then we would put the new line tag or the new line designation in there instead. So now this is going to look, in terms of its layout, exactly like it does up here.

So let’s go ahead and save that document. So we change custom functions php, upload it, refresh it. Okay so now, Rick Anderson shows up the way we want it to and the text shows up the way we want it to. But what I want to do is get rid of that block quote and I want to make the block quote automatic.

Rather than having to add the block quote to it, I want to make the block quote automatically added to it. And the way we do that is inside of this, we would simply… we’re just going to copy this. I’m going to add one more /t to it and I’m going to… it’s not a div. It’s now just block quote. Okay, so I’m adding the block quote tag around the content and add the closing block quote tag around the content and upload it. Refresh it.

Oh, I think I must have closed… let’s see, opening block quote, closing block quote. It seems like there’s an error in here some place. Let’s just look at the HTML for a second. No, it doesn’t solve it. Something funny’s going on there. I’m going to have to figure that out and get back.

0 Comments… add one
0 comments… add one

Leave a Comment