How to add all background options with options tree in wordpress theme?

4 comments

1. 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.
   http://www.wpmania.net

   Log in to Reply

2. 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

   Log in to Reply

3. 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.

   Log in to Reply

4. @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

   Log in to Reply