Where Exactly Should You Place wp_footer()?

The wp_footer() function is often used by plugins to insert PHP codes after everything else on your page. According to WordPress.org theme development documentation, you should place the wp_footer() function in the footer, which would be in the footer.php file.

One detail that WordPress.org doesn’t mention is that most plugins (i.e: Spam Karma 2, PodPress, and FireStats), using the wp_footer() function, tend to break your theme. A well-designed and well-built theme is nothing without a safely placed wp_footer() function.

Here’s my advice. Don’t place the wp_footer() function right before the end; that’s usually the closing body tag. Instead, place that function within a DIV or container. For example:

<div id=”container”>

Posts

Sidebar

<?php wp_footer(); ?></div>

If you do that, no matter what a certain plugin does to the footer of your theme, it doesn’t expand beyond the container or DIV containing the wp_footer() function. You can open up the footer.php file of the Greed theme for an example.

Update:
Place the wp_footer() function within a style-less container (usually the outermost div with no backgrounds and images) that your layout doesn’t depend on. Otherwise, you might end up with an incomplete layout while waiting for a slow loading plugin.

Thanks to Adam Freetly for the tip.

What's Next?
Related Posts

props.

the problem with putting it inside #container is that if there’s a particularly heavy javascript inserted, your layout can bork waiting for it to load.

my favorite solution (which i’ve failed to implement in my current theme) is to close #container (or whatever the main div is), open a seperate #footer, and place wp_footer(); inside that.

I never thought about testing that before.

Whether wp_footer() sits inside a content-filled div will have a different effect on the layout as it loads?

I assumed it didn’t matter how you place the wp_footer as long as you place it at the end, within a div.

it doesn’t matter for content as much as for background images. fr’instance, on your site, if #content doesn’t complete (if something wp_footer(); causes it to hang), then the div doesn’t wrap around your content, and the background image doesn’t show up, so you wind up with blue gutters instead of your background image. in some themes, it’s worse (if they haven’t defined a color behind .post), and the text is unreadable.

I see what you’re saying and I’ve updated the post to be more specific.

Because I tend to use a styles-less (except for auto margins and width) container to wrap everything within one big column, I assumed that’s true for most themes as well.

That’s why I said to place wp_footer before the last (closing) div.

[…] Para que o plugin funcione corretamente, é necessário que o seu tema tenha uma chamada para função wp_footer(). Se você não sabe como incluir a chamada, veja aqui. […]

I dont know where my wp_footer() is.
So I just comment it. No difference in display though..

Tor:

Could someone illustrate what is described in the “update”? I’m new to web design, but have had this theme breaking problem in IE and noticed that my wp_footer is placed in the “danger zone”.

Thanks!

thank you for the information!

[…] Where Exactly Should You Place wp_footer()? […]

hey great post man! this is the second time i’ve used ur tuts to get the job done fast and seriously right on the money. thanks for the help… again. lol.

http://littleboxofindie.com

Reply
Comment Policy
  • Theme support questions should be posted at the support forums.
  • Name and Email are required. Email is never published.
  • You grant this site perpetual license to reproduce your words and name/website in attribution.
  • Inappropriate comments will be removed at my discretion.
Close
Powered by ShareThis