The tenth and last in this series of tutorials is adding three footer elements, page navigation using ‘wp pagenavi’, a third menu bottom of the footer, and a little editable template part to give us credit for creating the theme.

If we follow the steps in this tutorial we will be able to add numeric page navigation to our WordPress theme, a footer menu bar and credit text after the footer.

We will need to do the following steps, add conditional code to display the ‘wp pagenavi’, add a new menu location and the footer credit text, we will do this with template parts and styling in the style.css.

If you have not worked through the first tutorial you can download the starting theme from the downloads page or from getting started two, two parts of this this code do require the sample theme and the options page tutorial to be present.

In the download for this tutorial are all the files, in the changes folder is the functions and style changes, and in the final folder are all the file from this tutorial so we can compare our code or copy the page files to our theme.

Download Support Files: Tutorial 2 Footer (818)

Stylesheet

In the changes folder find the file called lesson-10-style.css, this is the code below and should be added to our child themes style.css file.

/* Lesson 10 style starts here */
/* Start Page Navigation */
.page-navi
{
  margin-top: 20px;
  margin-left: 15px;
  padding: 0;
  border: 0;
  position: relative;
  height: auto;
}
/* End Page Navigation */

/* Start Override Pagenavi Styles */
.wp-pagenavi a, .wp-pagenavi a:link {
 border: 1px solid #999 !important;
 color: #999 !important;
}
.wp-pagenavi a:visited {
 border: 1px solid #777 !important;
 color: #777 !important;
}
.wp-pagenavi a:hover {
 border: 1px solid #333 !important;
 color: #333 !important;
}
.wp-pagenavi a:active {
 border: 1px solid #000 !important;
 color: #000 !important;
}
.wp-pagenavi span.pages {
 color: #999 !important;
}
.wp-pagenavi span.current {
 border: 1px solid #000 !important;
}
.wp-pagenavi span.extend {
 color: #999 !important;
}
/* End Override Pagenavi Styles */

/* add a botton to Colophon border */
#colophon {
 border-bottom:1px solid #000;
 padding-bottom: 0px;
}

/* Reduce the width and add left padding to footer site info (name) */
#site-info {
  width: 650px;
  padding-left: 22px;
}

/* Start Adding a footer menu */
#footer #pagemenu {
 width:100%;
 margin-top:10px;
 border-top:1px solid #999;
}

#footer #pagemenu li:hover > a,
#footer #pagemenu ul ul :hover > a {
 color:#777;
 background:#fff;
}
/* End adding a footer menu */

/* Start Footer Credit */
#footer-credit
{
 width:100%;
 font-family: Arial;
 font-size: 10px;
 letter-spacing: normal;
 word-spacing: normal;
 font-style: normal;
 font-weight: normal;
 text-align: center;
 margin: 10px 0;
}

#footer-credit a,
#footer-credit a:link,
#footer-credit a:visited,
#footer-credit a:hover
{
margin: 0.5em;
text-align: center;
text-decoration: none;
color: #555;
}

#footer-credit a:hover
{
 color: #999;
}
/* End Footer Credit */
/* Lesson 10 style ends here */

There are four sections in the styles, first blocks are dealing with the ‘WP Pagenavi’, these you can style for your theme, if the page navigation plugin is upgraded you will not loose your customised styles.

Next section deal with adjusting the default theme styles, adding a border to the colophon theme element, and reducing the width of site-info and adding  some left padding.

Footer menu comes next, notice the double element style,  ‘#footer #pagemenu’ tells wordpress that the style only relates to the menu inside the footer element, so we can change the style of the on hover.

Last is the footer credit section, we have used a lighter grey color so the footer credits are not promiment, we could create a new style here for the link if we wanted, but all we have done is on hover.

Page Navigation

To add WordPress page navigation we need to install and activate the WP Pagenavi plugin, we can do this from Admin > Plugins > AddNew and search for wp-pagenavi, install and activate the plugin, there are a number of different options outside the scope of this tutorial, you should visit the plugin homepage.

In the changes folder find the file called lesson-10-loop-index.php, this is the code below and should be added to our child themes loop-index.php

Open the child theme file loop-index.php (No child theme then loop.php), look for a block of code about line 22 and consists of about nine lines of code, starting:

<?php /* Display navigation to next/previous pages when applicable */ ?>, we will be adding some conditional code, by creating a ‘if then else then endif’ block.

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
 <div id="nav-above">
  <?php /* add page navigation to indexes */ ?>
  <?php if(function_exists('wp_pagenavi') ) : ?>
   <?php wp_pagenavi(); ?>
  <?php else: ?>
   <div "nav-previous"><?php next_posts_link( __( '<span>&larr;</span> Older posts', 'twentyten' ) ); ?></div>
   <div "nav-next"><?php previous_posts_link( __( 'Newer posts <span>&rarr;</span>', 'twentyten' ) ); ?></div>
  <?php endif; ?>
 </div><!-- #nav-above -->
<?php endif; ?>

Our new lines are line 4 to line 7 and line 10, what this code does is look to see if the function wp_pagenavi is loaded, if it is it will use the numeric navigation, if not the it will use the next and previous links.

This section is repeated at the end of the loop file, so we need to repeat the code and add the changes to that section as well!

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
  <?php /* add page navigation to indexes */ ?>
  <?php if(function_exists('wp_pagenavi') ) : ?>
   <?php wp_pagenavi(); ?>
  <?php else: ?>
    <div id="nav-below">
     <div class="nav-previous"><?php next_posts_link( __( '<span>&larr;</span> Older posts', 'twentyten' ) ); ?></div>
     <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span>&rarr;</span>', 'twentyten' ) ); ?></div>
    </div><!-- #nav-below -->
  <?php endif; ?>
<?php endif; ?>

That is it, we have added numeric page navigation to our twenty ten child theme.

Footer Menu

To add our footer menu we need to create a file called footer-menu.php then edit two files, functions.php to add a new menu theme location, and footer.php to load the menu into the footer.

Create a new file in the child themes folder, name this file footer-menu.php add the code below or copy the code from the file in the final folder.

<?php /* Start add our footer menu */ ?>
   <div id="pagemenu" role="navigation">
    <?php wp_nav_menu( array( 'container_class' => 'page-header', 'menu_class' => 'page-menu', 'theme_location' => 'footer', 'depth' => 1, 'fallback_cb' => '' ) ); ?>
   </div>
<?php /* End footer page menu */ ?>

We have used the same container ‘pagemenu’ as our top menu, when we are calling the wp_nav_menu look at the array arguments ‘theme_location’ => ‘footer’, ‘depth’ => 1, these will tell WordPress that we want the menu from the theme location with the ID if ‘footer’, and the depth of 1 means only the top level menu items.

We have added new styles to this menu above so it will not look like the top menu, also we can create a new menu for the footer and just assign it to the theme location, so we can have three unique menus if we want.

Now we need to let WordPress know we have a new theme location, In the changes folder find the file called lesson-10-function.php, this is the code below and should be added to our child themes functions.php file, we are editing the call to the theme locations and adding one line the third line below:

‘footer’ => __( ‘Footer Navigation’, ‘twentyten’ ),

register_nav_menus( array(
  'secondary' => __( 'Top Navigation', 'twentyten' ),
  'footer' => __( 'Footer Navigation', 'twentyten' ),
 ) );

Footer Credit Bar

To add our footer menu we need to create a file called footer-credit.php, to load credit bar into the footer.

Create a new file in the child themes folder, name this file footer-credit.php add the code below or copy the code from the file in the final folder.

<?php /* Start add our footer credits */ ?>
<?php $shortname = 'drcms'; ?>
 <?php if(get_option($shortname .'_footer_text')) : ?>
  <div id="footer-credit">
   <?php echo stripslashes(get_option($shortname .'_footer_text')); ?>
  </div>
 <?php endif; ?>
<?php /* End footer credit */ ?>

Put it all Together

We need to add the template parts to our footer.php file, we will need to make two calls, one for the menu and one for the credits.

Now we need to let WordPress know we have a new theme location, In the changes folder find the file called lesson-10-footer.php, this is the code below and should be added to our child themes footer.php file.

We are adding the call to the menu template part after the closing div for the #site-generator, and the credit template part after the closing div for the #colophon, find the two closing divs and add the code below, or copy from the footer.php in the downloaded final folder.

Adding line 3 and line 4, line 8 and line 9

  �
</div><!-- #site-generator -->
   <?php /* Get our footer navigation bar */ ?>
   <?php get_template_part( 'footer', 'menu' ); ?>

  </div><!-- #colophon -->

  <?php /* Get our footer credit bar */ ?>
  <?php get_template_part( 'footer', 'credit' ); ?>

We have finished editing files and can now do our Admin setups, first create a new menu or assign a menu to the new template location, notice the new Footer Navigation item in the Theme Locations.

Now we need to take credit for our theme, in the Options Panel we created earlier add our text in the footer area.

That’s it lets have a look at the footer area of our child theme, with the page navigation, footer menu and credit text.

We will be doing a tidy up of our theme in the last posts, and switching off some of the features we do not need.