How to Setup a Sponsors/Clients Page Using the Link Library

How to Setup a Sponsors/Clients Page Using the Link Library

If you are hosting an event with sponsors or even a service provider who wants to showcase clients, I would recommend using the Links Library. It is a native content type to WordPress and for the non-bloggers out there it’s rarely put to use. Using this method allows you to template the Links Page as logos with perfect spacing and consistency. If you try to do it with a bucket of images within a page or post, it gets rather cumbersome to edit and aligning things can get messy.

So I’m going to walk you through an effective use of the Links Library even if you aren’t blogging. To start you will need to install the Links Library plugin as well as collect all the logos for your sponsors/clients including links to their respective websites. Once all that is ready to go we can begin by creating a category of links for the page you are building. Let’s assume you’re going to create a sponsors page like the one I made for Canadian Music Fest as seen below.

1) Create a Links Category with all Sponsors/Clients

Login to your WordPress admin area and go to the Links content section. Therein you’ll see a subpage for “Link Categories” where you can create a category for the series of links you will be adding to the page. Now personally I like the “assembly line” approach coined by Henry Ford which means that the first thing we’ll do after the category is made is create all the links but without the images. So go ahead and create your first link within this category including the name of the sponsor/client and their website url and perhaps a description if you are so inclined. You may also want to set the link to open in a new window  (_blank) so that your website is still open underneath.

2)  Crop & Resize all Logo Images to the Same Dimensions

Now this may or may not be possible as some logos are designed in a landscape format while others are in a portrait format.  You can however resize everything to the same height which will keep the rows of logos aligned and then you can use  CSS to space them out so that all the columns are aligned (more on that in step 3). I would recommend using a height of 75 px to 100 px and to save time, use Fireworks to batch process all your logos automatically… the same can be done with Photoshop and I guarantee you’ll find a tutorial for it on Youtube. Once all your images are sized properly, you can upload them all in one pass by going to the Media Library within WordPress. You’ll then have to take the image url for each logo and paste it into the Links Library for each link. At that point you’ll have the Links Library fully loaded and it’s now just a matter of configuring the page layout.

3) Configuring the Links Library Plugin Layout

So to save you time I’m going to give you some of my code and configurations so that you don’t have to write your own. Please reference the screenshot below and enter <li class=”links”> as a class name for the li tag (list-item)

Then you’ll want to paste this CSS code into your theme;

.links {
display: block;
float: left;
height: 125px;
margin: 0 !important;
text-align: center;
vertical-align: middle;
width: 275px;
}

Finally you’ll paste your Links Library shortcode ( something like [link-library settings=1] ) into the page you’ve created to display everything. Click on preview and you should see a nicely tiled gridview of your sponsors/clients. Please note that you may need to tweak the numbers for height and width within the CSS class to wrap around your images nicely.