So, you want to mark your external links the Wikipedia style? Well, you’ve come to the right place! The idea is pretty straight-forward once you understand the basic principle.

The CSS attribute selectors

There are 3 CSS attribute selectors I know of. These are begins with (^), ends with ($) and contains (*). The syntax looks like this:

selector[attribute^="string"]{css properties;}

For example:

p[title*="ont"] {background: green;}

Translation: search throughout all the “p” elements that contain “ont” in their title. Once you found them, please make their background green. Looks like SQL in a distant way .

The logic

The basic principle is that you have to search for ALL external links that are only in the actual post text. This is a bit trickier than you would first think!

WordPress doesn’t have its own class for the post content alone, as far as I saw. This means you have to wrap the <?php the_content(); ?> in a new div and give it a new class, for example onlytext. This must be done in both single.php and index.php! You will end up having <div class="onlytext"><?php the_content(); ?></div>. Not doing this will result in having the external links icon put on the SexyBookmarks plugin, commenters’ names with links etc.

Now, that you can actually select only the text in a post, comes the fun part! You will need the external links icon: and some CSS:

.onlytext a:not([href*=huzze]){background: url(images/external.png) no-repeat right;padding-right: 13px;}

The :not pseudo-class is a bit of a desperate measure. In the attribute selector we actually look for all the href that contains the term “huzze” (replace with your domain), so we need to negate that statement. I would be interested if anyone knows the class for the the_content function since it would really help simplify the code . Also please do not hesitate to use the Contact form to notify me of any bugs with this code . And of course, a demo: Google.