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.

Lesson 7 – Part 4 – Restructure the Headline Area

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now, what we want to do is restructure our headline area. Obviously, the first thing to say about that is that we want to use the default heading for all of our pages but for everything else, we want to use this style of heading with this different color and we want to have the meta. This is the way we want these to show up so we have to segregate out these various views of the headline from the page headlines.

Remove and Replace Headline Area

The easiest way really to handle this is just to remove the headline area completely from the appropriate places and replace with a whole brand new structure. That’s what we’re going to do here and we’re going to do that starting off the Thesis show_headline filter. Now, you’ve already seen the Thesis show_sidebars filter because that’s what we used last week.

Remove Headline with Thesis Show Headline Area Filter

Today, we’re going to use the Thesis User Guide and the show_headline_area filter. What it does is it removes the entire headline area div with all of its contents. Once we exclude it, then we’re going to have to add a new one back into it.

You can see their example here is this, hide_headline, if it’s in the category asides, return false. If you return false to this filter, the headline is not shown, else return true and if it gets true, the default is true shows up then it shows. That’s essentially the same thing that we’re doing here.

Hide Headline for Posts

Let’s get rid of our bad function so hide headline for posts. The question is, if it’s not a page, then return false, else, return true. We could say, if is page, return true, else, return false but if it’s not a page, then we’re not going to show the headline area. If it is a page, we are going to show the headline area.

We save that, upload it and test it. Now you can see our heading areas are all gone because that’s what happens. If it’s a page, our headline area shows up, if it’s not a page, our headline area doesn’t show up.

Rebuild the Headline Area

Now that we’ve removed that, we need to reconstruct a headline area. The way we’re going to do that is copy this code. First, we need to grab some information from the post variable so we’ll grab global post. And this Thesis function that we’re going to use wants to know what the post count is, so we’re going to initialize the post count as false, we can also say 0 but we won’t bother with that, we’re just going to say the post count is false.

Of course, we only really want to do this on pages where the headline area has been removed. Just like we said, if it’s not page, return false, now we’re going to say if it is page, then we’re going to return some HTML, we’re going to rebuild the headline area.

This Thesis div already exists so we’re going to rebuild headline area. We’re going to add the thesis_hook_before_headline and this is where that post count thing shows up because you can hook to headline before specific posts, like if you wanted something to show up after the headline on the second post on the post page or an archive page.

Add Thesis Hook Before Headline

You could say thesis_hook_before_headline 2 and it would show up after the second post. If you leave this blank, it shows up after every post so, thesis_hook_before_headline($post_count); and we’re going to close it out with the thesis_hook_after_headline then create our headline meta.

The way that works is inside of div headline area, we have a paragraph tag with  the class of headline_meta then we add an abbreviation for the other part of it, we close out the paragraph tag and we close out our div tag. We’ll talk about that more in a second but that’s the main HTML part.

Two Kinds of Headings in Thesis

We have two different kinds of headings in Thesis. If it’s a single post, Thesis gives the page title an h1 and if it’s not a single post, if it’s an Archive or if it is the Blog page, it gives the entry title an h2. Now, the reason is because you don’t want more than one h1 on any page and right now, there are no h1s on the page because of the way we’ve set this up. But by the time we’re done, we’ll have h1s on here but we do want h2s as our titles for these collective pages and we want h1s on the Blog post itself.

In order for us to do that, all we have to do is determine whether or not it’s a single post or not. If it’s a single post, we’re going to use the h1 tag and we’re going to insert the title. I’ll talk about this title tag here more in just a moment. If it’s not, then we’re going to add instead it’s going to be an h2.

WordPress Template Tags

The other thing to point out is that it’s also a link, that is on your Posts page, the title is actually a link that takes you directly to the individual post so we need to include the link information as well. It might give us some opportunity now just to talk about some of these WordPress template tags.

We’re actually going to talk about several template tags but we’re going to start off with the template tag, the_title. What the title does is it returns the actual name of the title. This version of it, the_title, actually has to be used inside of the loop so that it brings the title of the current post inside of the loop. If we come over for a moment and just look at this up here on WordPress, so the_title either can take a set of parameters or it doesn’t have to take any parameters.

If there are no parameters whatsoever, what it does is it displays the title. If there are parameters and it will display the parameter, say the before and the after. If echo is set to false, then what it does is it takes the value of that title and it will place it in a variable but by default the echo is true, which means it just prints out the title. We could actually do this if we wanted to, the_title and take the h1 class= and make it the before value and take and take the h1 closing tag and make it the after value.

I’m not going to do that, it just seems clear to me just to wrap it this way but you could wrap it by putting h1 as the before value, h1 as the after value and you can say true if you wanted to or you could do it like this and say absolutely nothing. This only works inside of the loop so it grabs the title of the current post.

Construct the Permalink

Same thing is true with the permalink, the permalink also behaves that way. It grabs the permalink of the current post and it takes no parameters, there’s no before, there’s no after. What it does is it brings you the URL of the current post. What we’re going to do then is construct the link here so h2, a href=the_permalink so that’s the URL to the post and we’ll give a relational value of bookmark then a title which is the Permanent link to.

Rather than say Permanent link to, why don’t we say, View this post and it will have the title of the post as this title value of the tag. The link text of the tag is the title again then close out with the a and close out the h2. This way it just displays the title, not as a link. This way it displays the title as an h2 and as a link.

Add Headline Meta

Then we have our hook_after_headline and now we add the next piece of information which is the headline_meta. The headline_meta is going to say, Posted in so we have a p class=\”headline_meta\ then we add our text Posted in, colon, space and now we want to get the list categories that is part of this post. Again, get_the_category_list is a template tag that is used inside of the loop so let’s go look at that one.

Actually, it doesn’t absolutely have to be used inside of the loop. You could indicate a post id and if you indicated a post id, then it would get the categories for the specific post id. What this get_the_category_list does is it doesn’t just give you the name of the category, it also gives you a link to the category plus it does some formatting. It can take 3 parameters, we’re only going to supply one parameter and that is the separator.

Separator

In our case, the separator is going to be a comma and a space. If there were multiple categories for this, what would happen is, it would get the category and after each category except the last one, it’ll get this comma space so you could get a list of categories with a comma and a space between them. You can do anything you want in here as your separator but in this case, you just want a comma and a space for those post that have more than one category.

We’re going to add a space and “on”, so it’s going to get this category, it says, Posted in: these categories “on”. Now what we want to do is add the date time. Again, Thesis has this system where it places the date time in abbreviation with the class of published so we’re going to get the date time and we’re going to create a title for this link with the get_the_time. This is a WordPress function and it takes two parameters.

Setup Date and Time

The first parameter is the format that you want the time returned in and the second parameter is the post id. If these things are left entirely blank, what it will do is get the published date of the current post. In this case, if it’s entirely blank, you have to use it inside the loop so it will get the date of the current post and it will use the default format. The default format is the format that your user sets up in the options under Settings and General.

If you don’t specify a date, what happens is, it comes out like this, however, they set it up. Now, you can decide to let them make the choice of how the date should be displayed or you can take that over for them. What I use to make this work is get_option(‘date_format’) and I guess I need to use that so let’s do that again here, get_the_time, let’s go back to what I posted earlier. This get the option out of the options table of the date format.

Here it is and when I hover over this, you can see it says, 2012-02-04. That’s that title tag that we set with this ymd then I use get_option to get the date format and when I use this tool, the date format comes in the actual as it’s actually setup in the rest of WordPress.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment