Codeable info

How To Create A Blogroll Page

Posted on by in WordPress Tutorials

Those who keep an active blogroll usually place the links in their blogs sidebar or footer. Though sometimes it isn’t practical to do so, particularly if you have an extensive list of links. Therefore you may want to consider creating a dedicated blogroll page. This means that all of your links will be placed in one location, rather than duplicated over dozens of pages and posts on your site.

There are numerous plugins which easily collate all your blogroll links into one page. I personally prefer to manually add links to a link page myself as it allows me to customize the page more easily (e.g. add graphics/banners etc).

Though there is no disputing that using WordPress’s built in links system is much easier if you just want a simple list of links associated sites and blogs. And whilst it is straight forward to do this with a plugin, I sometimes prefer to create the links page manually using a template since plugins can sometimes clash with each other. Thankfully, the blogroll template is one of the easiest templates to create :)

Creating a Blogroll Template

The first thing you need to do is open up your text editor and save a blank file as blogroll.php (note, you can call it anything you want e.g. sponsors.php, friends.php etc). You can edit this file directly on your computer and then upload it to your theme folder. If you prefer to edit files via your WordPress panel (which I do) then you need to upload your blank blogroll.php file to your theme folder online and make sure you change the file permissions to 666 (Owner, Group and Public read and write).

The first piece of code you need to add to your blogroll.php file is:

<?php 
 
/*
 
Template Name: Blogroll
 
*/
 
?>

Make sure the above code is at the top of your blogroll.php template. Then you need to add the code from your Page Shell underneath that (the Page Shell is the code from your page.php template with the WordPress Loop removed).

Then we simply need to add the wp_list_bookmarks Template Tag. This function calls up your blogroll and lists all links. By default all links are divided into categories with a category heading though you there is over a dozen parameters available which allow you to change the way the links are displayed. Please refer to the wp_list_bookmarks entry at the WordPress Codex.

Here is an example of a Blogroll template:

<?php 
 
/*
 
Template Name: Blogroll
 
*/
 
?>
 
 
<?php
 
get_header(); ?>
 
 
<div id="content" class="narrowcolumn">
 
 
<h2>BlogRoll</h2>
 
<ul>
 
<?php wp_list_bookmarks( ); ?> 
 
</ul>
 
 
</div>
 
 
<?php get_sidebar(); ?>
 
 
<?php get_footer(); ?>

Adding the Blogroll Page

The last thing you need to do is create the Blogroll page itself. To do this, all you need to do is create a new page through your WordPress admin area and call it Blogroll, Links or whatever.

Anything which you type at the top of your Blogroll page will appear before the Blogroll links which is being generated from our Blogroll Template. This is useful if you want to write a small introduction or description before the links.

Finally, all you need to do is make sure WordPress uses your new Blogroll Template for this page. You do this by changing the default template for the page in the Attributes section. This can be found underneath the Publish box at the right hand side of the page.

Good luck,

Kevin

)
Codeable info

Comments (2)

Comment by Luke says:

@Niq you can do that with a link by giving it an attribute target=”_blank”

however, this is not valid XHTML if you are using that and so you are better to add with a line of jQuery – if you google external links jquery you will find a way to add a small piece of javascript and it will mean any links that go to other websites on your blog will open a new window.

Some web designers though do not advise opening a new window or tab each time for this – as the user can do it themselves , and it is bad usability therefore. I am not so sure and it doesnt bother me (despite being a web developer!) if a site does that for external links.

Comment by Niq says:

How do you stop blogroll links replacing your page instead of opening in a new tab??? Thank you!

Codeable info