• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

nSiteful Web Builders

Building a Better Web - One Site at a Time.

  • Home
  • About
    • Testimonials
    • Resources
  • Web Sites
  • Online Marketing
  • WordPress Support
    • Customized WordPress Training
    • 60-for-60 Sessions
  • Web Applications
  • Blog
    • Archive Listing Minimalistic
    • Blog Articles Grouped by Category
    • Case Studies
    • General
    • Portfolio
    • Reviews
    • Snippets
    • Techniques
  • Contact Jeff
    • Purchase Retainer Consulting Hours
    • About Retainer Consulting Hours

By Jeff Cohan, December 21, 2018

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:

visit web site link
Click to enlarge

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”.

visit web site link
Click to enlarge

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

visit web site link
Click to enlarge

(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;
}

Related Posts

  1. Dive Into WordPress Custom Post Types – Part 2
  2. Dive Into WordPress Custom Post Types – Part 3
  3. How To Add Custom Contextual Help Content To The WordPress Dashboard
  4. How to add an About Us blurb to every WordPress blog post
  5. Case Study: Emergency Notice Banner for Hybrid Web site
  • Choose the best match.

Written by Jeff Cohan · Categorized: Techniques · Tagged: WordPress

  • Choose the best match.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

mailchimp signup

Subscribe to get notified when new articles are published. Unsubscribe any time. No spam. I promise. Check out my newsletter archives.

social

Twitter Facebook LinkedIn

Recent Articles

  • Use Case for Custom Post Type: “In The News” March 10, 2023
  • Create a Custom Shortcode to Display a MemberPress Membership Price ANYWHERE on Your Website February 5, 2023
  • Avoid Direct Styling; Use CSS Instead September 21, 2022
  • Blog Tags: What They Are (and What They’re Not) August 5, 2022
  • How to Create a Simple Custom Events Plugin May 24, 2022

Filter By Category/Tag

Categories

  • Case Studies (7)
  • General (61)
  • Portfolio (5)
  • Reviews (12)
  • Snippets (16)
  • Techniques (38)

Popular Tags

Advanced Custom Fields Blogging Child Themes Content Marketing CSS CSS Grid Customer Service Custom Fields Custom Post Types Diagnostics Facebook FooGallery Genesis Gutenberg HTML Images iPhone Libra Live Chat Marketing Media MemberPress MemberPress Courses mu-plugins MySQL Photo Gallery php Pinterest Plugins Post Formats Pricing Project Management Security SEO Seth Godin Shortcodes Social Networking Surveys Taxonomies Trello Twitter Video Web design Web forms WordPress

siteground wp hosting

Web Hosting

wp101

EasyWordPresstutorialvideosforbeginners.
MemberPress CTA

Footer

Background

Web Sites | WordPress Support | Web Applications.

Formally trained in liberal arts and education (I have a B.A. in Government from Harvard and studied Secondary Education at Rutgers Graduate School), I have honed my skills in the communication arts and sciences as a teacher, trainer, instructional designer, writer, photographer, calligrapher, helpdesk manager, database programmer, and multimedia developer.

(I've also been a group counselor, waiter, bartender, bicycle messenger boy, computer salesman, carpenter's helper, financial analyst, and school board president.)

Tech

Systems since 1983.
Web sites since 1994.
PHP since 2001.
WordPress since 2007.

Contact

770-772-5134
Email Jeff
Send Money
All Ways

Copyright 2023, nSiteful Web Builders, Inc.

 

Subscribe

Pardon the interruption. I know popups can be annoying. But I’d love to have you as a subscriber.

Sign up to be notified when new articles are published. Unsubscribe any time.

* indicates required

Powered by MailChimp

×