Creating an image gallery with WordPress bookmarks

By Justin Tadlock on January 9, 2009

In this third part of the Doing more with bookmarks series, I’ll show you how to create a gallery of images using your WordPress bookmarks, also known as links. This technique can actually be used for more than an image gallery though.

Here are a few uses for the method I am about to explain, but I’m sure there are plenty more ideas you can come up with:

Visually-interesting bookmarks
Easy sidebar ads
Images that link to cool parts of your site

I’m currently using this method on my WordPress Bookmarks page.

Adding images to your bookmarks

The first thing you need to do is create a new link category, which is located under the Link Categories section of your WordPress dashboard. Also note the category ID when you create it because we’ll use it later.

Once your category is created, you’ll want to add some links. Both this step and creating the link category were detailed in the last bookmarks tutorial. We’ll need to add a little extra information to our link though — an image URL.

On the Add New links page, there’s a meta box labeled Advanced, which has an input field for an Image Address. There, you’ll add the URL of the image you want associated with your bookmark.

Bookmarks Image Address

Coding the bookmarks gallery

Now that you’ve created your links and given them images, you’ll want to show them off with some super-simple code. You should add this in a template file. I’m using a page template for my WordPress Bookmarks page, but you may decide to do something such as add this to your sidebar.php.

First, you need to set up your arguments. Change the category ID of 3to the ID of your category from the first step. You can also change the order and/or the orderby arguments.

<?php $args = array(
	'category' => 3,
	'order' => 'ASC',
	'orderby' => 'name',
	'categorize' => false,
	'title_li' => false,
	'before' => false,
	'after' => false,
	'show_images' => true,
	'category_before' => false,
	'category_after' => false,
); ?>

After that, we’ll call up the wp_list_bookmarks() template tag and wrap it in a <div>.

<div class="bookmarks-gallery">
	<?php wp_list_bookmarks($args); ?>
</div>

Styling the bookmarks gallery

How to style the gallery is going to vary quite a bit from theme to theme and also depending on what you decide to do with the link images.

Here’s the CSS I’m using for my gallery. You can adjust it to fit your needs.

.bookmarks-gallery {
	text-align: center;
	margin: 0 auto;
	}
.bookmarks-gallery img {
	width: 120px;
	height: 120px;
	margin: 0 8px 15px 8px;
	}

More ideas with bookmarks

I’m hoping by now that you’re thinking that WordPress bookmarks are actually pretty cool and that we can do a lot more stuff than just create a standard blogroll with them.

I’ll be happy to write a tutorial up on any ideas you might have using them. Or, if you’ve used them in an interesting way, feel free to let everyone know about it in the comments.

Tagged WordPress, WordPress Tutorials

Articles in this series