WordPress: Display Permalinks in Posts Using Shortcode

When writing posts or creating pages in WordPress, it is inevitable that at some point you are going to have to include a link to another page/post within the content. Something that I have always found annoying with WordPress is the only way to to do this is to hardcode the link in the post content.

This is not a good long-term solution as sometimes a URL/permalink will change, or you move your WordPress site onto another domain altogether meaning your hardcoded link will then become dead and useless to anyone clicking on it.

When coding a theme, WordPress has a built-in function to retrieve the permalink of a page or post.

<?php echo get_permalink(5); ?>

The above will create a link to the post/page that has the ID of ‘5’. This is great as the link will always resolve to the correct destination providing the post or page has not been completely deleted.

Out-of-the-box this cannot be achieved in the actual post/page content. But with a little bit of shortcode magic, you can recreate the same functionality when writing content in the WordPress admin area.

Copy and paste the following into your theme’s functions.php file…

function shortcode_permalinks( $atts ) {
	
	extract( shortcode_atts(
		array(
			'id' => 1,
			'text' => ""
		), $atts )
	);
	
	if ( $text ) {
		$url = get_permalink( $id );
		return '<a href="' . $url . '">' . $text . '</a>';
	} else {
		return get_permalink( $id );
	}
	
}
add_shortcode('permalink', 'shortcode_permalinks');

How to use the shortcode

Now the shortcode is setup, you can use it in the following two ways:

<a href="&#91; permalink id=10 &#93;">This is a link</a>

The above just generates the link for post/page with the ID ’10’, the shortcode is inserted into the ‘href’ attribute and you write the HTML to create the link.

Note: WordPress was processing the shortcode in the above example, remove the spaces so it looks like this: <a href="[permalink id=10]">This is a link</a>

 

[permalink id=10 text='Text for the link']

The second example above will generate the whole link HTML using the text and ID provided, so the output would be:

<a href="http://www.example.com/post-permalink/">Text for the link</a>

 

You can also extent the shortcode further to include things such as CSS classes for the link, open in a new window or parameters to add to the outputted URL. See below:

function shortcode_permalinks( $atts ) {
	
	extract( shortcode_atts(
		array(
			'id' => 1,
			'text' => "",
			'params' => "",
			'class' => "",
			'newwindow' => "0"
		), $atts )
	);
	
	if ( $text ) {
		// Check if there are any params in the shortcode. If yes adds them to the link, if no then return the standard permalink
		$url = ( !empty( $params ) ? get_permalink( $id ) . '?' . $params : get_permalink( $id ) );
		// Add target="_blank" newwindow attribute equals '1'
		$newwindow = ( $newwindow == 1 ? ' target="_blank"' : '' );
		// Add class if exists
		$class = ( !empty( $class ) ? ' class="' . $class . '"' : '' );
		// Return the link HTML
		return '<a' . $newwindow . $class . ' href="' . $url . '">' . $text . '</a>';
	} else {
		// Check if there are any params in the shortcode. If yes adds them to the link, if no then return the standard permalink
		return ( !empty( $params ) ? get_permalink( $id ) . '?' . $params : get_permalink( $id ) );
	}
	
}
add_shortcode('permalink', 'shortcode_permalinks');

Usage Example

Here are some examples of how the shortcode would be used with the extended functionality:

Return URL only with custom URL parameters

[permalink id=10 params='linkParam=1&anotherParam=value']

Result:

http://www.example.com/post-permalink/?linkParam=1&anotherParam=value

 

Return full link with custom URL parameters

[permalink id=10 text='Link Text' params='linkParam=1&anotherParam=value']

Result:

<a href="http://www.example.com/post-permalink/?linkParam=1&anotherParam=value">Link Text</a>

 

Return full link with custom CSS class that opens in new window

[permalink id=10 text='Link Text' newwindow=1 class='link-class']

Result:

<a target="_blank" class="link-class" href="http://www.example.com/post-permalink/?linkParam=1&anotherParam=value">Link Text</a>

 

We hope you find this as useful as we do! As always if you need help implementing the code or are having issues, please let us know in the comments.

Free Graphics, Icons, Tutorials
Free Graphics Free Christmas Vector Icon Graphics Pack 2017Free Fitness Vector Icons Graphics PackFree Camping Vector Graphics PackFree Summer Graphics PackFree File Icon PackFree Fast Food Vector Graphics
Sharing is caring...
Like & Follow
Share the love, share this page! Facebook Twitter Google Digg Reddit LinkedIn Pinterest Email
Close [X]
The Web Taylor
1000 Lakeside North Harbour Portsmouth, Hampshire PO6 3EN
02392 123358