**Dustin:** [00:00:00] On today's episode, we're gonna look at probably the most overlooked part of our WordPress sites. The part that we don't pay attention to that often, and that's our menus. We're gonna dive in and figure out what we need to have on our menus and what we may be missing and maybe what shouldn't be there.

Right here on your website Engineer podcast, episode number 530.

Hello and welcome to another episode of your website engineer podcast. My name is Dustin Hartzler, and today I thought we'd dive into menus a little bit. It's something that we don't talk about a lot because it's not a quote unquote key feature of WordPress or a new feature of WordPress, but menus are important, and we'll talk about those in just a second.

I got a whole a slew of announcements this morning and this afternoon or this evening, whenever you may be listening, and I have a plugin to share.

The first announcement that I wanna share today is all about staging sites on wordpress.com. This is a new feature as of May, 2023, and now staging sites are available for folks that have the business or [00:01:00] e-commerce plans, and the implementation is very similar to other hosting companies. There's a button that you can click and it will automatically clone your site, and then you can install different plugins and whatnot.

One limitation, and this happens with most staging sites, is it will not sync content from your live site down to the staging environment. If that happens, you just delete the staging environment and then you start over and create a new staging environment, and then it'll clone it again. I think this is pretty standard across the board when it comes to just WordPress sites in general, it's very hard to keep them in sync, and so if you're working on a new feature, whether that be adding a new theme or customizing something, then staging sites are the perfect opportunity for that.

So if you're hosting on wordpress.com, you have a business plan or a commerce plan, then you can now use a staging site.

The second announcement is about the first round of WordCamp US tickets for 2023. They went on sale and they sold out. Basically within the first few hours, there are gonna be more opportunities to buy tickets.

The tickets are $50. They include access to 40 different speaker presentations, workshops, networking events. [00:02:00] It comes with a t-shirt. There's a word fest party, a surprise gift. There's all kinds of things happening. This is August 24th, 25th and 26th and 2023 at the Gaylord National Resort and Convention Center in National Harbor, Maryland.

As a Word camp organizer, it seems like there's gonna be lots of tickets available and they just are releasing them in waves. So keep an eye out for when the next batch of tickets are gonna be coming out. That is the news on Word Camp US. I will be attending and I'm excited to see some folks in August.

The next thing on the news is kind of in the realm of Twitter, in the realm of what is Elon Musk doing? But basically there has been a new price point rolled out for API usage and it, the price point is quite silly actually. It's $0 for like very basic use. It's a hundred dollars for the next tier, and then the next tier after that is $42,000.

And so it just doesn't make a lot of sense, when you think about pricing. And so it's not gonna work out anymore for Automattic to support tweeting events or [00:03:00] automatically tweeting posts. And so if you have that connection set up, that is going to stop working here in the future. As I'm recording this, I believe it's still working because they haven't shut off the a API access yet. But it is going to be something that Automattic will not be paying for and they will not be passing on that, that charge to, to customers who want that feature. So unfortunately, we're not gonna have that automatic transfer of data over to Twitter.

You'll have to do a manual post if you want to continue to post on Twitter.

The next thing on my list is a periodic table of WordPress plugins that showcases 108 most popular plugins. So these aren't necessarily the most useful plugins, but these are the most popular ones.

And so you can look at this table and I'll have a link to it in the show notes of where you can actually find the table, but you can kind of highlight over it and you can see. See what they are. The very first one is Yoast is number one. Jetpack is number two. Then we go Akismet, Elementor. Contact Form 7, WooCommerce, WP Forms, really simple. S S L all in one. WP Migrate, and then the [00:04:00] classic editor. Those are the first 10 and number 108 on the list is kki. Not exactly sure what that plugin is, but you can find out more about it.

You can click on it itself. It pulls it up. It looks like this plugin has been installed over 600,000 websites. It is the ultimate customizer framework for WordPress theme development. That's what Kki is as a plugin.

So that is kind of a cool thing that you can see. You can find out more over at plugintable.com. And then, let's see, the last thing here on my list, when it comes to announcements, is an article on WP Tavern talking about featured notification project to is working towards an MVP for standardizing admin notifications.

Oh, that's a mouthful. But the WP Feature Notification Project, formerly known as WP Notify, is making progress in creating or getting closer to a better way to manage and deliver notifications in the WordPress admin, I see this all the time, logging into customer's websites to look at them and to work on them and whatnot.

And sometimes you have to scroll before you can actually start seeing the WordPress stuff. There's so [00:05:00] many notifications across the top, so they've come up with a proof of concept or kind of working it in as a feature plugin, and I will continue to bring progress on what this project is doing because this is something that really annoys me and it really bugs me to see this many notifications and if notifications are done badly, like a couple of them that I've had on sites where you can click the X to like knock out the notification and then you refresh and it comes back, it doesn't remember. And I just wanna get rid of those plugins cuz it frustrates me beyond belief.

But hopefully the WP Notifi notify or the WP featured notification project will make some traction, have some progress, and we will have some pretty notifications. It looks like even they have some settings that you can customize, how often you get these notifications in one whatnot. So I'm really excited to see how this rolls into WordPress in the future.

The plugin that I wanna share with you today is called Quiz Cat WordPress Quiz Plugin. It says it's the easiest way to build viral and engaging quizzes for your WordPress site. Takes just a few minutes to set up a knowledge test, a [00:06:00] trivia quiz, or a personality quiz. These quizzes are proven to produce more user engagement, more social shares, and generate a boatload of leads.

I'm not sure if I agree with all those things or if I a quiz is gonna do that. But we have had advice working with a marketing, marketing agency before that says, you know, if you're selling a top dollar product or you know, product that's more than $10 or something, if you're bringing them in from Facebook or Facebook ads or ads from somewhere, like most people aren't just gonna buy on the first attempt.

You know, like, oh, here's my $10 thing, let's buy it. Or here's my $200 thing. They're probably not gonna buy it from an ad on Facebook, but if you can bring them into a quiz and then have them take the whole quiz and then there's a kind of a paywall, if you will, and the pay is put your email address in and we'll email you your results.

Like that seems to work a little bit better than you can nourish those leads and whatnot. So we've got a lot of success using the Thrive Leads plugin or the Thrive quiz plugin. But this one is a little bit different and I'm excited to see like how this one works, if it's a little bit easier. The one made by Thrive Themes is just [00:07:00] a little bit hard to work with.

They have their own like Quiz builder interface and it's just kind of clunky. I think in my personal opinion. It works really, really well. It does exactly what it needs to, but I just, I don't really like the interface, so I wanna try out this Quiz Cat plugin to see if it works any better.

You can find a link in the show notes for episode number 530, and just as a reminder, you can get there by going to YourWebsiteEngineer.com/530.

Let's talk today about a very exciting topic. Okay, maybe not, but a topic that is important nonetheless, and that is website navigation, or website menus, or, you know, just being able to help people navigate throughout our WordPress site.

Menus are really important. And I think what's important to think about is that we always look at, starting at our homepage, right? We always think that people are gonna show up at our homepage, and then they're gonna, you know, pick that perfect menu item and they're gonna navigate to exactly where they need to go.

But a, a user usually stumbles into your website on any page, but the homepage, right? They're coming from a link that you posted, maybe you [00:08:00] posted on Facebook about this latest post or maybe on Instagram, you had an image and then they did a link in bio and it came to some other page on your website, like people were coming from all over, or maybe they're getting a link that, you know, somebody else referred them to your podcast page.

So we wanted kind of overarching think about our menus from that point of view. Like somebody is gonna come to our website and they're gonna land right in the middle of it. And they need to know how to get around and how to navigate throughout our site. So I wanna talk a little bit first about the different types of navigation areas on our site, and then we want to kind of go through some of the steps and some of the things to look at and think about when we're creating navigation.

So the first one is probably the most standard one when we think about when we talk about navigation, and that's the horizontal navigation bar. So this is the one that's usually with the website heading. It's the one that has like sections like about and pricing contact, because that's what visitors are expecting to see.

Those are the names that they're expecting. We'll talk about some of the names here in just a second. So this is pretty standard, like most websites have this most website themes have this [00:09:00] already built in, and so we'll have usually the logo on the left, and then we'll have all the menu items kind of on the right.

Usually there's a search bar sometimes, you know, there's all this type of stuff. Another thing that we have with the horizontal navigation bar is a dropdown navigational menu, and so this kind of works along the ways and as you see, like a bigger site, think about like the GAP website or Old Navy, or, you know, clothing websites do this really, really well.

They'll have different things, like they'll have like maybe men's or women's and children, and then as you drop down, they have this giant like dropdown navigation menu that maybe, like if it's, if it's like. If it's oh, clothing website, like, it'll say men's and then it'll have tops and bottoms and you know, like swimwear, all these things that will be kind of broken down.

Sometimes there's images in there, there's a bunch of stuff that could go in a dropdown menu. It also has regular dropdown menus. Could be like, if you have an about page, you could have it about, and maybe about the founder, about our team, work with us, those types of things could all be under about menu.

That could be just a, a standard text menu. There's [00:10:00] also usually on mobile, there is what they like to call a hamburger navigation menu. So I'm not, I don't know where they came up with these names, but the hamburger one is normally those three lines that you see. It kind of means menu. I think we've all kind of realize that. Usually it'll be like the three lines. Then I'll turn into an X. So you can close that down. So we'll have to look at the hamburger menu that you have on your site. That's something to think about. Sometimes we'll have a vertical sidebar navigation menu, and this could happen on the left or the right.

It's vertical on the fact that it just goes top to bottom. It helps you see the menu items while you are looking at the site, usually on sites that have a vertical menu that's on the left or the right, they don't have the horizontal bar across the top.

Sometimes this is how sites are set up, if they're image heavy or they just have, you know, maybe it's a big menu or something along those lines. You'll see that a lot along the side. And then the last one is the footer navigation menu. This is the one that's got all kinds of links, usually the ones that you don't wanna put in the top of your menu to keep it nice and clean.

We put things down [00:11:00] in the footer and that's what's down there. That's all the links to contact pages and like all of the unsubscribed links and pages, category pages and posts and all that kind of stuff is normally in the footer.

There's a lot of different nomenclatures and menu items that you could put in a horizontal menu, but some of the ones that most people are looking for would be like an about us section, and that could have things underneath it like awards or professions or company information or a brief history about what we do.

Client list, customer quotes or testimonials, job postings, all that kind of stuff is underneath the or could be underneath the About us. Remember, we're trying to get as few of top level menu items as possible, and then we can put things underneath. There, there's usually a contact us page and that might have a frequently asked questions underneath it, or a feedback form or support or things like that would all go underneath the contact us, even like a map in directions to office locations.

Then there's usually a content section. You call that blog, you call it news, [00:12:00] things like that. And then you can have dropdowns for like events or news or weather or competitions or advice or podcasts or all that kind of stuff can go under the content to type tab across your top. And then there's usually things at the bottom like are, that are legally required, like copyright statement, privacy policy terms and conditions.

Those are normal things that are, or footer menu type things. You sometimes in your header you've got a member area or user login. So that would be something like log in here or creating an account or those are usually type of buttons that are up in the top so people can see them easily and they can get into their accounts.

Sometimes in the bottom they'll have a press center, which will go like details for contacting a PR rep or a key personnel or press releases or about us. You could link to all that kind of stuff in a press center. There's usually a product section if you're selling things, and so that could be a catalog or a category or tags.

There can be customer survey, there can be reviews, it can be all that kind of stuff can go under the product or the shop label. Then [00:13:00] there could be search, a site map, useful links, things along those lines. Useful links are usually ones that kind of take you other places. Maybe that's like Facebook or the social networks or if you have a Discord server or things like that.

Those could all be links as well. So I think those are a lot of the different, like the bigger buckets for menu items in your, that you have on your site. I think it's important to kind of use the standard terms. Like we don't want to say instead of saying contact us, like we don't wanna say write to us or we want to, we wanna say the things that we see on a lot of websites, cuz people are looking for certain words. Sometimes it's like, oh, I'm looking to log in, but they're my account or, you know, We just wanna make sure that our, what we're naming things is pretty standard across the board: about us contact shop, store, you know, things like that are some of the things that we are looking for when it comes to our menus.

Here's a couple action items when it comes to menus itself. Make sure that we're not using tiny menus or menu like icons for [00:14:00] large screens. We wanna make sure if we have lots of space and we wanna make sure that they're big and they're easy to get to, they're easy to tap on, they're easy to click on.

We wanna make sure that we're putting menus in familiar locations. That's basically at the top, at the bottom, the side, that, that kind of speaks for itself. We wanna make our menu links look like they're interactive. We wanna make sure that if it's supposed to be a menu, it should look like a menu.

We wanna make sure that links are contrasting. Usually a menu item or a menu bar is gonna be some sort of color, and then it's on, you know, there's another color as the text. We wanna make sure that text is easy to read and easy to see.

So what do we want to do? What's kind of the action item for our site? So we've talked about some of the things that the menus are and what they aren't, where they are, and things along those lines. But what should we do? What's the process of going through and checking our menu? So the first thing would be to open up our website.

First we wanna see what's there. Look at your website and see what menu items are there. When it comes to a, a desktop version, look to see what's there. Are we still using this? Like I'm [00:15:00] looking at yourwebsiteengineer.com, and I see a link there for webinars, but I haven't done a webinar in several years.

So should that still be there? Should it be removed? Things like that. All the social icons are up there. Like should those still be there? Should I remove those like, Just kind of look through and see if the things that are there make the most amount of sense. We wanna make sure that we are building a menu for customers coming or people coming to our website so they know how to navigate and what you're offering across your site.

The other thing to do is once you have looked at your menu items on the desktop, you're happy with that. You've configured them with in WordPress itself, then you wanna look at the mobile view and you can either pull out your phone to do this, or if you are using Chrome or an another browser, you can actually go into what's called a developer mode.

And then you can do a preview of what a mobile version looks like and then start clicking on your menus, cuz usually the mobile menus are different and you wanna make sure that you are using all the same links are there, or make sure they're working.

If you have dropdown menus on your main site, do the dropdowns work on your mobile site? Are they working, are they not? Check [00:16:00] out those types of things. So basically just doing an overall assessment. Do they take you to the right places? If you click on a, the about link, does it get you to another page that has the same type of menu on that same page, you know, check.

Once we make sure, like the header menus or if we got one down the side or in those, those hamburger menus are working, then let's go to our footer. Do we have any contact buttons in the footer? Do we have any menus in the footer? Is the navigation in the foot? Footer working. Do you have like the right things, contact resources, privacy policy, terms of service?

Do you have all those that have links on the homepage that you can get to easily? That would be definitely something to check out and make sure that things are set up and they were working properly. So that's kind of some checklist items. Make sure you're looking at your menus on both mobile and we were looking at 'em on desktop, making sure that the links work, they still make sense and that you can navigate.

From wherever page that you show up to on your website, you can get away from that page very easily. You could do this by going into your dashboard and randomly clicking on a post or page and see what comes up.

Look at [00:17:00] that in the front end to see what that looks like. And then try to navigate back to the contact page or something like that. Just, it's an exercise of checking a bunch of things and making sure things look right and you can navigate properly from any page on your site. So that's what the take home item is this week.

That's gonna be the action item.

Oh, and to let you know, I was gonna say this at the beginning of the show and I completely forgot the action item from last week when we were supposed to go out and check to make sure our WordPress sites are PHP eight compatible.

I went ahead and did that for the three most important sites that are in my quote unquote portfolio. And there's a little bit of work to do to get the last one to fully be ready for 8.0 or even to 8.1 I guess. But I did that last week and I'm excited to go do this exercise of looking at menus this week and making sure that the menus work and making sure the right things are in the menus as I expect them.

So you do that as well. And we'll talk again next week. Take care and we'll talk again soon. Bye-bye. For more great WordPress information, head on over to your website engineer.com.[00:18:00]