We just created a custom template with a custom header for the Genesis Theme but the code we used is, well, crappy. And that’s because it is absolutely hard coded which means it’s not portable so we’re going to make some changes to it now.
Use WordPress Constants home URL and stylesheet URL
What we want to do is use some WordPress constants to get this URL and to get this URL. Those WordPress constants are going to be home URL and stylesheet URL. We’ll head over to the WordPress codex to take a look at these.
Home URL retrieves the home URL for the current site and so all you have to do is say echo(home_url). WordPress coding standards say that you should escape all URLs and what you are escaping in the URL is this slash (/). Well, the original way would be to echo home_url.
So we delete this, open PHP and then we close PHP. Then in between the opening and closing we say echo home_url. Whoops. This needs to be separated. So echo home_url, return to our Home page.
Let’s save that and my-templates and upload it. When we refresh this you’ll see that it’s still going to work like we want it to and that we can click on this and it takes us to Home.
Use Escape URL for Best Practices
Although the safest WordPress way and really the right way to code for WordPress from a security standpoint is to use the escape URL.
Really, if we take this echo esc_url, we’ll get the same result. So, echo esc_url (home_url) and then the esc_url is looking for these things here. Let’s save that, upload it and then test it. And it still works exactly the same way but what we’ve done here is use good WordPress coding standards by escaping every URL that we output and that is in order to prevent cross site scripting.
The URL gets escaped and therefore the URL can’t be hijacked by a hacker. So that’s one thing to make this right.
Replace Code in the Image Source
The other thing to make this code much better is to replace what we have here in the image source. You could use home_url to replace this but actually, we really want to get all the way through enterprise pro in this URL. We don’t want to have to restate any of that and the way to do that is get_stylesheet_directory_uri.
Let’s look at the codex again. This is, in fact, an excellent example. It’s just get_stylesheet_directory_uri. What it does is it takes from the http all the way through enterprise-pro. That get_stylesheet_directory_uri produces that for you.
So back to our function. Well, we’re just going to delete that and we’ll open PHP and close PHP. Then we’ll grab that reference again echo get_stylesheet_directory_uri.
There is a little difference here that I want you to note and you’re going to see code both ways so you can decide which way you like. If it is a single statement contained inside of PHP tags, theoretically it does not require the semicolon because a single statement contained inside of PHP tags once you exist PHP that’s the end of statement.
Now, some people, me included, include the semicolon anyway. If you’ve got an opening PHP tag and a number of statements then you have to have the closing semicolon but in this case, theoretically it’s possible to leave the semicolon out.
In fact, that’s what they were showing in the codex in this case right here. There’s no semicolon here and the absence of semicolon is because this is a single statement so theoretically it’s not necessary. I’m in the habit of including it anyway.
Benefits of Using Relative URLs
Now what happens is this can be moved from site to site. This whole child theme with these customizations can be moved to a different site and they will all function properly without having to change any hard coded URLs because we have these WordPress generated URLs that are relative.
Actually, I made one error here. The typical URL that is returned by this kind of thing does not include the trailing slash, so you need to include the trailing slash in the rest of your HTML. Let’s come back over here and add in that slash which it needed in order to work properly.
Let’s save this and upload it. Come back over to Projects and you can see it still works. When we click on that it takes us back over. The relative URLs are working properly and that’s actually the right way to code.
Actually, what we should really do here is to use this esc_url. Let’s just do that and save it. Upload it one more time. This is one of the problems with WordPress is that documentation is not always perfectly consistent but here we are, we clicked back over and we got an esc_url which is safer.