This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Background Option in Post Meta

  • Creator
    Topic
  • #9925
    spyke01
    Participant

    I am trying to add a background option to the post meta box that allows the user to select a custom background for each page. I am using the following to add it to the post meta box:

    function gp_themeblvd_page_meta($setup) {    
    	$setup['options'][] = array(
    		'id'			=> '_tb_background',
    		'name' 		=> __( 'Page Background', TB_GETTEXT_DOMAIN ),
    		'desc'		=> __( 'This option will overwrite the custom background from Appearance->Background for this page.', TB_GETTEXT_DOMAIN ),
    		'type' 		=> 'background'
    	);
    	
        return $setup;
    }
    add_filter('themeblvd_page_meta', 'gp_themeblvd_page_meta');

    This gets it to show up on the edit post/page screen but it appears that colorpicker and option-custom.js don’t get used here. I think these are needed to run the upload and color picker items.

    Can I just tell Alyeska to load these items on admin pages or do I need to load a custom version that just does the upload/colorpicker. Don’t want to reinvent the wheel if I don’t have to.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Author
    Replies
  • #9945
    Jason Bobich
    Keymaster

    Unfortunately the needed assets aren’t present on the edit page screen by default. You’d need to enqueue some things in.

    wp_enqueue_style( 'tb_meta_box-styles', TB_FRAMEWORK_URI . '/admin/assets/css/meta-box.min.css' );
    wp_enqueue_script( 'tb_meta_box-scripts', TB_FRAMEWORK_URI . '/admin/assets/js/meta-box.min.js', array('jquery') );

    And then you’d also need to get color selectors going by adding:

    $this.find('.colorSelector').each(function(){
    	var Othis = this; //cache a copy of the this variable for use inside nested function
    	var initialColor = $(Othis).next('input').attr('value');
    	$(this).ColorPicker({
    		color: initialColor,
    		onShow: function (colpkr) {
    			$(colpkr).fadeIn(500);
    			return false;
    		},
    		onHide: function (colpkr) {
    			$(colpkr).fadeOut(500);
    			return false;
    		},
    		onChange: function (hsb, hex, rgb) {
    			$(Othis).children('div').css('backgroundColor', '#' + hex);
    			$(Othis).next('input').attr('value','#' + hex);
    		}
    	});
    });
    #9959
    spyke01
    Participant

    Jason,
    With this I was able to get the color picker working by doing this:

    in child theme functions.php

    // Common Assets
    define( 'TB_CHILD_FRAMEWORK_URL', get_stylesheet_directory().'/framework' );
    define( 'TB_CHILD_FRAMEWORK_DIRECTORY', get_stylesheet_directory_uri().'/framework' );
    define( 'THEMEBLVD_CHILD_ADMIN_ASSETS_URL', TB_CHILD_FRAMEWORK_URL . '/admin/assets/' );
    define( 'THEMEBLVD_CHILD_ADMIN_ASSETS_DIRECTORY', TB_CHILD_FRAMEWORK_DIRECTORY . '/admin/assets/');
    
    function themeblvd_non_modular_assets() {
    	global $pagenow;
    	if( $pagenow == 'post-new.php' || $pagenow == 'post.php' ) {
    		wp_enqueue_style('color-picker', get_template_directory_uri().'/framework' . '/admin/modules/options/css/colorpicker.css');
    		wp_enqueue_script('color-picker', get_template_directory_uri().'/framework' . '/admin/modules/options/js/colorpicker.js', array('jquery'));
    		wp_enqueue_style( 'tb_meta_box-styles', THEMEBLVD_ADMIN_ASSETS_DIRECTORY.'css/meta-box.css', false, false, 'screen' );
    		wp_enqueue_script( 'tb_meta_box-scripts', THEMEBLVD_CHILD_ADMIN_ASSETS_DIRECTORY . 'js/meta-box.js', array('jquery') );
    	}
    }

    copied /framework/admin/assets/js/meta-box.js to child theme and add this to the bottom before final });

    /*-----------------------------------------------------------------------------------*/
    	/* Make color selectors work
    	/*-----------------------------------------------------------------------------------*/
    	$('.colorSelector').each(function(){
    		var Othis = this; //cache a copy of the this variable for use inside nested function
    		var initialColor = $(Othis).next('input').attr('value');
    		$(this).ColorPicker({
    			color: initialColor,
    			onShow: function (colpkr) {
    				$(colpkr).fadeIn(500);
    				return false;
    			},
    			onHide: function (colpkr) {
    				$(colpkr).fadeOut(500);
    				return false;
    			},
    			onChange: function (hsb, hex, rgb) {
    				$(Othis).children('div').css('backgroundColor', '#' + hex);
    				$(Othis).next('input').attr('value','#' + hex);
    			}
    		});
    	});

    Unfortunately the upload button on the background field still doesn’t work. Any ideas on this? Do I need to perhaps enque the of-medialibrary-uploader.js file?

    #9974
    Jason Bobich
    Keymaster

    In your themeblvd_non_modular_assets(), I think you can get away with just running these functions within:

    // Include assets for uploader
    optionsframework_mlu_js();
    optionsframework_mlu_css();

    If I were you, I wouldn’t edit themeblvd_non_modular_assets() as a pluggable function. It would be better to just hook on your own function with what you need:

    function my_admin_assets() {
    	
    	global $pagenow;
    	
    	if( $pagenow == 'post-new.php' || $pagenow == 'post.php' ) {
    	
    		wp_enqueue_style('color-picker', get_template_directory_uri().'/framework' . '/admin/modules/options/css/colorpicker.css');
    		wp_enqueue_script('color-picker', get_template_directory_uri().'/framework' . '/admin/modules/options/js/colorpicker.js', array('jquery'));
    		wp_enqueue_style( 'tb_meta_box-styles', THEMEBLVD_ADMIN_ASSETS_DIRECTORY.'css/meta-box.css', false, false, 'screen' );
    		wp_enqueue_script( 'tb_meta_box-scripts', THEMEBLVD_CHILD_ADMIN_ASSETS_DIRECTORY . 'js/meta-box.js', array('jquery') );
    		
    		// Uploader assets
    		optionsframework_mlu_js();
    		optionsframework_mlu_css();
    		
    	}
    }
    add_action( 'admin_enqueue_scripts', 'my_admin_assets' );
    remove_action( 'admin_enqueue_scripts', 'themeblvd_non_modular_assets' );

    I would also get into the habit of pre-fixing all of your constants and functions with something that is unique to you, opposed to using themeblvd. For example —

    function spike_admin_assets() { ...
    define( 'SPIKE_CHILD_URL' ...
    #10005
    spyke01
    Participant

    Thanks again Jason, this got it mostly working but there is a bug in framework/admin/options/options-interface.php line 76

    if( $value['type'] == 'logo' ) {

    it should be

    if( $value['type'] == 'logo' || $value['type'] == 'background' ) {

    without checking for background the class “section-upload” doesn’t get added for background items and instead of attaching the image to the option it inserts it into the editor window.

    Also when you save the meta box the color picker and image upload field get “A” as the value. I’m looking into the problem but if you happen to know a fix it would be appreciated.

    #10006
    spyke01
    Participant

    Ok I found out why it was setting them as A, they posted values were being passed through strip tags which accepts a string so it broke the array. I added the following to my functions.php to fix the issue.

    function themeblvd_save_meta_boxes( $post_id ) {
    	
    	// Page meta boxes
    	$page_meta = setup_themeblvd_page_meta();
    	foreach( $page_meta['options'] as $option ) {
    		if( isset( $_POST['themeblvd_meta'][$option['id']] ) ) {
    			update_post_meta( $post_id, $option['id'], apply_filters( 'of_sanitize_' . $option['type'], $_POST['themeblvd_meta'][$option['id']], $option ) );
    		}	
    	}
    	
    	// Post Meta boxes
    	$post_meta = setup_themeblvd_post_meta();
    	foreach( $post_meta['options'] as $option ) {
    		if( isset( $_POST['themeblvd_meta'][$option['id']] ) ) {
    			update_post_meta( $post_id, $option['id'], apply_filters( 'of_sanitize_' . $option['type'], $_POST['themeblvd_meta'][$option['id']], $option ) );
    		}	
    	}
    	
    }

    Thanks for all the help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.