Custom Landing Pages in WordPress How-to Series, Part 3

 In Development & Technology, Insights

Part 3: How to Get Pages with Custom Designs into WordPress

This is the third article in a five-part series about planning and implementing custom landing pages in WordPress. Each article is intended to be useful in its own right and applicable beyond landing pages, but taken together the series walks through the whole process of planning and implementing a custom landing page that integrates cleanly into a WordPress-powered web site. The resulting page will be easily editable with familiar forms in the WordPress admin system.

Custom Landing Pages in WordPress

  1. Planning a Custom Landing Page for a WordPress Web Site
  2. How to Make a Child Theme for WordPress
  3. How to Get Pages with Custom Designs into WordPress
  4. Coming Soon: How to Enable Users to Edit Custom Page Content in WordPress
  5. Coming Soon: How to Customize Menus and Title Text for Custom Pages in WordPress

 


Customizing Page Designs in WordPress Beyond Themes

One of the first things one tends to do when using a new installation of WordPress is to select a theme. That is the fastest and easiest way to customize the overall look of a WordPress web site. But what if you want to take things further with fully custom page designs as you might with landing pages for specific products, services, or campaigns? That’s where page templates come in. WordPress allows you to use as many page templates as you like, so your site can enjoy all the benefits offered by your chosen theme without ever being constrained to that theme’s particular built-in design or designs for pages for which you prefer other designs.

In this tutorial, we’ll use the example of landing pages, but you can use custom page templates for any kinds of pages you like—galleries, videos, downloads, or whatever else.

WordPress Terminology: Pages vs. Posts

In WordPress, pages and posts are similar and related but somewhat different things. In general, pages can be thought of as undated content—things like landing pages, about pages, and contact pages—while posts are typically blog content. Since we are presently interested in landing pages, we will be focused on page templates, not post templates, which can involve other options such as categories. That said, recent versions of WordPress do offer a simple way to use page templates for specific posts as well, so we will go over that.

Custom Templates Now, Custom Content Next Time

Normally, content on a WordPress web site comes from a database and we’ll get to that in the next tutorial. For now we’ll just use some placeholder content and that can come directly from our templates.

Our First Custom Page Template

Before we can tell WordPress to use a custom template for our landing page we’ll need for such a template to actually exist. A WordPress page template is basically just whatever PHP and HTML source code you like in a PHP file with a special comment to identify the template to WordPress.

You can name your custom template files as you like, but for the purposes of this tutorial we’ll keep our file names simple and descriptive, starting with simple-landing-page-1.php for our first template file. Whatever you name yours, save it into your theme directory, which should itself be within wp-content/themes.

Let’s start our first template file with the following simple PHP:

<?php
/*
Template Name: Simple Landing Page 1
Template Post Type: post, page 
*/
?>

Note the “Template Name” line in the PHP comment. That will allow WordPress to find our template when it scans through the theme directory and to distinguish this template from any others.

WordPress will use the value on that line as the friendly name of your template in its admin system, so choose accordingly—something meaningful for your users and easy to read.  For example, you might use something like “Fall 2017 Campaign Landing Page”.

The “Template Post Type” line is optional. By default, our template will be available for pages. If you are using WordPress 4.7 or later, though, you can include this line to make a page template available for posts as well.

Let’s add a little placeholder content—some simple HTML after our PHP.

<?php
/*
Template Name: Simple Landing Page 1 
Template Post Type: post, page 
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple Landing Page 1</title>
</head>
<body>

<h1>Simple Landing Page 1</h1>
<p>This is a simple landing page. Wheee!</p>

</body>
</html>

That’s it! You’ve made your first custom page template for WordPress! There’s only one so far and it has very simple static content, but it’s a start. WordPress should now be able to find your template and offer it to users through its admin system. We’ll see how that works momentarily, but first let’s create another template.

Additional Custom Page Templates

Let’s create a second page template pretty much just like our first so we can switch between two. We’ll go with simple-landing-page-2.php for the file name and “Simple Landing Page 2” for the friendly name, but again, you can choose whatever you like. Just use different file and friendly names from the ones you used for your first template.

Our second page template’s content should look something like the following:

<?php
/*
Template Name: Simple Landing Page 2
Template Post Type: post, page
*/
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple Landing Page 2</title>
</head>
<body>

<h1>Simple Landing Page 2</h1>
<p>This is a second simple landing page. Woo hoo!</p>

</body>
</html>

Using Our Custom Templates

Now that we have some custom templates, we can easily use one of them for any page or post we like with a simple setting in the WordPress admin system.

Selecting a Page Template

Just add or edit a page under “Pages” and you should see a “Page Attributes” box with a “Template” menu listing all of the templates that are currently available to you. It should look something like this:


When you publish or update that page, it should now use the specified template. Easy!

Selecting a Post Template

Similarly, when adding or editing a post under “Posts” you should see a “Post Attributes” box with a “Template” menu. That should look something like this:

Select a template, publish or update the post, and you’re done!

Troubleshooting

If you encounter any difficulty when trying to choose a template for a page or a post, not to worry! Here are some simple resolutions for likely issues.

No “Page Attributes” Box

If you do not see the “Page Attributes” box, you are probably working with a post rather than a page. Remember, although posts and pages are similar in WordPress, it does consider them to be somewhat different.

No “Post Attributes” Box

If you do not see the “Post Attributes” box, you may be working with a page rather than a post, but it is also possible that WordPress simply doesn’t have any post attributes available for you to change, in which case it does not show the “Post Attributes” box at all. See “Missing Templates” below.

Missing Templates

If the “Template” menu does not offer the expected templates, WordPress probably just can’t find them. Double check that you are using the theme you intend to use, that your template files are present, and that they contain “Template Name” lines in PHP comments as in the above examples.

If you are using WordPress 4.7 or later and your template does contain a “Template Name” line but WordPress still does not offer that template for use with a post, the template probably just needs a “Template Post Type” line.

Experimenting with Page Template Options

A custom page template can make use of its theme’s styles, its own styles, styles meant to be shared across multiple templates, or whatever combination of those things works for you. Similarly, it can include its own header and footer or use those of its theme via standard WordPress functions or custom PHP.

In the case of landing pages, you might want to use this flexibility to do some A/B testing (a.k.a. split testing).

Conclusion

With the ability to add custom page templates to your WordPress web site, you can now use fully custom page designs whenever and wherever you like.

Next in This Series

In How to Enable Users to Edit Custom Page Content in WordPress, we’ll see how our custom page templates can be made to use text and images that are managed by WordPress—stored in the WordPress database and uploads directory and editable through the WordPress admin system.