How To Implement Genesis Content Boxes and Colored Buttons

If you purchase through a link on our site, we may earn a commission. Learn more.

This guide will show you how easy it is to implement and use the Genesis content boxes and colored buttons.
Table of Contents
WP Engine High Performance Hosting
BionicWP Hosting

This guide will show you how easy it is to implement and use the Genesis content boxes and colored buttons.

First up, here’s what the end result will look like:

colored buttons content boxes

The Plugin Way

There’s a very handy plugin that will implement all this for you very quickly, however there will some performance impact since it uses shortcodes. Nevertheless, that’s one option to do things.

standout color boxes and buttons

The Manual Way

In the manual way, here are the steps:

Add Styles for Content boxes and Colored buttons to your theme

/* Content Boxes
------------------------------------------------------------ */

.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
    margin: 0 0 25px;
    overflow: hidden;
    padding: 20px;
}

.content-box-blue {
    background-color: #d8ecf7;
    border: 1px solid #afcde3;
}

.content-box-gray {
    background-color: #e2e2e2;
    border: 1px solid #bdbdbd;
}

.content-box-green {
    background-color: #d9edc2;
    border: 1px solid #b2ce96;
}

.content-box-purple {
    background-color: #e2e2f9;
    border: 1px solid #bebde9;
}

.content-box-red {
    background-color: #f9dbdb;
    border: 1px solid #e9b3b3;
}

.content-box-yellow {
    background-color: #fef5c4;
    border: 1px solid #fadf98;
}

/* Color Buttons
------------------------------------------------------------ */

.button-blue,
.button-gray,
.button-green,
.button-purple,
.button-red,
.button-yellow {
    color: #fff;
    padding: 5px 10px;
}

.button-blue:hover,
.button-gray:hover,
.button-green:hover,
.button-purple:hover,
.button-red:hover,
.button-yellow:hover {
    text-decoration: none;
}

.button-blue {
    background-color: #afcde3;
    border: 1px solid #afcde3;
}

.button-blue:hover {
    background-color: #83a2be;
    border: 1px solid #83a2be;
}

.button-gray {
    background-color: #bdbdbd;
    border: 1px solid #bdbdbd;
}

.button-gray:hover {
    background-color: #919191;
    border: 1px solid #919191;
}

.button-green {
    background-color: #b2ce96;
    border: 1px solid #b2ce96;
}

.button-green:hover {
    background-color: #86a36e;
    border: 1px solid #86a36e;
}

.button-purple {
    background-color: #bebde9;
    border: 1px solid #bebde9;
}

.button-purple:hover {
    background-color: #9291c7;
    border: 1px solid #9291c7;
}

.button-red {
    background-color: #e9b3b3;
    border: 1px solid #e9b3b3;
}

.button-red:hover {
    background-color: #c78787;
    border: 1px solid #c78787;
}

.button-yellow {
    background-color: #fadf98;
    border: 1px solid #fadf98;
}

.button-yellow:hover {
    background-color: #ecb870;
    border: 1px solid #ecb870;
}

Enable the Styles dropdown in TinyMCE

/** Add the Styles dropdown to the TinyMCE editor */
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

Populate the Styles dropdown with some styles

/** Populate the Styles dropdown in TinyMCE with some styles */
add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

function my_mce_before_init( $settings ) {

    $style_formats = array(
        array(
        	'title' => 'Content box blue',
        	'block' => 'div',
        	'classes' => 'content-box-blue'
        ),
        array(
        	'title' => 'Content box green',
        	'block' => 'div',
        	'classes' => 'content-box-green'
        ),
        array(
        	'title' => 'Content box red',
        	'block' => 'div',
        	'classes' => 'content-box-red'
        ),
        /* Just as an example of what you can do, from alisothegeek.com
        array(
        	'title' => 'Bold Red Text',
        	'inline' => 'span',
        	'styles' => array(
        		'color' => '#f00',
        		'fontWeight' => 'bold'
        	)
        )
        */
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}

That’s it! You’re done, now you can use the styles dropdown in TinyMCE to set the content boxes and buttons.

If you enjoyed this post, make sure to subscribe to WP Mayor’s RSS feed.

Jean Galea

Jean Galea is an investor, entrepreneur, and blogger. He is the founder of WP Mayor, the plugins WP RSS Aggregator and Spotlight, as well as the Mastermind.fm podcast. His personal blog can be found at jeangalea.com.

Discover more from our archives ↓

Popular articles ↓

3 Responses

  1. Awesome resource, thank you! I was wondering how you would make these content boxes full width, so that covers the entire screen in width?

  2. This is awesome, thanks so much.
    Can you also tell how to populate the buttons in a dropdown with some styles in the editor?

Share Your Thoughts

Your email address will not be published. Required fields are marked *

Claim Your Free Website Tip 👇

Leave your name, email and website URL below to receive one actionable improvement tip tailored for your website within the next 24 hours.

"They identified areas for improvement that we had not previously considered." - Elliot

By providing your information, you'll also be subscribing to our weekly newsletter packed with exclusive content and insights. You can unsubscribe at any time with just one click.