Wordpress' visual editor messing up my (nested) lists (and other things as well)

Question

I always have trouble trying to create some nested lists in Wordpress using the default editor in visual mode, since I want to avoid the HTML extra work. Even though I write the HTML myself in the HTML editor mode, the page sometimes will not listen to my HTML and change things as it wants.

For example, I want to create the following structure:

1. 
2.
  a)
  b)
    - Paragraph 1
    - Paragraph 2

I am using the "type='a'" attribute in the "OL" tag for ordering using letters and when I change back to the visual mode it will display letters, but when I preview the post it will display numbers.

Also sometimes using the visual mode to create lists fast, when creating a nested list it will change an outer list format. The visual editor sometimes changes things as it things it's "better" but a lot of times it changes things the way I don't want to and it's frustrating and a nightmare, and then when you preview or publish a post it does not display the way the ditor did. But I guess that has something to do with the theme's CSS.

Answer 1

Instead of using the "type" attribute, try adding a CSS class and styling that.

<ol>
    <li>Number one</li>
    <li>Number two
        <ol class="lower-alpha">
            <li>Lowercase a</li>
            <li>Lowercase b
                <ul>
                    <li>Paragraph 1</li>
                    <li>Paragraph 2</li>
                </ul>
            </li>
        </ol>
    </li>
</ol>

Then in your CSS - depending on your site setup, you may want to add Custom CSS through the Customizer, or edit a child theme:

ol.lower-alpha {
    list-style-type:lower-alpha;
}

(Depending on your theme, you might or might not have to get more specific, but this would work for most cases.)