How do I fix a wordpress custom theme to work with plugins?

Question

This is my first attempt at coding a custom wordpress theme and I'm almost there. There are a few bugs as there are with anything, but I've tried a few different options at fixing them but with no success.

The link is www.studiosimplicit.com/wp.

My first issue is with nivo slider on the events page (Www.studiosimplicit.com/wp/events). Initially I was having an issue with the plugin itself, where the images were being stacked on top of each other. To correct this I manually put in code to call in the nivo .js files, and that seemed to fix that issue. But now the loading image is there but the images don't load.

I've checked the URL of the images and that's not the issue. I also enabled the "post-thumbnails" feature (as suggested on the nivoslider website as a common fix to my issue) but that doesn't appear to have fixed it. It's worth nothing that when I switch to a default theme, the slider works fine. It's when I activate my custom theme that it breaks.

My second issue is with a plugin that is supposed to set a full screen background image, automatically resized to fit browser width. Again, the plugin works when I switch to a default theme but it breaks when I switch to my custom theme.

Please help!

Matt Gibson Matt Gibson · Accepted Answer · 2012-03-11T18:00:32

By the sounds of it, your custom theme is missing the common hooks that allow plugins to alter/output their code.

To take a simple example, every theme should have a call to wp_head() somewhere in the <head> section of the output page. This allows a plugin to "hook" into your <head>, and for example, output code to load its Javascript.

Here's a real-life example. The WordPress Twentyeleven theme has this in its header.php file (traditionally the part of a theme that outputs the <head> section of any page):

... other <head> stuff
    wp_head();
?>  
</head>

The WP Nivo Slider uses this code when it calls wp_enqueue_script, for example, in its wp-nivo-slider.php file. Behind the scenes, wp_enqueue_script uses the wp_head() hook in the Twentyeleven theme to output the requested Javascript include in the <head> section (via a slightly circuitous route that ends up in wp_print_head_scripts by default.)

So, basically, if a plugin works with a provided theme, but doesn't work with your custom theme, your task is to find the hooks that are missing from your theme that the plugin is trying to use.

If you check the WordPress Theme Development documentation you'll find a list of hooks that themes should include under the section "Plugin API hooks". These are, specifically:

wp_head
wp_footer
wp_meta
comment_form

The important ones for most plugins will be wp_head and wp_footer. This is where most Javascript gets included, either in the head or the footer section (just before the closing <body> tag.)

Most plugins like Javascript sliders, image galleries, etc., will simply add a new script or two in the <head> or footer section of the website, and perhaps include CSS files to style their content, again in the <head> section, so those two are generally the only hooks they need.

So, my initial advice would be to make sure your custom theme includes a call to wp_head() at the end of its <head> section (copy the code from that working theme you've got) and also a call to wp_footer(), just before the closing </body> tag. The chances are good that that'll get most Javascript-based plugins working.

How do I fix a wordpress custom theme to work with plugins?

3 Answers