Custom Title Links for WordPress

17 November 2013Technology

When designing this site, I wanted the ability to link to interesting articles directly from my post titles. WordPress, the content management system I use to run the site, creates a page for each post, and by default the post titles always link to the post page. This makes sense for lengthy articles, where you might only include a few paragraphs on your home page and use the title to link to the full post for those that want to read more. But often times, I just post a link to an interesting article with a short quote and/or comment. Readers can’t be bothered clicking the post title to get to the full post page and then having to search around for a link to the article I referenced. Providing a link to the article in the post title is much more efficient.

Other times, I write original articles (such as this one) that don’t have source articles, so there is no need for an external link in the post title. For my site, there was therefore a need to accommodate the two scenarios, and despite the variety of fantastic Worpress plugins available, I couldn’t find one that provided this functionality. So I went about creating the functionality myself. Here’s how you can do the same on your WordPress site.

Custom Fields

In order to specify a custom URL for your title link, you will need to make use of custom fields which are built in to WordPress but might not yet be enabled for your site. In order to see them, go to the Add New Post page in WordPress and click the Screen Options link in the top-right corner. In the list that is displayed, check the Custom Fields checkbox. A new section will then appear on your Add New Post page which allows you to define simple Key-Value pairs.

On the first post you want to specify a custom URL for, click the Enter New hyperlink in the custom fields section and type a value in the Name text box. For all of my custom URLs, I use the name link, but you can choose whatever works best for you – just keep in mind that you will need to use this name on all future posts. Also, note that on any subsequent posts, you can just select the link name from the drop-down menu rather than clicking Enter New each time. In the Value text box, enter the custom URL you want your title to link to.

With a Name and Value specified, WordPress embeds the additional custom field information in your post, and you can now use the additional data to create a custom title link once we adjust the WordPress templates.

Templates

Now that we have set up a custom field, we need to get WordPress to check for it and adjust the title link accordingly. Depending which WordPress theme you are using, the template and code you’ll need to modify will vary, but the required changes aren’t too complicated so you should be able to adjust the following examples for your needs.

Before beginning any modifications, you should make a backup of your current templates just in case things don’t work out quite right. I also strongly recommend that you implement a child theme structure in WordPress – something that is beyond the scope of this post – and apply any changes to the child theme rather than the parent theme so that all your hard work won’t be wiped out whenever the parent theme is updated.

The theme I use for my site uses two templates to customize the way posts are displayed: content.php and content-single.php.

content.php
This template controls the appearance of the list of posts displayed on the homepage. In my content.php file I found the following code:

<?php the_title( '<h2 class="entry-title"><a href="' . get_permalink() . '" rel="bookmark">', '</a></h2>' ); ?>

and replaced it with the following code:

<?php $linkvalue = get_post_meta($post->ID, 'link', true);
if($linkvalue) {
    the_title( '<h2 class="entry-title"><a href="' . $linkvalue . '" rel="bookmark">', '</a>&nbsp&nbsp&nbsp<span class="mini-permalink"><a href="' . get_permalink() . '" class="mini-permalink" rel="bookmark">&bull;</a></span></h2>' );
}
else {
    the_title( '<h2 class="entry-title"><a href="' . get_permalink() . '" rel="bookmark">', '</a></h2>' ); ?>
}
?>

The first line retrieves the value stored in the custom field named link (remember that I use the name link for all my custom URLs) and stores it in a variable $linkvalue. If the post in question doesn’t have a custom field named link then no value is retrieved and the variable $linkvalue will be null.

The second line tests whether $linkvalue contains a value. If it does, we have specified a custom URL for the post and we need to link to that URL instead of the default WordPress behaviour. The code on line 3 shows one way to do this, linking to $linkvalue instead of using the WordPress function get_permalink(). Note also, that when I link to a custom URL, I add a small link to the right of the post title that links to the post page permalink so that my visitors always have a way to get to the comments and social sharing options for a particular post. For my site, I use the • symbol to indicate the post link, but you can specify anything you’d like or omit the additional permalink altogether.

For posts that we haven’t specified a custom URL, $linkvalue won’t contain a value so the else portion of our code will apply. In that section, we just replicate the default template behaviour, linking the post title to the post page’s permalink.

content-single.php
This template controls the appearance of a single post page. In my content-single.php file I found the following code:

<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

and replaced it with the following code:

<?php $linkvalue = get_post_meta($post->ID, 'link', true);
if($linkvalue) {
    the_title( '<h2 class="entry-title"><a href="' . $linkvalue . '" rel="bookmark">', '</a></h2>' );
}
else {
    the_title( '<h2 class="entry-title">', '</h2>' );
}
?>

The code for content-single.php looks similar to the code for content.php. The difference is that when we are on a post page (controlled by content-single.php), we don’t need to link to the post page (we are already on it!) so there is no reference to the WordPress get_permalink() function.

Whether or not you link the post title to any custom URLs on the post page is up to you. I do it (hence the reference to $linkvalue in my code), but your situation may require a different behaviour.

I hope this quick tutorial helps any WordPress site authors looking for more flexible title links. If you have any questions or additional tips, please add them to the comments.