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?

enter image description here

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?


1 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(
            '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]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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