Tutorial: How to Create a Link List

Links are a vital part of the World Wide Web. Anything can be made into a link, from words and phrases to images. A link list is, as the name implies, a list of links. In HTML, a list of links can be easily coded with <ul>, <ol>, <li>, and <a> tags. In WordPress, these are the same exact tags used to create a link list inside a post.

In this tutorial, I will walk you through the process on how to create a link list inside a post. Lorelle’s article, “The Art of List Making,” is a valuable resource on making link lists and it serves as very useful information for this tutorial.

In this tutorial, I will guide you through creating three different types of link lists in both the text and visual editors: the unordered list, the ordered list, and the nested list.

Keep in mind that lists are styled by CSS set by the WordPress Theme. The Unordered list maybe represented by a circle, square or other shape of any color, or a graphic elements. Ordered lists maybe numbers, letters, or other ordered elements.

Please note that the links in these examples go nowhere. Your usage will include properly formed links.

Unordered List

The unordered list is a list of items which have no particular order. This type of list is useful for listing any kind of items that do not need to be presented in order.

The unordered list in the WordPress Text Editor would be coded exactly like the code block below.

List of desserts:
<ul>
	<li><a title="Strawberry And Cake Home Page." href="#">Strawberry Shortcake</a></li>
	<li><a title="Velvet Cupcake Home Page." href="#">Red Velvet Cupcake</a></li>
	<li><a title="Pumpkin Pie Home Page." href="#">Pumpkin Pie</a></li>
	<li><a title="Apple Strudel Home Page." href="#">Apple Strudel</a></li>
	<li><a title="Oreo Ice Cream Cake Home Page." href="#">Oreo Ice Cream Cake</a></li>
</ul>

To add bullets in the Visual Editor of WordPress:

  1. Click the Bullet List button on the toolbar
  2. A bullet point will appear in the content area. Type the first item on your list in a link or not. Click ENTER to go to the next line.
  3. Keep going and when you are ready to finish your list, press the Bullet list button again to stop the process.

Ordered List

The ordered list is for listing items in a specific order. For example, a list of steps in a recipe or a list of products in ascending or descending order work best in ordered lists.

List of best desserts:

  1. Strawberry Shortcake
  2. Red Velvet Cupcake
  3. Pumpkin Pie
  4. Apple Strudel
  5. Oreo Ice Cream Cake

In the HTMl, the only change is to the <ul> to make it an ordered list with <ol>.

List of desserts:
<ol>
	<li><a title="Strawberry And Cake Home Page." href="#">Strawberry Shortcake</a></li>
	<li><a title="Velvet Cupcake Home Page." href="#">Red Velvet Cupcake</a></li>
	<li><a title="Pumpkin Pie Home Page." href="#">Pumpkin Pie</a></li>
	<li><a title="Apple Strudel Home Page." href="#">Apple Strudel</a></li>
	<li><a title="Oreo Ice Cream Cake Home Page." href="#">Oreo Ice Cream Cake</a></li>
</ol>

In the HTML editor, this process is the same, though the user is more likely to hand code the lists.

Nested Lists

The nested list is a combination of unordered and ordered lists. Each list item inside an unordered or ordered list can have an additional unordered or ordered list inside. This type of list is best for complex and lengthy lists, such as a list describing the top five countries to visit with additional cities listed underneath each country mentioned.

List of best types of desserts:

  1. Milkshake
  2. Pie
  3. Ice Cream Cake
  4. Cupcake
  5. Strudel

The HTMl would look like this:

<ol>
	<li>Milkshake
<ul>
	<li><a title="Mint Chocolate Chip Milkshake Home Page." href="#">Mint Chocolate Chip Ice Cream</a></li>
	<li><a title="Strawberry Milkshake Home Page." href="#">Strawberry Ice Cream</a></li>
</ul>
</li>
	<li>Pie
<ul>
	<li><a title="Pumpkin Pie Home Page." href="#">Pumpkin</a></li>
	<li><a title="Blueberry Pie Home Page." href="#">Blueberry</a></li>
</ul>
</li>
	<li>Ice Cream Cake
<ul>
	<li><a title="Oreo Ice Cream Cake Home Page." href="#">Oreo Ice Cream</a></li>
	<li><a title="Strawberry Ice Cream Cake Home Page." href="#">Strawberry Ice Cream</a></li>
</ul>
</li>
	<li>Cupcake
<ul>
	<li><a title="Velvet Cupcake Home Page." href="#">Red Velvet</a></li>
	<li><a title="Strawberry Cupcake Home Page." href="#">Strawberry</a></li>
</ul>
</li>
	<li>Strudel
<ul>
	<li><a title="Apple Strudel Home Page." href="#">Apple</a></li>
	<li><a title="Other Strudels Home Page." href="#">Another flavor since I need to try more strudels</a></li>
</ul>
</li>
</ol>

Conclusion

As you can see, each of the three lists can easily be typed into a WordPress post. Whether for listing desserts or creating a complicated list of steps, lists are a key part of writing a WordPress post.

For more information on link lists and WordPress, here are resources in this link list:

Advertisements

One thought on “Tutorial: How to Create a Link List”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s