Build Your Own Business Website header image

Community Library Website Case Study – Part 32, Add Custom Menus to the Catalog Page

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.

This is the thirty second in a series of live lessons on using WordPress and Thesis as a Content Management System (CMS). In this lesson we continue working on our new catalog page and add the first custom menu using functions in our custom_functions.php file. This allows us to specify that the menus only show up on the catalog page. We use similar code to what we used when we created the Footer Menu for our new menus. Then in our custom.css file we create styling for these menus.

Video Transcript

And while we’re waiting for that to refresh itself, let’s just go over to our custom functions php file. Remember 2 weeks ago, we added this footer menu? Well, we’re going to copy this and do exactly the same thing. So we copy that code and we’re going to make… this function is going to add the adult menu to the catalog page and args equals array menu is going to be adult menu instead of footer menu. And then menu class instead of footer menu here again, we’re going to say adult.

And then what we want to do is we only want this on the catalog page so we will put a conditional statement in. If is page and we need to get the page id for that… if is page and then we’ll finish wrapping this up into that. So now, we’ve wrapped our arguments in this if is page and then what we’ll do is we will… it’s not Thesis hook footer, it’s going to be Thesis hook after content and this is going to be adult menu. Paste that function name there.

And so now what we’re doing is we are adding to Thesis hook after content the byob adult menu and then we’ll have…and the adult menu is going to have this menu class of adult menu which is going to let us add that special styling to it. Let’s go ahead and save it.

And actually, before we get too far into this, I just want to go ahead and open… I want to go to our custom CSS file too and let’s see, here’s our footer menu. We’re going to copy the footer menu and this is going to be the adult menu. And list style none except it’s adult and adult… save this and let’s see, Pam’s got a question so I’m going to unmute her microphone. Go ahead, Pam.

Oh…

You said… when I used… wouldn’t after content put the menu after the teasers? Now the answer to that generally is yes although in this case, it’s no because this here is not the content. This is a custom query that we are going to write that is going to fall after this. You might put a brief sentence up here of content and you might have no content, just have this title.

Okay, I understand.

So that’s why it’s after content because it’s not… this is not going to be content. Okay so we uploaded that… no, we didn’t upload it. We just saved it. Now we’re going to upload it and let’s see, let’s try to have this up and ready to go. Library, connect, WP content, themes, thesis_18, custom, custom functions php. We’re going to upload to our site and the custom CSS, we’re going to upload to our site. And let’s just go see what it looks like. Obviously, we haven’t styled anything and it might not look right at all but let’s just try it. Oh, cancel. Let’s see, save the menu… okay, custom catalog.

Okay so after content, it didn’t really take me where I wanted to go. I guess we need to look at that hook one more time. But you can see the menu down here. I must have been after content box. It could also be… we could also use after post, I think. Let’s go to the user’s guide here and look at our hooks and Thesis hook after… I just used after content. Maybe it’s after content box. No, it’s not after content box. It’s either further down. After content… oh no, actually, it’s not further down but it’s still not the right one. After content… oh no, actually, it’s not further down but it’s still not the right one. I think what we want to do is like Thesis hook after post box or something like that. Let’s see, if there’s a one post…if more than one post is… hook fires for each of them. So Thesis hook after post… format entry after post so it’s after post box then, Thesis hook after post box.

And Pam asks, “Can we change the name of this stuff?” and of course, we can.

So let’s see, let’s come back over to here and Thesis hook after post box, save it, upload it. Let’ see, let’s just close that one and refresh it. Okay, there we go. Now it’s here.

And then the next thing we need to do then is we want to style this so it’s… well okay, let’s get rid of your adult references in here first. So… oh you’re right. This is showing on every page at the moment. I did not look up page id. Thank you for pointing that out.

If we go to pages and we look at browse our library catalog, that is post id 200. You can see that down here at the bottom, right? Hover there again, post id 200. So then we’ll come back over to the code… if is page… that did add itself to every page. If is page 200…you know, we may as well add the other menu here too while we’re doing this. So if we come back over to menus, Appearance and Menus… where am I? There we go, okay let’s change that to nonfiction. Okay and let’s change this one to nonfiction…or right to fiction without the adult. So we don’t have the adult in front of it. Okay, save.

0 Comments… add one

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

Leave a Comment