WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

With custom meta boxes, how would I go about displaying the background image (or color if no image is linked) within the page.

Code for the page where I want data to displayed. I want to apply the background color/image to section id="masthead".

<?php if (get_post_meta($post->ID, '_sqcmb_masthead_select', true)) { ?>

</div><!--end #container .row (from header)-->
    <section id="masthead">
        <div class="row">
            <div class="large-9 large-centered columns">
                    $content = get_post_meta( $post->ID, '_sqcmb_masthead_content', true );
                    echo do_shortcode( $content );
            </div><!-- .large- centered columns -->
        </div><!-- .row -->
    </section><!-- #masthead -->

<!--restart #container .row (from header)--><div id="content" class="row">

<? } else { ?>
<?php } ?>

Code for the custom meta boxes.

/*Metaboxes for masthead section */
$meta_boxes[] = array(
    'id'         => 'masthead-options',
    'title'      => 'Masthead Options',
    'pages'      => array( 'page' ), // Show on Pages
    'context'    => 'normal',
    'priority'   => 'high',
    'show_names' => true, // Show field names on the left
    'fields'     => array(
            'name'    => 'Display Masthead',
            'desc'    => 'Check this box id you want to display the Masthead Section.',
            'id'      => $prefix . 'masthead_select',
            'type'    => 'checkbox',
            'name'    => 'Masthead Content',
            'desc'    => 'Enter the content of the masthead section here. You can insert media, shortcodes, etc.',
            'id'      => $prefix . 'masthead_content',
            'type'    => 'wysiwyg',
            'options' => array( 'textarea_rows' => 5, ),
            'name' => 'Background Color',
            'desc' => 'Choose a background color.',
            'id'   => $prefix . 'masthead_bg_color',
            'type' => 'colorpicker',
            'std'  => '#ffffff'
            'name' => 'Background Image',
            'desc' => 'Upload an image as the background. This will override the Background Color. (optional)',
            'id'   => $prefix . 'masthead_bg_image',
            'type' => 'file',
share|improve this question
up vote 1 down vote accepted

You need to extract the value of the custom metabox (be this background color or background image) and then, once you validate to make sure it has a value, which one is empty or what happens if both have values, to determine an INLINE-STYLING on the following piece of code:

 <section id="masthead" style="background-image:<your dynamic value here>">

Just make sure you validate the scenarios of what if they fill a color but no image, what if they fill an image but no color, what if they fill both (on the metabox), what if they place none, etc.

share|improve this answer
Thank you so much, Marco! Got it working right away. Works perfectly. – ts_52 Apr 2 '13 at 17:24

Here is the final code I've got. I am really new to php, so it may be completely botched, but it is working.

<?php if (get_post_meta($post->ID, '_sqcmb_masthead_select', true)) { ?>

    <section id="masthead" style="background:
        <?php if 
                (get_post_meta($post->ID, '_sqcmb_masthead_bg_image', true )) {
                    echo "url('";
                    echo $content = get_post_meta( $post->ID, '_sqcmb_masthead_bg_image', true );
                    echo "')no-repeat center;
                            -webkit-background-size: cover;
                            -moz-background-size: cover;
                            -o-background-size: cover;";    }
                else {
                    echo $content = get_post_meta( $post->ID, '_sqcmb_masthead_bg_color', true );
                    echo ";"; }
        ?>" >

        <div class="row">
            <div class="large-12 columns">
                    // Get the field
                    $content = get_post_meta( $post->ID, '_sqcmb_masthead_content', true );
                    // Filter it for shortcodes
                    echo do_shortcode( $content );
            </div><!-- .large-12 columns -->
        </div><!-- .row -->
    </section><!-- #masthead -->

<? } else { ?>
<!-- Do Nothing. -->
 <?php }?>
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.