Redirect from post to an external URL

adminWordPress0 Comment
4 min. reading

Why would you like to redirect a page’s visitor to an external URL instead of presenting post content?

Well, they may be a dozens of reasons. I found one. I was building a simple product showcase page with cool image scroller based on WordPress and Modest theme from Elegant Themes. Since image scroller contained not only image, but also title and two line entry, it was based on actual posts.

I wanted my users to see these texts, but to not be able to access posts itself. Because there was nothing more than just this image, title and two-line description. That’s why I used URL redirection.

Modest theme can be configured (non-standard setting) to use text put into post excerpts, instead of post body, to render two-line intro text placed over each image. I decided to use this setting and to put actual redirection code into post body.

Since you can put a bare Javascript code directly to your post body (using non-visual editor, of course) and it will be executed just as it is, then redirecting a post to an external URL is an easy task. You can achieve it, by using code as simple as:

<script type="text/javascript">window.location.replace("http://www.example.com/");</script>

Just like that! Test it on your own blog, if you don’t believe.

Howevere, there is a small glitch, that will appear when using Modest theme (and probably many other themes). Due to some strange things in WordPress core, even though your post isn’t actually opened / read, when image scroller is rendered, its body is still executed. This means, that when you put above Javascript code, your blog will be redirected to the URL placed in your first post, when rendering home page and image scroller.

There are probably many ways, how you can workaround this problem. I used simplest one. Since each blog post used do build image scroller is titled with the domain / URL to which it will redirect user, all I had to do was to check in my Javascript code, if page title matches that domain. Thus, I have added some code and finally ended up with:

<script type="text/javascript">
    var domain = "example.com";
    if (document.title.indexOf(domain) > -1) {
        window.location.replace("http://www." + domain + "/");
    }
</script>

Works like a charm. When post body is reached from anywhere, except actual post page (i.e. from home page, when building image scroller), this code does nothing. When user is actually visiting post page, he or she is immediatelly redirected to given URL.

If you wish to use this solution then remember about writing entire above code as one-liner (above multi-line code is given only for readability):

<script type="text/javascript">var domain = "example.com"; if (document.title.indexOf(domain) > -1) window.location.replace("http://www." + domain + "/");</script>

Failing to do so and writing any Javascript code in more than one line will cause WordPress to add nasty paragraph breaks around each of line of your code thus breaking entire thing into non-executable mess.

Leave a Reply