Creating The Footer Section Of The Theme

NOTE: Click on the icon immediately above to download all the resources used in this lesson.

We decided that the footer section of index.php will consist of a copyright notice and footer navigation to help search engines.

Once you understood how this is done, you can display anything else you wish in the a theme's footer section.

We are starting with creating the footer navigation DIV.

The contents displayed within divFooterNav are exactly the same as divTopMenu.

When a search engine spiders crawl through the page it will find appropriate information to navigate to other web pages right at the bottom where it currently would be.

This approach also helps visitors navigate to other pages when they have reached the end of the current page, with ease.

Open index.php. Locate divFooterNav and add the following code snippet within.

 
<!-- divFooterNav statrs -->
<div id="divFooterNav">
  <?php wp_list_pages('title_li='); ?>
</div><!-- divFooterNav ends -->
 

Open style.css and add the following code snippet to style the contents of divFooterNav.

 
#divFooterNav
{
  height:30px;
  text-align:center;
  padding-top:10px;
}
 
#divFooterNav li
{
  display:inline;
}
 
#divFooterNav a
{
  text-decoration:none;
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:14px;
  color:#FFFFFF;
  padding:10px;
}
 

Diagram 1

Since the footer navigation section is done let’s proceed to setup the copyright section within divFooterNav.

To add the copyright message add the following code snippet to divFooter.

 
&copy; <?php date('Y') ?> {Enter your name here} all rights reserved. 
 
Crafted by {Enter your name here}
 

NOTE: Do not forget the divFooterNav is held within divFooter.

Now the code within divFooter will look as shown in the diagram 2.

Diagram 2

The CSS codespec to style the contents of divFooter is as follows:

 
#divFooter
{
  float:left;
  width:100%;
  height:auto;
 
  background-color:#471E08;
  text-align:center;
  padding-top:5px;
  padding-bottom:5px;
  color:#FFFFFF;
}
 

When index.php is run the theme will look as shown in diagram 3

Diagram 3

This completes the step by step creation and in parallel testing of the theme.

What remains to be done is to appropriately process the various files and folders within the floder mytemplate so that Wordpress will recognize this as a legitimate, well formed theme that can be uploaded via the Wordpress admin section into the Wordpress installaion and then set as the default theme.

Do the following to achieve this.

1. Go to the mytemplate folder.
2. Ensure that this folder contains only the following resources:
   1. index.php
   2. snapshot.png
   3. style.css
   4. An images folder which contains all the image files used by the theme

NOTE: If other files or folders exist, check their relevance and delete them.

1. Zip the folder. You will receive a zipped folder named mytemplate.zip.

NOTE: Use Winzip only which will produce <filename.zip> as the output. Wordpress does not recognize other compressed file formats such as <filename.rar>.

1. Login to the Wordpress admin section ( i.e. wp-admin )
2. Click on Appearance.
3. Click on Add New Themes.
4. Click on Upload.
5. Navigate to where the file mytemplate.zip is and then click Install Now.

After a very short time:

1. You will receive a message saying that the theme installed successfully.

NOTE: Wordpress does check <filename.zip uploaded when it is decompressed and installed. If for any reason the template is broken, Wordpress will not display snapshot.png and will display a Broken Theme error message.

Navigate to Themes in wp-admin.

You will find the theme displayed there along with the screenshot, beneath there will be three links, one of which is Activate, click the link Activate to make this theme the active theme of the BLOG.

You have successfully created your own Wordpress theme and are using it as the current active theme for your Wordpress site.

• < Prev