Create "alternative/zebra" boxes in the content area?

Question

I'm looking for a way to create "box" areas in the content area. Is there any native way to easily have custom "box" areas as such?

Basically this will be like a zebra table except not a table, just alternative content and every "other" row will need to have that boxy gray bg.

EDIT: I found some theme that uses this. They throw in [box] around the areas but how do they actually define this?

Answer 1

If you're looking to duplicate the shortcode method mentioned in your question, you could do something like this. Either of the following two options can be added to your themes functions.php file.

Basic "Box"

// Add Box Shortcode
function wpse_168480_box_shortcode( $atts , $content = null ) {
    return '<div class="myBox">'.$content.'</div>';
}
add_shortcode( 'box', 'wpse_168480_box_shortcode' );

In your stylesheet, add whatever styles you see fix for the "myBox" selector class (or just replace class="myBox" with inline styles if you prefer. For example: style="background: #EEEEEE;"

To mimic the style you show above:

.myBox {
    background: #EEEEEE;
    border-top: 1px solid #CBCBCB;
    border-bottom: 1px solid #CBCBCB;
    padding: 20px;
    width: 100%;
}

From here you'd simply wrap your content in the box shortcode, for example:

[box]Your Content Here[/box]

Advanced "Box"

You could get a little more fancy with it, and pass specific colors to it via attributes.

// Add Advanced Box Shortcode
function wpse_168480_advanced_box_shortcode( $atts , $content = null ) {

    // Attributes
    extract( shortcode_atts(
        array(
            'color' => '#EEEEEE',
            'borderColor' => '#CBCBCB'
        ), $atts )
    );

    $styles = 'padding: 20px;';
    $styles .= 'width:100%;';
    $styles .= 'background: '.$atts['color'].';';
    $styles .= 'border-top:1px solid '.$atts['borderColor'].';';
    $styles .= 'border-bottom:1px solid '.$atts['borderColor'].';';

    return '<div styles="'.$styles.'">'.$content.'</div>';

}
add_shortcode( 'advanced_box', 'wpse_168480_advanced_box_shortcode' );

Fromhere you'd wrap your content in the advanced_box shortcode, along with the hex colors you'd like to use. If you do not enter any attributes, it will default to the colors specified in the function above. For example:

[advanced_box color="#f1f1f1" borderColor="#000000"]Your Content Here[/advanced_box]