WordPress Guide : Child themes – Part 2 – Changing the header section

Part 2 – Changing the template header

The default storefront theme styles the header section so that the mini basket is positioned next to main navigation menu, I want to move the mini basket to the top of the header area and add an area for a secondary menu.

Changes

The changes that I want to make are:-

  • Adding a additional navigation menu to the top of the page
  • Moving the mini basket out of the menu bar, up to the top navigation menu area
  • Modifying the page template to remove the h1 that is put in before the page content

Adding additional navigation menu

First thing we need to do is define the new navigational menu, so open up the file functions.php and scroll to the below the comment about custom PHP and input the following

function register_custom_menus() 
{
   register_nav_menu('top-menu',__( 'Top Menu' ));
}
add_action( 'init', 'register_custom_menus' );

If you want to add multiple menus then you can do this like shown below

function register_custom_menus() 
{
  register_nav_menus(
   array(
   'top-menu' => __( 'Top Menu' ),
   'mobile-menu' => __( 'Mobile Menu' ),
   'another-menu' => __( 'Another Menu' )
   )
  );
}
add_action( 'init', 'register_custom_menus' );

Upload this file (functions.php) and under the theme customise section > navigation the custom menus will appear here, now we need to define the locations of these within the actual template files.

Define menu locations

For this example I want to have the custom menu at the top of the header section, so copy the header.phpfile from the storefront theme folder to your child theme folder, open up the header.php file and insert the following

wp_nav_menu( array( 'theme_location' => 'top-menu', 'menu_class' => 'top-menu') );

In the above code we have specified the class for the menu so we can easily style it via the style-sheet style.css.

If you upload the header.php, then in the WordPress control panel go to Appearance > Menus and either define the new menu or select a existing menu and assign it to the custom navigation menu and click save. If you then view your WordPress site you should see the new menu appear at the top of the page, which might look a bit messy due to a lack of styling.

Style the custom menu

Open up the style.css file in your editor and style the custom menu, in this example you can use the following css

.top-menu
{
  margin:0 0 10px 0;
  padding:0;
  list-style-type:none; 
  text-align:right;
  font-size:88%;
}
.top-menu li
{
  display:inline-block; 
  padding: 0 5px;
}
.top-menu li
{
  border-right: solid 1px #FFF;
}
.top-menu li:last-child
{
  border-right: none; 
}

Upload the style.css file and refresh your page and you should see the custom menu appear in the top right of the page above the search box.

Remove mini basket on primary navigation

To remove the mini basket widget from the primary navigation area, open up the functions.php file and input:-

add_action( 'init', 'sweets_remove_header_cart' );
function sweets_remove_header_cart() 
{
  remove_action( 'storefront_header', 'storefront_header_cart', 60 );
}

Upload and refresh your page, the mini basket should now have vanished from the primary navigation area leaving a empty space which the menu will not fill. To combat this we will override the CSS for the main-navigation, open up the style.css file and add

.woocommerce-active .site-header .main-navigation
{
  width:100%;
  float:none;
  margin-right:0; 
}

This will make the main-navigation menu stretch to fill the available space within the container.

Adding the mini basket

Now that the mini basket has been removed from the main-navigation area, we can add it to the top menu, open up the functions.php file and add the following towards the bottom

/*
customise the mini_basket
*/
  function storefront_top_cart() 
  {
  if ( is_woocommerce_activated() ) {
  if ( is_cart() ) {
  $class = 'current-menu-item';
  } else {
  $class = '';
  }
  ?>
  <ul class="site-header-cart menu top-cart">
  <li class="<?php echo esc_attr( $class ); ?>">
   <?php storefront_cart_top_link(); ?>
  </li>
  <?php the_widget( 'WC_Widget_Cart', 'title=' ); ?>
  </ul>
  <?php
  }
  }

  function storefront_cart_top_link() 
 {
  ?>
  <a class="cart-contents" href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" title="<?php _e( 'View your shopping cart', 'storefront' ); ?>">
  <?php echo wp_kses_data( WC()->cart->get_cart_subtotal() ); ?>  || <span class="count"><?php echo wp_kses_data( sprintf( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count(), 'storefront' ), WC()->cart->get_cart_contents_count() ) );?></span>
   </a>
  <?php
  }

/*
Add search to top navigation menu
*/
  add_filter( 'wp_nav_menu_items', 'add_basket_box', 10, 2 );
  function add_basket_box( $items, $args )
  {
  if ($args->theme_location == 'top-menu')
  {
  $items .= '<li>'.storefront_top_cart().'</li>';
  } 
  return $items;
  }

Upload the functions.php and you should see the mini basket at the top left of the screen, now we can style it, open up the style.css and input

.woocommerce-active .site-header .site-header-cart
{
  padding-top:0; 
}
.site-header-cart .cart-contents::before 
{
  content: "\f07a";
  font-family: FontAwesome;
  position: absolute;
  top: 0px;
  left: 0px;
  line-height: 1.387;
  width: 1em;
  height:1em;
  text-align: left;
  text-indent: 0px;
  margin-right:0.5em;
}
.site-header-cart .cart-contents::after
{
  display:none; 
}
.site-header .site-header-cart .cart-contents
{
  padding: 0 1.5em;
}
.woocommerce-active .site-header .site-header-cart
{
 width:auto; 
}

Upload the style.css and refresh your page and you should see the mini basket styled.