Build Your Own Business Website header image

Create a Magazine Style Blog Site with Thesis 2 – Part 13 – Setup Template Specific Feature Box

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.

Reorganize Existing Content Area in Front Page Template

The next thing we’re going to do in the Front Page Template is create this feature box and that’s essentially what we’ve got here. We’ve got a piece of content that’s going to sit on top of everything else and I really want to use a menu for this rather than using an unordered list or a sentence which is what this is.

Add Top Content to a New Feature Box

So what we’re going to do is add this to a feature box instead of adding it to the content. To start that off, we look at our template here and close up our Header Row 4. We’ve got our 3 Column template and we’ve got our Column 2 which has that widget area and Column 3 which has that widget area then we’ve got our WP Loop and our Single Post Box.

Right now, everything that’s on that page now is inside of this section called content. We’re going to move most of that out of content and into something else.

Create a Feature Box

The first thing we’re going to do then is inside of Column 1 we’re going to create a feature box. I don’t think he’s got a feature box here anywhere, so let’s just create a one. We’ll add that box and we’ll drag it up into place into Column 1 but outside the Loop.

We give it a div, an id of feature box although I don’t think we’re going to have to do any styling to it. Inside of the feature box, we are going to add a new box that I’ve created. This is one that I’ve been talking about doing for awhile but I just got around to and that is a box that you can use to insert shortcodes.

We couldn’t use a textbox here and stick that shortcode in because the shortcode wouldn’t be parsed, that’s what it’s got going on here. Edit page, this is it here, this is a shortcode that displays that rotator and shortcodes only get displayed properly in a couple of contexts.

One of them is inside of the content and the other one is inside of a text widget and what we’re going to do now is we’re going to insert a box that will execute this shortcode.

Later on this afternoon I’m going to add this to our list of available boxes for members but it’s not there yet so the first thing we really need to do is just pop back over here. Let’s save the template, pop back over to Thesis, under boxes, select boxes.

BYOB Execute Shortcodes Box

We are going to upload a box and the box we’re going to upload is my BYOB Execute Shortcodes box, add that box. Okay that box has been added and now we’re going to activate it by hitting save after we’ve checked that.

Now we’ll come back over to our skin editor, down to feature box and we’re going to create this new box. Actually, we’ll just drag this up here again. We’re going to create a new box and that’s going to be this Execute Shortcodes box and this is going to be called Featured Posts Slider.

Let’s add the box, drop it into place, open this up and here’s the place where we can add the shortcode to execute. So what we’ll do is come back over to the page, copy it, come back over to the skin editor, paste it in there.

Create a Menu Box

And while I’m at it, I’m going to create a menu box and this would be Home Menu. We’ll shift and drag that into the feature box and put it below. Instead of the HTML class of menu, I’m going to call it Secondary Menu. Leave the main menu on there for a moment but Secondary Menu, save this template.

Now you can see we switched back over here, we’ve got this slider running and then we’ve got that Secondary Menu then here’s the old slider with the old menu. What we really need to do is come back over here to menus and create a new menu for this purpose so that’s what we’re going to do next.

Create a Home Menu for the Feature Box

Go over to menus and we will create a Home Menu. Then what we’re going to do is add some pages to this and for our pages we’re going to do the view all. We’re not going to add the home to the Home Menu but it seems like we have to add this page and this page. Let’s go look real quick, Blog, Boc TV, Education, Health and technology so we add those to the menu.

Right now, this really only has 3 things on it but what we’ll do is as I create more menu items or more pages this will grow but right now, we just have the Home Menu. We’re going to save the Home Menu, come back over to the skin editor and we’re going to go to feature box. Instead of Main menu, it’ll be Home Menu and we’ve got our Secondary Menu as our HTML class so we save that template.

Style the Home Menu

Then let’s just go edit this page real quickly and we will get rid of that introductory stuff. Hit update, come back over and view the page. So now we’ve got our slider and we’ve got our Home Menu here but we need to style that.

We’ll come back over to the skin editor, go to CSS and we’re going to create a horizontal dropdown menu style. Add the package, we’re going to call it Secondary Menu. Under Options, for font settings, I think we’ll leave it as it is for just a second but for links, background color, we’re just going to leave that blank, menu item padding, I think we’ll do 20 pixels of left and right padding, we’re going to have no borders on this.

I think that’s probably it, let’s hit save and see what happens here. Under menu, let’s just save that, let’s reload it. Obviously, we want this bigger than this so we want to give that a height and width.We want to give it a bit of top padding or something like that too.

We’ll come back over to our Secondary Menu, change our font to 15 and then I think we’ll just give top and bottom padding of 20 pixels and see how that works, there we go. Now, we should probably change this up so that when we hover over it, it changes color and we’re going to give it a dark gray color. Now when you hover over it, it turns and I suppose we could probably give it underline too, let’s just do that.

Let’s just take a look at his other example of these menus here. So he got it in a different page, it’s gray. No, those @links aren’t active so it doesn’t have very much space in between and he’s got a bar in between those so I think we’ll take those down to 10 pixels of padding all the way around instead and then give ourselves a bit of left border. Back over to here to padding, okay we’ll do that.

We’ll come back over to here and .secondary_menu and we’re just going to do this with the immediate one so ul a{border-left:1px #888 solid;} that looks about right, save that. It’s li here so now you can see that the border is pretty tall here.

So then let’s make that 2 pixels, we’ll come back over to Options and under padding, we’re going to delete top and bottom padding but we will come along here and say, margin: and we’ll do 10px 0; there we go so now we’ve got kind of a nice separator there anyway. Well, that can be fine tuned but you get the point.

Finished Product is a Template Specific Menu

The point of this is how to create a template specific menu and insert it into this template in a way that doesn’t affect any other template. That’s what I’m really trying to accomplish here and so we have this box in the shortcode, we’ve got a menu and now we’ve got this content here which really wants to be automatically generated so that’s what we’re going to do next.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment