New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

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="http://www.contentquality.com/mynewtester/cynthia.exe?Url1=http://domain.tld/&rptmode=2">WCAG Accessibility Check</a>

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

<a href="http://validator.w3.org/feed/check.cgi?url=http://feeds.feedburner.com/domainfeed">RSS Feed Validation</a>

And one final example showing a more complex query string:

<a href="http://delicious.com/post?url=http://domain.tld/&title=The 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:

http://domain.tld/function.cgi?url=http://fonzi.com/&name=Fonzi&mood=happy&coat=leather

..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:

http://domain.tld/function.cgi?url=http://fonzi.com/&amp;name=Fonzi&amp;mood=happy&amp;coat=leather

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="http://delicious.com/post?url=http://domain.tld/&amp;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="http://delicious.com/post?url=http://domain.tld/&amp;title=The%20title%20of%20a%20post">Bookmark at Delicious</a>

..such that

&amp;title=The title of a post

becomes

&amp;title=The%20title%20of%20a%20post

..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="http://validator.w3.org/feed/check.cgi?url=http://feeds.feedburner.com/domainfeed">RSS Feed Validation</a>

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

<a href="http://validator.w3.org/feed/check.cgi?url=http%3A%2F%2Ffeeds.feedburner.com%2Fperishablepress">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="http://twitter.com/home?status=Currently 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="http://twitter.com/home?status=<?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="http://delicious.com/post?url=<?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 = Designer. Developer. Producer. Writer. Editor. Etc.
Banhammer: Protect your WordPress site against threats.

28 responses to “How to Write Valid URL Query String Parameters”

  1. Thanks a bunch! I fixed my code. Earlier was trying php functions on some hardcoded links but this did it easily :)

  2. Hi

    Thanks for the nice article.

    I’ve got a quesion though. I use zend framework and trying use similar thing for preety URL. eg: http://mysite.com/name/blah/url/http://www.blah.com

    It doesn’t work even I url-encode the url part (replaced : and slashes). It gives me apache error.

    Do you have any solution for this?

    Ta

  3. Jeff Starr
    Jeff Starr 2010/11/15 5:52 pm

    Hi sambhu, I do not know why that is happening. Sounds like a syntax error or something weird happening on the server. Contact your host if you know the code should work.

  4. karl willo 2011/02/04 5:47 pm

    Hi this has been a great read, but i still need some help if anyone can. Im trying to pass on the ‘id’ value from my results page to the details page. I have had it working using the querystring below. It worked when i was only getting info from one table, but now i have INNER JOINED 2 tables its not working.

    <a href="DetailsPet.phpid=">details</a>

    Im new too Php and its got me stumped. Im thinking its to do with the ‘id’ – do i need say which ‘id’ too pass the value of. As both tables are joined using ‘id’ any help with this would be great

  5. olwebty – Thank you, nzkwrdc.

  6. After I upgraded to WordPress 3.2, I have noticed that WP-Filebase is inserting “%20” in place of spaces in shortcode when I create a link to a file.

    This was how it was done before the upgrade, which worked OK:

    [wpfilebase tag=fileurl id=72]

    But now it is doing this:

    [wpfilebase%20tag=fileurl%20id=72]

    which is not OK, because this creates a long list of ALL files in WP-Filebase directory!:

    Overall encoding for the WP site is set at UTF-8 in the Settings.

    I have deactivated and reactivated WP-Filebase.

    Anyone have any idea of what I need to do to correct this issue?

    Thanks for your advice!

  7. Jeff Starr

    Hey MM, I wish I knew, I would love to help, but I’m unfamiliar with WP-Filebase. I would contact the author of the Filebase plugin and see if there is a solution or workaround for the issue. Good luck!

  8. Hi there,

    Thanks for the article! Shouldn’t the equal sign also be encoded?

    i.e.

    &title=The%20title%20of%20a%20post

    should be

    &title%3DThe%20title%20of%20a%20post

    I’ve seen API suggestions that don’t encode, so maybe I’m wrong, but haven’t read anything contrary to my understanding of this in the spec.

    From [RFC2396]:

    3.4. Query Component

    The query component is a string of information to be interpreted by
    the resource.

    query = *uric

    Within a query component, the characters “;”, “/”, “?”, “:”, “@”,
    “&”, “=”, “+”, “,”, and “$” are reserved.

  9. Jeff Starr
    Jeff Starr 2011/08/23 2:12 pm

    Hey Steve, as far as I know there is no need to encode the equal sign, as it’s reserved for literal inclusion within URIs.

  10. Hello.

    How would you do this.

    Http://www.site.com/?n=1&amp;URL=http://my.com?a=3

    There are multiple querystrings. My site is ignoring the second

  11. Ladida Cafe 2011/09/02 12:10 am

    hey there, thanks for the tips, buat I have a problem here

    <a expr:href='&quot;http://digg.com/submit?phase=2&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title'/>

    how to fix that? how to use %20 in place of spaces?

  12. Hello,
    I am working on an unfinished site for a friend of mine and I have no idea where these id’s ? are pointing to. Are they pointing to folders and files on his server?
    It’s a flash engine which pulls different editable images into it, and he had a falling out with the gentleman that was building the site for him.
    I know that the “bt_design is an swf file, but i’m lost on the rest of the string.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Banhammer: Protect your WordPress site against threats.
Thoughts
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.