Can someone please tell me what is wrong with my plugin?

1 Views

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

Read More

http://wordpress.org/extend/plugins/toggle-box/.

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 

<?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) {
    extract(shortcode_atts(array(
        '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');
?>

/toggle-box.css 

/*************************** 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 {
clear:both;
margin: 0 0 10px 0;
overflow: hidden;
}
h3.toggle {
background-image: url(images/sprite.png);
}

/toggle-box.js 

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

jQuery(document).ready(function(){
jQuery(".toggle-box").hide(); 

jQuery(".toggle").toggle(function(){
    jQuery(this).addClass("toggle-active");
    }, function () {
    jQuery(this).removeClass("toggle-active");
});

jQuery(".toggle").click(function(){
    jQuery(this).next(".toggle-box").slideToggle();
});
});

/images/sprite.png

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.

Post Views: 1

Related posts

Leave a Reply

1 comment

  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.