WordPress wp_head & wp_footer functions
Jan 25, 2011 | 18 Comments »
Two key things to add to a WordPress theme are the wp_head and wp_footer functions. These two functions are known as “action hooks”. Depending on how much you know about theme development, action hooks may be easy or difficult to understand. Action hooks are placeholders where code is dynamically added to a theme.
What this means is that the wp_head and wp_footer functions act as placeholders for plugins to insert code to the <head> and <footer> of the theme respectively. For example, if you have a Google Analytics plugin installed on your WordPress website, the plugin uses wp_head to add some javascript to the <head> of your website in order for Google Analytics to track visits. Without this code the plugin would not be able to add the code to your theme.
How to add wp_head to a WordPress theme
To add the wp_head function correctly to your WordPress theme, simply open your theme’s header.php file and add the following line of PHP code right before the closing head tag (</head>):
<?php wp_head(); ?>
How to add wp_footer to a WordPress theme
To correctly add the wp_footer function to your WordPress theme, open the theme’s footer.php file and add the following line of PHP code at the very bottom of the page:
<?php wp_footer(); ?>
Broken Plugins
You may find that a WordPress plugin isn’t working on your website. Maybe the plugin worked at one point, but then you updated either the plugin or WordPress and it stopped working. Maybe the plugin never worked at all. If you do find that you are having trouble with a plugin, your first step should be to make sure that you have wp_head and wp_footer correctly placed in your template.
Conclusion
Action hooks like wp_head and wp_footer are essential to how plugins interact with your WordPress theme. In the past these funtions were not always needed, so if you have a theme that hasn’t been updated in a while, it would be a good idea to add these action hooks to protect your theme from some future problems.
Related posts:
Wait; just making sure I understand this. Those PHP files are already part of the software, so adding this code just makes them more accessible to certain plugins? If that’s the case how wild is that? Why aren’t they automatically there for all themes?
[Reply]
Keith's reply on January 27th, 2011:
Hi Mitch,
These two functions should be already included in new themes. The problem comes when a custom theme is created or an older theme is being used. “wp_head” and “wp_footer” are being used much more nowadays and some themes may need to be updated.
The reason why I wrote this post is because I was having a problem with a plugin using an older WordPress theme. The plugin worked before, but stopped working after it was updated. 5 hours and tons of debugging later, I realized it was just because the theme didn’t have a wp_footer.
[Reply]
Well, I know all the blogs I write or manage have the footer, but not all of them have wp_head, though all have wp_header. I assume these are different things?
[Reply]
Keith's reply on January 27th, 2011:
I’m not quite sure what wp_header is. I did some googleing and not much came up. It may be another function that does that same thing as wp_head. Do you mean get_header(); ?
[Reply]
Actually, I mean header.php. lol
[Reply]
Keith's reply on January 27th, 2011:
Ah, ok. That imports the header.php file into the index.php file. If you open header.php (in the same folder as index.php) you should see < ? wp_head(); ?>
[Reply]
Thank you for the post. It has helped me tremendously. I just couldn’t figure out why plugins didn’t work on my page.
[Reply]
Keith's reply on February 4th, 2011:
Glad I could help!
[Reply]
“your first step should be to make sure that you have wp_head and wp_footer correctly placed in your template.”
well how do I know that?
[Reply]
Keith's reply on February 14th, 2011:
Hi Charles,
You can find the wp_head and wp_footer in the header.php and footer.php template files respectively.
You can find those files by going to your WordPress template directory via FTP on your sever. The files are located in wp-content/themes/your-theme/
Hope this helps!
[Reply]
I was having a similar problem. In my case ,I kept getting this empty space on top .
kept creating an empty space.
I figured out after reading your post that I had forgotten to put in
Its all good now .
That fixed the problem.
[Reply]
Keith's reply on April 7th, 2011:
Thanks Anup! Glad I could help.
[Reply]
Lol . I guess the blog doesn’t display php code at all.
anyways wp_head() kept giving me a problem.
turns out i had to add wp_footer to the end or it would display all wrong even when not logged in .
[Reply]
?php wp_head();? Is causing a space at the top of my blog. Is there a way to remove the space?
[Reply]
Keith's reply on April 11th, 2011:
Hi Stan,
Do you mean that wp_head is adding a space to your website when you view it in a browser? This probably means that a plugin that you are using is adding code that is causing an issue. Try deactivating each plugin one by one and see if any of them are causing the issue.
Also, make sure that you have the hp_head hook before you close the tag.
[Reply]
I added before in the header.php. This fixed the issues I have having with widgets not showing up correctly; however, it caused other problems with the site. The main image was replaced by a never-ending ‘loading’ wheel. Any tips on how I can add action hooks to enable plug-ins and not mess up the rest of the site?
[Reply]
When I added before , I was having problems with other features of the site working. I added before instead of before and it worked.
[Reply]
Keith's reply on January 18th, 2012:
John,
Glad it worked out for you and thanks for updating!
[Reply]