Top




how to customize bullet points featured image

How To Customize Bullet Points In WordPress

Knowing how to customize bullet points in WordPress editor will often make your article content easier to read. Customized bullet points help to organize the content and make the content more attractive to your blog visitors. As a result, the readers will have a tendency to linger on and even explore your blog further.

Today I am only going to show you a couple of ways to customize bullet points in WordPress. There are many more ways to do it, but unfortunately the WordPress editor seems to have a mind of its own and will not honor many of the HTML changes you may implement to customize bullet points in the WordPress editor.

In this case I find that the “omnipotency” of the WordPress editor and its inability to respect HTML changes we apply in the editor a real shortcoming of this otherwise awesome tool.

I have tested the system ad nauseam, when I was trying to create TOC ( Table of Content) in both the How to start a blog and WordPress tutorial series and I was dismayed by the “stubbornness” of the WordPress editor.

Sadly, to implement certain changes to bulleted points and have them “stick”, you would have to modify the CSS of your theme. And the way I see it,  even if you do that, many of the changes may become universal and not applicable and changeable for individual posts. To me this is difficult and completely non-productive.

But, to a certain degree, we are still able to customize bullet points, which is better than none. Today I will show you:

  • How to add space between bullet points
  • How to create nested bullet points

2 Ways To Customize Bullet Points in WordPress

1. How Add  Space Between Bullet Points

Sometimes you want to show several bullet points, each consisting of several lines. When you look at these points on your preview or a published page they appear crammed and hard to read. To alleviate this problem, all you have to do is to add a bit of space between the them. Let me give you an example:

No space between bullet points

  • Nunc porttitor eu diam vitae euismod.  Vestibulum non hendrerit nulla, quis finibus ante. Proin tempus venenatis placerat. Proin sagittis porttitor faucibus.
  • Ut auctor placerat nisi eget suscipit. Aenean eget velit non justo laoreet condimentum. Integer fringilla fermentum ante, sit amet molestie nisi varius vel.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ipsum eget tellus egestas maximus quis id nulla. Sed massa leo, bibendum non.

Space between bullet points

  • Nunc porttitor eu diam vitae euismod. Vestibulum non hendrerit nulla, quis finibus ante. Proin tempus venenatis placerat. Proin sagittis porttitor faucibus.
  • Ut auctor placerat nisi eget suscipit. Aenean eget velit non justo laoreet condimentum. Integer fringilla fermentum ante, sit amet molestie nisi varius vel.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a ipsum eget tellus egestas maximus quis id nulla. Sed massa leo, bibendum non.

As you can see, with the space between the various points, the presentation looks much better and it is much easier to read.

The WordPress editor does not respect the conventional ways to add spaces when creating bulleted lists.  The only way to add a space between bulleted points is to add a tiny adjustment to the bullets in your text editor. Let me explain.

When you create bullet points in WordPress, you just click on the bulleted list option in your WP editor and automatically the bullet points are created and presented to your readers like so:

  • bullet point 1
  • bullet point 2

In the text editor, the HTML code is added to the bullet points and it looks like this:

 <ul>
<li>bullet point 1</li>
<li>bullet point 2</li>
</ul>

 To add the space, all you have to do is add a command to <li> in the text editor :

change <li> →→→<li style=”margin-bottom: 10px;”>

The highlighted portion in the newly created <li> is the command which tells the editor to add and extra 10 pixels of space below the bullet point. You can change the 10px to any number you like to have (smaller or larger).

When you add this command to your bullet points, the bullet points will appear to your readers as shown below:

  • bullet point 1
  • bullet point 2

In the text editor, the edited bullet points will will look as follows:

<ul>
<li style=”margin-bottom: 10px;”>bullet point 1</li>
<li style=”margin-bottom: 10px;”>bullet point 2</li>
</ul>

 Pretty simple, right?

2. How To Create Nested Bullet Points In WordPress

Nested bullet points are sometimes important when you are trying to create table of content where you need to create a cascading list topics and subtopics. The HTML options allow to create magic, but unfortunately the WordPress editor stupidly limits us (sorry I have no other descriptive word for it). Let me explain what I mean with images.

1. Nested Bullet Points As They Appear In WordPress Editor

nested bullet points as they appear in WordPress editor

2. Nested Bullet Points As They Appear After Publishing

nested bullet points as they appear after publishing
No amount of HTML manipulation will force the appearance of nested bulleted points after publishing. None the less, even if not ideal, nesting of the points you want to bring across to your readers, holds value and below I will show you what you need to do to achieve nesting or cascading of the points.

  • This is a bullet point
  • This is a bullet point
    • This is a nested bullet point
    • This is a nested bullet point
      • This is a nested bullet point
      • This is a nested bullet point

The design of nested bullet points in the text editor

<ul>
<li>This is a bullet point</li>
<li>This is a bullet point
<ul>
<li>This is a nested bullet point</li>
<li>This is a nested bullet point</li>
</ul>
<ul>
<ul>
<li>This is a nested bullet point</li>
<li>This is a nested bullet point</li>
</ul>
</ul>
</li>
</ul>

You can copy and paste this design into your text editor and you will create nesting of your points.

You may think that it is going to be hard to remember. I give you that. My suggestion is that you create a swipe file for different hacks you may want to apply to your posts and pages from time to time. Then, as you write any article, keep the swipe file opened (I keep it in notepad) and refer to it as you need it.

In summary, in this article I wanted to show you how to customize bullet points. I hope you found the post useful and that based on this article you’ll be able to find the task simple. If you need to customize ordered list you can do it in a similar fashion.

Lastly, if you found this article helpful, please leave a comment and click on the Like and G+ buttons. It really helps. Thank you!

Don't Miss A Thing!  Sign Up For Weekly Newsletter & Updates
online success optin

Enter your name & email and  get a FREE copy of my ebook, Your Online Success Starts Here
 

 

simple traffic solutions banner

 

, , , ,

2 Responses to How To Customize Bullet Points In WordPress

  1. Glenn Shepherd April 25, 2015 at 9:28 am #

    Hi Dita,

    Simply brilliant! I’ve been wanting more control over the display of bullet points and now, thanks to this excellent post, I have it!

    Those are just a couple of very minor adjustments and, once you know how to do it, so simple to implement. This is one of the things I love about your blog, Dita, I nearly always find some useful tidbit of information that’s hugely valuable and it’s often something I was wondering how to do.

    Thanks for sharing this, Dita. I hope you’re having a wonderful weekend. 🙂

    »Glenn«
    Glenn Shepherd recently posted…Audio Tips For Online MarketersMy Profile