Change locations of header pieces

For this lesson, we will show you how to change the location of the main navigation bar.  Let’s look at the header area on the BluePrint-Q website.  In this case, we use two pieces – the masthead and the navigation bar.

In your IDE, navigate to bpq/hooks/bpq.hook.wordpress.php.  In there, you’ll see a series of actions related to the frame.  Take note on the highlighted lines – that’s what we care most about for this exercise.

Both lines subscribe to the action_bpq_header hook.  One action displays the masthead, the other displays the navigation bar.  The third argument is an integer.  The lower the integer value, the earlier that component is displayed.  Because the masthead is associated with 200 and the navigation bar is associated with 300, the masthead is displayed before the navigation bar.  Let’s look at changing that.

/**
 * Layout.
 * 
 * The layout is made up of several pieces from top to bottom:
 *      1. Alert
 *      2. Top
 *      3. Masthead
 *      4. Navigation
 *      5. Main/Content
 *      6. Pedestal
 *      7. Bottom
 * 
 * Then there are a number of pieces that can be tweaked within
 * the more traditional template files.
 */

//  Frame.
add_action( 'action_bpq_alert', 'bpq_display_alert', 100, 0 );
add_action( 'action_bpq_header', 'bpq_display_top', 100, 0 );
add_action( 'action_bpq_header', 'bpq_display_masthead', 200, 0 );
add_action( 'action_bpq_header', 'bpq_display_navigation', 300, 0 );
add_action( 'action_bpq_header', 'bpq_display_highlight', 400, 0 );
add_action( 'action_bpq_footer', 'bpq_display_pedestal', 100, 0 );
add_action( 'action_bpq_footer', 'bpq_display_bottom', 200, 0 );

Navigate to the functions.php file in your child theme.  You are going to remove the action that the parent theme has set up for displaying the navigation bar and replace it so that it is triggered before the masthead.

There is a slight caveat here – because of the way that WordPress processes child and parent theme relationships, you must specially trigger your hook-changing code.  Paste the following code into your child-theme’s functions.php file.

Notice that you are removing the navigation bar action from the parent and replacing it with the same function call, but at an earlier priority – a priority that comes before 200, as indicated by the masthead hook in the parent theme.

/**
 * Flip the masthead and navigation bar locations.
 */
function blueprintq_flip_header()
{
    remove_action( 'action_bpq_header', 'bpq_display_navigation', 300, 0 );
    add_action( 'action_bpq_header', 'bpq_display_navigation', 150, 0 );
}
add_action( 'init', 'blueprintq_flip_header', 10, 0 );

Here is what the header now looks like.  Voila!