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.

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.

It’s such an honor to be on your bookmarks list
Pavel Ciorici — No problem. I’ve only recently come across your site, and I’ve enjoyed the content you’ve been posting.
I have just used this method to show a ‘graphic blogroll’ in my sidebar and it worked like a dream. Thanks.
Great article! Bookmarks was actually one of the things that i wanted to start customize on my blog – this will save me a couple of hours.
Lyndi — Very cool. I’m happy to see you adopting more effective methods for displaying bookmarks.
Thomas Norsted — I’ve never really done much with bookmarks until recently, but they are actually a pretty powerful feature of WordPress. Let me know if you come up with anything interesting or if you make a gallery of your own.
Excellent writeup, Justin. I did something like this on my site a couple months ago = http://www.theadfeed.com/friends/
Love the gallery format much more than the typical list.
Travis — Cool. It doesn’t look like you’re using
wp_list_bookmarks()for your gallery, but it can definitely be done.Hi Justin,
This bookmark thing is really very powerful. Thanks for sharing these inspiring tips.
I think I can make a portfolio page with some hacks along this technique. Can you please post another one explaining creating advanced portfolio page with jquery integrated, rating system integrated, blah blah….?
You just saved me a bunch of time Justin. Here I was trying to code everything by hand for an idea I have, and here you go pretty much automating the process.
I’m off to my test blog to create.
A BIG Mahalo!
J Mehmett — Yep, bookmarks are pretty powerful.
You can definitely make a portfolio page, but a rating system wouldn’t be something you’d do with it because links don’t have a meta section to save the data.
Ron — I used to waste a lot of time coding things by hand. Now, I try to take advantage of the powerful tools WordPress puts in my hands instead.
Wonderful Tips Justin, thanks for sharing
Pretty nice one justin. Time to try it out, will comment back.
Thanks for sharing this, Justin. It definitely breaks up the typical “blogroll” text list and gives it some life!
I just stopped by your blog and thought I would say hello. I like your site design. Looking forward to reading more down the road.
Where are we using the following css:
.bookmarks-gallery img {
width: 120px;
height: 120px;
margin: 0 8px 15px 8px;
}
If u have a look at my book mark page at
http://techiezone.in/cool-sites/
It does not take the css of the image. So justin please explain how to use the css for the image?
It seems that reveloutiontwo.com have stopped free downloads.
Jauhari — You’re welcome. I hope you make good use of it.
Deven — Let me know how it works out. I’d like to see what you come up with.
Quick-Loss — That’s an interesting name.
I’m not one for the typical blogroll, so I figured I might as well do something with the WordPress Links Manager.
Haiboss — Thank you. Well, just make sure to subscribe to the feed to stay updated.
Ajay M — The CSS I provided is just an example that I use here on this site. You’ll have to work out what works best within your theme because each theme is different.
Jai — Nope, the free downloads are no longer available there. I’m not sure what that has to do with a post about using WordPress bookmarks though.
You’re freakin’ brilliant! Love your blog. Thanks
Is it possible in any way to resize the images automatically, for example with timthumb? I can’t find the handles for something like that in the wp_list_bookmarks() function.
Anyway, thanks for sharing this great tip.
I overhauled my showcase page in just over an hour, while bringing my links up to date. Perfect, simple, elegant solution. Thank you Justin!
Morten Brunbjerg Bech — I don’t really know. You’d just have to try it out. Personally, I prefer just uploading the image in the size I want it to be displayed in. Maybe adjusting it a bit with CSS.
Luke Weese — Awesome. Thanks for sharing. It’s nice to see this technique being put to good use.
I see there is a box to enter RSS feed for the link. I wonder if there is a plugin to parse the RSS addresses entered here and show them in a page or post using short-codes. There can be short-codes for link categories or link IDs.
Hey, this is excellent. I’m trying to do a “Showreel” Web Page, so this links point to FLV Flash Video file. Is there any way how to ADD “rel=shadowbox;player:flv” to the of the specific category? That shadowbox will show them?
Have you noticed this method has increased the load time of your page? I really love the look of this and am excited to add it to my site.
And what about those blogs that don’t have a customized image? Does WordPress use an automated graphic?
I have my comments set to use the Monster graphics. Will that show for the blogs that don’t have an associated avatar?
Hi Justin, I use this technique (with some jQuery) to make a credit page for a Nonprofit Organisation website :
http://www.cat-adapei56.com/credits-et-copyrights/
I think it’s a good way to display this type of information. Thanks
This is really good and help and great for customizing sidebar, thanks for sharing really appreciate it.
Is there a way to do the same but with post ?
I would like to display the list of my post on the front page, as thumbs, just like what you did with bookmarks. Is it possible ?
cardiogirl — Of course, more images on a page would increase the page load time. That’s only natural.
You have to create your own images. There’s no automation in that.
I don’t uderstand the question.
Aysseline — Cool. I thought about adding a little jQuery magic to mine but was too lazy.
Ronald Nunez — I don’t personally like images in my sidebar. I like to spread them out a bit, but this method would work well within a sidebar.
nlx — Yes, that is possible.
Would you give some tips ? I don’t know where to start… :/
nlx — I might write a tutorial on something like that one day, but it’s outside the scope of this tutorial. A good place to ask about these sort of things is on the WordPress.org support forums.
Hey there Justin,
I read you post and I have managed to implement the basic idea however I have 2 questions:
1. how can I make the code automatially add the text links beneath the images as well (important for SEO)
2. I read here that someone managed to create a graphic blogroll which is very interesting – how could i go about doing this as well?
Thanks so much for any help
findigart — I’ll answer the best I can.
1) You can’t do that with the
wp_list_bookmarks()template tag. You’ll have to write a custom function for looping through the bookmarks. And, this means pretty much crap to SEO, and don’t let anybody tell you any different.2) ??? This entire tutorial is about creating a graphic blogroll.
Hey Justing,
thanks for the answer.
concerning the graphic blogroll – i got the point. concerning SEO – where do you get this information from? cause i’ve been reading a lot about this and opinion do differ…
oh, and by the way i’ve been meaning to ask someone about this and turned out it is you: how do you go about doing that dotted underline thingie that turns to a question mark and pops up with explanation on the phrase as you did in the case of the phrase ‘SEO’?
thanks!
Excelent tutorial, thanks
i saw this on someone else’s site and was wondering how to do it. glad i found this.
Thanks for sharing this. I’ll try to implement this on my website.
I was trying something out similar and came across your article. It’s going to be of great help but the only problem is, how could I use this if I have to resize the image (using timthumb script). I suppose, the images need to be already cropped when creating the link or can they be resize using the timthumb script? Any ideas, Justin?
Got it… I used get_bookmarks() function and custom loop and using timthumb resized the images… works like a charm
Hi! and thanks for the great tutorial! I was wondering…could I use this technique in this way:
Could I set up links that link inside my site. For example…could I have these links be in the right column, and then have them link to a page that has the same thumbs on the side again, but on the right there will be the image for that thumbnail..which would then lead to a post?
For example, if you look at my site http://www.carlsonillustration.com This site is built staticly in plan html and css…and when you click on an image it opens a new page with that image…in essense, can i do your technique…make the thumbnails link so that when you click it will open the image to the right??
I am rookie obviously.
Thank you!
And what about those blogs that don’t have a customized image? Does WordPress use an automated graphic?
I have my comments set to use the Monster graphics. Will that show for the blogs that don’t have an associated avatar?
Thanks
findigart — I get my information on SEO from experience. Gaining experience yourself is worth more than any guide you’ll ever read.
As for the dotted underline and question mark, I add this to the
acronymtag in my CSS:lovecolors — You’re welcome.
Jenny — I’m glad you managed to find this tutorial them.
Shan — Let me know when you get it implemented. I’d like to see it.
Hetal — You con’t use your image script with the
wp_list_bookmarks()function. Well, you’d have to write a custom function for it.Adam — Yes, you could use this technique for doing something like that. Just add in the images and correct URL.
Brandveiligheid — No, WordPress wouldn’t use an automated graphic. There’d be no reason for it too. I’m not sure what this has to do with avatars.
I guess it’s never too late for a comment… As always you contribute with top notch tutorials!
I’ve finally implemented this and created a dedicated Page for bookmarks – it really stands out this way and looks more ‘tempting’ than simple standard links.
Justin – great article. I didn’t know you could do this. I will definitely be coming back to the to try to implement it. I’ll let you know how I get on.
Justin you are the man – I have implemented a similar technique following another source. I am trying to figure to out how to automatically pull up favicon images for the links in the bookmarks so there is no need to manually input images for each link. If the website doesn’t have a favicon then we can setup some default image. Maybe you can develop a plugin too like the Blogroll Favicon plugin but better customization.
Yo Justin, thats the first time ive visited your blog! and i must say im really impressed! nice tuts and plugins. and i´ll try it on my blog (the image gallery with wordpress bookmars) thx
Fantastic. Thank you for all the info. I am just about to start a wordpress site and this will come in handy. I will be back if i need more info.
Cheers
Excellent. Appreciate this alot!
Simple, quick, efficient and most important good looking!
That’s a great application of your work!
I’ll tweak some of my blogs with this trick
Humm… i love to try this… but i am still confuse with the code… any other simple methods for newbie like me?
Very very interesting ! It’s so different from the classical blogroll text list… and much more “sexy”
Congratz !
Hey Justin
I’m using your idea/code for a theme I’m developing, and it works perfect in every browser, except, of course, IE6. The images aren’t aligning properly – probably because the float:left property, but I don’t know for sure. Any advice on how to properly align the images horizontally that will suit IE6?
Thanks!
Hi Justin…I am a Word Press newbie and am trying to redesign my web site and set up a portfolio of my web design work. I couldn’t find any gallery plugins in WP that allowed you to link your thumbs to an actual website, but then found your blog
However, I am having trouble getting the bookmarked images from the sidebar over to my Home page. I modified the index.php template and added your PHP code listed above in the Content division, then applied that modified template to my Home page, but nothing is showing up. The link and category show up just in the side bar, so its probably the way I set up the page template. Do you have any ideas on this?
Could you possibly show how to create a bookmark gallery as you did above in a single post (as opposed to in a sidebar or page)? Can’t get the same results in a Post as I did in the sidebar.
Thank you!
Excellent. Appreciate this alot!
Thx
hey.. i was also trying to add gallery in new post.. i found one simple solution is .. that add multiple images in the same post.. once you have multiple images .. then gallery will create automatically (check out right side tab when you add 3rd image in same post)…
there are better solutions available but currently i am okay with it.. i hope it helps..
Is there any way to do this without page template?
I want to show a partnerlist with images in the middle of the site content, so..
I love this – it’s exactly what I was looking for, thanks so much! I’ve got it all working but I was wondering how I’d go about tweaking the code to make it work even better for me. I’ve got a bunch of images and I don’t really want to display them all at one time. Would it be possible to add a bunch of links, then use the array to randomly choose say 12 of them to display every time the page is reloaded? I’m a PHP noob but I know there’s an array_rand function but I have no idea how to impliment it – or any idea how to limit the gallery to just show 12 pics even if I could get that part to work.
Thanks again for this tutorial!!!
To reply to my own comment….I figured out how to do this on my own but wanted to post in case anyone else is interested. I added the parameter “limit” and set it to the # of pics I wanted to display, and set the “orderby” parameter to rand. Easy!
Hey
Can anyone help me get started with the css? I wants to get rid of the category name and the have the images align next to each other, 3 in a row and 9 images for example. How can I get rid of the little arrows next to each image.
thanks
woo! i made mah link page! http://oh.so-very.me/site/blogroll
hehe thanks for this tutorial you are mah hero!
How can we display the Bookmarks Links with website snapshots using BM Shots plugin?
Anyone try that? It will make the WP Links really useful…
BM Shots (by binarymoon ) is a plugin that makes use of WordPress api for automatically creating screenshots of your website.
Fantastic info…. I was looking for a way to display links to upcoming events on a website (most of which don’t have a corresponding post.) This method worked perfectly and I was able to embed it into my jquery responsive image slider.
The site is still early in development, but here’s a still shot of the end product using your method… Thanks a ton!
http://cl.ly/3F0Z1d1b3P2M193M2d06
Hi Justin, I have a Real Estate website built on wordpress and I was wondering if in your tutorial about building a gallery view of bookmarks can be addes the bookmark name and description and still be grid view, you have a great site…..
This would be a great plug in
Hey Justin. Great tutorial! One thing I don’t quite get. I am trying to display the links+images for a particular link category (“topsponsors”) on the footer of all my sites pages, except for one page that will need to display all links+images from the same category as the footer, plus one other category (“2013sponsors”) in the body of one specific page. So, I added the function to functions.php and inserted the call to it from my global footer. I also created a separate template to display the “2013sponsors” category links+images. That works. The trouble is, that the footer also brings in ALL the other categories and not just the “topsponsors” links. This produces way too many links and their associated images. That is more along the lines of what I want on the page that displays two specific link categories (topsponsors AND 2013sponsors). A sponsor can be both a “2013sponsor” and a “topsponsor” I checked the id for the categories and I have that right. It seems like I need to have two separate functions in my functions.php or add some page logic. Any ideas?
Figured it out. I had a typo in one of my arguments. Sorry to bother.