WordPress

Creating a WordPress Theme (Part 6): Footer

This is the last part of the series. We’ve already seen the design creation, an introduction about the WordPress platform and the coding and styling of the entire theme except the footer.  So, in this last post, we’re going to do the footer and, to finish our blog, let’s also see some plugins. The footer is pretty simple and we’re going to add some additional styles that we’ve been using during the series.

If you want to catch up with the current status of our theme, please download it here.

Introduction

This is the sixth and last part of my WordPress theme creation series. Here is a list of all articles from the series:

Creating a WordPress Theme (Part 1): Photoshop
Creating a WordPress Theme (Part 2): Introduction
Creating a WordPress Theme (Part 3): Header
Creating a WordPress Theme (Part 4): Home Page
Creating a WordPress Theme (Part 5): Pages and Posts

Today I’m only going to finish our footer and create some additional styles. Later I’m also going to describe some plugins I use.

Footer

Currently this is how our footer looks:

Our footer before our changes

Our footer before our changes

So, in order to change this, let’s open the footer.php file.

  1. Update the package information: we’ve been using @subpackage MyTheme_Theme.
  2. Now replace all occurrences of ‘kubrick’ with ‘mytheme’.
  3. Remove the <hr> on the beginning.
  4. Let’s add a <div class=”container_12″> after our <div id=”footer”>.
  5. Inside the previous created DIV we’re going to add two DIV’s. First, let’s add the links to our blog floated left. Add the following code:
            <div class="floatleft">
                <ul>
                    <li class="page_item first_page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="<?php _e('Home', 'oscardias'); ?>"><?php _e('Home', 'oscardias'); ?></a></li>
                    <?php wp_list_pages('sort_column=post_title&title_li=');?>
    
                </ul>
            </div>
    
  6. Next, we’re going to add some info about our blog and theme floated and aligned  right. Add the following code:
            <div class="floatright alignright">
                &copy; 2010 <a href="<?php echo get_option('home'); ?>/">Oscar Dias</a>
                <br /><?php printf(__('%1$s is powered by %2$s', 'oscardias'), get_bloginfo('name'),'<a href="http://wordpress.org/">WordPress</a>'); ?>
    
                <br /><?php printf(__('%1$s and %2$s', 'oscardias'), '<a href="' . get_bloginfo('rss2_url') . '">' . __('Entries (RSS)', 'oscardias') . '</a>', '<a href="' . get_bloginfo('comments_rss2_url') . '">' . __('Comments (RSS)', 'oscardias') . '</a>'); ?>
    
            </div>
    
  7. Finish it by adding a <div class=”clear”></div> after you close the <div class=”container_12″>.

Really easy, Here is the final code:

<?php
/**
 * @package WordPress
 * @subpackage MyTheme_Theme
 */
?>

<div id="footer" role="contentinfo">
    <div class="container_12">
        <div class="floatleft">
            <ul>
                <li class="page_item first_page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="<?php _e('Home', 'oscardias'); ?>"><?php _e('Home', 'oscardias'); ?></a></li>
                <?php wp_list_pages('sort_column=post_title&title_li=');?>

            </ul>
        </div>
        <div class="floatright alignright">
            &copy; 2010 <a href="<?php echo get_option('home'); ?>/">Oscar Dias</a>
            <br /><?php printf(__('%1$s is powered by %2$s', 'oscardias'), get_bloginfo('name'),'<a href="http://wordpress.org/">WordPress</a>'); ?>

            <br /><?php printf(__('%1$s and %2$s', 'oscardias'), '<a href="' . get_bloginfo('rss2_url') . '">' . __('Entries (RSS)', 'oscardias') . '</a>', '<a href="' . get_bloginfo('comments_rss2_url') . '">' . __('Comments (RSS)', 'oscardias') . '</a>'); ?>

        </div>
    </div>
    <div class="clear"></div>
</div>
		<?php wp_footer(); ?>
</body>
</html>

This is the result:

Footer without the necessary styles

Footer without the necessary styles

We still need to create our last styles.

Styles

Let’s open our styles.css file.

  1. First of all, download this image. We’re going to use it as our background image.
  2. Now let’s style the footer DIV.
    #footer {
        background: #fff url('images/footer.jpg') repeat-x top;
        margin: 0 auto;
        padding-top:100px;
        padding-bottom:20px;
    }
    
  3. Let’s continue and create the styles for the footer lists (UL and LI).
    #footer ul {
        list-style: none;
        margin:0;
        padding:0;
    }
    #footer ul li {
        float:left;
        margin:5px 0 5px 5px;
        padding-right:5px;
        border-right: 1px solid #000;
    }
    
  4. We’re almost there. But we still need to create the styles to align everything. So let’s create different align classes.
    .floatleft {
        float:left;
        margin-left: 10px;
    }
    .floatright {
        float:right;
        margin-right: 10px;
    }
    .alignleft {
        text-align: left;
    }
    .alignright {
        text-align: right;
    }
    .center {
        text-align: center;
    }
    
  5. Now let’s add some additional classes. We’re going to style the shadows and the images.
    .box-shadow {
        box-shadow: 3px 3px 3px #000;
        -moz-box-shadow: 3px 3px 3px #000; /* for Firefox 3.5+ */
        -webkit-box-shadow: 3px 3px 3px #000; /* for Safari and Chrome */
    }
    .text-shadow {
        text-shadow: #000 2px 2px 2px;
    }
    img.aligncenter, img.center {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .frame {
        padding:5px;
        background: #d2d2d2;
        border: 2px solid #808080;
    }

And that’s it. We’ve finished the development of our theme. I didn’t covered all files, but the remaining ones should follow the same ideas we’ve been using during these series.

Now let me show what plugins I’m using.

Plugins

Here is a quick list about the plugins I’m using with the explanation.

AddToAny: Share/Bookmark/Email Button

Plugin for sharing/bookmarking. Really useful and complete. It only takes one button to enable your readers to share over lot’s of different social medias.

Akismet

This one comes with the default installation of WordPress. It will filter comments made in your website and check whether their spam or not automatically. This way you don’t need to check each and every comment made in your blog.

All in One SEO Pack

Another great plugin that improves your blogs SEO capabilities.

FD Feedburner Plugin

If you use Feedburner, this one is mandatory. It will redirect all feeds to your Feedburner feed.

Google Analytics for WordPress

Also, if you use Google Analytics, this plugin will add analytics code automatically for you.

Google XML Sitemaps

This plugin will generate sitemaps automatically for your website. Sitemaps are used by search engines to index your blog, so it’s quite important.

RatenTweet

This one adds another way to share your posts in Twitter using a quick rating system.

SyntaxHighlighter Evolved

Plugin for syntax highlighting. It will take your code entries and make them look pretty.

TweetMeme Retweet Button

Another Twitter sharing service. It’s used all over the web.

Conclusion

So we’ve came to the end of our series about WordPress themes. I’ll write about WordPress again, but not in this series. If you have any comments or if you want to see something specific here, leave your message and I’ll answer as soon as possible 😉

Download the last version of our theme here (82 Kb).



  • Keep up the excellent piece of work, I read few posts on this internet site and I think that your site is real interesting and contains sets of fantastic info 😀

  • Very Good. Thank you!

  • Hi, just wanted to tell you, I loved this blog post. It was practical. Keep on posting!||