CODEWITHSUNDEEP
wordpresshtml-listswysiwyg
kayee
kayee

Reputation: 340

custom style bullet points in Wordpress WYSIWYG editor

Is there a Wordpress WYSIWYG editor plugin to make a button for adding specific ul li and ol li styling?

e.g. currently my ul li list-style-type is set as square in my css and my ul li are numbers. My client want to be able to add roman and alphabet bullet points in the Visual side of the Wordpress WYSIWYG editor instead of having to manually code the list-style-type (upper-roman, upper-alpha) in the HTML side of the editor?

enter image description here

Upvotes: 2

Views: 3438

Answers (2)

timlg07
timlg07

Reputation: 626

The previous answer is outdated with a dead link. I had exactly the same issue now and solved it using the following code inside functions.php:

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

function my_mce_before_init_insert_formats($init_array) {
    $style_formats = array(
        array(
            'title' => 'Custom numbered list',
            'block' => 'ol',
            'selector' => 'ol',
            'classes' => 'class-to-style-the-list'
        ),
    );
    $init_array['style_formats'] = json_encode($style_formats);
    return $init_array;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init_insert_formats');

This will add the class to an existing <ol> if selected or will create a new one, as documented here: https://codex.wordpress.org/TinyMCE_Custom_Styles#Style_Format_Arguments

Upvotes: 0

FelipeAls
FelipeAls

Reputation: 22171

This tutorial will let you add the Styles dropdown in the WordPress editor: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/ (edit: the Method 2 described there)

Adding Styles dropdown to the WordPress editor

As options of this dropdown, you should let your client add 2 different classes on ul element, for example alphabetical and roman. In the CSS file of your theme as well as in the editor-style.css mentioned in the tutorial, style these 2 classes as you want (ex: .roman { list-style-type: (...) })

Upvotes: 1

Related Questions