using a global php array in an external .js file

Question

I am working on a theme framework for wordpress, and I have run into a small problem.

I have a defined a $globals array that stores the current registered post types plus a few special pages for the theme layout options page.

$GLOBALS['gc_frame_postTypes'] = array('homepage', 'blog');         
$post_types = get_post_types( '', 'names' ); 
    foreach ( $post_types as $post_type ) {
        if ($post_type != "revision" && $post_type != "nav_menu_item" && $post_type != "attachment")
            $GLOBALS['gc_frame_postTypes'][] = $post_type;
        }

I have this working for my options page, and it correctly creates all the correct options.

The issue I am having is when I try to apply javascript to improve the look and function of the page.

Here is the functioning .js code that does what I want. it shows and hides the fields depending on the selected layout.

jQuery(document).ready(function() {

    // keeps the new sidebar text block blank
    jQuery("#gc_frame_sidebar_name_new").val("") 

    // Homepage layout Function call
    jQuery.fn.layoutSidebars('homepage');

    // page layout Function call
    jQuery.fn.layoutSidebars('page');

    // blog layout Function call
    jQuery.fn.layoutSidebars('blog');

    // post layout Function call
    jQuery.fn.layoutSidebars('post');



    // Homepage layout Function call on change
    jQuery('#gc_frame_homepage_layout').change(function(){
        jQuery.fn.layoutSidebars('homepage');
    });

    // page layout Function call on change
    jQuery('#gc_frame_page_layout').change(function(){
        jQuery.fn.layoutSidebars('page');
    });

    // blog layout Function call on change
    jQuery('#gc_frame_blog_layout').change(function(){
        jQuery.fn.layoutSidebars('blog');
    });

    // post layout Function call on change
    jQuery('#gc_frame_post_layout').change(function(){
        jQuery.fn.layoutSidebars('post');
    });



});



jQuery.fn.layoutSidebars = function(pageType){
    pageLayout = jQuery("#gc_frame_" +pageType+ "_layout").val();
    if (pageLayout == 'fullwidth'){
        jQuery("label[for^='gc_frame_" +pageType+ "_left_sidebar_']").closest('tr').hide();
        jQuery("#gc_frame_" +pageType+ "_left_sidebar_count").val(0);
        jQuery("label[for^='gc_frame_" +pageType+ "_right_sidebar_']").closest('tr').hide();
        jQuery("#gc_frame_" +pageType+ "_right_sidebar_count").val(0);      
    } else if (pageLayout == 'SB-L') {
        jQuery("label[for='gc_frame_" +pageType+ "_left_sidebar_count']").closest('tr').show();
        jQuery("label[for^='gc_frame_" +pageType+ "_right_sidebar_']").closest('tr').hide();
        jQuery("#gc_frame_" +pageType+ "_right_sidebar_count").val(0);
    } else if (pageLayout == 'SB-R') {
        jQuery("label[for^='gc_frame_" +pageType+ "_left_sidebar_']").closest('tr').hide();
        jQuery("#gc_frame_" +pageType+ "_left_sidebar_count").val(0);
        jQuery("label[for='gc_frame_" +pageType+ "_right_sidebar_count']").closest('tr').show();
    } else if (pageLayout == 'SB-LR') {
        jQuery("label[for='gc_frame_" +pageType+ "_left_sidebar_count']").closest('tr').show();
        jQuery("label[for='gc_frame_" +pageType+ "_right_sidebar_count']").closest('tr').show();
    }
}

What I would like to do is take the above global array and get it into the javascript somehow, so that if new custom post types are added they will be affected by the javascript as well.

I currently have the php and javascript in 2 files, and I do not know how to get the information from the php file to the javascript.

Any help would be great

Answer 1

You should use $_SESSION variables to share information within your pages.

In your first page, before loading your javascript file:

session_start();
$_SESSION['globalVar'] = Value;

In your external javascript file (with .php extension) you can get this like:

<?php session_start(); //at the top of your JavaScript?>
...
var globalVar = '<?php echo $_SESSION['globalVar']; ?>'
...

Answer 2

You can use wp_localize_script()

Here's a good resource: http://pippinsplugins.com/use-wp_localize_script-it-is-awesome/