[Condition] URL Parameter

Update on April 15, 2020: Also added != operator.

---

This tutorial provides the steps to add a custom condition using which elements in Oxygen can be output based on the value of specific URL parameter like /?referrer=facebook.

Use Case

Let’s say you want to output a section having for example, a welcome message on the front end only for users that visit your site from Facebook and you want to output another Section only for visitors that land on your Page after clicking through a link in Twitter.

To achieve this personalization, you could

1. define “referrer” query variable in WordPress
2. register a condition that returns true if the URL parameter matches with the one user enters in the condition
3. set condition for your Oxygen sections i.e., enter facebook as the value of referrer URL parameter for the Facebook section and twitter as the value of referrer URL parameter for Twitter section.
4. use referrer query variable in your URLs like example.com/?referrer=facebook and example.com/?referrer=twitter

Step 1

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Add “referrer” query variable

Code:

add_filter( 'query_vars', 'custom_query_vars_referrer' );
/**
 * Add custom query variable called `referrer`.
 *
 * @param  array $vars Existing query variables whitelist
 *
 * @return array       Modified query variables whitelist
 */
function custom_query_vars_referrer( $vars ) {
	$vars[] .= 'referrer';

	return $vars;
}

Set the snippet to run everywhere.

Save changes and activate.

Step 2

Add another Code Block.

Title: [Condition] Referrer URL Parameter

Code:

if ( function_exists( 'oxygen_vsb_register_condition' ) ) {

	oxygen_vsb_register_condition(
		// Condition Name
		'Referrer URL Parameter',

		// Values: The array of pre-set values the user can choose from.
		// Set the custom key's value to true to allow users to input custom values.
		array( 
			'options' => array(),
			'custom' => true
		),

		// Operators
		array( '==', '!=' ),
		
		// Callback Function: Name of function that will be used to handle the condition
		'referrer_url_param_callback',

		// Condition Category: Default ones are Archive, Author, Other, Post, User
		'Other'
	);

}

/**
 * Callback function to handle the condition.
 * @param  mixed 	$value    	Input value - in this case, the text entered by the user.
 * @param  string 	$operator 	Comparison operator selected by the user.
 *
 * @return boolean 				true or false.
 */
function referrer_url_param_callback( $value, $operator ) {
	
	$referrer = sanitize_text_field( get_query_var( 'referrer' ) );

	if ( '==' === $operator ) {
		return $referrer === $value;
	} else {
		return $referrer !== $value;
	}

}

Set the snippet to run everywhere.

Save changes and activate.

Step 3

In the Oxygen editor add a Section that you want to be output to visitors that reach your page after they click on a link (to the page in question) having /?referrer=facebook in its URL.

For example, let’s say the page in question is

example.com/sample-page/.

Share a link to this page as

example.com/sample-page/?referrer=facebook

in your Facebook campaigns/messages etc.

Add whatever (Heading, Text etc.) you want to be printed for the above Facebook visitors on the front end inside this Section.

Set a Condition for this Section.

Enter facebook (the same query string value we have set in our Facebook URLs) as the value.

Now this Section’s HTML will only be output to those that land on /?referrer=facebook.

Repeat this process for any other URL parameter values as needed.

So an element with

applied to it will only be output if /?referrer=twitter is present in the page URL.

In the next tutorial (going to be for members only), I am going to show how we can use this technique to build a custom Login page in Oxygen with corresponding feedback text above the login form for handling the various cases like users entering incorrect data or blank inputs.

Reference

https://zeropointdevelopment.com/how-to-use-url-parameters-to-pass-data-to-wordpress/