Featured image for Create your own WordPress shortcode for Permalinks blog post

From our Blog

Create your own WordPress shortcode for Permalinks

Eric Avatar for Eric
Eric
4 min read

I cringe every time I see a link in a blog post that is an absolute URL to other content on the same site. Here’s an example of what I mean:

<a href="http://www.mysite.com/blog/post-name">vehicula</a>

In that example post you see a link to another page in my blog.

But what happens when you edit the slug of the post? The link will break.

Or what happens if you move your blog from /blog to /newsThe link will break.

Or even worse, what happens if you change the domain where the content is hosted from http://www.mysite.com to http://blog.mysite.comThe link will break.

That’s why I cringe every time I see a link with an absolute URL to another page on the same site.

What’s the solution? Shortcodes.

Here’s an example of how to programmatically add links to your posts without being susceptible to the problems I mentioned above. The following code can be added to your theme’s functions.php file or to a custom plugin you might have.

/**
 * Creates a shortcode that links to other 
 * content on your site.
 */
function my_permalink_shortcode($atts) {

  // Check that $id exists.
	$id = intval($atts['id']);
	if ($id <= 0) { return; }
	
	// Check that $id has a URL.
	$url = get_permalink($id);
	if ($url == '') { return; }
	
	// Get link option and title.
	$link = ($atts['link'] == '1') ? true : false;
	$title = (trim($atts['title']) == '') ? get_the_title($id) : $atts['title'];
	
	// Determine if we create a link.
	if ($link) {
		return '<a href="'.$url.'">'.$title.'</a>'; 
	} else {
		return $url;
	}
}
add_shortcode('pl', 'my_permalink_shortcode');

After you add that code to your site, here’s how you can use it when writing a blog post or page.

To get the link to another post on your site all you need is the ID of the post you want to link to. Then in your post you would do something like this:

<a href="[pl id='123']">vehicula</a>

Now my link’s URL will be generated from the database and no matter how much we edit the other post’s slug or path, the correct URL will always appear in this link.

What if you want to avoid creating the <a href="">...</a> HTML code? That’s easy. Just do this:

[pl id='123' link='1']

Now when the post is rendered, the <a> tag will automatically be created and the title of the post will show up.

If you want to control the title of the link, you can do this:

[pl id='123' link='1' title='link to me']

Let me provide one last example to clear up any confusion… Let’s say you wrote a post on your blog. The post you wrote is titled Hello, World!, it has a slug of hello-world and the post has the ID of 33.

Here’s what the shortcode would look like in your posts and what would be returned:

EXAMPLE: 
[pl id='33']

RETURNS: 
http://wwww.mysite.com/hello-world

------------

EXAMPLE: 
<a href="[pl id='33']">read me</a>

RETURNS: 
<a href="http://wwww.mysite.com/hello-world">read me</a>

------------

EXAMPLE: 
[pl id='33' link='1']

RETURNS: 
<a href="http://wwww.mysite.com/hello-world">Hello, World!</a>

------------

EXAMPLE: 
[pl id='33' link='1' title='Read!']

RETURNS: 
<a href="http://wwww.mysite.com/hello-world">Read!</a>

Hope this helps future-proof the links in your blog posts.

Last updated on March 2021


Recent Blog Posts