Moving the header menu from default location

[James Kaneshiro]

Hello everyone,

Here is what I am trying to do. I am using Jumpstart v.1 and I would like to move the themeblvd_header_menu from its default location and add it to the themeblve_header_content.

What I am also doing is adding social media icons and a search bar to the header content. I am also using the Uber Mega Menu which I did the integration for.

function my_insert_ubermenu(){
    ?>
    <div id="nav-wrapper">
	<?php
	ubermenu( 'main' , array( 'theme_location' => 'ubermenu' ) );
	?>
    </div><!-- .nav-wrapper (end) -->
    <?php
}

function my_ubermenu_integration() {
    remove_all_actions( 'themeblvd_header_menu' );
    add_action( 'themeblvd_header_menu' , 'my_insert_ubermenu' );
}
add_action( 'after_setup_theme', 'my_ubermenu_integration' );

function my_header_addon() {
     ?>
     <div class="social-media-icons">
     	<div class="social-media-wrapper">
            <div id="facebook"><img src="http://www.atlus.com/sandbox/img/icon-facebook.png" alt="Atlus USA Facebook page" title="Atlus USA official Facebook page" /></div>
            <div id="twitch"><img src="http://www.atlus.com/sandbox/img/icon-twitch.png" alt="Atlus USA Twitch Channel" title="Midnight Channel on Twitch" /></div>
            <div id="twitter"><img src="http://www.atlus.com/sandbox/img/icon-twitter.png" alt="Follow Atlus on Twitter" title="Follow Atlus USA on Twitter" /></div>
            <div id="youtube"><img src="http://www.atlus.com/sandbox/img/icon-youtube.png" alt="Watch Atlus videos on YouTube" title="Watch Atlus USA videos on YouTube" /></div>
        </div><!-- .social-media-wrapper (end) -->
     </div><!-- .social-media-icons (end) -->
     <?php
	 echo '<div class="header-search">';
     get_search_form();
     echo '</div>';
}

remove_all_actions('themeblvd_header_menu');
add_action( 'themeblvd_header_addon','themeblvd_header_menu');
add_action( 'themeblvd_header_addon', 'my_header_addon' );

This works to a certain extent. It does integrate the uber menu, add the search bar and social media links with the menu in the header content but I am still left with the default menu on the page as well. Since it is possible to add the themeblvd_header_menu to the themeblvd_header_addon, I just need to remove the header menu from the default location. Is there a way to do this? I don’t fully have a complete grasp of the customization on the theme so any help would greatly be appreciated.

Thanks,
James

Topic

[Jason Bobich]

Hello James,

Is this code currently going in your child theme’s functions.php? And is your child theme’s functions.php setup like the example provided where you’ve got the framework included at the top?

By this, I mean the top of your child theme’s functions.php should look like this:

<?php
/*-------------------------------------------------------*/
/* Run Theme Blvd framework (required)
/*-------------------------------------------------------*/

require_once( get_template_directory() . '/framework/themeblvd.php' );

/*-------------------------------------------------------*/
/* Start Child Theme
/*-------------------------------------------------------*/

[Jason Bobich]

Note your code here:

function my_ubermenu_integration() {
    remove_all_actions( 'themeblvd_header_menu' );
    add_action( 'themeblvd_header_menu' , 'my_insert_ubermenu' );
}
add_action( 'after_setup_theme', 'my_ubermenu_integration' );

You’re hooking the my_insert_ubermenu() callback to “themeblvd_header_menu” — Could this be why you’re seeing the menu again in the default location, after you’ve already removed it?

[Jason Bobich]

Sorry, I may be confused… Are you trying to move the theme’s default menu to header content, but then integrate uber menu separately into the theme’s default menu location? So then you have both?

[James Kaneshiro]

Hello Jason,

That was a quick response.

I am using a child theme’s function.php to make the changes but I am not fully understanding the hook at this point. Right now I can get the header menu added to the header content but can’t figure out how to remove the default location menu.

Since I am using uber menu I am using the code that integrates the uber menu to the header menu. Then I want to move the header menu from the default location and then add it to the header content with uber menu integrated.

In other words I want all the element of the header to be inline on full width ; Logo, Menu, Search, and then Social Media Icons.

I am basically a designer with some developer knowledge but not enough to full understand how the hook works. Now that I look at the coding, would it make sense to move the header menu from the default location and add it to the header content, then integrate the uber menu? If so, how would this be done?

Sorry that I may be asking questions that might seem simple but I wanted to make sure that I am getting this right.

Thanks,
James

[Jason Bobich]

This is an important question for you, I need to know before moving forward: Is your child theme’s functions.php setup with this at the top?

[James Kaneshiro]

Hi Jason,

Here is the functions.php:

<?php

function themeblvd_footer_sub_content_default() {
	?>
	<div id="footer_sub_content">
		<div class="footer_sub_content-inner">
			<div class="footer_sub_content-content clearfix">
				<div class="footer-logo">
                	<?php themeblvd_header_logo(); ?>
                </div>
                <div class="footer-nav">
					<span class="footer-inner">
						<?php wp_nav_menu( apply_filters( 'themeblvd_footer_menu_args', array( 'menu_id' => 'footer-menu', 'container' => '', 'fallback_cb' => '', 'theme_location' => 'footer', 'depth' => 1 ) ) ); ?>
					</span>
				</div><!-- .footer-nav (end) -->
                <div class="copyright">
					<span class="copyright-inner">
						<?php echo apply_filters( 'themeblvd_footer_copyright', themeblvd_get_option( 'footer_copyright' ) ); ?>
					</span>
				</div><!-- .copyright (end) -->
			</div><!-- .footer_sub_content-content (end) -->
		</div><!-- .footer_sub_content-inner (end) -->
	</div><!-- .footer_sub_content (end) -->
	<?php
}

/*-------------------------------------------------------*/
/* Run Theme Blvd framework (required)
/*-------------------------------------------------------*/
require_once( get_template_directory() . '/framework/themeblvd.php' );

/*-------------------------------------------------------*/
/* Start Child Theme
/*-------------------------------------------------------*/

/* Removing framework assets */
function my_global_config( $config ){
    $config['assets']['superfish'] = false;
	$config['assets']['nivo'] = false;
	$config['assets']['flexslider']=false;
	$config['assets']['roundabout']=false;
    return $config;
}
add_filter( 'themeblvd_global_config', 'my_global_config' );

/* Add shortcut icon */
function my_favicon() {
	echo '<link rel="shortcut icon" href="'.get_stylesheet_directory_uri().'/favicon.ico" />';
}
add_action('wp_head', 'my_favicon');

/* Adding social media icons and search bar to top of page */
function my_header_addon() {
	 echo '<div class="header-search">';
     get_search_form();
     echo '</div>';
     ?>
     <div class="social-media-icons">
     	<div class="social-media-wrapper">
            <div id="facebook"><img src="http://www.atlus.com/sandbox/img/icon-facebook.png" alt="Atlus USA Facebook page" title="Atlus USA official Facebook page" /></div>
            <div id="twitch"><img src="http://www.atlus.com/sandbox/img/icon-twitch.png" alt="Atlus USA Twitch Channel" title="Midnight Channel on Twitch" /></div>
            <div id="twitter"><img src="http://www.atlus.com/sandbox/img/icon-twitter.png" alt="Follow Atlus on Twitter" title="Follow Atlus USA on Twitter" /></div>
            <div id="youtube"><img src="http://www.atlus.com/sandbox/img/icon-youtube.png" alt="Watch Atlus videos on YouTube" title="Watch Atlus USA videos on YouTube" /></div>
        </div><!-- .social-media-wrapper (end) -->
     </div><!-- .social-media-icons (end) -->
	     <?php
}

remove_all_actions('themeblvd_header_menu');
add_action( 'themeblvd_header_addon','themeblvd_header_menu');
add_action( 'themeblvd_header_addon', 'my_header_addon' );

/* Intergating Uber Menu */
function my_insert_ubermenu(){
	ubermenu( 'main' , array( 'theme_location' => 'ubermenu' ) );
}

function my_ubermenu_integration() {
    remove_all_actions( 'themeblvd_header_menu' );
    add_action( 'themeblvd_header_menu' , 'my_insert_ubermenu' );
}
add_action( 'after_setup_theme', 'my_ubermenu_integration' );

/* Replace Login Logo */
function my_login_logo() { ?>
    <style type="text/css">
        body.login div#login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/img/site-login-logo.png);
			background-size: 165px 50px;
			width: 165px;
            padding-bottom: 10px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

/* Change Login Logo URL and Title */
function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Atlus USA';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

This is the entire functions.php right now. The top section is where I changed the footer nav to be above the copyright. Then I have the framework loaded with the hooks after that. Hopefully I did that correct.

Thanks,
James

[Jason Bobich]

All right, great. The inclusion of the framework at the top of your functions.php is imperative, for what you’re doing with action hooks, to work properly.

===========

First off, I think (as you’ve already mentioned) the biggest thing here is a misunderstanding of how action hooks work and what they are. So let’s start off with that and a more basic example.

An action is simply a point in the loading process of your site. At any one of these points, you can “hook” in to one of these actions with add_action(), and execute something with your own custom function, i.e. a “callback.” Additionally, the theme has already hooked in callback functions in at many of these points.

So, this all gives you leverage to (1) remove callback functions the theme has hooked by default and/or (2) add in your callback functions to be executed.

For a better understanding of this, let’s take an easier example. At the start of your functions.php, you’re currently using the pluggable function method to edit the footer info. However, a better, more-future proof and organized, way to do this is through the action hooks.

Your basic setup is going to be like this:

/**
 * 1) Remove default footer content from displaying
 */
remove_action( 'themeblvd_footer_sub_content', 'themeblvd_footer_sub_content_default' );

/**
 * 2) Setup callback function to display new footer content
 */
function my_footer_sub_content(){
   // This would be your originaly copy of what 
   // was in themeblvd_footer_sub_content_default(), 
   // but with your modifications...
}

/**
 * 3) Output new footer content, by hooking it in
 */
add_action( 'themeblvd_footer_sub_content', 'my_footer_sub_content' );

Now, after this change, you shouldn’t have anything before the framework inclusion line at the top. This all must come after the framework has been included at the top of functions.php.

===========

So, now we get to your menu customization, which is slightly more complicated. I’m going to take what you’ve already done in regards to your menu, and break it into steps, to hopefully make the overall process of what you’re doing with action hooks make more sense:

/**
 * 1) Remove default header menu from displaying
 */
remove_action( 'themeblvd_header_menu', 'themeblvd_header_menu_default' );

/**
 * 2) Setup callback function to display ubermenu
 */
function my_insert_ubermenu(){
   // ...
}

/**
 * 3) Output ubermenu at the header_addon location
 */
add_action( 'themeblvd_header_addon', 'my_insert_ubermenu' );

/**
 * 4) Setup callback function to display additional 
 * header elements
 */
function my_header_addon() {
	// ...
}

/**
 * 5) Output additional header elements at the 
 * header_addon location
 */
add_action( 'themeblvd_header_addon', 'my_header_addon' );

[James Kaneshiro]

Thank you Jason,

You sir are a genius. That makes a lot more sense now on how this works. That is exactly what I was looking for and it helped me to understand better the action hooks.

It also makes sense why you built the theme this way. It becomes so flexible that you can build any type of website from it.

I can’t thank you enough for your help.

James

[Jason Bobich]

Awesome, I’m glad that makes more sense now. I think understanding actions and filters (which I’m sure you’ll encounter later) really opens the doors up to a lot of possibilities for your customizations.

[Author]

Replies