How to Use URL Parameters to Pass Data to WordPress

When you start to market your website to the world through SEO, Inbound Marketing, Adwords or plain Email Marketing, you’ll likely come across a situation where you need to pass information back into your website for tracking purposes.

You may want to collect the URL or the Facebook advert ID of the button that somebody clicked through from.

Maybe you have affiliate links on external sites and need to track where people are clicking through to your site from.

Or maybe you just want a quick way of modifying your website to do something site-wide.

Passing data to your site using URL parameters is a quick way to achieve this with little coding required in the back-end.

URL parameters are also known as Query Strings or Query Vars and usually, have a key and value pair like this:
?state=NSW

They always start with a question mark at the end of the URL and multiple parameter pairs can be concatenated together using an ampersand like this:
?state=NSW&city=Sydney

Altering the behaviour of your site using URL parameters

We had a client who wanted to embed some of their site’s pages into another external site for marketing purposes.

However, they didn’t want the header or footer to show from their site, just the body of the page.  This meant removing the header with the logo and the primary navigation from the top of the site and the footer widgets and copyright text at the bottom of the page.

We can easily do this using CSS on our own site but there was no way to add CSS to the external marketing page.

So, we decided to use a URL parameter that the client could add to the URL when pasting it into the external marketing page, along with some simple code in the header.php, footer.php and functions.php files of their theme.

We added the following code snippet in the theme’s functions.php file.

function wwp_custom_query_vars_filter($vars) {
    $vars[] .= 'noheadfoot';
    return $vars;
}
add_filter( 'query_vars', 'wwp_custom_query_vars_filter' );

It adds the “noheadfoot” string as a new Query Var (URL param value) that WordPress can recognize.

Now we can add ?noheadfoot=value in our URL address.

To remove the headers, menu and other divs and sections from the header we added the following code snippet in the header.php and footer.php theme files.

$noheadfoot = sanitize_text_field( get_query_var( 'noheadfoot' ) );

$classhide = '';
if( strtoupper( $noheadfoot) === 'TRUE' ){
  $classhide = ' hide';
}

The function get_query_var() loads the value, if any, from the query var we registered in the previous code and added to the URL address with ?nofooter=true.

The function sanitize_text_field() makes sure that we get some text value – we don’t want anyone passing JavaScript or other code in the parameter!

The rest of the code sets a variable called $classhide to empty then if the query var value is “TRUE” it sets the variable to ” hide”.

We can then add this variable to the class of all the areas we want to hide in the header.php and footer.php files, for example:

<header class="site-inner<?php echo $classhide;?>">
<h1>Title<//h1>
</header>

In our style.css file or in the customizer we can add the CSS properties for the hide class.

.hide{
  display:none;
}

So when a section has “hide” added to the class it’s not displayed in the browser.

You can extend this code to hide or display all sorts of things like sidebars, widgets, menus etc.

Let us know in the comments below what stuff you are hiding on your websites using the query string method!

If you found this interesting, check out some more of our “Explained” posts.

Looking to level up your WordPress development skills?

I self-taught myself WordPress development, but this book took it to another level.

Each chapter builds upon the next, but you can also use it to jump into specific areas like WP Cron, WP REST endpoints, building a custom plugin repository etc.

If you’re like me and like having reference books at hand, this is the one that sits on my desk all the time.

Get Professional WordPress Plugin Development