Automatic “Visit Web Site” Links on WordPress Portfolio Posts

If your blog includes articles about Web sites you have built, here’s a simple way to automagically and uniformly show “Visit Web Site” links at the end of all such posts.

Here’s what I’m talking about:

An “old way” would be to manually enter the hyperlink for each Web site at the end of each post, like this:

<a class="web-url" target="_blank" rel="noopener" href="https://somesite.com">Visit Web Site</a>

An improvement over that method would be to create a special shortcode with a single parameter (the Web URL) that you would manually enter at the end of each post.

But there’s a better way that doesn’t involve hard coding anything into the post content.

The better way to add a “Visit Web Site” link to each portfolio post

This better way involves:

1. a custom field, whose name I’ll call “web_url”
2. a custom function that generates the HTML for the “Visit Web Site” link
3. an add_filter call that hooks the above function to the WordPress the_content hook.
4. css to dress up the link

Step 1: Add the custom field and value

If the Custom Fields section of the editor page isn’t showing, expand “Screen Options” and checkmark “Custom Fields”.

Enter web_url in the “Name” box and the URL of the Web site in the “Value” box.

(If you previously added the web_url custom field to another post, you can select it from the custom field “Name” dropdown.)

Step 2: Create a function to generate the HTML for the “Visit Web Site” link.

Do this in your child theme’s functions.php file or in a separate file in the mu-plugsins/ folder.

Here’s the code I used:

function nwb_show_web_url($content) {
	if ( is_single() && $web_url = get_post_meta(get_the_ID(), 'web_url', true) ) {
		$content .= '<div class="web-url"><a target="_blank" href="'.$web_url.'">Visit Web Site</a></div>';
	}
	return $content;
}

Code Explanation:

Line 1: Creates the custom function, passing the global $content variable as a parameter. This $content is the post content entered into the editor box.

Line 2: The first part of the “if” statement uses the WordPress is_single() function to test whether the current query is for an existing single post. The second part uses the WordPress get_post_meta() function to attempt to capture the value of the post’s “web_url” custom field. If the post has that custom field assigned to it, the value is assigned to the “$web_url” variable, and the second part of the condition is true.

Line 3: If both conditions evaluate to true, the HTML for the “Visit Web Site” link is appended to $content (using the .= operator).

Line 5: Finally, we return the new (“filtered”) $content.

Step 3: Use an add_filter call

add_filter( 'the_content', 'nwb_show_web_url', 10);

This tells wordpress to perform the instructions in the ‘nwb_show_web_url’ function and to change the post content to the return value of the function (because the function is hooked to the “the_content” hook).

Step 4: The CSS

.web-url {
	text-align: center;
	display: block;
	margin-bottom: 2em;
}
.web-url a {
	display: inline-block;
	text-align: center;
	padding: 1em;
	border: 1px solid;
}
.web-url a:after {
	font-family: 'FontAwesome';
	content: " \f08e";
}

The first two rules are probably pretty straightforward.

The third rule uses the :after pseudo-element. It uses the FontAwesome Web font to generate the “external link” icon:

Epilogue

One of the benefits of posting articles like this is that I often find ways to improve things.

Case in point: I don’t know why I didn’t insert a return in my custom function in the event the conditions evaluated false.

Here’s the better way, and I’ll fix the code soon:

function nwb_show_web_url($content) {
	if ( ! ( is_single() && $web_url = get_post_meta(get_the_ID(), 'web_url', true) ) ) {
		return;
	} else {
		$content .= '<div class="web-url"><a target="_blank" href="'.$web_url.'">Visit Web Site</a></div>';
	}
	return $content;
}

And yes, there’s a shorthand version:

function nwb_show_web_url($content) {
	if ( ! ( is_single() && $web_url = get_post_meta(get_the_ID(), 'web_url', true) ) ) 
		return;
	$content .= '<div class="web-url"><a target="_blank" href="'.$web_url.'">Visit Web Site</a></div>';
	return $content;
}