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:
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.
[code language=”css” 1=”true”]
/*————————————————————–
# 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;
}
[/code]
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:
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:
[code language=”html” 1=”true”]</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>’ ); ?>
[/code]
Replace them with:
[code language=”php” 1=”true”]</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>’ ); ?>
[/code]
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:
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:
[code language=”php” 1=”true”]</pre>
register_nav_menus(array(
‘primary’ => esc_html__(‘Primary Menu’, ‘simple-portfolio’),
‘social’ => esc_html__(‘Social Menu’, ‘simple-portfolio’),
));
[/code]
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:
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:
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:
[code language=”php” 1=”true”]</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’ => ",
)
);
}
}
[/code]
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:
[code language=”php” 1=”true”]
<?php simple_portfolio_social_menu() ?>
[/code]
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:
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:
[code language=”css” 1=”true”]
.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;
}
[/code]
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:
Next, we must make our footer responsive. Insert the following styles immediate after the code you just added to the footer section:
[code language=”css” 1=”true”]
@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;
}
}
[/code]
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:
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.
Just add the following function inside the simple_portfolio_scripts() function in functions.php:
[code language=”php” 1=”true”]
wp_enqueue_style (‘simple-portfolio-fontawesome’, ‘//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css’);
[/code]
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:
[code language=”css” 1=”true”]
/* 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;
}
[/code]
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:
[code language=”php” 1=”true”]</pre>
‘link_before’ => ‘<span class="screen-reader-text">’,
‘link_after’ => ‘</span>’,
[/code]
We are using the “screen-reader-text” class we just added to hide the links and only display the social icons.
As you see, our footer is ready. To make it responsive, add the following media query at the end of /* Font Awesome Icons */:
[code language=”css” 1=”true”]
/* 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;
}
}
[/code]
This will remove the unnecessary for mobile devices line-height property and center the social icons below the site info div:
We have finally completed our front page template we previously named “Home Page”, and this is it:
The same template at mobile width looks like this:
Here is a list of all the other parts: part 1, part 2, part 3, part 4, part 5, part 6, part 7, part 8, part 10, part 11, part 12, part 13, part 14
