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:
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.
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.
3 Responses
Awesome resource, thank you! I was wondering how you would make these content boxes full width, so that covers the entire screen in width?
This is awesome, thanks so much.
Can you also tell how to populate the buttons in a dropdown with some styles in the editor?
Awesome, thanks a lot.