Aside

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

Old Posts 30 Comments »

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

Comments have been disabled for this post.
Sort: Newest | Oldest

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.

thanks for the info again

thanks for the info again

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)

Love this! Thanks for the tutorial :) Another bookmark here.
Tina

Love this! Thanks for the tutorial :) Another bookmark here.
Tina

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.

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

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

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

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.

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.

thanks for the info again

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.

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

Thank You useful information

Good tutorial. Also I use Web Development Toolbar too. Saves a lot of time.

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

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)

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?

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?

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)

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)

Love this! Thanks for the tutorial :) Another bookmark here.
Tina

Love this! Thanks for the tutorial :) Another bookmark here.
Tina

Nice tutorial. Now all I have to do is to learn how to use photoshop to make the psd. :)

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

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