How to future-proof links so they remain dynamic

Now, what exactly does it mean to have a site that’s dynamic, or in our case, ensuring that our code or content is dynamic? Why should we care about dynamic and WordPress?

Aside from it’s literal meaning, dynamic, in terms of WordPress, is ensuring that the code and content of a site is easily manageable and as future-proof as you can make it. If you’ve ever moved a WordPress site from one domain to another – and all the content links broke because they were pointing to the old domain, these links were not built dynamically. If you’ve ever wanted to edit a header or footer menu in WordPress and discovered that the links were not manageable from the dashboard, these menus weren’t built dynamically. If you’ve ever wanted to update your about page and parts of the content is inaccessible from the page in it’s editing mode, the template is not dynamic.

Now going into best practices and making sure your site breaks as little as possible with WordPress updates or domain changes is a broad subject. So instead, we’re going to touch up on how to keep links dynamic, both in templates and in the dashboard Page/Post content with a handy shortcode.

Dynamic links in templates:

the_permalink();

Use this in the loop, and it will automatically pull the link of that page or post. No further work needed here. So if you ever change the slug of a post or the title of it – no worries, the permalink function has your back.

get_admin_url();

Echo this out to get the link to the admin area – great for login buttons on the front-end of a site if the toolbar is disabled.

Remember to use echo to see the values for most of WordPress’ “get” functions

get_home_url(); or home_url();

Use one of these to output your home url to your posts which is not necessarily the same url as your site’s front page. This depends on your specific WordPress site and the way it’s set up. If you’re not sure, it should output the same address specified on your dashboard, under General > Settings > Site Address.

get_site_url(); or site_url();

Using the site url versus the home url is the more reliable way to output the same address you’d use in the browser to get to your site’s front page. To confirm what address this is, it should output the same address specified on your dashboard, under General > Settings > WordPress Address.

get_template_directory_uri();

This will output the url to your theme’s root directory. So if I have a theme called, “my-theme” on www.mysite.com, this is what it will output:

 www.mysite.com/wp-content/themes/my-theme

This is a good way to link to other files within your theme such as image, stylesheets and so on.

Appending/adding on to the link tags above:

Customizing these are fairly easy so long as it has parameters to do so. Let’s take a home_url and imagine that we want to link to our about page on www.mysite.com/about.

Below, the link tag outputs www.mysite.com.

<?php echo home_url(); ?>

Now we do this:

<?php echo home_url(‘/about’, ‘’); ?>

We leave the second parameter blank. If you look at the Codex page, this second slot is reserved for modifying the url scheme, which in our case, we don’t need right now. We just want to add the appending slash and the word about in the end. So we fill in that first slot and it will now output www.mysite.com/about.

In the case of get_template_directory_uri();, there are no parameters to set your own custom path. Therefore you’d handle this a bit differently by concatenating the PHP, which is a fancy way of continuing the PHP with a string without breaking it in our case. Let’s say I have a folder in my theme’s root directory called css, and I want to link to a stylesheet that’s called my-stylesheet.css. You would drop this into your template:

<?php echo get_template_directory_uri() . '/css/my-stylesheet.css'; ?>

Keep in mind that it’s best practice to enqueue your custom stylesheets and the above is just being used for the purpose of learning.

Dynamic links in the content:

Now that we’ve gone some useful template tags, PHP doesn’t work in a post or page’s wysiwyg (text-editor) so what happens to those? In this case, creating a shortcode should do just the trick.

//create a shortcode to use dynamic urls in the CMS

function dynamic_url( $atts ) {

extract( shortcode_atts( array(
'path' => "", // default path if none supplied
'text' => ""  // default text if none supplied
), $atts ) );

if ( $text && $path ) {
$url = get_site_url();
$append = $path;

return "<a href='$url/$append'>$text</a>";
//with custom text and path provided, it will output the link versus it manually being written
//shortcode used like this: [site-url path='customstuffhere' text='more custom stuff']
} else {
return get_site_url();
//without custom text and path provided, just gives default url
//user can manually write out link and path/text
//shortcode used like this: <a href="[site-url]/customstuffhere">More Manual Custom Stuff</a>
}

}

function register_shortcodes(){
add_shortcode('site-url', 'dynamic_url'); //dynamic site url shortcode
}

add_action( 'init', 'register_shortcodes');

We’re not going to go over how to build a shortcode from scratch in this particular article, perhaps in the future, but for now, let’s just go over what our example is doing above.

This can be placed in functions.php, but preferable in your own custom plugin if you can. I have two parameters that I want to be dynamic – editable by the user if they choose. These two parameters are the text that the link displays, and a path that appends to the site_url(); tag we’re using.

Extract specifies my parameters, one for $path and one for $text.

The next line is an if statement that basically says: If there is a value for both the $path and a value for the $text, output an anchor tag for us using the two values provided by the user as well as site_url(); for the url.

Here’s a quick copy and paste of the first version:

[site-url path='customstuffhere' text='more custom stuff']

If $path and $text are not provided, the user can use the shortcode by writing the anchor tag themselves and manually putting in the text as well as appending the path.

Here’s a quick copy and paste of the second version:

<a href="[site-url]/customstuffhere">More Custom Stuff</a>

In Summary

And that’s it! This is what we learned in this article:

1. Keeping your site dynamic ensures that the code and content of a site is as easily manageable and as future-proof as you can make it for both the user and the developer.
2. We picked up a few examples of Link Tags for use within our theme templates and what their differences are.
3. Then we learned how to customize the paths to some of these Link Tags.
4. Finally, we resolved the issue where we couldn’t make use of these tags in a Post or Page’s wysiwyg/text editor by creating a shortcode instead.

There are a lot of tags that we didn’t talk about, so feel free to take a gander at the function reference for experimentation. Don’t be afraid to toy with the shortcode as well, changing it’s values, trying different tags, and making it your own so that it will suit your needs. Any suggestions, questions or comments, feel free to drop us a line. Until next time!