Martiniboy's Developer Blog

WordPress wp_head and wp_footer functions and plugins

Written On 15 Aug, 2012 by admin

jamie social icons pluginRecently since I updated my plugin Jamie social Icons I have had a few complaints that my plugin stopped working, the main reason for the update was because I had inline scripts which, you probably know cause a delay in page downloads, especially as my plugins needs to make a call to the external sites of Facebook, Twitter, LinkedIn, Pinterest and Google plus which if they are having any issues will cause your page to be slow at loading, so I decided to move all the external scripts to the footer.

By placing JavaScript in the footer it loads after all the rest of the DOM tree has been built. if you have inline JavaScript the DOM parser has to stop and process the JavaScript to see if it writes any more HTML code to the screen.

When people first started to comment that the plugin had broken afer the update I was a little confused because I build multiple WordPress sites and al of them which i have included my plugin on all worked after the update, from looking at the source code I could see that no scripts were being pulled into the footer, so instantly Knew there was as issue with my add_action(‘wp_footer’,… function, after trailing the internet I could only find similar cases of themes not having the wp_footer call in their footer.php’s, and some even with out the wp_head in the header.php.

When I first started developing themes, using the Kubrick theme as a basis I would always see the wp-head and wp_footer in the relating places but never really understood what they were for, only that I always need to add them.  With a mixture of my themes developing, the designer getting more adventurous and browsers capabilities developing and keeping sites looking the same in older browsers  the use of jQuery became a big part in my development. Resulting a huge headache as scripts stopped working once adding into WordPress, which I found out was scripts n conflict with each other was when I forst learnt what the wp_head and wp_footer were really for.  The WordPress Codex states that “Although this is theme-dependent, it is one of the most essential theme hooks, so it is fairly widely supported. ”  So 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”. In simple terms action hooks are placeholders where code is dynamically added to a theme.  

When these issues started to appear in the support forum and emails started to come in, I was starting to wonder whether I was using the function incorrectly, which I have still not ruled out as i am always on a learning curve but due to me not being able to replicate the error, without removing the wp_footer action, even to the extent of testing on different servers, I can only conclude that is the issue – although on one theme I had an issue becasue I somehow managed to miss out the starting body tag (luckily it was still in development).

Most modern themes will always include the two action hooks wp_head and wp_footer, but sometimes when themes are adapted to suit the users needs some tags are accidentally deleted/removed which may go unnoticed until that function is needed, I would suggest if you are going to amend a pre made theme (which is working properly) create a child theme and amend the files in that rather than the working theme so if you ever a mistake is made you still have a working copy, i will write a more detailed blog post of creating child themes later.

If ever you have an issue with a plugin or theme developemnt there are a couple of steps which may come in handy to check first, you have probably guessed the first step:

  • Check the header.php that it includes the tag, normally within and near to the closingtag and just incase you were sleeping like me while building a theme just check that there is an openingtag after the closingtag 🙂
  • Check the footer.php that it includes the tag, I would recommend directly before the closing tag.
  • Check your site with the W3C validation service, ok because sites are not always built within strict rules of the W3C (Before you roundup the henchmen)  because of modern technologies ie.HTML5, CSS3 – these will not always validate in a regular W3c validator but you can see if/where the site is erroring, this is a useful tool, especially if you have missed a closing div.
  • Ask the plugin developer for help, mistakes are made, when I first released my Jamie Social Icons plugin because I was working in test while developing it, my call to the stylesheet was wrongly pathed when I added it to the repository so I had an update within the first 12 hours of launch.  Most developers create plugins out of enjoyment of learning new skills and sharing what they have learnt so are always happy to help, and cannot always test the plugins in all scenarios.

So when you are next working on your website have a quick look in your theme files and see if you have the wp_head in the header.php and the wp_footer in the footer.php, if you don’t try adding them, this could well future proof your site to be able to use plugins which you could bnever get to work before.  But be careful changing your theme files always make a backup first.  Some times if you add these action hooks you may experience that your site does not behave the way that you are used too, it is possible that this could introduce plugin/theme conflicts if scripts have not been called before, if this is the case ask your theme developer they may be able to give you help or advice of to sort it, rather than installing that plugin further down the track and not be able to use it.

  • Hi Chris
    Is there still an issue with your facebook like button?? When I went to your site in Firefox 24 I could see the Facebook like (well Me gusta) button, Let me know if you can see it please