Latest TweetsWordPress and the Blank Target Vulnerability (aka rel noopener + noreferrer):… #WordPress #security #html
Perishable Press

How to Write Valid URL Query String Parameters

When building web pages, it is often necessary to add links that require parameterized query strings. For example, when adding links to the various validation services, you may find yourself linking to an accessibility checker, such as the freely available Cynthia service:

<a href="">WCAG Accessibility Check</a>

Another example is seen when linking your feed to a feed validation service:

<a href="">RSS Feed Validation</a>

And one final example showing a more complex query string:

<a href=" title of a post">Bookmark at Delicious</a>

As is, however, these links won’t validate due to a number of issues. Let’s fix ‘em up with a few quick-and-easy changes.

Replace ampersands with “&amp;”

One of the reasons these links aren’t validating is because they contain non-encoded ampersand ( & ) characters. Ampersands are often used in URL query strings to demarcate granular chunks of information, for example:


..which provides several different chunks of information about everybody’s favorite hellion. To get this code to validate, we need to encode the ampersands with &amp;, for example:


Replacing the ampersand characters with encoded equivalents does not change the functionality of the query string, but it does produce completely valid code.

Encode other special characters

Let’s return to our Delicious example for a moment:

<a href=";title=The title of a post">Bookmark at Delicious</a>

The ampersand has been fixed, but this code still won’t validate due to the blank spaces in the title parameter. To fix this, we need to encode those blank spaces with their escaped hexadecimal equivalents, like so:

<a href=";title=The%20title%20of%20a%20post">Bookmark at Delicious</a>

..such that

&amp;title=The title of a post



..which is to say that a blank space is equivalent to “%20”.

Likewise, you should also encode any other special characters. For example, here is that previous feed validation link:

<a href="">RSS Feed Validation</a>

If needed, we could encode the special characters in the url parameter like so:

<a href="">RSS Feed Validation</a>

As you can see, we have made the following replacements:

: with %3A
/ with %2F

As before, the encoded values function just as well as the non-encoded characters, with the added bonus that your code will validate!

Here is a good list of URL character codes

Tips and Tricks

The previous examples demonstrate the logic and technique behind writing valid URL query string parameters, but there are easier, more efficient ways to produce valid, dynamic links. First of all, rather than manually replacing each and every special character with its encoded equivalent, we can use the magical powers of PHP’s urlencode() function.

Let’s take an example from my recent article, Fully Valid, SEO-Friendly Social Media Links for WordPress:

<a href=" reading: <?php the_permalink(); ?>">Tweet this!</a>

This example provides a link to enable users to quickly post the URL of your posts to their Twitter feed. As is, the blank spaces in the status parameter render the code invalid. To change this, we use the urlencode() function like:

<a href="<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>">Tweet this!</a>

..which is now completely valid. Using this technique, we can encode any character string dynamically and easily. For WordPress users, we can even use urlencode() to dynamically encode various template tags such as get_the_title(), for example:

<a href="<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>">Bookmark at Delicious</a>

This technique makes it possible to include sitewide, post-specific, parameterized links using a single line of code. And best of all? The code is completely valid! Nice :)

Jeff Starr
About the Author Jeff Starr = Creative thinker. Passionate about free and open Web.
28 responses
  1. And in the end, the URL just becomes god-awful ugly. It’s necessary, nonetheless.

  2. Speaking of good-looking URL, I’ve always admired the way Wikipedia handles the latters.

  3. Another option if couldn’t do it until the client side for some reason would be the JavaScript encodeURIComponent() Function.

  4. Jeff Starr

    @John: True, but ugly, valid URLs are always better than less-ugly invalid URLs!

    @Bill: Thanks for the tip! Will definitely come in handy! :)

    @Louis: Are you referring to Wikipedia’s URL formatting, or something else?

  5. Loïc Hoguin November 30, 2008 @ 5:50 pm

    You might want to take a look at http_build_query too.

  6. @Jeff: I’m referring to their UTF-8-ish URL style. Here’s an example of Cool URL:Уніфікований_ідентифікатор_ресурсів

  7. always use urlencode() when dealing with query parameter values.

  8. Jeff Starr

    @Loïc Hoguin: that is a great function for building URL query parameters, but I am not sure that it automatically encodes anything..

    @Louis: ah, I see.. yes those are very sweet looking, but they certainly don’t validate. I would love to peak at their URL scripts!

    @Jamp Mark: yes, that pretty much sums it up! ;)

    Update (2015/05/24): years later the “cool” URL is a garbled mess of gibberish. Probably due to the many server migrations that happened along the way, lol!

  9. Jonathan Ellse April 19, 2009 @ 10:47 pm

    Brilliant post. This really clears up all the queries I had about url encoding etc.

    Thanks again Jeff

  10. Jeff Starr

    My pleasure, Jonathan — glad to be of service! :)

  11. I have a peculiar situation that I am seeking some input on.

    I am building a custom content management tool using a separate database outside of wordpress, but the client still wants the skin to be wordpress. I created my own controller that gets included() in a custom template page. I use /%category%/%postname%/ for pretty permalinks. This all works fine. But I need to pass custom parameters via the URL to trigger some of my data on my custom template page that has nothing to do with wordpress. for example:;moreparam=moremyvalues.

    Well WordPress thinks I am trying to select something from the database out of wp-categories, which doesnt even exist. This only shows up in the Apache error log. But if using header redirects crashes the site and timesout.

    QUESTION: Any ideas on how to pass custom parameters in the URL without having wordpress thinking their for wordpress????

    Any help on this one would be great.

    Thanks. If i find resolve I ll reply back.

  12. Jeff Starr

    Hi Eli, that’s a new one for me – haven’t done that before. I would be surprised if there wasn’t something posted somewhere about that on the Web (but certainly you’ve already searched)..

    Definitely let us know if you find a solution – I’m sure it would help others in the same situation.

[ Comments are closed for this post ]