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 1 – Map Out the Posts Page

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to this Lesson 7 of our Create a Responsive Child Theme for Thesis class. Today, we are going to create our customized Posts page. Before we do that, I just want to talk about what we’re going to do with our Posts page here.

Faux Heading

This is the sample that we’re working on and on our Posts page, it starts off with a faux heading. It’s not really a heading, it’s just something that we’re going to put on the top of the blog page, the image, title and dashed line under making it look similar although somewhat more distinctive than the main headings for the rest of the pages.

Post Display Format

We have our post display format which in this case is different perhaps than the typical Thesis Format. What we’re going to use is the excerpt style of displaying posts which means that no faux posts are ever going to be shown on the Posts page. It’s always going to be an excerpt version of the post and there’s also never going to be any teasers. This style always has the full width image, it’s always going to put the posts in a single column and it’s always going to show the excerpt version.

This same thing is going to happen on the Archive pages. For example, if we look at the category Choose an Architect, the post looks exactly the same as it does on the home page. That’s one of the main characteristics of this. Now, we have our page title that we see here and this is our typical page title but our Posts are going to have entirely different title. Our Posts are going to have this different color and we’re going to have this post meta that shows up.

Post Meta Format

Now, if we come over and take a look at the default configuration, we’ve got our post title and we have the “by the author name” and on the date. This is the typical format for the post meta but we’re going to change that up and not put the author in there but rather we’re going to say what category it’s posted in and its published date.

Our excerpt is going to show up differently than it does ordinarily. Ordinarily, you have this click to continue thing that would happen on an excerpt but in our case, what we’re going to use is this Read More button and it’s going to have that Click to Continue there so we’re just going to put these dots in at the end of our excerpt instead.

We’re going to have this closing meta which is essentially this block of tags. It’s going to have an image here, it’s going to list every tag and if the list gets too long, it will start stacking up and dropping below this, allowing the two buttons here to always sit here.

If you want to see what that looks like in its responsive format, you can see these buttons drop down below the tags. So as the tags add on the buttons move around. We’ve got the Read More button which takes us there and also we have the Comment button that shows us how many comments there are on a given post. That’s what we’re going to end up changing here as we do this.

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