How to Easily Add Bullet Points & Numbered Lists in WordPress

Creating well-organized content with bullet points and numbered lists might seem basic, but we’ve found that many users struggle with getting them to look just right. 📋

After exploring various formatting methods in the block editor, we’ve discovered the easiest ways to create clean, consistent lists.

Through extensive testing in our demo environments, we’ve identified several methods for adding and styling lists in WordPress, from simple bullet points to customized lists.

What’s great is that you don’t need any coding knowledge to make your lists look professional.

In this beginner-friendly guide, we’ll show you exactly how to add and format bullet points and numbered lists in WordPress.

When to Add Bullet Points and Numbered Lists in WordPress

You should add lists to your content any time you need to present information in a structured, easy-to-scan format. The key is to choose the right type of list for your content.

Use a numbered list when the order of the items is important. This is ideal for step-by-step tutorials, top 10 rankings, or any process that follows a specific sequence.

Use a bulleted list when the order of items does not matter. This is great for listing product features, examples, or a group of related ideas.

Using lists correctly helps visitors understand your content at a glance, even if the information is complex. This improves the user experience and can keep people on your WordPress website for longer.

With that in mind, let’s see how you can add bullet points and numbered lists in WordPress. Simply use the quick links below to jump straight to the method you want to use:

• Method 1: Using the Built-in WordPress List Block (Easy)
• Method 2: Using Shortcodes Ultimate (Lists With Custom Icons)
• Method 3: Using a Page Builder Plugin (Best for Landing Pages)
• Method 4: Using Code to Add Bullet Points and Number Lists (Advanced)
• Frequently Asked Questions About Adding Bullet Points and Numbered Lists in WordPress

Method 1: Using the Built-in WordPress List Block (Easy)

The easiest way to add bullet points and numbered lists is by using the List block and the WordPress Gutenberg block editor.

This allows you to create simple numbered or bullet lists without installing a separate WordPress plugin. That said, this default block only has a few customization options.

If you want to fine-tune your lists with custom icons, horizontal layouts, different colors, and more, then we recommend using one of the other methods in this article.

To get started, simply open the block editor for the WordPress post or page where you want to add a list. Or, you can open the widget editor to add the bullet list to a widget area, like a sidebar.

You can then choose whether to create a bullet point or a numbered list.

How to Create a Bullet Point List in WordPress

To create a bullet point list, click on the ‘+’ icon to add a new WordPress block.

In the popup that appears, type in ‘List.’

When the right block shows up, click to add it to the page.

This creates the first item in a bullet point list. Simply type in the text you want to use for the first list item.

With that done, press the ‘Enter’ key on your keyboard to move to the next line. WordPress will create the second bullet point automatically.

You can now go ahead and type in the text you want to use for the second bullet point. Simply repeat these steps to add more items to the list.

If you want to create a nested list, then click the ‘Indent’ button. This moves the cursor one step to the right, ready for you to type in the indented text.

You can click on the ‘Indent’ button again to create two levels of nested bullet points.

As you can see in the following image, each level uses a different icon.

To decrease the indent, click on the ‘Outdent’ button.

This moves the cursor one step to the left, ready for you to start typing.

By pressing the ‘Indent’ and ‘Outdent’ buttons, you can create nested lists with multiple different levels.

By default, the WordPress block editor will use the ‘Medium’ font size, but you can switch between small, large, and extra large using the ‘Typography’ settings in the right-hand block options.

You can also add links or use standard text formatting options, such as bold and italic. This makes your lists even easier to scan and understand at a glance.

How to Create a Numbered List in WordPress

To create a numbered list in WordPress, simply press the ‘1’ key on your keyboard followed by a period/full stop (.)

WordPress will automatically turn this text into the first item in a numbered list.

You’re now ready to type the first item in the numbered list.

After that, just press the ‘Return’ key on your keyboard, and WordPress will create the next numbered point automatically.

Just like with bullet points, you can create nested lists by clicking on the ‘Indent’ and ‘Outdent’ buttons.

This creates an indented bullet point underneath the numbered bullet point.

Unlike bullet point lists, you can only use a single level of indenting.

When you are happy with how the list looks, simply click on the ‘Update’ or ‘Publish’ button to make it live on your WordPress website.

Method 2: Using Shortcodes Ultimate (Lists With Custom Icons)

The built-in List block is perfect for creating text-based lists, but sometimes, you may want to create a list with custom icons. This way, you can make your lists more visually appealing and better suited to your content theme.

The easiest way to do this is by using Shortcodes Ultimate. This plugin allows you to create lists with custom icons using simple shortcodes.

For this, we will use the free version of the plugin as it’s already enough for this method. But if you want more advanced features, you can upgrade to a paid plan.

To use Shortcodes Ultimate, go ahead and install the WordPress plugin in your admin area. After that, create a new post or edit an existing one in the block editor.

Now, click the ‘+’ button anywhere on the page and select the ‘Shortcode’ block.

At this stage, go ahead and paste the shortcode below into the block:

[su_list icon="icon: star" icon_color="#ffde0f"]
<ul>
 	<li>List item</li>
 	<li>List item</li>
 	<li>List item</li>
</ul>
[/su_list]

This shortcode will display three bullet list items with yellow star icons, like so:

To customize the icon and the color, you can go to the Fork Awesome website. This is where you will see all the icons you can use for your bullet lists. Here, simply look for an icon that you want to use.

For example, we will use the ‘flag’ icon. Now, copy the icon’s name, and go back to the block editor.

Once there, just replace star with it. So instead of icon: star, we will use icon: flag.

To change the color, replace the HEX code in icon_color="#ffde0f" with the HEX code of your desired color.

So if you want to make the icon green, you need to type in icon_color="#008000". You can learn more about finding the right colors in our article on how to find the perfect color scheme for your WordPress site.

Now, don’t forget to replace List item with your own text.

Here’s what our code looks like now:

When you are happy with how the list looks, you can either click on the ‘Update’ or ‘Publish’ button to make it live on your WordPress blog or website.

This is what the list looks like on the front end:

Method 3: Using a Page Builder Plugin (Best for Landing Pages)

If you want to create beautiful lists with custom styling, then you may want to use SeedProd.

This advanced WordPress theme and page builder plugin lets you create professionally designed pages using a simple drag-and-drop editor.

It also comes with a ready-made List block that lets you fine-tune every part of the list design, including changing the space in between individual items, replacing the standard bullet points with custom icons, and more.

Plus, it makes it easy to design standalone pages that have a unique design, so this is also a great choice if you want to add lists to a custom home page or landing page.

We have thoroughly tested the tool and have found it to be super beginner-friendly. To learn more, see our SeedProd review.

The first thing you need to do is install and activate SeedProd. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to enter your license key.

You can find this information in your account on the SeedProd website. After adding the license key, simply click on ‘Verify Key.’

Choose a Professionally-Designed Template

After that, go to SeedProd » Landing Pages and click on ‘Add New Landing Page.’

On the next screen, you’ll be asked to choose a template.

SeedProd comes with over 300+ beautiful templates that are organized into different categories, such as 404-page templates and custom WooCommerce ‘thank you’ pages.

Simply click on any tab to see the different templates within that category.

When you find a template you want to use, hover your mouse over it and then click the checkmark icon.

We are using the ‘Explosive Growth Webinar’ template in all our images, but you can use any design you want.

Next, you need to give the page a title.

SeedProd will automatically create a URL based on the page title, but you can change this to anything you want. For example, adding relevant keywords to a URL often improves your WordPress SEO and helps the page appear in relevant search results.

To learn more, please see our guide on how to do keyword research for your WordPress blog.

When you are happy with the title and URL, just click on ‘Save and Start Editing the Page.’

Build Your Custom Page Layout

SeedProd will now open your template in its drag-and-drop editor. On the right, you’ll see a live preview of the page design, with some settings on the left.

SeedProd comes with lots of blocks that you can add to your design, including blocks that allow you to add social share buttons, videos, contact forms, and more.

For more information, please see our guide on how to create a custom page in WordPress.

To add a list to your design, find the ‘List’ block and drag it onto the page.

This adds a vertical list to your page with a placeholder ‘Item 1.’

If you want to create a horizontal list instead, then click on the ‘Advanced’ tab and then select the ‘Horizontal’ button.

You are now ready to start building your list by selecting the ‘Content’ tab.

To replace the default text with your own messaging, click on ‘Item 1’ in the left-hand menu.

You can now type your list item into the small text editor that appears.

Here, you can also apply any formatting you want to use, such as bold or italic.

By default, SeedProd uses a checkmark for each bullet point, but it has a built-in library of icon fonts, which includes 1400 Font Awesome icons that you can use instead.

To replace the checkmark, simply hover your mouse over it and then click on ‘Icon Library’ when it appears.

This opens a popup where you can choose the icon you want to use instead.

You can use different icons for individual bullet points within the list, so this is a great way to create more interesting and eye-catching lists.

To create more bullet points, simply click on the ‘Add New Item’ button.

You can now add text and change the default icon by following the exact same process described above.

After adding all the items to your list, you can change the font size and alignment using the settings in the left-hand menu.

You can also increase or decrease the space between the individual list items using the ‘Space Between’ slider.

After that, you may want to change the color of the icons in the list. Even if you’re using different icons, SeedProd will apply the same color to every item so the design will always look consistent.

To make this change, click on the ‘Icon Color’ area and then choose a new color from the popup that appears.

With that done, you may want to click on ‘Advanced’ and look at some additional settings. We’ve already seen how you can switch between vertical and horizontal list layouts, but you can also change the text color and font.

To really make your list stand out, you can even add a box shadow or CSS animation.

Most of the settings in the ‘Advanced’ tab are fairly self-explanatory, so it’s worth exploring them to see what effects you can create.

With that done, you can continue working on your page design by adding more blocks and then customizing them using the settings in the left-hand menu.

When you are happy with how the page looks, just click the dropdown menu on the ‘Save’ button and select ‘Publish.’

You can now visit this page to see the list live on your online store or website.

Method 4: Using Code to Add Bullet Points and Number Lists (Advanced)

You can also create lists using the built-in WordPress code editor and HTML.

While the block editor is easier, using the code editor gives you precise control over the HTML structure, which can be useful for troubleshooting or pasting complex, pre-formatted lists.

For more on this topic, see our guide on how to edit HTML in the WordPress code editor.

To get started, open the page or post where you want to show the list. Then, click on the three-dotted icon in the upper-right corner and select ‘Code editor.’

The next steps will vary depending on whether you want to add a bullet point list or a numbered list.

How to Create a Bullet Point List Using Code

To create a bullet point list, start by typing in the following:

<!-- wp:list -->
<ul>

The ul stands for ‘unordered list,’ which means the list doesn’t have any numbers, and the wp:list tells WordPress that you are creating a List block manually.

Next, press the ‘Return’ key to move onto a new line and create your first list item:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Here, li stands for ‘list item,’ and we’re closing the line with /li.

You can repeat this process to create more list items. For example:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->

When you’ve finished, close the code block with another ‘unordered list’ flag:

</ul>
<!-- /wp:list -->

This gives us the following list code:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

As you can see in the following image, this creates a very simple list, but you can customize it by adding other HTML, such as heading tags.

How to Create a Numbered List Using Code

To create a numbered list, simply type in the following:

<!-- wp:list {"ordered":true} -->

You can then type in ol which stands for ordered list:

<!-- wp:list {"ordered":true} -->
<ol>

After that, add each list item by following the same process described above:

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Finally, close the ordered list using an /ol tag and wp:list.

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>
<!-- /wp:list -->

Frequently Asked Questions About Adding Bullet Points and Numbered Lists in WordPress

Here are some questions that our readers have frequently asked about adding bullet points and numbered lists in WordPress:

How do you create a list with bullets and numbering?

You can create a mixed list by using the ‘Indent’ button. Start a numbered list, and when you want to add a bullet point sub-item, simply click the ‘Indent’ button in the toolbar. This will create a nested bullet point under your numbered item.

What is the shortcut for bullet points in WordPress?

The main keyboard shortcut for starting a bullet point list in the WordPress block editor is to type an asterisk (*) followed by the spacebar. For a numbered list, type 1. followed by the spacebar.

How can you make a numbered list a) dl b) ol c) list d) ul?

You can make a numbered list using option (b), the <ol> tag in HTML. The ‘ol’ stands for “ordered list,” which is used when the sequence of items is important. The <ul> tag is used for unordered (bulleted) lists.

Is it better to use lists or divs?

It is always better to use proper list tags (like <ul> or <ol>) for list content instead of <div> tags. List tags provide semantic meaning, which is crucial for SEO and for accessibility tools like screen readers to understand your content’s structure.

We hope this tutorial helped you learn how to add bullet points and numbered lists in WordPress. You may also want to learn how to add collaboration in the WordPress block editor and our expert picks of the best Gutenberg block plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.