Modifying a JS file with data from plugin settings

I have a plugin that, among other things, has a javascript file that requires a few user specific settings. What would be the best way to get those settings into javascript from the plugin’s settings parameters?

In other words, if I make those settings part of the settings page where the user can enter them, how would I best be able to get those values into javascript? Would I have to use something to append some script tags and set them via PHP on every page load? Would setting a cookie be a better way to do this?

Related posts

Leave a Reply

2 comments

  1. better is, you use the functions of WP for this, a example for multilanguage:

        add_action( 'admin_enqueue_scripts', 'add_scripts' );
        function add_scripts($where) {
            wp_localize_script( 'post2media', 'post2media_strings', $this->localize_vars() );
        }
        function localize_vars() {
    
            $strings = array(
                    'btntext'    => __( 'Link with post', INPSYDE_P2M_TEXTDOMAIN ),
                    'txtallnone' => __( 'Include in gallery:', INPSYDE_P2M_TEXTDOMAIN ),
                    'txtall'     => __( 'All', INPSYDE_P2M_TEXTDOMAIN ),
                    'txtnone'    => __( 'None', INPSYDE_P2M_TEXTDOMAIN ),
                    'ttlcb'      => __( 'Include image in this gallery', INPSYDE_P2M_TEXTDOMAIN )
                );
    
            return $strings;
        }
    

    use this in js-file:

    jQuery(function ($) {
    buttonaddfunc = function() {
        btntext = post2media_strings.btntext;
    
        reg = /d+/;
        $( '.savesend > .button' ) . each( function() {
            inputname = $( this ) . attr( 'name' );
            number = reg . exec( inputname );
            $( this ) . after( '<input type="submit" value="' + btntext + '" name="link[' + number + ']" class="button">' );
        } );
        $( '.describe-toggle-on' ).unbind( 'click', buttonaddfunc );
    };
    $( '.describe-toggle-on' ).bind( 'click', buttonaddfunc );
    

    } );

    Also see the post from Otto

  2. There are a couple of ways that you could do this, one of which I’ve done before, the other I haven’t, but I have used for XML configuration files.

    The first one is to include the variables in a script tag inside the WP header or footer, before the script tag where you include your JS file, for example:

    <script type="text/javascript">
        var test = "<?php echo "hello world"; /* the relevant PHP code to echo the data you require */ ?>";
        var slider_type = "<?php echo "nivo"; /* same again */ ?>";
    </script>
    <script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/your_js_here"></script>
    

    The other alternative would be to include the JS inside of a PHP file which is included inside of a script tag.

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts.php"></script>
    

    Inside this file you would include your javascript, and as PHP would parse it you would be able to include PHP calls in a similar fashion to above, simply echoing out the data/options which you require. One thing to note is that you might need to set the headers for the output as text/javascript.

    Personally I much prefer the first method, and is what I use when I have user changeable settings which affect javascript files.