WP Smith

Creating WordPress & Genesis Websites Since 2010

  • Home
  • About
  • Services
  • Blog
  • Contact

Dec 08 2011

How to Add Genesis Custom Content Columns to the Editor (to Appear in Visual Mode)

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.
[php]
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;

}
[/php]

This will result in this:
Custom Columns in the Editor

However, the HTML will contain the necessary classes and styles and will be:
[html]
<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>
[/html]

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):
[php]
add_editor_style();
[/php]
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();
Custom Columns with 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.

[css]
/* 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;
}
[/css]

Or simply download the file below and place inside your child theme folder.
Download: [download id="17"]

Written by Travis Smith · Categorized: Genesis, Tutorials

StudioPress Premium WordPress Themes     WP Engine Managed WordPress Hosting

What can I do for you!?

Custom Development

We develop plugins by determining both business/functional and technical requirements, following WordPress development best practices, and using agile methodology to ensure you get the best solution.

Consulting

Have questions? Need a reliable developer to consult? Please contact us today!

Customized Theme

We can customize your theme or child theme, or create a child theme for you based on your needs while enhancing the performance of every individual attribute.

Customized Plugin

We can customize your plugins, extend plugins (e.g., Gravity Forms, Jetpack, Soliloquy) based on your needs ensuring security, performance, and positive business impact.

Contact Us

About Travis Smith

As a WordPress enthusiast, developer, and speaker, Travis writes about what he learns in WordPress trying to help other WordPress travelers, beginners and enthusiasts with tutorials, explanations, & demonstrations.

Comments

  1. Adam W. Warner says

    December 9, 2011 at 8:57 am

    Travis, this is great, thanks so much for all your tutorials regarding Genesis. I think a plugin would be great for those Genesis users who aren’t familiar with editing files manually and I would look forward to such a plugin.

    It makes me wonder though…why wouldn’t StudioPress build this into there own plugin or even as an option into their themes? It seems like such a great formatting option for users to use. I’m sure they have there reasons why either hasn’t been done so far, but I wonder if you’ve heard any buzz on why they’ve chosen to keep the columns options as a custom setup for now?

    Again, thanks for all you do, WE really appreciated the knowledge!

    Reply
  2. GaryJ says

    December 11, 2011 at 6:28 am

    Adam – it’s been proposed (as in the last 24 hours) to be included in the next version of Genesis – no developer feedback yet (and probably won’t be for a while) as to whether it’s going to make it in.

    Reply
  3. Adam W. Warner says

    December 13, 2011 at 9:28 am

    @GaryJ – Thanks for the update. It’s nice to know that it’s up for discussion. I think it would be a great addition. Especially considering that some other theme companies have similar features. I’ll keep my fingers crossed;)

    @Travis – Is it possible for you to add subscribe to comments? I only came back to see if anyone replied because I had chicken scratched a note on my desk;)

    Reply
  4. Social Bullets says

    December 20, 2011 at 4:24 am

    I always wonder and have make mistakes in this visual side, thanks man

    Reply
  5. Robert says

    March 23, 2012 at 1:16 am

    Thanks so much – this was just what I was hoping to find! Well, I was hoping for something even easier for a client to use, but this is definitely easier for him than opening up the html view and trying to figure that out 🙂

    Just a note that you forgot a _ on line 60 of the “wps_mce_before_init” function, “‘title’ => _( ‘Quarter’, ‘text-domain’ ),” should be “‘title’ => __( ‘Quarter’, ‘text-domain’ ),”

    My admin panel was running super slow, and the Quarter option didn’t appear in the drop-down list. I figured it could help if someone else wonders what’s going on 🙂

    Reply
  6. Monty says

    May 1, 2012 at 12:00 pm

    Could not get to work with WordPress 3.3.2 and Genesis 1.8.1

    Followed directions, not seeing “2 columns” for choice in drop down. Do see first half, half, etc.

    First half (1st col) formats properly, but half (2nd col) doesn’t, just defaults back to first half. Insight?

    Reply
    • Travis Smith says

      May 13, 2012 at 6:46 pm

      Did you check in HTML tab to see if you have the first over-riding the second. Due to TinyMCE there are limitations to doing it this way and is not SUPER-user friendly.

      Reply
  7. Carrie says

    December 29, 2012 at 10:51 am

    Hadn’t seen this post before and wish I had. Awesome! I noticed Gary’s comment suggested that this might be included in a future version of Genesis. Any idea if it’ll be included in 1.9 or the amazing Sandbox theme you’ve been working on?

    Thanks!

    Reply

Leave a Reply Cancel reply

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.

  • Twitter
  • Facebook
  • LinkedIn
  • Google+
  • RSS

Copyright © 2025 � WP Smith on Genesis on Genesis Framework � WordPress � Log in