Creating a WordPress Theme from a .PSD file – Part 5 (footer.php)

Posted in these categories: Old Posts

This post is part of the “Creating a WordPress Theme from a .PSD” series for designers to use for theme development. The other posts can be found here:

We’ve taken a look at one of the key files in the WordPress universe, the header, which kicks off everything else in a WordPress theme (including CSS, RSS, and all the other meta goodness). Now, going from beginning to end, we’ll explore the footer of a standard WordPress Theme. To be honest, a footer really only needs to have three elements:

  1. the <?php wp_footer(); ?>
  2. a </body> tag
  3. an </html> tag

The first of those, the php function, serves the same purpose that <?php wp_header(); ?> does in the header – it serves as a hook for plugins and other WordPress functions that need to prophigate themselves in the footer. Think of it this way: if you were to install the Google Analytics plugin, how do you think it knows where to put the Analytic code? Answer: that php tag.

However, aside from those three lines, you can put anything else you want to show up under the sidebar and content. A lot of people add a second navigation to their footer (sometimes including other less-important site pages such as the privacy policy and legal information). The theme designer’s tagline/information can be found there too. And why not show your love to WordPress by including a statement saying that you are “Proudly Powered by WordPress”.

Widgets go great in a “footer-bar”. A great way to display them is to have three columns floated next to each other with widgetized data in them (a la Blogging Sueblimely and Lorelle). This looks very clean and provides a quick way to showcase a lot of information in relatively short space.

Of course, there are fun footers too.  It’s your theme – do what you want with it!

1

3

2

  • Thanks for the tips there. Great stuff. I needed a way to convert all my PSD themes to get them on WP. Oh and regarding CSS Firebug is n awesome tool as well. You can view CSS on Firefox it self.
  • This article looks like nice, thanks a lot
  • FOR EDUCATIONAL PURPOSES (as in, don't steal CSS), use the Web Dev Toolbar for Firefox. View CSS, HTML, classes, everything - it's super handy.
  • Awesome. I was looking for an article like this. I wonder why I didn’t come across this earlier. Anyway, could anyone suggest me how to view a css file on a certain page?? It would be really helpful for me. Thanks in advance. Cheers
  • thanks for the info again
  • Thanks for the useful information. I'm still developing my site and needed few tips with the themes to get it the way I needed it. Because personally I would like my own theme rather than having a theme done by someone else and including it in my page. Thanks for the help. Oh and yes, Dreamweaver is n awesome tool. Looking forward to some great posts in the future.
  • Thank You useful information
  • Good tutorial. Also I use Web Development Toolbar too. Saves a lot of time.
  • I agree, dreamweaver is my first choice.

    Been reading through all the posts and I have to say they are extremely useful.

    Eoin
  • Well, for starters, I recommend *not* using FrontPage - it inserts a lot of unnecessary code that makes your pages bloated, which causes slower load times. I'd stick with DreamWeaver, Aptana Studio (freeware), or one of the other many freeware HTML/CSS editors out there.

    That being said, yes, and no. The visual aspect of FP/DW lets you edit files in a WYSIWIG environment. BUT, WordPress has an inline editor that will allow you to make changes server-side. Typically I use WordPress to edit the HTML, and live edit the CSS using the Web Development Toolbar for FireFox, something I'm talking about in my post today (01/13/2009)
  • Frontpage Templates
    Will I still need my FrontPage software to edit my theme once it is converted from .PSD or will I be able to edit it directly from WordPress?
  • Love this! Thanks for the tutorial :) Another bookmark here.
    Tina
  • thanks for this post
  • Nice tutorial. Now all I have to do is to learn how to use photoshop to make the psd. :)
  • Hey, thanks for the awesome tutorials. I bookmarked this post because more people need to know this stuff.

    Keep up the quality posting.

    Thanks,
    Philip
blog comments powered by Disqus