How to add all background options with options tre

Question

I'm relatively new to WordPress theme development, and I had to create a theme with options tree. I have successfully add some options with options tree plugin in my wordpress theme.But i am really stand when i go to add Background option. I have complete section an settings on theme option with 'type' => 'background', after i see i have find some options on dashboards theme options like 'select color', 'background-repeat', ''background-attachment', 'background-position' and background size. Now i want to query all methods but i have did'nt know how can i do this. exactly i want to do dynamic this code body{background:url(from option tree attach file) option tree repeat option scroll options tree position options tree background size options tree color}

this is exact css body{background:url(img/body_bg.png) no-repeat scroll 0 0 # ddd}. Any one Please help me.

Answer 1

so first you have to create a option for background.....

then you can show the option using following code....

body { background-color: ; background-repeat:; background-attachment:; background-position:; background-image:url() ; }

Actually when you create a background option it generate an array and you need to have all the data separately. I also improved the above code into a PHP function. Please check it out as well.....

// A function that will create css for background options  
function WpmBgColor( $wpm_options, $wpm_class, $identifier){ 
    $wpm_options = ot_get_option( $wpm_options, array() );  
    if($wpm_options['background-color'] | $wpm_options['background-repeat'] | $wpm_options['background-attachment'] | $wpm_options['background-position'] | $wpm_options['background-image'] ){ echo 
        $identifier.$wpm_class . "{ 
        background-color: ".$wpm_options['background-color']."; 
        background-repeat:".$wpm_options['background-repeat']."; 
        background-attachment:".$wpm_options['background-attachment']."; 
        background-position:".$wpm_options['background-position']."; 
        background-image:url(".$wpm_options['background-image'].") ; 
        background-size:".$wpm_options['background-size']."; 
        } ";   
    } 
} 

This function has several arguments...

$wpm_options : it will be your option tree field id $wpm_class : Your css selector name for which you are adding css $identifier : your css selector identifier whether it is a class or id. Just put # when it is id and put " . " when it is a class. And leave it blank when it is a HTML tag. Like for body you can leave it empty.

PM me if you need more clarification. Thanks Sabbir

Answer 2

You can try something like this....

<?php $bg_body = ot_get_option( 'bg_body', array() ); ?> 
body
{ 
background-color: <?php if($bg_body['background-color']){echo $bg_body['background-color'] ; }else{ echo '#ffffff';} ?>;
background-repeat:<?php if($bg_body['background-repeat']){echo $bg_body['background-repeat'] ; }else{ echo 'repeat-x';} ?>;
background-attachment:<?php if($bg_body['background-attachment']){echo $bg_body['background-attachment'] ; }else{ echo 'fixed';} ?>;
background-position:<?php if($bg_body['background-position']){echo $bg_body['background-position'] ; }else{ echo 'top';} ?>;
background-image:url(<?php if($bg_body['background-image']){echo $bg_body['background-image'] ; }else{ echo get_template_directory_uri().'/images/bg.png';} ?>) ;
}

I personally use this for my premium themes. www.wpmania.net

Answer 3

@wpmania.net

I am currently using the wordpress inline style function to add the css for posts & pages after my main stylesheet is being loaded. Using the metaboxes from option tree ofc.

    // Inline style for post/page backgrounds
if ( is_single() || is_page() ) {
    $background = get_post_meta( get_the_ID(), 'my_post_background_metabox', true );
    if ( !empty( $background ) ) {
        $background_color       = ( $background['background-color'] != '' ) ? $background['background-color'] . ' ' : '';
        $background_image       = ( $background['background-image'] != '' ) ? 'url('.$background['background-image'].') ' : '';
        $background_repeat      = ( $background['background-repeat'] != '' ) ? $background['background-repeat']. ' ' : '';
        $background_positon     = ( $background['background-position'] != '' ) ? $background['background-position']. ' ' : '';
        $background_attachment  = ( $background['background-attachment'] != '' ) ? $background['background-attachment']. ' ' : '';
        $background_size        = ( $background['background-size'] != '' ) ? 'background-size: '. $background['background-size']. ';' : '';
        $custom_post_background = 
            '/* Custom Background for ' . get_the_title() . ' */' . "\n" .
            '.css_selector { background: '.$background_color.$background_image.$background_repeat.$background_attachment.$background_positon.';'."\n". $background_size .'}';
        wp_add_inline_style( 'my_theme_style', $custom_post_background );
    }
}

EDIT: I forgot to mention that this part of code is inside the main wp_enqueue_script function

Answer 4

People are asking me how to use background option for betabox ( OptionTree Metabox ).....

First of all, you have to write the following codes within the loop Otherwise it might not work......

<?php
$MyBg= get_post_meta($post->ID, 'option_tree_meta_value', false);
$MyBg = $MyBg['0'];
?>

<style type="text/css">
<!-- 
.css_selector
{ 
background-color: <?php if($MyBg['background-color']){echo $MyBg['background-color'] ; }else{ echo '#ffffff';} ?>;
background-repeat:<?php if($MyBg['background-repeat']){echo $MyBg['background-repeat'] ; }else{ echo 'repeat-x';} ?>;
background-attachment:<?php if($MyBg['background-attachment']){echo $MyBg['background-attachment'] ; }else{ echo 'fixed';} ?>;
background-position:<?php if($MyBg['background-position']){echo $MyBg['background-position'] ; }else{ echo 'top';} ?>;
background-image:url(<?php if($MyBg['background-image']){echo $MyBg['background-image'] ; }else{ echo get_template_directory_uri().'/images/bg.png';} ?>) ;
}
-->
</style>

If you still need more help just PM me. I must get back to you when I get some time.