Build Your Own Business Website header image

Community Library Website – Part 36, Add HTML Markup to WordPress Menus

Difficulty Level -

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 sixth in a series of live lessons on using WordPress and Thesis as a Content Management System (CMS). In this lesson we continue working on the menus in our new catalog page. We create an HTML structure around the menus to add headings in custom_functions.php and then style the html structure with CSS using Firebug and Web Developer.

Community Library Website – Case Study Part 1 – Site Organization
Community Library Website – Case Study Part 2 – Create Custom Post Types
Community Library Website – Case Study Part 3 – Custom Post Type Configuration
Community Library Website – Case Study Part 4 – Custom Taxonomy Decisions – Theory
Community Library Website – Case Study Part 5 – Custom Taxonomy Decisions – Practical Application
Community Library Website – Case Study Part 6 – Incorporating Existing Data Into the Project
Community Library Website – Case Study Part 7 – Creating Hierarchical Custom Taxonomies
Community Library Website – Case Study Part 8 – Creating Non-Hierarchical Custom Taxonomies
Community Library Website – Case Study Part 9 – Creating Custom Post Meta
Community Library Website Case Study – Part 10a – Restore the Database Using BackupBuddy
Community Library Website Case Study- Part 10 – Creating Custom Post Meta – Continued
Community Library Website – Part 11 – Importing Existing Data to the Website
Community Library Website – Part 12 – Prepare Existing Data for import by the CSV Importer plugin
Community Library Website – Part 13 – Import Existing Data Using the CSV Importer Plugin
Community Library Website – Case Study Part 14 – Date in Permalink Configuration
Community Library Website – Part 15 – Importing Images
Community Library Website – Part 16b – Final Data Import
Community Library Website – Part 17 – Add Thesis Post Meta to Custom Post Type
Community Library Website – Part 18 – Add WordPress 3.0 Menus
Community Library Website – Part 19 – Add Post Meta and Taxonomy Information to the Post Display
Community Library – Part 20 – Add topics and audience to book display
Community Library – Part 21 – Display the Rest of the Post Meta in the Post
Community Library Website – Part 22, Create the Permalink Structure
Community Library – Part 23 – Remove Custom Post Meta from Post Display
Community Library Website – Part 24, Add Taxonomy and Post Meta Data to the Teaser
Community Library Website – Part 25, Add Taxonomy Data to the Teaser
Community Library Website – Part 26, Adjust the Teaser Styling Using Design Options
Community Library Website – Part 27, Styling the Teaser Using CSS
Community Library Website – Part 28 – Fine Tune the Teaser Display
Community Library Website – Part 29, Designing a Custom Catalog Page
Community Library Website – Part 30, Using a Query String in a URL
Community Library Website – Part 31, Adding Custom WordPress Menus
Community Library Website – Part 32, Add Custom Menus to the Catalog Page
Community Library Website – Part 33, Add Another Custom Menu to the Catalog Page
Community Library Website – Part 34, Troubleshooting Custom Menus
Community Library Website – Part 35, Add Styling to WordPress Menus
Community Library Website – Part 36, Add HTML Markup to WordPress Menus
Community Library Website – Part 37, Add WordPress Menus to Archive Pages
Community Library Website – Part 38, Add and Style a List of Tags
Community Library Website – Part 39, Add a Search Box to the Sidebar
Community Library Website – Part 40, Add Links to the Sidebar
Community Library Website – Part 41, Add Taxonomy Drill Down Browsing
Community Library Website – Part 42, Custom Loop to Display Custom Post Types
Community Library Website – Part 43, Simple Custom Query
Community Library Website – Part 44, Custom Taxonomy Query
Community Library Website – Part 45, Add Thesis HTML Structure to Teasers
Community Library Website – Part 46, Display Posts from the Last 60 Days
Community Library Website – Part 47, Custom Loop If Have Posts
Community Library Case Study – Part 48, Increase the Number of Posts that Display on the Custom Catalog
Community Library Website – Part 49 – Naming Conflicts in Custom Taxonomies
Community Library Website – Part 50 – Find and Replace Semi-colons in the Database
Community Library Website – Part 51 – Modify Taxonomy Names Directly in the Database
Community Library Website – Part 52 – Sort Posts by Meta Value
Community Library Website – Part 53 – Show the Term Label Only when a Term Exists
Community Library Website – Part 54 – Sort Archive Posts by Meta Value
Community Library Website – Part 55 – Add Sort Order to Custom Taxonomy

Video Transcript

So now we have 2 sets of menus stacked similarly to what Pam had like this. Now we want to have some headings to adults and children. Let’s see, so let’s go ahead to that part of it, adding headings to these menus and we’ll do that in custom functions php.

What we want to do here is we’re going to create an HTML structure around this and so, that is going to look like… it’s going to happen after if is page and we’ll say echo which is sort of a print statement. It’s going to print this stuff that’s in these parentheses, close that off. Now we’re going to echo div class equals and let’s see, byob adult menu. And then we will add a p tag and we’ll type in adult menu…oh no, not adult menu. Just adults and then the closing p tag. Okay so that starts it off and then at the end of this, after we’ve printed our menu, we’re going to echo again and in this echo statement, we’re just going to close the div. And then put our closing semi-colon in and then really, we’re just going to do the exact same thing here with children’s menu. Okay… except that it’s not going to be adult menu, it’ll be children’s menu. And yeah, then we’re just going to close off this div… no, echo.

Okay so now I’ve got the structure for that and we’ve… oh, but we’re not doing adults. We’re doing children. Okay, we’re going to save this, we’re going to upload it and then we’re going to take a look at it.

Okay so now what we need to do is we need to add styling to these 2 divs that we’ve wrapped these in. And so, if we come back down here… let’s see, adult menu, inspect the element… that is byob adult menu and yeah… so we’ll copy that. And we’ll come up here… try that again to adult menu. Give ourselves a space, byob adult menu and we will say… let’s see, let’s float left. Left, okay… that got them back up side by side. And then let’s make this p tag, control copy, adult menu and then we’ll do p. And last time it’s float left, it’s going to be text align center and then we’re going to make the font size big so font size: 24 px. And let’s give it a little bit more space under it so margin bottom: 20 px. Oh that’s too much space, call it 10 px. Yeah, that’s pretty good.

Well so we need to do exactly this same thing for the children’s menu. And it’s going to be children’s and children’s. And then I also want to give myself a little bit more margin here so I’m going to say margin left: 20 px. Yeah, that looks pretty good actually. How does that shape up with our… yeah you know, it looks like it shapes up with that space really well. I could probably move it just a little bit more, maybe 24 pixels. And now we have these 2 different menus and all we have to do is save this stuff. It took all the way to the top, start at the top of the adult menu all the way to the bottom… copy, save that. Replace everything, save it, upload it… let’s check it out.

Okay, it looks great in Firefox. Let’s see how it looks in Chrome, refresh that. Okay, looks good in Chrome. Better check it in Internet Explorer, let’s see. Let’s come over here, have that URL… and you can see that it doesn’t have the… I mean, it works just fine but it doesn’t have the drama in Internet Explorer 8 but Internet Explorer 9 will do the same thing as Firefox and Chrome and Safari. Now you know, it’s not… what you really want is if it doesn’t work, you want it to degrade properly and that’s what we’ve accomplished here, we’ve allowed it to. I mean, it degrades nicely. It still looks good here.

Okay so that wraps up that part.

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