By Carl Heaton

The only thing that we need to do for our front page template is to style the footer and add an optional social menu with Google and Facebook icons. The screenshot below is our starting point:

footer unstilled

The first thing that I would like to do is to create a new “Footer” section in our style.css file, just below the “Header” section, and add some styles. I’ll actually transfer the “Footer” section of content.css to style.css. The reason for this is that the footer is a part we use in all of our templates and not just in the front page template.

/*--------------------------------------------------------------

# Footer

--------------------------------------------------------------*/

.site-footer {

clear: both;

max-width: 960px;

overflow: auto;

background: #5e6d66;

padding: 40px 30px;

}

.site-footer .site-info, .site-footer .site-info a {

font-size: 14px;

color: white;

padding-top: 10px;

}

Here we are setting the maximum width of our footer and establishing a font size, padding, footer background color and the color of the text in our footer area. The result looks like this:

applying footer styles

The next thing we would like to the is to make the text in our footer consistent with the text of our original design, which looks like this: “© 201X – Carl Heaton and Web Courses Bangkok”. All of this is accomplished in footer.php. Open the file in your code editor and find the following lines of code:

</pre>
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'simple-portfolio' ) ); ?>"><?php printf( esc_html__( 'Proudly powered by %s', 'simple-portfolio' ), 'WordPress' ); ?></a>

<span class="sep"> | </span>

<?php printf( esc_html__( 'Theme: %1$s by %2$s.', 'simple-portfolio' ), 'simple-portfolio', '<a href="http://www.webcoursesshowcase.com" rel="designer">Carl Heaton</a>' ); ?>

Replace them with:

</pre>
<?php echo '© '. date('Y'); ?>

<span class="sep"> – </span>

<?php printf( esc_html__( 'Carl Heaton and %1$s', 'simple-portfolio' ),  '<a href="https://www.webcoursesbangkok.com/" rel="designer"> Web Courses Bangkok</a>' ); ?>

Here we are just replacing the original footer text in Underscores with the text of our design, replacing the link with a link of our own and adding a date function. The result looks like this:

footer text ready

Now we need to create an additional social menu and place it in the right hand side of our footer. This menu will be controlled inside the WordPress dashboard as a separate menu.

Go to functions.php and find the function register_nav_menus(). It allows us to register as many menus in our theme as we want. We just need to add the second line of code inside the function just like this:

</pre>
register_nav_menus(array(

'primary' => esc_html__('Primary Menu', 'simple-portfolio'),

'social' => esc_html__('Social Menu', 'simple-portfolio'),

));

The esc_html__() here is used to retrive the translation of our strings and escapes them for safe use in HTML. This is required if you submit themes to the WordPress repository at WordPress.org. They have high standards for code quality and take theme security seriously.

And now, when you go to the WordPress dashboard -> Appearance -> Menus, you should see the new Social Menu:

social menu - dashboard

Next, we will add our two social media links to our menu – the Google Plus link and the Facebook link. Click on “Custom Links” in the “Menu” section and add them in the following way:

adding menu links

After you are done, click “Save Menu” to preserve your changes.

Although we have registered the menu and added some links to it, we won’t see it in the footer as we still need to tell WordPress where to display it.

We will also create a custom function that outputs the necessary markup for our menu and call it within function.php as this is where we want our menu to appear. Underscores has a special template-tags.php file within the inc folder of our theme where it holds custom functions, and we will add our function at the end of it. Open template-tags.php, then copy and paste the following function after the last function in the file:

</pre>
function simple_portfolio_social_menu() {

if ( has_nav_menu( 'social' ) ) {

wp_nav_menu(

array(

'theme_location'  => 'social',

'container'       => 'div',

'container_id'    => 'menu-social',

'container_class' => 'menu-social',

'menu_id'         => 'menu-social-items',

'menu_class'      => 'menu-items',

'depth'           => 1,

'fallback_cb'     => ",

)

);

}

}

Here we are checking whether we have an active social menu in our theme, and if we do, we are printing the markup. The markup itself applies only to the social menu, adds a div container with an id and class of menu-social and adds an id of menu-social-items and a class of menu-items to the menu items themselves.

Edit our footer.php file and insert the following line of code after the closing .site-info div:

<?php simple_portfolio_social_menu() ?>

It calls our custom social menu function from the template-tags.php file after the text we previously displayed in our footer.

The following screenshot shows both the links we added from the WordPress dashboard after we registered the menu and the markup and classes we applied to it with our custom function:

footer markup

As you see, we still need to style the social menu and swap the link texts for icons. Let’s do that!

Enter the following styles end the end of the Footer section of styles.css:

.site-footer .site-info {

width: 60%;

float: left;

}

/*Footer Social Menu*/

.site-footer ul#menu-social-items {

margin: 0;

}

.site-footer .menu-social {

width: 40%;

float: left;

padding-top: 10px;

}

.menu-social ul li {

list-style: none;

float: right;

color: white;

padding-left: 10px;

}

.menu-social ul li a {

color: white;

text-decoration: none;

}

As you see, here we are dividing the footer in two parts by allocating 60% of the width to the copyright section and 40% of the width to the social section of our site. We are also floating the copyright section of the footer to the left and the social section to the right. The result looks like this:

footer divided

Next, we must make our footer responsive. Insert the following styles immediate after the code you just added to the footer section:

@media screen and (max-width: 37.5em) {

.site-footer .site-info , .site-footer .menu-social {

float: none;

width: 100%;

text-align: center;

}

.menu-social ul li {

float: none;

}

.site-footer ul#menu-social-items {

padding: 10px;

}

}

With this media query, we are removing the float property and setting the content of the two footer sections to 100% so that they span the full width of the footer below screen width of 37.5em. After you save the code, refresh your page and reduce its width below 37.5em. You should see this:

footer responsive

Now we will swap our social media items (links) for Font Awesome icons that match them. The first thing that we will need to do is to grab the stylesheet from Font Awesome at http://fontawesome.io/get-started/ and enqueue it in our theme’s functions.php file. What we need to do to add Font Awesome to our theme is to copy the address you see below and use it in our wp_enqueue_style() function.

bootstrap cdn

Just add the following function inside the simple_portfolio_scripts() function in functions.php:

wp_enqueue_style ('simple-portfolio-fontawesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');

This will enqueue Font Awesome into our theme.

The next thing you would like to do is to find the 2 icons we will be using from http://fontawesome.io/icons/, and the first of our icons, Google+ square, is located at http://fontawesome.io/icon/google-plus-square/. To add this icon to our stylesheet, we will need its Unicode, which is f0d4. The Unicode for the Facebook icon, on the other hand, is f082.

To add the icons just before the social links in our footer, we will use a pseudo class:

/* Font Awesome Icons */

#menu-social ul li a:before {

font-family: 'FontAwesome';

font-size: 64px;

font-size: 6.4rem;

content: 'f0d4';

color: #2f3633;

}

#menu-social li a[href*="plus.google.com"]::before { content: 'f0d4'; }

#menu-social li a[href*="facebook.com"]::before { content: 'f082'; }

#menu-social ul li {

padding: 0 10px;

}

#menu-social {

padding: 0;

}

.site-footer .site-info {

line-height: 96px;

padding-top: 0;

}

Here are we adding the Font Awesome icons just the way we are adding a font by specifying font family, font size and color. We are also saying that the icons must appear exactly before our social links, but in order to place these icons in front of their corresponding links, we are also checking their Unicode. The rest are just styles to align the social menu with the site info.

We would also need to hide text links in order for our social menu to match our design. This is accomplished by editing the simple_portfolio_social_menu() function we previously created and inserting a class that accomplishes the task. Add the following lines of code just as shown in the screenshot:

</pre>
'link_before'     => '<span class="screen-reader-text">',

'link_after'      => '</span>',

screen reader text class

We are using the “screen-reader-text” class we just added to hide the links and only display the social icons.

footer ready

As you see, our footer is ready. To make it responsive, add the following media query at the end of /* Font Awesome Icons */:

/* Font Awesome Icons */

@media screen and (max-width: 37.5em) {

.site-footer .site-info {

line-height: normal;

}

#menu-social ul li {

float: none;

display: inline-block;

}

}

This will remove the unnecessary for mobile devices line-height property and center the social icons below the site info div:

mobile footer ready

We have finally completed our front page template we previously named “Home Page”, and this is it:

Home Page template complete

The same template at mobile width looks like this:

Home Page template mobile complete

Here is a list of all the other parts: part 1part 2part 3part 4part 5part 6part 7part 8part 10part 11part 12part 13part 14

carl68

About The Author

Carl

He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.