{"id":178,"date":"2014-05-29T09:20:34","date_gmt":"2014-05-29T03:20:34","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=178"},"modified":"2022-10-31T21:31:03","modified_gmt":"2022-11-01T02:31:03","slug":"tiny-mce-nested-list-li","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/tiny-mce-nested-list-li\/","title":{"rendered":"Tiny MCE – Nested List (li) elements"},"content":{"rendered":"

I use the Tiny MCE Advanced<\/a> plugin in WordPress to give me a few more options when editing posts.  But when I have a list, I often times want to nest and have sub bullets.  So I press the Tab<\/strong> key much like I’d do in any other word processing document, but no luck.  That just moves the focus to the next HTML element like the web browser should do.  But it is possible to nest lists.<\/p>\n\n\n\n

The solution:<\/h2>\n\n\n\n
  1. Begin your list by clicking the Bulleted List<\/strong> or Numbered List<\/strong> icons.
    \n<\/li><\/ol>\n\n\n\n
    \"Create<\/a>
    The numbered list button in the Tiny MCE Advanced toolbar.<\/figcaption><\/figure><\/div>\n\n\n\n
    \"Create<\/a>
    The Bulleted List icon in the Tiny MCE Advanced toolbar.<\/figcaption><\/figure><\/div>\n\n\n\n
    1. Type your first line.<\/li>
    2. Press Enter<\/strong> to create a second line<\/li>
    3. To nest (indent) this line, click the\u00a0Increase Indent<\/strong> button.
      1. It’ll look something like this.<\/li>
      2. Then press Enter<\/strong> to create another line.<\/li>
      3. To go back to the main level, use the\u00a0Decrease Indent<\/strong> button or press the\u00a0Enter<\/strong> key a second time.<\/li><\/ol><\/li><\/ol>\n\n\n\n
        \"Use<\/a>
        The decrease indent button in Tiny MCE Advanced moves the bullet point nesting back out to the left.<\/figcaption><\/figure><\/div>\n\n\n\n
        1. It’ll look something like this.<\/li>
        2. Bonus Points: