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.

Part 5 – Example #2 – Change the Position of the Secondary Nav Menu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In our first Add Action example, you learned about using Statements, Functions and Arguments. Now that you have a feel for how Action Hooks work we’re going to work on our second example where we move the secondary nav menu.

Two Menus we’re Working With

I’m going to refresh your memory about the menus before we begin. We have two menus available. You can see that earlier I changed this menu to be the same as the one above. And I did that because I’m going to show you two ways to use the secondary menu where you’ll want it the same as the other.

The first thing I’m going to do is to put the secondary one up up into this place. And then another example is actually going to be to make a sticky menu out of it. This menu will stay in a specific spot. It stays up at the top essentially and this menu floats away. So that, of course, really wants you to use the same menu in both cases.

First Step: Remove Menu Using a Remove Action

The first thing we’re going to do is just get rid of this menu entirely and that is using the remove_action statement. As I said before the first aspect of the action hook is to add and now we’re going to use the second aspect which is remove action.

It’s actually quite simple, it follows the same syntax as the add_action one above. So it’s remove_action and the name of the hook that you are removing it from which in this case is ‘genesis_after_header’. So we’ve got a remove_action and we’ve identified the hook that we want to remove it from.

We may as well just turn these hooks on right now so you can see. As it is right now, ‘genesis_after_header’ has both the menu and the sub nav added to it and the function that adds the sub nav is a function called ‘genesis_do_subnav’. That’s the name of the function we want to remove. In the previous example we created a function and we added it.

In this example we are removing an existing function and that existing function is ‘genesis_do_subnav’. Close out that statement with a semicolon and we have a completed statement, remove_action ‘genesis_after_header’, ‘genesis_do_subnav’. And this is going to make that menu go away.

So we’ll save it. Here we are, byob-custom-functions.php and we’ll upload it to the site. Let’s look at the site and now the menu is gone.

Second Step: Add Menu to New Location Using Add Action

The second part of this is moving the menu to the top here so if we turn those hooks on again, we have genesis_header which essentially has all this stuff in it. We have genesis_before_header which is really the corollary of genesis_after_header so that’s the hook we’re going to use.

We could use genesis_before as well but genesis_before is the hook that fires immediately after the opening body tag and the genesis_before_header happens immediately outside the header div.

Anyway, we’ll use genesis_before_header for this as the hook that we’re going to add. I’m just going to copy this, I’m a lousy typist so cut and paste is my favorite thing. add_action ‘genesis_before_header’, ‘genesis_do_subnav’ is what we now have.

Recap of the Process

So what we did was we took the menu away from its first location and now we’re adding it back to another section. Save that, upload it and reload it. There it is, there’s the next menu, that subnav menu up here at the top.

Change the Primary Nav Menu Position

You could change the position of the primary nav menu as well. Let’s say you want that at the top. You would essentially just copy these and instead of ‘genesis_do_subnav’ it’s ‘genesis_do_nav’. Now this is going to place both of them at the top.

Using Priority to Change Order the Menus Appear

Note how the subnav is above the nav? This gives you an opportunity to consider the idea of priority. Right now this add_action comes before this add_action and so ‘genesis_do_subnav’ is happening first. However, we could add a priority, say 11. If we don’t specify a priority it automatically has 10 which means it automatically happens in the order that WordPress finds it.

If we add an 11 here, that means it’s going to happen after. Let’s hit save to that and now the subnav is happening later than the nav. If you want something to go first you give it a small number and if you want something to go last you give it a large number.

We could accomplish the same thing by giving this a priority of 9, ‘genesis_before_header’, ‘genesis_do_nav’. We gave it a priority of 9 and they’re going to be in exactly the same spots. But if we take their priorities away then they happen in the order in which they’re found and they reverse.

So that’s add_action, remove_action and priorities in those actions. We’re just going to take that main menu back to its normal place.

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