Mastering Bullet Points and Numbered Lists in WordPress: A Simple Guide

Creating well-structured content with bullet points and numbered lists may seem simple, but many users find it challenging to achieve the perfect look.

After testing various formatting techniques in the block editor, we’ve uncovered the most effective ways to create clean and consistent lists.

Through thorough experimentation in our demo environments, we’ve pinpointed several methods for adding and styling lists in WordPress, ranging from basic bullet points to personalized lists.

The best part is that you don’t need any coding skills to make your lists appear professional.

In this easy-to-follow guide, we’ll demonstrate how to add and format bullet points and numbered lists in WordPress.

When to Use Bullet Points and Numbered Lists in WordPress

Incorporating lists into your content is essential whenever you need to present information in a clear and organized manner. Selecting the appropriate list type is crucial for effective communication.

Opt for a numbered list when the sequence of items is significant. This format is perfect for step-by-step guides, top 10 lists, or any process that requires a specific order.

Choose a bulleted list when the order of items is not important. This format works well for showcasing product features, providing examples, or grouping related concepts.

Properly utilizing lists enhances visitors’ ability to grasp your content quickly, even if it contains intricate information. This not only improves user experience but also encourages visitors to stay longer on your WordPress site.

With this in mind, let’s explore how to add bullet points and numbered lists in WordPress. You can use the quick links below to navigate directly to the method you wish to use:

• Method 1: Using the Built-in WordPress List Block (Simple and Straightforward)
• Method 2: Using Shortcodes Ultimate (Create Lists with Custom Icons)
• Method 3: Using a Page Builder Plugin (Ideal for Landing Pages)
• Method 4: Using Code to Insert Bullet Points and Numbered Lists (For Advanced Users)
• Common Questions About Adding Bullet Points and Numbered Lists in WordPress

Method 1: Utilizing the Built-in WordPress List Block (Simple)

The simplest way to incorporate bullet points and numbered lists is by using the List block within the WordPress Gutenberg block editor.

This feature enables you to create basic numbered or bullet lists without the need for an additional WordPress plugin. However, this default block offers limited customization options.

If you wish to enhance your lists with custom icons, horizontal layouts, various colors, and more, we suggest exploring alternative methods mentioned in this article.

To begin, open the block editor for the WordPress post or page where you intend to add a list. Alternatively, you can access the widget editor to insert the bullet list into a widget area, such as a sidebar.

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

How to Create a Bullet Point List in WordPress

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

In the popup that appears, enter ‘List.’

When the appropriate block appears, click to insert it into the page.

This will create the first item in your bullet point list. Simply type the text you want for the first list item.

After completing that step, press the ‘Enter’ key on your keyboard to proceed to the next line. WordPress will automatically generate the second bullet point.

You can now enter the text for your second bullet point. Simply repeat these steps to add additional items to your list.

To create a nested list, click the ‘Indent’ button. This will shift the cursor one step to the right, allowing you to type your indented text.

Click the ‘Indent’ button again to create two levels of nested bullet points.

As illustrated in the following image, each level features a distinct icon.

To reduce the indent, click the ‘Outdent’ button.

This will shift the cursor one step to the left, preparing you to start typing.

By using the ‘Indent’ and ‘Outdent’ buttons, you can create nested lists with various levels.

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

You can also incorporate links or apply standard text formatting options like bold and italic. This enhances the readability of your lists, making them easier to scan and comprehend 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 (.)

WordPress will automatically convert this text into the first item of a numbered list.

You are now ready to type the first item in your numbered list.

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

Similar to bullet points, you can create nested lists by using the ‘Indent’ and ‘Outdent’ buttons.

This will create an indented bullet point beneath the numbered item.

Unlike bullet point lists, you can only have one level of indenting.

When you are satisfied with the appearance of your list, simply click the ‘Update’ or ‘Publish’ button to make it live on your WordPress site.

Method 2: Using Shortcodes Ultimate for Custom Icon Lists

The built-in List block is great for creating text-based lists, but sometimes you may want to enhance your list with custom icons to make it more visually appealing and aligned with your content theme.

The easiest way to achieve this is by using the Shortcodes Ultimate plugin, which allows you to create lists with custom icons using simple shortcodes.

We will utilize the free version of the plugin, which is sufficient for this method. However, if you desire more advanced features, consider upgrading to a premium plan.

To get started with Shortcodes Ultimate, install the WordPress plugin from your admin dashboard. Then, either create a new post or edit an existing one using the block editor.

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

At this point, paste the following shortcode 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 create a list with three bullet points featuring yellow star icons, displayed as follows:

To personalize the icon and color, visit the Fork Awesome website, where you can explore all available icons for your bullet lists. Simply find an icon that you would like to use.

For instance, we will select the ‘flag’ icon. Copy the name of the icon and return to the block editor.

Once there, replace star with the new icon name. Therefore, instead of icon: star, we will change it to icon: flag.

To modify the color, simply update the HEX code in icon_color="#ffde0f" using the HEX code for your preferred color.

If you want to change the icon to green, enter icon_color="#008000". For more information on selecting the right colors, check out our guide on finding the perfect color scheme for your WordPress site.

Remember to replace List item with your own content.

Here’s how our code appears now:

Once you are satisfied with the appearance of the list, click the ‘Update’ or ‘Publish’ button to make it visible on your WordPress blog or website.

This is how the list appears on the front end:

Method 3: Utilizing a Page Builder Plugin (Ideal for Landing Pages)

For creating visually appealing lists with custom styles, consider using SeedProd.

This powerful WordPress theme and page builder plugin allows you to design professional-looking pages effortlessly with a drag-and-drop interface.

It also includes a pre-designed List block that enables you to customize every aspect of the list design, such as adjusting the spacing between items, replacing standard bullet points with unique icons, and more.

Additionally, it allows for the creation of standalone pages with unique designs, making it an excellent option for incorporating lists into custom home pages or landing pages.

We have extensively tested the tool and found it to be very user-friendly for beginners. For more information, check out our SeedProd review.

The first step is to install and activate SeedProd. For detailed instructions, refer to our step-by-step guide on installing a WordPress plugin.

After activation, you will need to enter your license key.

You can find this information in your account on the SeedProd website. Once you have added the license key, click on ‘Verify Key’ to proceed.

Select a Professionally-Designed Template

Next, navigate to SeedProd » Landing Pages and click on ‘Add New Landing Page.’

On the following screen, you will be prompted to select a template.

SeedProd offers over 300 stunning templates categorized into various sections, including 404-page templates and custom WooCommerce ‘thank you’ pages.

Simply click on any tab to explore the different templates available in that category.

To use a template, simply hover over it with your mouse and click the checkmark icon.

We are utilizing the ‘Explosive Growth Webinar’ template for all our images, but feel free to choose any design you prefer.

The next step is to assign a title to your page.

SeedProd will automatically generate a URL based on your page title, but you can modify it as needed. Incorporating relevant keywords into your URL can enhance your WordPress SEO and improve visibility in search results.

For additional insights, check out our guide on conducting keyword research for your WordPress blog.

Once you’re satisfied with the title and URL, click on ‘Save and Start Editing the Page.’

Create Your Custom Page Layout

SeedProd will launch your template in its intuitive drag-and-drop editor. On the right side, you’ll see a live preview of your page design, while various settings are available on the left.

SeedProd offers a variety of blocks that you can incorporate into your design, including options for social share buttons, videos, contact forms, and more.

For further details, refer to our guide on how to create a custom page in WordPress.

To include a list in your design, locate the ‘List’ block and drag it onto your page.

This creates a vertical list on your page, starting with a placeholder labeled ‘Item 1.’

If you prefer a horizontal list, click on the ‘Advanced’ tab and select the ‘Horizontal’ option.

You are now set to begin constructing your list by selecting the ‘Content’ tab.

To customize the default text, click on ‘Item 1’ in the left-hand menu.

You can now enter your list item in the small text editor that appears.

Here, you can also apply any desired formatting, such as bold or italic styles.

By default, SeedProd uses a checkmark for each bullet point, but it also offers a library of icon fonts, including 1400 Font Awesome icons for your selection.

To change the checkmark icon, simply hover over it and click on ‘Icon Library’ when it appears.

This will open a popup where you can select your preferred icon.

You can assign different icons to individual bullet points in the list, making it easy to create more engaging and visually appealing lists.

To add more bullet points, just click the ‘Add New Item’ button.

You can then add text and change the default icon by following the same steps outlined above.

Once you’ve added all the items to your list, you can adjust the font size and alignment through the settings available in the left-hand menu.

You can also modify the spacing between individual list items using the ‘Space Between’ slider.

Next, you may want to change the color of the icons in your list. Regardless of the icons you choose, SeedProd will ensure that all items share the same color for a cohesive design.

To change the icon color, click on the ‘Icon Color’ section and select a new color from the popup menu that appears.

After making those adjustments, consider clicking on ‘Advanced’ to explore additional settings. We’ve already discussed switching between vertical and horizontal list layouts, but you can also alter the text color and font style.

To enhance the visual appeal of your list, you can add a box shadow or apply CSS animations.

Most settings in the ‘Advanced’ tab are quite intuitive, so take some time to explore them and discover the various effects you can achieve.

Once you’ve completed these changes, you can continue enhancing your page design by adding more blocks and customizing them using the settings in the left-hand menu.

When you’re satisfied with the appearance of your page, simply click the dropdown menu on the ‘Save’ button and choose ‘Publish.’

Visit this page to view the live list on your online store or website.

Method 4: Adding Bullet Points and Numbered Lists with Code (Advanced)

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

While the block editor is user-friendly, the code editor allows for precise control over the HTML structure, which can be beneficial for troubleshooting or inserting complex, pre-formatted lists.

For further information, check out our guide on editing HTML in the WordPress code editor.

To begin, open the page or post where you want to display the list. Click on the three-dotted icon in the upper-right corner and select ‘Code editor.’

The subsequent steps will differ based on whether you want to add a bullet point list or a numbered list.

Creating a Bullet Point List with Code

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

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

The <ul> tag represents an unordered list, indicating that the items are not numbered, and the wp:list command informs WordPress that you are manually creating a List block.

Next, press the ‘Return’ key to start a new line and add your first list item:

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

In this context, <li> signifies a list item, and we conclude this line with </li>.

You can continue this process to add more items to your list. For instance:

<!-- 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 -->

Once you’ve completed your list, close the code block with the closing unordered list tag </ul> and the WordPress block comment <!-- /wp:list -->.

This results in 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 illustrated in the image below, this generates a straightforward list, which you can enhance by incorporating additional HTML elements, such as heading tags.

How to Create a Numbered List Using Code

To generate a numbered list, simply input the following:

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

Next, type in <ol>, which denotes an ordered list.

Then, add each item to the list by following the same steps outlined above:

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

To finish the ordered list, close it with 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 -->

Common Questions About Adding Bullet Points and Numbered Lists in WordPress

Here are some commonly asked questions from our readers regarding the addition of bullet points and numbered lists in WordPress:

How can you create a list with bullet points and numbers?

You can create a mixed list by using the ‘Indent’ button. Start with a numbered list, and when you want to add a bullet point as a 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 creating bullet points in WordPress?

The primary 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.

What are the options for creating a numbered list: a) dl b) ol c) list d) ul?

You can create a numbered list using option (b), which is the <ol> tag in HTML. The ol stands for ordered list, which is used when the order of items matters. The <ul> tag is used for unordered (bulleted) lists.

Is it preferable to use lists or divs?

It is always recommended to use appropriate list tags such as <ul> or <ol> for list content instead of <div> tags. List tags provide semantic meaning, which is essential for SEO and for accessibility tools like screen readers to comprehend your content’s structure.

We hope this tutorial has helped you understand how to add bullet points and numbered lists in WordPress. You may also be interested in learning how to enable collaboration in the WordPress block editor and exploring our expert recommendations for the best Gutenberg block plugins for WordPress.

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