How do I pass a variable to an action hook function?

1 Views

I have a function that will initialize an image slider in my WordPress theme, however I can’t get the PHP variables to be passed into it. Here is the code: 

function slideshowSettings ($pause_time) {
$code = "<script>
jQuery(function(){
    jQuery('#camera_wrap_3').camera({
        height: '40%',
        thumbnails: true,
        time: ".$pause_time.",
        fx: '".$transition_effect."',
        transPeriod: ".$transition_speed.",
        autoAdvance: ".$auto_advance.",
        minHeight: '50px',
        mobileNavHover: false,
        imagePath: '".get_template_directory_uri()."/images/'
    });
});
</script>";

echo $code;
}
add_action('wp_head', 'slideshowSettings');

The variables are assigned above the function but the output I get from the function looks like this:

Read More
<script>
jQuery(function(){

    jQuery('#camera_wrap_3').camera({
        height: '40%',
        thumbnails: true,
        time: ,
        fx: '',
        transPeriod: ,
        autoAdvance: ,
        minHeight: '50px',
        mobileNavHover: false,
        imagePath: 'http://www.brainbuzzmedia.com/themes/simplybusiness/wp-content/themes/simplybusiness/images/'
    });
});
</script>

How can I pass those variables?

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. You can’t add arguments to the wp_head because none are passed to your hooked function when do_action('wp_head'); is called by the wp_head() function. The arguments for add_action() are

    1. The action to hook to, in your case “wp_head”
    2. The function you want to execute, in your case “slideshowSettings”
    3. The priority of execution, the default is 10
    4. The number of arguments your function accepts (these have to be passed by do_action however)

    If you need to be able to pass these values in outside of your hooked function to wp_head, I would use apply_filters to modify a value:

    function slideshowSettings(){
    // set up defaults
    $settings = array('pause_time'=>10, 'other'=>999);
    $random_text = "foo";

    // apply filters
    $settings = apply_filters('slideshow_settings', $settings, $random_text);

    // set array key/values to variables
    extract( $settings );

    // will echo 1000 because value was updated by filter
    echo $pause_time;

    // will echo "foobar" because key was added/updated by filter
    echo $random_text; 

    // ... more code
}
add_action( 'wp_head', 'slideshowSettings' );

function customSettings($settings, $random_text){
    // get your custom settings and update array
    $settings['pause_time'] = 1000;
    $settings['random_text'] = $random_text . "bar";
    return $settings;
}
// add function to filter, priority 10, 2 arguments ($settings array, $random_text string)
add_filter( 'slideshow_settings', 'customSettings', 10, 2 );

  2. The correct way of passing PHP variables to Javascript is using wp_localize_script.

    Check this article by Otto. And this Q&A at WordPress StackExghange.

    In your Question you don’t show where those variables are coming from, hence they are printing… nothing.

    I just made a test. This creates the options values in the database.

    add_action( 'init', 'so_13282503_init' );

function so_13282503_init() 
{
    if( !get_option('pause_time') )
    {
        update_option('pause_time', '50');
        update_option('transition_effect', 'elastic.easeIn');
        update_option('transition_speed', '400');
        update_option('auto_advance', '4');
    }
}

    And this, an adapted version of your code:

    add_action( 'wp_head', 'slideshowSettings' );

function slideshowSettings () 
{
    $pause_time = get_option('pause_time');
    $transition_effect = get_option('transition_effect');
    $transition_speed = get_option('transition_speed');
    $auto_advance = get_option('auto_advance');
    $code = "<script>
    jQuery(function(){
        jQuery('#camera_wrap_3').camera({
           height: '40%',
            thumbnails: true,
            time: ".$pause_time.",
            fx: '".$transition_effect."',
            transPeriod: ".$transition_speed.",
            autoAdvance: ".$auto_advance.",
            minHeight: '50px',
            mobileNavHover: false
        });
    });
</script>
";

    echo $code;
}

    Which results in this being printed in the <head> of the site:

    result of code in the rendered html

  3. You can pass the number of arguments after the priority argument in add_action()

     <?php add_action( $tag, $function_to_add, $priority, $accepted_args ); ?>

    The wordpress codex has some examples about it.

    You should note that your function is taking only on argument actually, and you’re using undefined variables like $transition_effect, $transition_speed and $auto_advance in that function.