Web Courses Bangkok Blog

How to Make a WordPress Theme – Part 9

Author: Carl Heaton

Carl is a consultant and design leader from Manchester, UK, with extensive experience in digital design, UX/UI, and online business. He brings practical, real-world insight shaped by years of leading design, product, and digital work. Learn more at carlheaton.work.

Sharing is caring

Updated September 2026: the code examples now display properly, Google+ (closed in 2019) is replaced by Instagram, and Font Awesome now loads from a current CDN.

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

Style the footer

The first thing I would like to do is create a new “Footer” section in our style.css file, just below the “Header” section, and add some styles. I’ll actually move the “Footer” section of content.css to style.css. The reason is that the footer is part of all our templates, not just 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 set the maximum width of the footer, its padding and background colour, and the size and colour of the footer text. The result looks like this:

Replace the footer text

Next, we want the footer text to match our original design, which reads “© [current year] – Carl Heaton and Web Courses Bangkok”. All of this happens in footer.php. Open the file in your code editor and find these lines:

<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:

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

Here we replace the original Underscores footer text with the text from our design, swap in our own link, and use PHP’s date(‘Y’) so the year updates itself every January. The result looks like this:

Register a social menu

Now we will create a second menu, a social menu, and place it on the right-hand side of the footer. You will manage this menu in the WordPress dashboard, like any other menu.

Open functions.php and find the register_nav_menus() function. It lets a theme register as many menus as it needs. Add the second line inside the function, like this:

register_nav_menus( array(
  'primary' => esc_html__( 'Primary Menu', 'simple-portfolio' ),
  'social'  => esc_html__( 'Social Menu', 'simple-portfolio' ),
) );

If you started from a newer copy of Underscores, the first menu may be called ‘menu-1’ instead of ‘primary’. Keep whatever name your theme already has and just add the ‘social’ line.

The esc_html__() function fetches the translation of a string and escapes it so it is safe to print in HTML. This is required if you submit a theme to the WordPress.org theme directory, which has high standards for code quality and security.

Now go to Appearance > Menus in the WordPress dashboard and you should see the new Social Menu location. (This screen is there for classic themes like ours that register menus. Block themes manage menus with the Navigation block in the Site Editor instead.)

Next, add two social media links to the menu: your Instagram profile and your Facebook page. Create a new menu, open Custom Links, enter each address and link text, and click Add to Menu. Tick the Social Menu display location and click Save Menu.

Note: the screenshots in this part were taken when the series was first written, when the first link was to Google+. Your Instagram link goes in exactly the same place.

Print the menu in the footer

We have registered the menu and added links to it, but we won’t see it in the footer yet, because we still need to tell WordPress where to display it.

We will write a small function that outputs the markup for the menu and then call it in footer.php, where we want the menu to appear. Underscores keeps custom template functions in the template-tags.php file inside the inc folder, so we will add ours at the end of that file. Open inc/template-tags.php and paste this after the last function:

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'     => '',
      )
    );
  }
}

The function checks whether a menu has been assigned to the social location and, if so, prints it. It wraps the menu in a div with the id and class menu-social, and gives the list the id menu-social-items and the class menu-items.

Open footer.php and add this line after the closing .site-info div:

<?php simple_portfolio_social_menu(); ?>

This calls our new function from template-tags.php, so the social menu appears after the footer text.

The following screenshot shows the two links we added in the dashboard, and the markup and classes our function applies to them:

Lay out the footer

We still need to style the social menu and swap the link text for icons. Add these styles at the end of the Footer section of style.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;
}

This divides the footer in two: 60% of the width for the copyright text on the left and 40% for the social links on the right. The result looks like this:

Next, we make the footer responsive. Add these styles straight after the code you just added:

@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;
  }
}

This media query removes the floats and makes both parts of the footer full width on screens narrower than 37.5em (600px at the default font size). Save the file, refresh the page and make the window narrow, and you should see this:

Swap the links for Font Awesome icons

Now we will replace the text links with matching Font Awesome icons. First, load the Font Awesome stylesheet. The free version is on the cdnjs CDN, so add this line inside the simple_portfolio_scripts() function in functions.php:

wp_enqueue_style( 'simple-portfolio-fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.min.css', array(), '7.3.1' );

This loads Font Awesome 7 into our theme. Check Font Awesome or cdnjs for the latest version number.

Next, find the two icons we will use on the Font Awesome icons page. Each icon page shows its Unicode value: Square Instagram is e055 and Square Facebook is f082. Brand icons use the “Font Awesome 7 Brands” font.

To add each icon just before its link, we use the ::before pseudo-element and choose the icon by the link’s address:

/* Font Awesome Icons */
#menu-social ul li a::before {
  font-family: "Font Awesome 7 Brands";
  font-weight: 400;
  font-size: 64px;
  font-size: 6.4rem;
  color: #2f3633;
}
#menu-social li a[href*="instagram.com"]::before { content: "\e055"; }
#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;
}

We add the icons just as we would add text in a font: by setting the font family, weight, size and colour. The attribute selectors check each link’s address, so the Instagram link gets the Instagram icon and the Facebook link gets the Facebook icon. The rest of the styles line up the social menu with the site info.

Finally, we hide the link text so only the icons show, as in our design. Edit the simple_portfolio_social_menu() function we created and add these two lines to its array, as shown in the screenshot:

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

Underscores’ screen-reader-text class hides the link text on screen but keeps it for screen readers, so visitors see only the icons and screen reader users still hear the name of each network.

Our footer is ready. To make it responsive, add this media query at the end of the Font Awesome Icons styles:

@media screen and (max-width: 37.5em) {
  .site-footer .site-info {
    line-height: normal;
  }
  #menu-social ul li {
    float: none;
    display: inline-block;
  }
}

This removes the tall line height, which phones don’t need, and centres the social icons below the site info: