Condition based on URL parameter value.

In this tutorial we will learn how to hide (or show) some element based on URL parameter. We will need to write some PHP code and that’s it. 🙂

What would we like to do?

We would like to show some container only if URL parameter score is larger than some amount. We will create this dynamic, so that you can choose your own value, but we will test with 50.

In the example on the image below, you can see that our score parameter is set to 60 – in this case, the container should show.

Code

Let’s first write some code. We need 2 things.

1. Add a filter, that will tell WordPress that we will use/read score URL parameter. We need to set this, otherwise WordPress will just ignore it.
2. Create a function that will return true or false, that we will use in Bricks conditions to show or hide a container.

You can put this code in functions.php or you can use code plugin, anyway it should work the same. I will use code plugin (WPCodeBox), but anyone will be good. I will put full code below and I put some comments inside to make it more understandable.

<?php 

//Add action on init --> On init we will run add_get_parameter function
add_action('init','add_get_parameter');

//Function, that will run on init.
function add_get_val() { 
    global $wp; 

    //Telling WP that we will look for "score" paramter in URL
    $wp->add_query_var('score');
}

//We will call this function and pass the number parameter,
//which will we use when comparing ti to URL parameter
function is_score_smaller($score){
    global $wp;

    //here we get URL paramter score
    $url_score = $wp->query_vars['score'];

    //we return the comparison value
    return $url_score < $score;
}

The code above should work. All we need to do is call is_score_larger function in Bricks conditions. Let’s do that.

Setting bricks conditions

First, let’s create 3 containers with some basic text. I’ve set it up like in the screenshot below.

Ok, if you save that and refresh a page, you will see all three containers. Now, let’s add some conditions. First, click on Score >=50 container and open conditions there. Remember, we need to show this if score is higher or equal to 50.

On the second line we call our function is_score_smaller that check if the score from URL is smaller then the score that we pass as a function parameter. In our case, 50. Because of this, we need to show the container if the function returns false.

Now let’s create the second one. AS you can see, it’s almost the same as above, with the exception that we check if the return result is true. This should work, now let’s try it.

Testing

Now, open the page and add ?score=60 to the end of your page URL, like one the image below. Of course, you need to adjust your URL 🙂

If you now refresh the page, you expect that you will see only two containers. The first one, that is shown every time (that doesn’t have conditions) and the second one, that has condition if score >= 50. Let’s check:

As you can see, our condition works perfectly. Now you can go and play a little, change score to 40 and see what happens.

Can we improve it further?

Yes we can. What if you open this URL without any ?score parameter in URL. One of the containers with conditions will still show. To solve this, we could create another function that will check if there is NO score parameter in URL and we could use that one in conditions, beside the previous one.

Or we can improve our function that would return something else if there is no score in URL… there are many ways to do it.

But I’ll leave you that for you to think how to do it, ok? 😉