1

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.

2

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.)

  • It does not work, I am trying child selectors instead, but still, it writes decimals instead of lower-alpha. It is written in a class as .entry ol, .entry ul, but even trying !important keyword in CSS does not override the previous settings. I also am trying to override the selector by bigger relevance selectors – Lorthas Dec 4 '17 at 21:46
  • 1
    If it's just .entry ol, then .entry ol.lower-alpha would be the selector. You may also need to clear the site cache or your browser cache. – WebElaine Dec 5 '17 at 14:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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