Passing WordPress URL Query String Parameters to Control Page Content

WordPress Content/Flow Puzzle

I recently came across a scenario where, from an order page, the visitor has 2 options, perhaps more in future, to request services.

Depending on which service is selected, I then needed to show an intermediate page which, for the most part, had the same information but different images at the end of the page depending on which service was selected on the order page.  This intermediate page could also be shown independently of the order page, i.e. without  service #1 or #2 images and verbiage.

Additionally, based on the service requested on the order page, a different fulfillment page needed to be shown from the intermediate page.

Perhaps the schematic below will make this clearer: -

Solution Using URL Query String Parameter

It is important to note that the intermediate page contains a lot of common content.   We could just create 3 versions of this page: one for Service #1, #Service #2, and standalone page.  This, however, creates a maintenance problem, i.e. if the common content changes, we’d have to make the change in 3 different places.

Ideally we want to have just one intermediate page containing the common content and functionality to show specific service requested images and verbiage.

There are probably multiple ways to handle this requirement in WordPress.  I chose to use Query String Parameters in WordPress URL as follows: -

The solution below is specifically for the Genesis News child theme, but should work with any of the Genesis child themes.

Step 1

Modify the order page to accommodate service #1 and service #2 hyperlinks as follows: -

• Service #1 : <A href=”../IntermediatePage?service=s1”>Order Service #1</a>
• Service #2 : <A href=”../IntermediatePage?service=s2”>Order Service #2</a>

Step 2

Create your fulfillment WordPress pages – FulfillmentService1 and FulfillmentService2.  You will need to know the WordPress Page IDs of these two pages.

Step 3

Create a custom page template for the (common content) intermediate page.  This page needs to implement the following functionality: -

1. Determine which service was selected from the order page.
2. Show content and image depending on which service was selected on the order page.
3. Construct hyperlinks to go to the correct fulfillment page.

The above would be added to the end of the page which makes things pretty simple.

Here is the code that needs to go in the custom page template: -

<?php
/*
Template Name: Intermediate Page
*/

add_filter( 'genesis_after_post_content', 'customcontent' );  // This is to add after the normal page/post content.

function customcontent() {

 define (NEXT_STEPS, '<h2>What to do Next</h2><p>Verbiage for Service #1 and Service #2.</p>');
 define (SERVICE1,12); // Page ID of FulfillmentService1 WordPress page
 define (SERVICE2,44); // Page ID of FulfillmentService2 WordPress page

$service = $_GET['service']; // Get the query string.  This will be either s1 or s2.

switch ($service) {
 case "s1" :
   $url_endpoint = get_permalink(SERVICE1);
   $url_endpoint = parse_url( $url_endpoint );
   $url_endpoint = $url_endpoint['path'];
   echo NEXT_STEPS.'<a href="..'.$url_endpoint.'"><img src="../images/s1.png" /></a><br/>';
   break;
 case "s2" :
   $url_endpoint = get_permalink(SERVICE2);
   $url_endpoint = parse_url( $url_endpoint );
   $url_endpoint = $url_endpoint['path'];
   echo NEXT_STEPS.'<a href="..'.$url_endpoint.'"><img src="../images/s2.png" /></a><br/>';
   break;
 default :
   break;
 } // switch

} // function custombutton

genesis(); // <- everything important: make sure to include this.

?>

Notes:

1. The “addfilter” adds additional functionality  to the “genesis_after_post_content” hook.
2. Using NEXT_STEPS constant assumes you want the same verbiage for each service request.  This can easily be placed under the appropriate switch clause in order to customize for each service type.
3. By using a switch statement, as opposed to a nested if statement, we can easily add more service or product options in the future.  It is also easier to read .
4. The parse_url function comes in pretty hand here.  It parses the entire URL into an array which can be accessed by individual element.
5. The s1.png and s2.png are images for Service #1 and Service #2 respectively.

Step 4

Create a WordPress page (named IntermediatePage for this example) using the template created in Step 3, above.  Add all the common content.

This page can be shown independently (../IntermediatePage) or using a custom URL (../IntermediatePage?service=s1 or ../IntermediatePage?service=s2) and it will “behave” accordingly.

If the page is to be shown as a standalone no service-specific images or verbiage will be shown.  If a custom URL is used then it will show the appropriate image and verbiage.

That’s all there is to it.  Let me know if you find this technique useful in your WordPress application.