Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS adding styles to wordpress tinymce

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #33463
    mrtunes
    Member

    wow i had a real afternoon of some css combat this afternoon, trying to add some styles to the wordpress tinymce editor. there is the advanced tinymce plugin, but i think it’s a bit overkill for what i’m trying to do. any other option involved a whole lot of functions.php editing from what i can tell.

    #83324
    TheDoc
    Member

    The functions.php route is easy!

    // custom editor styles -- create editor-style.css in your theme directory
    add_editor_style();

    // add style selector drop down
    add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

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

    // add styles - more info: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/
    add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

    function my_mce_before_init( $settings ) {

    $style_formats = array(
    array(
    'title' => 'Button',
    'selector' => 'a',
    'classes' => 'button'
    ),
    array(
    'title' => 'Callout Box',
    'block' => 'div',
    'classes' => 'callout',
    'wrapper' => true
    ),
    array(
    'title' => 'Bold Red Text',
    'inline' => 'span',
    'styles' => array(
    'color' => '#f00',
    'fontWeight' => 'bold'
    )
    )
    );

    $settings = json_encode( $style_formats );

    return $settings;

    }
    #83305
    stevendeeds
    Member

    @TheDoc is doing it the right way. Don’t take shortcuts, and don’t be tempted to edit anything in the wp-admin folder. It will go back to default when wordpress is updated

    #83184

    Will you elaborate?

    I’d like to be able to view the content in tinyMCE with my theme css styles…

    Can I just add my theme css to

    add_editor_style();

    like so?

    add_editor_style('style.css');

    I also see “editor-style.css” in my theme folder – can I edit/add to this?

    Thank you,
    CM

    P.S.
    I built my theme with Starkers.

    #83166
    TheDoc
    Member

    @TreeTopStudio – the original poster was asking for something a little different. I accidentally included the add_editor_style function into the code that I copy/pasted.

    But you’ve pretty much hit the nail on the head. Add the ‘add_editor_style();’ to your functions.php file and you can go ahead and edit the editor-style.css document in your theme folder.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.