How To Implement Genesis Content Boxes and Colored Buttons

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

Sponsored Ad

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

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 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.

Sponsored Ad

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

All suggestions are anonymous.

More from our blog...

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?

Post a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Stay updated with WP Mayor's newsletter showcase every week

Stay on top of every new WordPress innovation and latest launches. Receive all our fresh product reviews and expert guides directly in your inbox.

Hosting Survey 2024

Are you happy with your hosting provider or are you over-paying for too little? Have your say below!

"*" indicates required fields

What's the main reason you picked this host?*
How happy are you with your host?*

OPTIONAL: If you'd like to receive the results of this survey, please enter your details below.