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