Recently, I had a need to have the custom columns of WordPress on the backend to be used in the Visual Editor. So thanks to a few tutorials out there regarding this, especially Alison’s Mastering the TinyMCE Styles Dropdown in the WordPress Visual Editor, who has a great plugin, Custom Styles Dropdown, and WPEngineer’s, Customize WordPress WYSIWYG Editor (more for a better understanding). Another option is the Advanced TinyMCE WordPress Plugin. I plan to develop this into a plugin, coming soon…

However, this tutorial will focus solely on the Custom Content Columns for Genesis users. If you need an explanation, please see Alison’s Mastering the TinyMCE Styles Dropdown in the WordPress Visual Editor post.

Add this to your functions.php file.

add_filter( 'mce_buttons_2', 'wps_mce_buttons_2' );
/**
* Show the style dropdown on the second row of the editor toolbar.
*
* @param array $buttons Exising buttons
* @return array Amended buttons
*/
function wps_mce_buttons_2( $buttons ) {

    // Check if style select has not already been added
    if ( isset( $buttons['styleselect'] ) )
        return;

    // Appears not, so add it ourselves.
    array_unshift( $buttons, 'styleselect' );
    return $buttons;

}

add_filter( 'tiny_mce_before_init', 'wps_mce_before_init' );
/**
* Add column entries to the style dropdown.
*
* 'text-domain' should be replaced with your theme or plugin text domain for
* translations.
*
* @param array $settings Existing settings for all toolbar items
* @return array Amended settings
*/
function wps_mce_before_init( $settings ) {

    $style_formats = array(

		array(
			'title' => __( 'First Half', 'text-domain' ),
			'block' => 'div',
			'classes' => 'one-half first',
			),
		array(
			'title' => __( 'Half', 'text-domain' ),
			'block' => 'div',
			'classes' => 'one-half',
			),
		array(
			'title' => __( 'First Third', 'text-domain' ),
			'block' => 'div',
			'classes' => 'one-third first',
			),
		array(
			'title' => __( 'Third', 'text-domain' ),
			'block' => 'div',
			'classes' => 'one-third',
			),
		array(
			'title' => __( 'First Quarter', 'text-domain' ),
			'block' => 'div',
			'classes' => 'one-fourth first',
			),
		array(
			'title' => _( 'Quarter', 'text-domain' ),
			'block' => 'div',
			'classes' => 'one-fourth',
			),
		array(
			'title' => __( 'First Fifth', 'text-domain' ),
			'block' => 'div',
			'classes' => 'one-fifth first',
			),
		array(
			'title' => __( 'Fifth', 'text-domain' ),
			'block' => 'div',
			'classes' => 'one-fifth',
			),
		array(
			'title' => __( 'First Sixth', 'text-domain' ),
			'block' => 'div',
			'classes' => 'one-sixth first',
			),
		array(
			'title' => __( 'Sixth', 'text-domain' ),
			'block' => 'div',
			'classes' => 'one-sixth',
			),
		);

	// Check if there are some styles already
	if ( $settings['style_formats'] )
		$settings['style_formats'] = array_merge( $settings['style_formats'], json_encode( $style_formats ) );
	else
		$settings['style_formats'] = json_encode( $style_formats );

	return $settings;

}

This will result in this:

However, the HTML will contain the necessary classes and styles and will be:

<div class="one-half first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quam massa, iaculis vel vehicula aliquam, iaculis ut risus. Mauris luctus, justo quis blandit vestibulum, dui lorem rhoncus massa, non aliquam ante erat at dolor. In facilisis libero in libero pharetra eu pellentesque mauris convallis. In vitae tortor lorem. Nullam aliquet ligula vel lectus pretium eget elementum massa laoreet. In hac habitasse platea dictumst. Quisque lacinia odio vitae nisl dictum euismod. Suspendisse eget nisl quis leo pulvinar cursus. Aliquam vel elit vehicula neque consectetur blandit eu eget nisi. Maecenas vitae risus quis lacus feugiat dictum sed eget arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla feugiat massa ut mauris viverra porta.</div>
<div class="one-half">Fusce porttitor libero ut libero aliquam vitae faucibus lorem tincidunt. Phasellus pharetra libero et eros pellentesque eget feugiat eros adipiscing. Pellentesque massa augue, interdum ut facilisis et, pellentesque et justo. Proin consectetur venenatis vehicula. Aliquam interdum ullamcorper urna, quis volutpat massa dictum non. Integer placerat nunc porttitor lacus volutpat ultricies. Integer ornare ultrices nibh sed hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>

Now you can also add the following to incorporate your CSS into the Visual Editor to achieve a closer representation on the backend (that will eventually appear on the front end):

add_editor_style();

Now, the add_editor_style(); is a really cool feature. Now you can add a stylesheet to your child theme’s folder called editor-style.css, and any style that you want to appear in the editor will now appear in the visual editor as it would on the external pages. So to get the custom column classes, you will need to create the editor-style.css.

Here is what your visual editor will look like with the use of add_editor_style();

However, you do not need to add the add_editor_style(); for this to work. Adding the add_editor_style(); only allows the style to be applied inside the Visual editor.

/* Column Classes
------------------------------------------------------------ */

.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
    float: left;
    margin: 0 0 20px;
    padding-left: 3%;
}

.one-half,
.three-sixths,
.two-fourths {
    width: 48%;
}

.one-third,
.two-sixths {
    width: 31%;
}

.four-sixths,
.two-thirds {
    width: 65%;
}

.one-fourth {
    width: 22.5%;
}

.three-fourths {
    width: 73.5%;
}

.one-fifth {
    width: 17.4%;
}

.two-fifths {
    width: 37.8%;
}

.three-fifths {
    width: 58.2%;
}

.four-fifths {
    width: 78.6%;
}

.one-sixth {
    width: 14%;
}

.five-sixths {
    width: 82%;
}

.first {
    clear: both;
    padding-left: 0;
}

Or simply download the file below and place inside your child theme folder.
Download: Genesis Custom Content Columns Editor Stylesheet (86)