Two days back a made a plugin that allows me to insert toggle box in to the post with the shortcode [toggle Title="My title"]toggle test[/toggle]

I also posted my plugin on WordPress.org plugins


The Problem

I made the whole plugin on sand box that I have made on my local machine using XAMPP then after a while I installed the plugin on an other WordPress blog where it was installed OK CSS and JS were loading in to the page but toggle was not working !!!! (the style and JS were appearing in the head and the heading was also appearing but it was not toggling when I clicked it.) then I tried to use the plugins on some other blogs but encountered the same problem. then I set up another WordPress sandbox on my machine and used the plugin there and it was not working there so I realized there is some thing wrong with my code which I was unable to find.

So can some one please identify and provide the solution for the problem thanks

Code of my plugin

/toggle box.php

 * Plugin Name: Toggle box
 * Plugin URI: http://wordpress.org/extend/plugins/toggle-box/
 * Description: This is an awesome custom plugin which adds toggle box funtionality in to your theme themes.
 * Author: phantom.omaga
 * Author URI: http://profiles.wordpress.org/users/phantom.omaga/
 * Version: 0.1.0

//*************************** Toggle Boxes Short Code ***************************//

function togglebox($atts, $content = null) {
        'title'      => '',
    ), $atts));

    $out .= '<h3 class="toggle"><strong><a href="#">' .$title. '</a></strong></h3>';
    $out .= '<div class="toggle-box" style="display: none;"><p>';
    $out .= do_shortcode($content);
    $out .= '</p></div>';

   return $out;

add_shortcode('toggle', 'togglebox');

//*************************** Get Plugin URL  ***************************//

function get_pluginurl() {
// WP < 2.6
if ( !function_exists('plugins_url') )
    return get_option('siteurl') . '/wp-content/plugins/' . plugin_basename(dirname(__FILE__));
    return plugins_url(plugin_basename(dirname(__FILE__)));
//*************************** Calls Toggle Box css and js***************************//

function add_togglebox () {
    <link type="text/css" href="<?php echo plugins_url('toggle-box'); ?>/toggle-box.css" rel="stylesheet" />
    <script type="text/javascript" src="<?php echo plugins_url('toggle-box'); ?>/toggle-box.js"></script>

<?php }
add_action('wp_head', 'add_togglebox');


/*************************** Shortcodes: Toggle Box ***************************/

h3.toggle {
background-repeat: no-repeat;
background-position: -27px -23px;
font-size: 16px;
padding: 0 0 20px 23px;
cursor: pointer;
h3.toggle a {
text-decoration: none;
display: block;
h3.toggle-active {
background-position: -6px -50px;
.toggle-box {
margin: 0 0 10px 0;
overflow: hidden;
h3.toggle {
background-image: url(images/sprite.png);


/*************************** Toggle Content ***************************/


    }, function () {



While using firebug I found that the problem is with my jQuery

jQuery is not defined

[Break On This Error] jQuery(document).ready(function(){

and I have defined it OK I think so can some one tell me what I should do to make it right.

  • Just FYI when it says jQuery is not defined it means that the jquery.js file is not included on the page, hence the function 'jQuery' is undefined. Doesn't matter if your javascript syntax is right or not. Nov 1, 2011 at 16:29
  • oohh!! i got it as sanchothefat also identified that the problem was with the way i included the css and js files in the plugin. Nov 1, 2011 at 16:56

1 Answer 1


You need to redo the way you include the Javascript and CSS, or at least just the javascript.

WordPress has a way to register scripts and styles and declare their dependencies, in your case it probably isn't working because jQuery is not loaded.

To include javascript do this within the init hook:

add_action( 'init', 'toggle_box_init' );
function toggle_box_init() {
    if ( ! is_admin() ) {
        wp_enqueue_script( 'toggle-box', plugins_url( 'toggle-box' ) . '/toggle-box.js', array( 'jquery' ) );

The wp_enqueue_script() function takes a few arguments, the first 3 are the most important.

  1. The first argument is the handle which is essentially an ID for the script within WordPress.
  2. The second argument is the src eg. the URL of the script.
  3. The third argument is an array of dependencies. The dependencies array should contain the handles of all the scripts your own script relies on, in this case we're using 'jquery' which is packaged with WordPress.

You can include your CSS using wp_enqueue_script() in the same way. I suggest reading the codex page to getter a better understanding and more examples of what you can do with it.

The reason to includes your scripts and styles this way is so that multiple plugins that rely on jquery aren't all loading their own copy of it.

  • hmmm ok i will try and see if it works and thanks!! Nov 1, 2011 at 11:58
  • it worked !!!! thanks can you also tell me how to include style they way you did jQuery here please. Nov 1, 2011 at 12:04
  • The codex page is here codex.wordpress.org/Function_Reference/wp_enqueue_style - the first 3 arguments are the same so you call wp_enqueue_style( $handle, $src, $dependencies ) in the same place as the enqueue script function. Nov 1, 2011 at 13:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.