Wordpress automatic external link customization?

Michael_

New member
Mar 12, 2013
476
19
0
I'm wondering if anyone knows of a plugin that would automatically check for outbound links in a wordpress post or page and make them a different color than internal links.

I realize I could do this by simply specifying a unique link css class, but hand editing every link in every post I create will be a major pain.

Thanks bros.
 


There are two ways,

One is to utilize the WP External Link Plugin - WordPress › WP External Links « WordPress Plugins

Or if you're a savvy developer, read Terrance's post here 5 Code Snippets for Interacting with WordPress Post Content Effectively

He essentially shows how to convert external links to nofollow, but you can utilize the same code and the preg_replace utility to add custom styling to external links and call it in your theme's css.

Avoid using plugins for something as simple as that. The lower the number of plugins on your site, the better.
 
There are two ways,

One is to utilize the WP External Link Plugin - WordPress › WP External Links « WordPress Plugins

Or if you're a savvy developer, read Terrance's post here 5 Code Snippets for Interacting with WordPress Post Content Effectively

He essentially shows how to convert external links to nofollow, but you can utilize the same code and the preg_replace utility to add custom styling to external links and call it in your theme's css.

Avoid using plugins for something as simple as that. The lower the number of plugins on your site, the better.

Very nice. Thank you.
 
The replace PHP script from that site doesn't work. I don't know much about coding, I'll provide an update when I find the solution.
 
Use the plugin then.

The script on that site is meant for setting all external links to nofollow and will require edits at your end to be able to customize the style.

The code doesn't work as written, not even for rel=nofollow additions. I can see where the calls are being made to change them to class="myoutboundlink" and use CSS class to specify styling, but I don't know enough to fix the coding.

Wish I was fluent in php, but 99% of sites available to learn as a beginner are complete garbage.
 
The code doesn't work as written, not even for rel=nofollow additions.

No worries, here's a short snippet to help you - Add this to your theme's function.php

PHP:
function external_styling( $content ) {
    return preg_replace_callback( '/<a[^>]+/', 'external_styling_callback', $content );
}     
add_filter( 'the_content', 'external_styling', 99999 );

function external_styling_callback( $matches ) {
    $link = $matches[0];
    $exclude = '('. home_url() .')';
    if ( preg_match( '#href=\S('. $exclude .')#i', $link ) )
        return $link;

    if ( strpos( $link, 'class=' ) === false ) {
        $link = preg_replace( '/(?<=<a\s)/', 'class="externallink" ', $link );
    } elseif ( preg_match( '#class=\S(?!externallink)#i', $link ) ) {
        $link = preg_replace( '#(?<=class=.)#', 'externallink ', $link );
    }

return $link;   
}

This will essentially add a class="externallink" to all outgoing links in your post.

Now open up your css and add something like

Code:
a.externallink:link {background-color:#B2FF99;}
a.externallink:hover {background-color:#FF704D;}

Notice inline texts don't have a sweet ass background like normal divs, so we can add a bit of padding if we like (Not a lot, just 1 or 2px to get the background etc, to show.)