How to Create Awesome Lists Using Your WordPress Media Library

How to Create Awesome Lists Using Your WordPress Media Library

WordPress Media Library Lists - Create awesome lists with your media library!

Your WordPress Media Library can be one of your greatest allies when it comes to creatively displaying lists in your pages, posts and widgets.

Lists can be one of the most efficient ways of conveying information to users of your WordPress site. We all use ’em (some sparingly, some extensively) to highlight important elements in the body of our posts and pages.

If you use lists on your site, creating different list types for different needs can help your users intuitively grasp what the information is designed for. From custom bullets, to background images, to clickable grid displays, you’re limited only by your imagination… and maybe your CSS skills :-) This tutorial will guide you on the basics of creating some really nifty stuff!

Let’s start by making some custom bullet lists

Using custom bullets for different types of lists is one of the easiest things you can do to vamp up the usability of your site. Here’s an image to give you an idea of what we’ll be doing in this 1st part of the tutorial:

WordPress Media Library Lists - Screenshot of custom bullets

To create bullet lists like the ones above, you only need to do 3 simple things:

  1. Give your list a special class when you’re adding it to your page, post or text widget.
  2. Upload an image to your WordPress media library to use as a bullet.
  3. Add a little bit of CSS to your style-sheet to grab that icon for your custom list.

1) Let’s say you want to create a list of favorite items and will use a star icon like the example above. In your post editor (or page or widget), simply add a class name to the <ul> tag of your list, like below (you can name it anything you like). You’ll need to switch to the HTML tab if you’re using the visual editor to do this.

<ul class="fav">
	<li>This is the first item in the list.</li>
	<li>Here's another list item.</li>
	<li>Oh, but wait, there's more!</li>
	<li>Can this go on much longer?</li>
	<li>All right then, let's throw in a final item.</li>
</ul>

2) Remember to Save your post! Then go to your WordPress media library to upload a new image. Once you’ve uploaded the image you want to use for your custom bullet, copy the File URL.

WordPress Media Library Lists - Screenshot of Media library file URL

3) The final step is to add a simple bit of CSS to your theme’s style-sheet. There are 3 ways you can add custom CSS to your theme or child-theme (use of a child-theme is highly recommended if you’re gonna be customizing anything!)

  1. Add custom styles directly to the theme’s style.css file.
  2. Add them via the “Theme Editor” in your WordPress admin area.
  3. Use the new “Custom CSS” panel added to Jetpack (I love it!)

Whichever method you choose, first define the selector to use. In this example, we’re targeting the list items (li) of our unordered list (ul) to which we gave a class name “fav”. That becomes ul.fav li as below. The style rule to use is list-style-image. That will replace the bland little square, dot or dash with your fancy new icon in any lists you assign the “fav” class. (Obviously, the image File URL you copied earlier goes where it says ‘FULL-URL-TO-YOUR-UPLOADED-IMAGE-GOES-HERE’).

ul.fav li {
list-style-image:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-GOES-HERE');
}

Save and/or re-upload your style-sheet. Then, go refresh the page you added your custom list to. You should see your new custom bullet before each item. You can create as many lists with custom icons as you like in this manner. Just remember to give each list-type a distinct class name that you make up, and that has no risk of conflicting with existing WordPress classes. Otherwise, you may wind up seeing your bullet icon showing up on your site in the strangest places!

Note that the icon images you use for custom bullets should be small; 16×16 pixels is ideal. One of the most commonly used icon sets around is FamFamFam. Or, if you really want to go nuts with icons, check out over 30,000 of them at FreeIconsWeb.

Now let’s make a list with clickable background images

Making an image list can really help to spruce up an otherwise bland display of choices for users of your site. This part of the tutorial will show you how to build a list with clickable images like in the example image below.

WordPress Media Library Lists - Screenshot of list with clickable background images

The process of building a list with background images is quite similar to creating custom bullets. There are a few details that differ however. Let’s take it step-by-step again.

1) This time, along with adding a class name to the <ul> tag like we did for the bulleted list, we need to identify each list item (<li>) with a specific ID. This is required only if you want unique images for each list item; if you’ll be using the same image for all items in the same list, there’s no need to give each a separate ID. Again, you can identify them with any names you like. Below is the code I used to create the list in the image above; go ahead and copy it to your test page.

<ul class="gizmos">
	<li id="giz1"><a href="URL-TO-LINK-TO">This is the first item.</a></li>
	<li id="giz2"><a href="URL-TO-LINK-TO">Here's another item.</a></li>
	<li id="giz3"><a href="URL-TO-LINK-TO">And there's more!</a></li>
	<li id="giz4"><a href="URL-TO-LINK-TO">How can this go on?</a></li>
	<li id="giz5"><a href="URL-TO-LINK-TO">Let's add a final item.</a></li>
</ul>

2) Upload your images to your WordPress media library. For this step, please don’t just upload any old images you have lying around on your computer. Get creative and design them. It’s important that they be all the same size, and exactly the size you want for your list items.

If you want to use the same .png images I used for the list item backgrounds in this example, and follow along by copy/pasting everything, you can grab them in a zip file here: http://www.filedropper.com/custom-bg_1. Once you get yourself familiar with how it all works, you can create your own.

Once you’ve uploaded your images, copy the File URLs to a blank Notepad file (no need to save it, just keep it handy for the next step).

3) For lists with a different background image in each list item, we’ll need to style more than just the <li> tag. We need to make the links (the <a> tag) the same size as the background images. Also, we define the background images for each item by assigning them to the <a> tags to make everything clickable. Copy the following to your style-sheet and save/re-upload.

ul.gizmos li {
	height:60px;
	list-style:none;
}
ul.gizmos a {
	display:block;
	height:42px;
	width:180px;
	padding:10px 0 0 70px;
}
ul.gizmos a:hover {
	color:#f00;
	border:1px solid #f00;
	border-radius:10px
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
ul.gizmos li#giz1 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#1-GOES-HERE');
}
ul.gizmos li#giz2 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#2-GOES-HERE');
}
ul.gizmos li#giz3 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#3-GOES-HERE');
}
ul.gizmos li#giz4 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#4-GOES-HERE');
}
ul.gizmos li#giz5 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#5-GOES-HERE');
}

A little explanation of the above CSS may be in order here.

  • Although the images (if you’ve used the ones from the zip file above) are 250×52 pixels, the list items (ul.gizmos li) have a height of 60px to create a bit of vertical breathing room between them.
  • The links (ul.gizmos a) are set to display as block so we can define their width and height.
  • The dimensions of the links have been set to 170x42px to accommodate the padding; 80+170=250px for the overall width, and 10+42=52px for the overall height. The padding is so the small line of text in each link appears centered. If you don’t want the padding, remove it or adjust it as it suits you, but remember to adjust the dimensions of ul.gizmos a accordingly.
  • I’ve added a red text color, as well as a red border when the links are hovered over. If you don’t like red, change or remove it. The 3 border-radius properties are there to ensure that the border shows up in all browsers with corners rounded like the images. Again, if you don’t like it, change it :-)

Go ahead and experiment a bit with using your WordPress media library as a base for clickable lists with background images. The more you play around with things, the more you can discover how to improve upon them.

How about a clickable grid?

Making a clickable grid display like the image below is almost exactly the same process as with a clickable list like we just made. The only real differences are a few small modifications to the CSS (and properly formatted images, of course).

WordPress Media Library Lists - Screenshot of grid list with clickable background images

1) To make this same grid display as an example to play around with, here’s the code to add to your page or post.

<ul class="gridlist">
	<li id="grid1"><a href="URL-TO-LINK-TO">Photo</a></li>
	<li id="grid2"><a href="URL-TO-LINK-TO">Video</a></li>
	<li id="grid3"><a href="URL-TO-LINK-TO">Sofware</a></li>
	<li id="grid4"><a href="URL-TO-LINK-TO">Games</a></li>
</ul>

2) Upload your images to your WordPress media library and copy the URLs. If you want to use the same .png images I did for this example, you can download the zip here: http://www.filedropper.com/custom-grid

3) Below is the CSS you need to make this grid display:

ul.gridlist {
	max-width:274px;
}
ul.gridlist li {
	height:135px;
	width:135px;
	list-style:none;
	display:inline-block;
	vertical-align:top;
}
ul.gridlist a {
	display:block;
	height:25px;
	width:105px;
	padding:100px 0 0 20px;
}
ul.gridlist a:hover {
	color:#f00;
	text-decoration:none;
	border:1px solid #f00;
	border-radius:22px;
	-moz-border-radius:22px;
	-webkit-border-radius:22px;
}
ul.gridlist li#grid1 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#1-GOES-HERE');
}
ul.gridlist li#grid2 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#2-GOES-HERE');
}
ul.gridlist li#grid3 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#3-GOES-HERE');
}
ul.gridlist li#grid4 a {
	background:url('FULL-URL-TO-YOUR-UPLOADED-IMAGE-#4-GOES-HERE');
}

You’ll notice a few changes in the above CSS (compared to the previous exercise):

  • The ul.gridlist has a max-width applied to ensure it only displays 2 items across. If you want it to display 3 or more across, simply increase its max-width to accommodate the additional width of more list items.
  • The list items themselves (ul.gridlist li) are a bit bigger than the images to ensure a bit of spacing.
  • The list items have also been set to display:inline-block; that’s what ensures they show up in a row. The vertical-align:top is there so they all line up nicely with each other.
  • As a final detail (that I forgot in the previous exercise), I’ve added text-decoration:none; to the links when hovered over so we don’t get that ugly underline.

On a final note, with the upcoming release of WordPress 3.5, the WordPress media library is in for a bit of an overhaul. Among the new features that should be included will be a way to categorize your media. Ooh, fun!

I hope you enjoyed this little tut as much as I did writing it! If you do create some cool stuff, please leave a comment with a link so we can all be inspired. If you need a hand with anything, leave a comment and I’ll try to help out. Thanks for reading! :-)