Global Variable in Functions.php Then Use in Javascript (WordPress)

Question

I'm sorry if this is the wrong place. Actually this has been asked before by another user (although it was not the same question) and it was said that this is a PHP question. Unfortunately I am not good enough in PHP to implement the answer.

Here is the [previous question]:https://wordpress.stackexchange.com/questions/82503/cant-get-options-with-datavariable

I am facing the same problem. In my options, I have a slider's option (animation - fade or slide) and then I want to use the value stored in the option and pass it into Javascript in my function.php.

In the option file I have these codes:

// Slider animation options
        $of_options_slider_animation = array(
            "fade" => __("Fade", "themename"),
            "slide" => __("Slide", "themename")
        );

and

$of_options[] = array(  "name" => __("Slider Animation", "themename"),
                        "desc" => __("Select the type of animation for the slider.", "themename"),
                        "id" => "slider_animation",
                        "std" => "fade",
                        "type" => "radio",
                        "options" => $of_options_slider_animation

Later I would pass the option into a js block of code in functions.php like so:

jQuery('.flexslider').flexslider({
                    controlNav: true,
                    directionNav: true,  
                    prevText: 'Previous',     
                    nextText: 'Next',
                    **animation: "<?php echo $smof_data['slider_animation']; ?>",**
                    animationLoop: false
                    // animation: "slide"
                  });

(please notice the bold-ed part)

However, as you may predict, it doesn't work.

I've tried defining the $smof_data like in the previous question (see link above) but still no luck. Here is what I do:

// Fetch options data
global $smof_data;
$smof_data = of_get_options("slider_animation");

Please help, thanks in advance :)

EDIT:

SMOF link: https://github.com/sy4mil/Options-Framework

I am using a blank / starter theme by underscores.me

But how is this Javascript being embedded? Is it an external .js or being printed inline by PHP?. — brasofilo
– brasofilo, Commented Apr 10, 2013 at 23:22
Hmm.. to be honest I am not an expert so I don't know the right answer.. But it is FlexSlider script (WooTheme's) and as you know we need to put "jQuery(document).ready(function($)" before using the script. So I am hooking the .ready part into the footer in functions.php. The rest of the script / plugin are in other files. — Mario88
– Mario88, Commented Apr 10, 2013 at 23:29

Mario88 · Accepted Answer · 2013-04-10 23:34:00Z

Solved it :D I use the variable directly within the Javascript scope. Here is the code (just in case)

function mytheme_flexslider() {

    if (!is_admin()) {

        // Enqueue FlexSlider JavaScript
        wp_register_script('jquery_flexslider', get_template_directory_uri(). '/js/jquery.flexslider-min.js', array('jquery') );
        wp_enqueue_script('jquery_flexslider');

        // Enqueue FlexSlider Stylesheet        
        wp_register_style( 'flexslider-style', get_template_directory_uri() . '/inc/flexslider/flexslider.css', 'all' );
        wp_enqueue_style( 'flexslider-style' );

        // FlexSlider custom settings       
        add_action('wp_footer', 'mytheme_flexslider_settings');

        function mytheme_flexslider_settings() { 
        // Fetch options data
        **global $smof_data;?>**

            <script>

                // Can also be used with $(document).ready()
                // flexslider have a fixed height
                jQuery(window).load(function() {
                  // jQuery('.subhead_shadow_bottom').hide();
                  jQuery('.flexslider').flexslider({
                    controlNav: true,
                    directionNav: true,  
                    prevText: 'Previous',     
                    nextText: 'Next',
                    animation: "<?php echo $smof_data['slider_animation']; ?>",
                    animationLoop: false
                    // animation: "slide"
                  });
                });


                jQuery(document).ready(function() {
                    fixFlexsliderHeight();
                });

                jQuery(window).load(function() {
                    fixFlexsliderHeight();
                }); // BUG: this ends up computing the slide height to the image height, not to the resized height, on page reload

                jQuery(window).resize(function() {
                    fixFlexsliderHeight();
                });


                function fixFlexsliderHeight() {
                    // Set fixed height based on the tallest slide
                    jQuery('.flexslider').each(function(){
                        var sliderHeight = 0;
                        jQuery(this).find('.slides > li').each(function(){
                            slideHeight = jQuery(this).height();
                            if (sliderHeight < slideHeight) {
                                sliderHeight = slideHeight;
                            }
                        });
                        // jQuery(this).find('ul.slides').css({'height' : sliderHeight});
                        // console.log("Fixing slider height to " + sliderHeight);
                    });
                }

                // jQuery(document).ready(function($){

                //  $('.flexslider').flexslider();
                // });
            </script>
        <?php 
        **// return $smof_data;**
        }

    }
}

add_action('init', 'mytheme_flexslider');

All are working now. Maybe one little question: Do I need to return $smof_data (the second bold-ed part)? It works both ways.. I need to learn more about varible scopes..

Oh, also, the js should be making the slider's height to be responsive, however it is not working after we refresh the page. Would like to know if there is another working solution.

Collectives™ on Stack Overflow

Global Variable in Functions.php Then Use in Javascript (WordPress)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related