Codeable info

How To Create A Simple WordPress Links Template

Posted on by in WordPress Tutorials

Today I will be showing you how you create a template to display all links from your blogroll (or link manager as WordPress now calls it). I will be using the current default WordPress theme Twenty Eleven in my example though the steps that I will be showing you can be applied to any theme.

The blogroll was a common feature on blog sidebars a few years ago. It can still be seen on some blogs though it’s fair to say that the WordPress links feature is not used as much as it used to be. On previous websites I used the blogroll to power my links page however on WP Mods the links page was created by using a simple list so that I can easily add images to the page later if I wish.

There are benefits to using a links template instead of entering all of your links manually on a page. The link manager is very easy to use. This user friendly interface makes it easy for non-technical users to update the links page accordingly. By using a plugin such as User Role Editor you can also grant access to specific users or user groups so that they can modify links as they please.

Creating The Links Template

The best way to create any new template is to start with your theme page template, copy the code to a new file and then modify it. You can call the links template anything you want. Links.php is a common choice though I have used page-links.php to signify it is a page template.

Below you will see the code from the Twenty Eleven page template. It’s a relatively simple template to understand. The header template is called at the top of the file and the footer template is called at the bottom. In the middle is a while loop and a function called get_template_part which gets code from the content-page.php template. The comments template is also displayed if comments are enabled for the page in question.

<?php
/**
 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
 
get_header(); ?>
 
		<div id="primary">
			<div id="content" role="main">
 
				<?php while ( have_posts() ) : the_post(); ?>
 
					<?php get_template_part( 'content', 'page' ); ?>
 
					<?php comments_template( '', true ); ?>
 
				<?php endwhile; // end of the loop. ?>
 
			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

The information that the get_template_part() function gets from content-page.php is required so that any information we add to the links page we will create later can be seen at the top of the page. Below is the code from the Twenty Eleven content-page.php template:

<?php
/**
 * The template used for displaying page content in page.php
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
 
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<h1 class="entry-title"><?php the_title(); ?></h1>
	</header><!-- .entry-header -->
 
	<div class="entry-content">
		<?php the_content(); ?>
		<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
	</div><!-- .entry-content -->
	<footer class="entry-meta">
		<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
	</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->

The function that we will be using to call links is wp_list_bookmarks(). All of the links wouldn’t be aligned with the page content.

Creating A Links Template

This happens because we have called wp_list_bookmarks() outside of the content area. So what we need to do is insert this function directly after the_content(). There are two ways to do this. You can either:

  1. Create a new content template for our links template (e.g. content-pagelinks.php) and call that from our page-links.php template.
  2. Copy the code from content-page.php into our page-links.php template.

The first option is a tidier solution though the second option is easier as it saves you having to create an additional template. It doesn’t matter which option you choose. Also, many of you won’t have to make this decision if the_content() is called directly from your page template already.

1. Creating A New Content Template

If you decide to go with the first method, you will need to create page-links.php and content-pagelinks.php. Different names can be used if you wish. Below you will see both templates in full:

page-links.php

This main difference to the page.php template we based this template on is the addition of the template name at the top of the file and the call to content-pagelinks.php instead of content-page.php (get_template_part( ‘content’, ‘pagelinks’).

<?php
/**
 * Template Name: Links
 * Description: A Page Template for displaying links from your blogroll.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
 
get_header(); ?>
 
		<div id="primary">
			<div id="content" role="main">
 
				<?php while ( have_posts() ) : the_post(); ?>
 
					<?php get_template_part( 'content', 'pagelinks' ); ?>
					<?php comments_template( '', true ); ?>
 
				<?php endwhile; // end of the loop. ?>
 
			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

content-pagelinks.php

The only difference between content-pagelinks.php and content-page.php is the addition of the function wp_list_bookmarks() after the_content(). This is the function which displays your links.

<?php
/**
 * The template used for displaying page content in page.php
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
 
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<h1 class="entry-title"><?php the_title(); ?></h1>
	</header><!-- .entry-header -->
 
	<div class="entry-content">
		<?php the_content(); ?>
                <?php wp_list_bookmarks(); ?>
		<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
	</div><!-- .entry-content -->
	<footer class="entry-meta">
		<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
	</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->

2. Placing Everything In One Template

If you prefer to have everything in one template, you simply need to replace the get_template_part() function you would have used in content-pagelinks.php. This gives us the following:

 
<?php
/**
 * Template Name: Links
 * Description: A Page Template for displaying links from your blogroll.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
 
get_header(); ?>
 
		<div id="primary">
			<div id="content" role="main">
 
				<?php while ( have_posts() ) : the_post(); ?>
 
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header class="entry-header">
		<h1 class="entry-title"><?php the_title(); ?></h1>
	</header><!-- .entry-header -->
 
	<div class="entry-content">
		<?php the_content(); ?>
 
		<?php wp_list_bookmarks(); ?>
 
		<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
 
 
 
	</div><!-- .entry-content -->
	<footer class="entry-meta">
		<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
	</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->
 
 
 
					<?php comments_template( '', true ); ?>
 
				<?php endwhile; // end of the loop. ?>
 
			</div><!-- #content -->
		</div><!-- #primary -->

<?php get_footer(); ?>

That’s all you have to do to create your template however you still need to publish your links page.

Publishing Your Links Page

The last thing you need to do is create your links page. You can call this page anything you wish e.g. Links, Recommended Links, Sponsors, Friends etc. Any content you enter on this page will be displayed above your links. The most important thing you need to do here is make sure the page is using your links template.

Publish Links Page

The final output will look something like this:

Links Page Example

If you have followed the steps correctly and nothing is displayed, make sure that you have added some links to http://www.yoursite.com/wp-admin/link-manager.php. If you have never used the links feature before then default links such as ‘Development Blog’ and ‘Documentation’ will still be live though it’s worth double checking just in case you deleted them.

Customising The Links Template

By default wp_list_bookmarks() shows:

  • Bookmarks divided into Categories with a Category name heading
  • All bookmarks included, regardless of Category Name or Category ID
  • Sorts the list by name
  • An image if one is included
  • A space between the image and the text
  • Shows the description of the bookmark
  • Does not show the ratings
  • Unless limit is set, shows all bookmarks
  • Displays bookmarks

For most people the default parameters will be suitable as it divides links into categories and displays them in easy to read lists. Those of you who want to change the order of the list or the way that the list is styled will be pleased to know that it’s very easy to customise the function.

Below you will see examples of what you can do with the function.

Remove link category headings

<?php wp_list_bookmarks('title_li=&categorize=0'); ?>

Exclude categories 2 and 5

<?php wp_list_bookmarks('exclude_category=2,5'); ?>

Only display links from a specified category name

<?php wp_list_bookmarks('category_name=friends'); ?>

Do not show links within their categories and order links by URL

<?php wp_list_bookmarks('categorize=0&orderby=url'); ?>

Change the category li class

<?php wp_list_bookmarks('class=mystyle'); ?>

Show the ratings of links

<?php wp_list_bookmarks('show_rating=1'); ?>

Any of the above parameters can be combined with each other easily using an ampersand (&), For more information on how to customise the output of your links, please view the wp_list_bookmarks() reference page on WordPress.org.

Overview

Creating a links page that is powered using WordPress’s in built links system is very easy using the wp_list_bookmarks() function. The default output looks great though if you want something a bit more stylish or want a different layout, you can change the parameters that are passed through the function. For example, you could create a three column table that displayed links from your three link categories by simply specifying the category to use in each table.

As always, if you are unsure about any aspect of this tutorial, please leave a comment or post a question in the WordPress forums and I’ll do my best to help you out.

Good luck,
Kevin

)
Codeable info

Comments (1)

Comment by Wayde Christie says:

Thanks for your article Kevin. I discovered that after WordPress 3.5, the Links menu is not visible by default. In order for it to display you need to install the Links Manager plugin – http://wordpress.org/extend/plugins/link-manager/

Cheers!

Codeable info