Landing pages are often used in marketing to show a single product or service. This is a useful tool, but as you introduce more services you may find a lot of duplication in your landing pages.
Dynamic landing pages are a way to tailor a single page to multiple product offerings. Simply by changing the keyword in the URL, you can update your page’s title, header, or content automatically.
This guide will be a technical overview in creating a dynamic landing page in WordPress. It will require FTP access and basic PHP knowledge.
We’ll be using a WordPress page to host our landing page’s content. Begin by creating a new page. You can give it a distinctive title like “Products Landing Page” or “Dynamic LP”, as this title will not be visible to the reader.
Start by adding your landing page’s main content. This will be the content available to all versions of the landing page, so don’t add any customized content yet.
Now onto the technical part. We need to create a unique template for our dynamic landing page (DLP). If you’re happy with how your page looks, make note of the currently applied template. If using a custom theme, you may see multiple template options like “standard” or “wide”. This makes it easy to know which template is being used.
In other cases, the template listed may just say “Default”. Figuring out which template file is actually being used may require looking through the WordPress template hierarchy. This is too theme-dependent to explain here, but
index.php are likely candidates when a default template is being used.
Once you find the appropriate template, copy and give it a unique name. For this example we’ll be duplicating the “Wide” template. As such we’ll give it the name
template-wide-dlp.php, and place it beside the original file. If you have a child theme available, move the new file to the child theme instead so a theme update does not overwrite your changes.
Next we need to tell WordPress about the template. Open the file you just created and find the line “Template Name” at the top. Give it a unique name and description.
Once that’s done, our custom template will now show up in WordPress. Refresh the page editor and look for your new template in the list. Select it, save, and refresh your published copy to make sure the page looks the same. If there’s been any visual changes, you’ve likely duplicated the wrong template file.
Our first objective is to capture the keyword intended for the landing page. To keep things simple we’ll look for the query string
kw which holds the keyword. This keyword can be targetted later with ads or other promotional material.
We’ll need to capture the keyword early so it can be used by the whole document. Make a copy of
header.php, and name it
header-dlp.php or similar. Again if using child themes, move the new file over first.
We need to have our template file use the new header. Replace the standard
get_header() call with a reference to our new file instead.
Note: This looks for and embeds a file named `header-dlp.php`.
In the header we’ll actually read in the value of the keyword. The simplest way would be to access it directly with
$_GET['kw']. To prevent any issues with html entities or XSS however, we’ll run it through
Next we need to know the default keyword to display if the
kw query string isn’t found. There’s a few options here, but one method is using custom fields. If creating a field named
default_keyword, we can grab its information with the line:
However as the new Gutenberg editor hides custom fields, this approach is less convenient than it used to be. So for our example, we’ll simply hardcode the fallback text into the code.
Once we have the dynamic and fallback keywords, we simply check which one we need to use. Putting it all together should look like this:
We’ve now defined our keyword which can be used elsewhere on the page. We’ll first insert it into the title of page:
You can add other details such as your site name, or just focus on the keyword.
Next we’ll update the header text for our page. Return to
template-wide-dlp.php and find your
. Just like above we’ll embed our new keyword.
This can be expanded upon to embed dynamic images (by uploading images with specific filenames), or updating paragraph texts to reference the keyword instead. The great thing about the dynamic landing page is that it’s dynamic.
As you are allowing visitors to essentially edit parts of your page, you must be mindful of XSS (cross-site scripting) attacks. Creating a whitelist of approved keywords is the simplest way to mitigate this, which can be handled in your original header code.
Any attempt to insert unrecognized keywords will simply fall back to the default keyword instead.
As you can see dynamic landing pages are a powerful technique for creating multiple variations of a page. They are particularly useful for A/B testing different product names and branding.
They are one more useful tool in your toolkit.