OptionTree: How To Use Background Image Option in WordPress Theme

Last updated on: August 4th, 2015

OptionTree is a great plugin for theme developers and specially novice developers who have just started developing themes. It comes with plenty of options to play with, and provides almost every feature that a wordpress theme option page could use to create a powerful option panel. Recently one of our customers asked about how to use OptionTree plugin’s background image option to display custom background image in a div of posts or any other content type. To do this, please take a look at the code below. It would create an option to let the user upload an image that would be placed in the css as a background image. Here is the output php code to use to achieve that:

<?php if ( function_exists( 'ot_get_option' ) ) {
  $bgimg = ot_get_option( 'featured_section_background' );
} ?>

<div class="section1" style="background:url('<?php echo $bgimg ?>') no-repeat; background-position:center;">

You can see I have created an “Upload” option in OptionTree settings and then used the above mentioned output code to display uploaded background image in my theme file (page.php, index.php, single.php or anywhere you want to display it). You can use both “Upload” or “Background” option to do this.

Want to see a working live exmaple of this? Take a look at our Mashster wordpress theme demo. The featured section at the top with background image is using this functionality.

I hope you guys found it useful. 🙂