Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want to set a special styling for the ul tags created by Tinymce only, which means only for posts and pages, I only found this filter tiny_mce_before_init with an example on how to add custom style options to an existing style dropdown.

so is there a way to add a class to ul tags created by the WordPress editor ?

share|improve this question

2 Answers 2

up vote 2 down vote accepted

It's always a good idea to look at Wordpress Codex before asking. TinyMCE Custom Styles

<?php
// Insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Use 'mce_buttons' for button row #1, mce_buttons_3' for button row #3
add_filter('mce_buttons_2', 'my_mce_buttons_2');

function my_mce_before_init_insert_formats( $init_array ) {
    $style_formats = array(
        array(
            'title' => 'Custom UL class', // Title to show in dropdown
            'selector' => 'ul', // Element to add class to
            'classes' => 'custom-ul-class' // CSS class to add
        )
    );
    $init_array['style_formats'] = json_encode( $style_formats );
    return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

In editor: first create an unnumbered list, then apply the style.

Update after acceptance.

If you want to append a class to all <ul> elements added through TinyMCE you can do it prior to inserting into or updating the database:

<?php
add_filter('wp_insert_post_data', 'my_add_ul_class_on_insert');
function my_add_ul_class_on_insert( $postarr ) {
    $postarr['post_content'] = str_replace('<ul>', '<ul class="my-custom-class">', $postarr['post_content'] );
    return $postarr;
}

Tune str_replace() function needle if <ul> elements already has any attributes. Or use preg_replace() there.

share|improve this answer
    
Actually I know this, and I searched the Codex too, but I wanted to add the class automatically to the ul tag without applying a style to it. –  Peter Feb 8 '13 at 14:33
    
I guess this is the only way to do it. –  Peter Feb 8 '13 at 14:47
    
@Peter, see one more idea above. –  Max Yudin Feb 8 '13 at 15:06
    
Thank you nice idea. –  Peter Feb 9 '13 at 11:21

Is that really necessary? Try to modify you theme's page.php and single.php in a way it's wrapp the_content(); template tag with a div of specified class or id. This way:

...
<div id="post_content_from_tinymce">
<?php the_content(); ?>
</div>
...

And use that id in your stylesheet:

#post_content_from_tinymces ul{ ... }

This might be enaught in most cases. Adding posibility to add custom class to UL would demand to write a tinyMCE plugin and still, you would have to click extra button to set style every time you're creating a post/page.

share|improve this answer
    
While this is a good idea, I also have other elements on the page that will have ul tags (shortcodes...) and my issue is that I'm using ::before pseudo element on the ul tags and I don't want to overwrite this styling every time I use a ul tag. –  Peter Feb 8 '13 at 11:42
    
Than you can append class to your shotcode ul and set it another css –  david.binda Feb 8 '13 at 13:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.