Join 9,000+ Readers

Customize External Links in your WordPress Posts

by Jake Rocheleau

on January 23, 2013

in Wordpress

The WordPress backend system is versatile enough to support developers writing and managing their own codes. These often take the form of plugins, themes, or commonly systematic functions which are run in your specific WP install directory. These codes are often placed inside functions.php and pertains only to the current theme files.

With so much access to backend customization I have wanted to delve into the subject of hyperlinks. Writers often need to reference external links on various websites within blog posts. But you may want to edit the link styles for opening into new windows, or dynamically setting the title tooltips. I have put together this brief guide for editing custom settings with your anchor links through WP functionality.

NoFollow on All Outbound Links

This is a common technique I have seen mentioned countless times in the WordPress support forums and WPMUDEV. When you run a high-PR blog all the external links from your posts get lots more attention than on other blogs. This means you have to be careful about how Google is crawling your webpage content.

You can check out this WP Recipes article discussing the hack in your WordPress theme. You simply add the code into your theme’s related functions.php file and save the changes. Everything should update automatically and be targeting all of your internal anchor links! Very neat code if you can find a practical use. I’ve coped over the snippet below which is originally sourced from One Extra Pixel.

add_filter('the_content', 'auto_nofollow');
 
function auto_nofollow($content) {
    //return stripslashes(wp_rel_nofollow($content));
 
    return preg_replace_callback('/]+/', 'auto_nofollow_callback', $content);
}
 
function auto_nofollow_callback($matches) {
    $link = $matches[0];
    $site_link = get_bloginfo('url');
 
    if (strpos($link, 'rel') === false) {
        $link = preg_replace("%(href=S(?!$site_link))%i", 'rel="nofollow" $1', $link);
    } elseif (preg_match("%href=S(?!$site_link)%i", $link)) {
        $link = preg_replace('/rel=S(?!nofollow)S*/i', 'rel="nofollow"', $link);
    }
    return $link;
}

Code Source

This is one of my favorite code snippets because it’s very easy to add into any theme and get working quickly. It is also a demonstration of where Google should place it’s credibility in your website. Many of the DoFollow links you should keep will appear in your sidebar or footer area, as opposed to blog post content.

Force Open in New Window

Another highly requested feature is to force all external anchor links to open in a new tab or window. Visitors grow accustomed to this feature and begin to expect it on many websites. You’ll have to think for yourself if this is a good idea to include within your own WP install.

function wp_change_target($content){
    return preg_replace_callback('/]+/', 'wp_target_callback', $content);
}

function wp_target_callback($matches){
    $link = $matches[0];
    $mu_url = get_bloginfo('url');

    if (strpos($link, 'target') === false){
        $link = preg_replace("%(href=\S(?!$mu_url))%i", 'target="_blank" $1', $link);
    }elseif (preg_match("%href=\S(?!$mu_url)%i", $link)){
        $link = preg_replace('/target=S(?!_blank)\S*/i', 'target="_blank"', $link);
    }
    return $link;
}
add_filter('the_content', 'wp_change_target');

Code Source

You can find this resource from an excellent blog post on the topic. All the anchor links inside your post content will be targeted, but note this will not include any other links on the page. Although much of the other content should be static and can be updated directly in your own source code.

WP Auto-Images without Anchor Links

If you have seen the new WordPress media center it has overgone major improvements since the new WP 3.5 release. But one nagging annoyance I still find is the anchor links which are embedded into your content along with the img tags. WordPress links to the original media resource so readers may click and see the image in full-view. However this is rarely ever useful and proves to just distract more than help people.

add_filter( 'the_content', 'attachment_image_link_remove_filter' );

function attachment_image_link_remove_filter( $content ) {
    $content =
        preg_replace(
            array('{]*>}'),
            array(''),
            $content
        );
    return $content;
}

Code Source

After scouring the web for a solution I came across this helpful StackExchange thread. Johannes Pille provides a small code snippet with regular expressions for detecting WordPress-generated anchors wrapped around an image tag. Then we can remove them in PHP and return the new content onto the page. This is another popular workaround which developers should keep saved if ever needed on future projects.

Remove Clickable Links in Comments

Popular blogs which receive a lot of attention also end up inundated with spam comments. Many of these discussion posts are generated by machines, but either way it is frustrating. Webmasters may wish to include this single line of code into their functions theme file to remove all clickable links in comment text.

remove_filter('comment_text', 'make_clickable', 9);

Code Source

Note this really isn’t a full solution for reducing comment spam. People will still drop comments and use links in their name section, or load up their content with related keywords. But applying this functionality does reduce the amount of spammy outbound links you’ll have pointing from each article page.

Final Thoughts

This post overview includes a series of helpful techniques for managing HTML links that you may wish to implement into WordPress. I would imagine that web developers are not interested in all of these, but possibly a combination over various projects. And there are also loads of similar resources to be found online searching through Google.

Please take the time to go over the codes above and test them out in your own website. Many of the snippets can easily be copied into your theme files and be working without much hassle. I find WordPress particularly helpful because of the large community and surrounding resources. But along with my tips above feel free to share your thoughts in the post discussion area.

About Jake Rocheleau

Jake is a freelance writer and web developer. He writes articles for numerous blogs on freelancing, Wordpress, CSS3, and jQuery. You can find him all throughout Google and follow his tweets @jakerocheleau. Connect with Jake on Google +