WordPress Theme Creation 3: Header, Logo and Social Menu Options

This is part 3 in an ongoing series about WordPress theme creation. These tutorials provide you with a simple way to create a complete WordPress theme, whilst staying within the rules and WordPress best practices.

If this is your first time here, I would suggest that you read Part 1 and Part 2 first.

I started writing this series using WordPress 4.6. Since then 4.7 has been released. Amongst other changes, a nice Additional CSS section has now been added as a default to the customizer.

We were going to create our own in any case, but it’s awesome that it has been added to core. Also, we want our theme to be compatible with the latest WordPress, so go ahead and update to 4.7 if you have not done so yet.

What we’ll do this time:

  1. Style the header.
  2. Style the mobile menu
  3. Learn how to add logo options to the customizer.
  4. Add a social menu to the header

I originally stated that we will deal with the footer here too. But, because the footer will have so many options, it turned into its own tutorial. We will deal with everything needed for the footer in Part 4.

Styling the header

I know we have edited the styles quite a bit already, but let’s take a closer look at the Underscores style.css. You will see that it has a very nice TABLE OF CONTENTS. This is not an absolute requirement, but it is a lovely thing for the future developers who may customize your theme. I would like to add 3 further sections: #Header and #Footer, and #Responsive Style at the bottom, to further organize my styles.

//*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Header
# Footer
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
# Responsive Style

Now, let’s go down and create these sections just above #Accessibility.


.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

Next, next we’ll start adding our header styles, to make it look like our design.

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
	padding: 0 5%;
}

The next step is to increase the font-size and the spacing of the menu items. Go to ## Menus(about line 554) and change the .main-navigation li to look like this.

.main-navigation li {
    float: left;
    position: relative;
    font-size: 25px;
    margin: 0 10px;
}

I am also adding some style to the sub menus. Find .main-navigation ul ul and add the background-color like this:

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 1.5em;
	left: -999em;
	z-index: 99999;
	background-color: #333333;
}

The last thing I am going to do for the menu styling is to add a border-top to the individual items for a bit of definition.

.main-navigation ul ul li {
	border-top: 1px solid #fdd017;
}

With all the styling you just added, your header should now look like this:

That is all we are going to do, as far as styles for the header goes

Style the mobile menu

As you can see when you make your screen smaller, Underscores already comes with some mobile styles. It is however not perfect, so let’s improve it. At about line 639, you will find this @media query. I like to keep all my responsive styles together, so I am going the move this one. Create this section at the bottom of your style.css:

/*--------------------------------------------------------------
# Responsive Styles
--------------------------------------------------------------*/ 

And then copy and paste the media query there. (remember to delete the original) Also change it from (min-width: 37.5em) to (min-width: 30em)

/*--------------------------------------------------------------
# Responsive Styles
--------------------------------------------------------------*/
@media screen and (min-width: 30em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
	
	/* Your mobile styles must go here */
}

Please make sure to add your styles before the closing bracket!

We first make each menu items 100% wide, so that they each take up their own line:

	.main-navigation li {
		width: 100%;
	}

Now, for our sub menus, we will slightly decrease the font-size to 20px and give the a width of 45%, otherwise the Level 3 menu items will be off-screen:

	.main-navigation ul ul li {
    		width: 45%;
    		font-size: 20px;
	}

So, that is our mobile phone styles sorted. Now we will attend to tablet and small desktop styles. The style below ensures that the menu items display in two columns on tablet sizes.

/* Tablet styles */
@media screen and (min-width: 30.01em) and (max-width: 61.25em) {
	.main-navigation li {
		width: 45%;
	}
}

This style below ensures that menu items display in 3 columns on slightly larger screens. Also, we want to hide the toggle button. And we want the sub menus to display full-width.

/* Large tablet/small desktop styles */
@media screen and (min-width: 61.26em) and (max-width: 80em) {
	.main-navigation li {
		width: 30%;
	}

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: inline;
	}	

	.main-navigation ul ul li {
     	width: 100%;
	}
}

Lastly, we have to ensure that the mobile toggle button disappears and the default menu displays on larger screens.

/* Larger desktops */
@media screen and (min-width: 80.01em) {
	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: inline;
	}

}

Our button is pretty ugly, so let’s fix it. Open your header.php and find the button code(it looks like this):

<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'mooi' ); ?></button>

and change it to:

<button class="menu-toggle"><div></div><div></div><div></div></button>

I don’t like the Underscores form and button styles. You can delete everything under /*------#Forms------- */. Then add these styles to about line 635. Make sure NOT to put this inside a media query:

.menu-toggle {
    display: block;
    background-color: #333333;
    border: #333333;
    box-shadow: unset;
    border: 1px solid #fdd017;
}

.menu-toggle div {
    width: 15px;
    margin: 5px 0;
    height: 1px;
    background-color: #fdd017 !important;
}

So, the images below show what your menu should look like on different screen sizes:

How to add logo options to the customizer

First we need to add a customizer control for it in functions.php. Open it and add this(make sure you don’t accidentally put it inside another function. If you’re unsure – add it just above where we enqueued the scripts and styles:

/**
* Create Logo Setting and Upload Control
*/
function mooi_new_customizer_settings($wp_customize) {
	// add a setting for the site logo
	$wp_customize->add_setting('mooi_logo');
	// Add a control to upload the logo
	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'mooi_logo',
		array(
			'label' => 'Upload Logo',
			'section' => 'title_tagline',
			'settings' => 'mooi_logo',
	) ) );
}
add_action('customize_register', 'mooi_new_customizer_settings');

This will add a new control to the Site Identity section. Now, we need to change the site-branding to look like this in header.php.

		<div class="site-branding">
			<?php
			// check to see if the logo exists and add it to the page
			if ( get_theme_mod( 'mooi_logo' ) ) : ?>
 
				<img src="<?php echo get_theme_mod( 'mooi_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" >
 
				<?php // add a fallback if the logo doesn't exist
			else : ?>
 
				<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
 
			<?php endif; ?>
			
			<?php
			$description = get_bloginfo( 'description', 'display' );
			if ( $description || is_customize_preview() ) : ?>
				<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
			<?php endif; ?>
		</div><!-- .site-branding -->

Here we first try to find a logo and if one is not found, we default back to the site title .

Now when you go to the Customizer->Site Identity, you’ll be able to set a logo.

Add a social menu to the header

The best way to do this within the rules, is to use the WordPress nav menu system. The first thing to do, is to register a new menu in functions.php:

add_action( 'init', 'mooi_register_nav_menus' );

function mooi_register_nav_menus() {
	register_nav_menu( 'social', __( 'Social', 'mooi' ) );
}

Next, create a file called menu-social.php, paste this code inside and save it in the root of your theme.

<?php if ( has_nav_menu( 'social' ) ) {

	wp_nav_menu(
		array(
			'theme_location'  => 'social',
			'container'       => 'div',
			'container_id'    => 'menu-social',
			'container_class' => 'menu',
			'menu_id'         => 'menu-social-items',
			'menu_class'      => 'menu-items',
			'depth'           => 1,
			'link_before'     => '<span class="screen-reader-text">',
			'link_after'      => '</span>',
			'fallback_cb'     => '',
		)
	);

} ?>

Now, we can use this code: <?php get_template_part( 'menu', 'social' ); ?> anywhere we would like to add the menu. To keep to our design, we are going to change header.php like the code below. There are a few things to note here:

Firstly, we give the site branding a class of col-sm-6. The Bootstrap grid divides a page into 12 equal columns. col-sm-6 ensures that site-branding takes up 6 (i.e half) of those columns. Next, we add a new div for the social menu, also with the class of col-sm-6– to ensure it takes up the other half of the columns so that they can live side-by-side as in our design.

<!-- Add the Bootstrap class to site-branding -->
		<div class="col-sm-6 site-branding">
			<?php
			// check to see if the logo exists and add it to the page
			if ( get_theme_mod( 'mooi_logo' ) ) : ?>
 
				<img src="<?php echo get_theme_mod( 'mooi_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" >
 
				<?php // add a fallback if the logo doesn't exist
			else : ?>
 
				<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
 
			<?php endif; ?>
			
			<?php
			$description = get_bloginfo( 'description', 'display' );
			if ( $description || is_customize_preview() ) : ?>
				<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
			<?php endif; ?>
		</div><!-- .site-branding -->

		<div class="col-sm-6 social-menu">
			<?php get_template_part( 'menu', 'social' ); ?>
		</div>

Let’s add some styles in our style.css:

First, add this under the #Header section:

.site-branding {
	margin-top: 1%;
}

.social-menu {
	margin-top: 2%;
}

Then under #Menus:

/* Social menu */
#menu-social ul {
	list-style: none;
	margin: 0 0 25px;
	text-align: right;
}

#menu-social ul li {
	display:  inline-block;
	position: relative;
}

#menu-social li a::before {
    	display: inline-block;
    	font-family: 'FontAwesome';
    	font-size: 25px;
    	vertical-align: top;
    	background-color: #fdd017;
    	color: #333333;
    	border-radius: 50%;
}

#menu-social li a:hover:before {
    	background-color: #333333;
    	color: #fdd017;
}

#menu-social li a[href*="facebook.com"]::before {
	content: '\f230';
	padding: 0 11px;
}
#menu-social li a[href*="twitter.com"]::before {
	content: '\f099';
	padding: 0 10px;
}
#menu-social li a[href*="plus.google.com"]::before {
	content: '\f0d5';
	padding: 0 5px;
}
#menu-social li a[href*="linkedin.com"]::before {
	content: '\f0e1';
	padding: 0 11px;
}
#menu-social li a[href*="pinterest.com"]::before {
	content: '\f0d2';
	padding: 0 11px;
}
#menu-social li a[href*="instagram.com"]::before {
	content: '\f16d';
	padding: 0 11px;
}
#menu-social li a[href*="behance.net"]::before {
	content: '\f1b4';
	padding: 0 8px;
}
#menu-social li a[href*="dribbble.com"]::before {
	content: '\f17d';
	padding: 0 11px;
}
#menu-social li a[href*="deviantart.com"]::before {
	content: '\f1bd';
	padding: 0 14px;
}
#menu-social li a[href*="github.com"]::before {
	content: '\f09b';
	padding: 0 11px;
}
#menu-social li a[href*="tumblr.com"]::before {
	content: '\f173';
	padding: 0 14px;
}
#menu-social li a[href*="youtube.com"]::before {
	content: '\f167';
	padding: 0 10px;
}
#menu-social li a[href*="flickr.com"]::before {
	content: '\f16e';
	padding: 0 11px;
}
#menu-social li a[href*="vimeo.com"]::before {
	content: '\f27d';
	padding: 0 9px;
}

By using the ::before pseudo selector, the idea is that a user will create a menu with custom links. We know part of each social network’s URL. So, when the user creates a custom link menu item and enters their social profile’s URL, the URL is recognized and the correct Font Awesome icon is shown.

Let’s try it. Go to Appearance->Menus, click on create new menu, give it a name and click the Create Menu button. Then, click the Save Menu button.

Good stuff! Our header now has everything it needs according to our design. Plus, our users have loads of options. When all is said and done, your header should look something like the image below

Congratulations! You have finished Part 3! Watch out for Part 4, where we we create our footer.
Until then,
Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *