How To

Turn a Design into a WordPress Landing Page (plug-n-play template provided!)

15 Sep , 2017  

WordPress Landing Page

Online businesses love landing pages, right?

It’s entirely possible to get above 50% success rates (conversions) on a well-designed landing page.

If you’re selling something and you know around 50% of the people who arrive on your landing page will turn into sales leads, you’ll be very happy indeed.

Then there’s WordPress. It’s estimated to run a quarter of all websites on the internet, and is still growing in popularity. WordPress has become the default choice for setting up company websites, blogs, and in conjunction with WooCommerce, online stores.

But when we put WordPress and landing pages together?

Here’s the thing: landing pages are minimal. The less distraction, the better. They’re designed to focus the customer’s activity down to one single action.

But WordPress is the opposite of that! Menus, sidebars, footers, tags, categories – the “out of the box” experience with WordPress is anything but minimal.

Of course, there are many solutions to this – but the majority of them are paid landing page plugins or services.

What do you do if you want to implement a landing page design in a vanilla WordPress install?

That’s what you’re going to learn today.

What you’ll know after reading this article:

  • What custom WordPress templates are.
  • Three parts of every WordPress template.
  • How to create and install your own custom template for landing pages.
  • How you can use a custom template to implement a landing page design.

What I assume about you:

Want the completed example code from today’s article? Click here to get it!

So what’s a custom WordPress Template?

If you’ve ever create a Page in WordPress, you may have noticed the Page Attributes side panel:

Wordress Page Attributes

The Template list usually only has one option – ‘Default Tempate’. Some themes, especially premium WordPress themes may have more options. If one of the them is a landing page template – you’re in luck! Your work here is done.

If you don’t have that option, then you’re stuck with the Default Template – the usual WordPress template with navigation, footer menus and so on.

Where WordPress templates live

Like I said at the start of the article, I’m assuming you have access to a WordPress installation. See here if you don’t yet.

Let’s say you’ve got a WordPress installation running on example.com, using the ‘Twenty Seventeen’ template provided with WordPress.

We’ll call the top level of the WordPress installation root, also known as ‘/’ (forward-slash).

Under root is a directory (or folder) called wp-content (short for WordPress Content).

The wp-content directory contains a themes directory, which in turn contains the Twenty Seventeen theme in a directory called twentyseventeen:

/
  wp-content/
    themes/
      twentyseventeen/
        [interesting stuff here]

The twentyseventeen directory contains all the PHP, CSS, JavaScript, and any other kind of file needed to implement the Twenty Seventeen theme. This is where we’ll put our custom theme files1.

The three parts of every WordPress template

At a minimum, a WordPress template will have three parts (many have more):

  • The header – this is where the beginning of an HTML page is defined, and it will usually include the page navigation as well
  • The template body – this sets up the main structure for the page, and injects you page’s content into the middle of it.
  • The footer – this defines the end of the HTML document, including the page footer.

So here’s what we’re going to do: We’re going to define our own version of these that will work in any current version of WordPress. This will be our landing page template.

While we do this, you’re going to see a little PHP code. PHP is the technology that WordPress is built on, and is one of the most popular programming languages for building interactive websites.

You don’t need to understand the PHP code in this article to use the custom templates.

Normally, I’m not in favor of copy-and-pasting code from the Internet, but in this case, there’s so little of it I’m going to make an exception! 🙂

Getting to know a WordPress template

Let’s take a look at the files the implement the default page template for the Twenty Seventeen theme. Under the twentyseventeen directory you’ll find three files called header.phppage.php and footer.php.

(There are other files that implement the default Twenty Seventeen template, but these are the ones we’ll concentrate on now).

We’ll start with header.php:

You’ll notice that the WordPress PHP template files look a lot like regular HTML files with <?php ?> tags sprinkled through them.

This is the idea of template files: static content that frames dynamic content.

header.php has two main jobs:

  • It defines the start of an HTML page with the <html><head>, and <body> tags.
  • It calls a PHP function that’s a part of WordPress: wp_head() (this is where all the CSS and JavaScript used by the theme is injected into the document2).

So a template header should make sure that the page is a valid HTML page and that all resources required to display the page correctly have been included.

What about page.php?

Besides setting up some <div> elements to structure the page correctly, it has some curious code in the middle:

<?php
while ( have_posts() ) : the_post();

  get_template_part( 'template-parts/page/content', 'page' );

  // [ I deleted stuff we're not interested in... ]

endwhile; // End of the loop.
?>

Note as per the comment in the code, I deleted some things that don’t affect us.

You’ll see this construct in pretty much every single WordPress template and is so famous (in WordPress land) that it’s referred to as “The Loop” (with caps).

We won’t be using it exactly the same way as shown here, but it’s purpose is to inject content from one or more pages into the template document.

When we make our custom template, our version of page.php will only display one document, the landing page. Nonetheless, we still need to use The Loop. It’s just the WordPress way.

Finally, what does footer.php do?

The default template’s footer.php file is in charge of:

  • Closing off any <div> elements opened in header.php (page.php should close its own elements.
  • Implementing a HTML page footer (with maybe more menus, contact information or what have you).
  • Calling wp_footer().
  • Closing off the <body> and <html> tags.

So it tidies up anything started by header.php, and calls out to wp_footer(), which is another WordPress PHP function. It injects content that needs to go at the end of the document (this includes the WordPress administration menu!)

Now we’ve had a quick overview of the roles of each of the fundamental template files, let’s make our own.

Want the completed example code from today’s article? Click here to get it!

How to create a custom WordPress template

As some context, here’s the page we’ll implement with our custom template:
Landing Page Example

So minimal, right?

There’s no navigation, no page footer and no sidebars. This makes our job a lot easier.

Each of the files we create should be added to the twentyseventeen directory, so that we end up with:

/
  wp-content/
    themes/
      twentyseventeen/
        [lots of other files]
        custom-lp.php
        header-custom-lp.php
        footer-custom-lp.php

 

We’ll start on the most important part – the template body:

Implement a custom WordPress template body

I’ll be referring to our template as the ‘Custom Landing Page’, and I’ll name its various files with custom-lp in them. So the main body of our template will be called custom-lp.php.

Here’s what it’ll contain:

<?php
/*

Template Name: Custom Landing Page

*/
?>
<?php get_header('custom-lp'); ?>			
<?php
  // Start the Loop.
  while ( have_posts() ) : the_post();
    the_content();
  endwhile;
?>
<?php get_footer('custom-lp'); ?>

Well, there’s not much to that, is there?

Let’s take a look at it more closely:

  1. First, we’ve got a big PHP comment with Template Name: Custom Landing Page. This is quite important; when we choose the template for our landing page from the Page Attributes panel in WordPress, this is where the name comes from.
  2. Then we have a call to get_header(‘custom-lp’). This literally means “for the header, use the file called ‘header-custom-lp.php’. We’ll create header-custom-lp.php next.
  3. Then we’ve got our own version of The Loop. Notice that inside the loop we make a call to the_content(), which means just insert whatever is inside the post straight into our document.
  4. Finally there’s a call to get_footer(‘custom-lp’), which tells WordPress to use the file footer-custom-lp.php for the template’s footer.

Now for the template header.

Implement a custom template header

The header file, header-custom-lp.php, has a bit more going on in it, but not much:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/custom-lp/custom-lp.css">
</head>
<body>

You can see we’re starting off the document in much the same way as the standard header file.

But after the call to wp_head(), we’re manually including three resources – the Bootstrap CSS and JavaScript, and a custom-lp.css file.

The inclusion of wp_head() and the CSS and JavaScript files here involves some tradeoffs:

  • The CSS and JavaScript files should strictly be enqueued so they’re automatically inserted by the call to wp_head(). I haven’t done this to:
    • a) keep things simple, and
    • b) make our custom template as easy to ‘drop in’ to themes as possible
  • If your WordPress theme already uses Bootstrap (a great many do), you wouldn’t include it here again.
  • The call to wp_head() isn’t strictly necessary for our landing page. But if we don’t call wp_head() the site’s plugins probably won’t work for our landing page.

So it’s your call on how to manage those tradeoffs.

The footer for our custom template

footer-custom-lp.php is the simplest part of the template so far:

  <!-- This is where the admin bar comes from! -->
  <?php wp_footer(); ?>
</body>
</html>

I’m including that comment about the admin bar because I forgot to put in the call to wp_footer() and was wondering what happened to the WordPress menu!

As you can see, this just finishes off the HTML document’s <body> and <html> tags.

Template support files

You may have noticed that our main template file, custom-lp.php refers to a CSS file called “custom-lp.css”. This is the line where that happens:

<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/custom-lp/custom-lp.css">

That looks like a standard link tag to reference external CSS, except for the href attribute. I this case the href attribute is set to the following value:

<?php bloginfo( 'template_url' ); ?>/custom-lp/custom-lp.css

What this means, is that we’re executing some PHP code (note the php tags) to get the location of the template.

If you recall, we put our template in the twentyseventeen directory:

/
  wp-content/
    themes/
      twentyseventeen/
        [lots of other files]
        custom-lp.php
        header-custom-lp.php
        footer-custom-lp.php

So now we’ll add a directory, custom-lp, and a CSS file. The directory structure will now look like this:

/
  wp-content/
    themes/
      twentyseventeen/
        [lots of other files]
        custom-lp.php
        header-custom-lp.php
        footer-custom-lp.php
        custom-lp/
          custom-lp.css

And this is what I’ve put in custom-lp.css:

body {
  background-color: #e82a45;
}

h1, h2 {
  font-weight: 300;
  color: white;
}

h1 {
  font-size: 60px;
}

h2 {
  font-size: 40px;
  margin: 0;
  padding: 0;
}

input[type="email"].form-control {
  width: 20em;
}

button {
  width: 10em;
}

.form-control {
  margin: 5px 0;
}

.full-length {
  height: 60vh;
}

.row.vcenter {
  display: block;
}

@media (min-width: 768px) {
    .row.vcenter {
        display: flex;
        align-items: center;
    }

    .full-length {
      height: 100vh;
    }

    .form-control {
      margin: 10px 5px 10px 0;
    }

}

It’s tightly linked to our landing page design (especially setting the body background color), but it doesn’t have to be that way.

We can apply custom styling to the landing page by using the WordPress themes Custom CSS option (if it supports it), or just using inline styles while building the landing page (see next section!)

Want the completed example code from today’s article? Click here to get it!

How to use your custom WordPress template

Finally! Now we’ve got a custom template in place, we get to use it!

First, go and create a new WordPress page in the WordPress installation you’ve been working on:

WordPress add new page

Give your new page a title, and choose our new Custom Landing Page template from the Page Attributes Template list:

Set Custom WordPress Page Template

If you preview the page you’ll see it looks pretty boring right now:

Empty Custom Template Page

Time to add something to it then!

Back in our WordPress Add New Page screen, click the Text tab, which is next to Visual. We’re going to enter our code in the Text tab because we need to use Bootstrap’s classes to implement our landing page:

WordPress-Text-Tab-Visual-Tab

And here’s our landing page code (once again, if you’re unfamiliar with Bootstrap, I’ve got a little intro here):

<div class="container-fluid">
  <div class="row vcenter">
    <div class="col-md-offset-1 col-md-5 col-sm-offset-1 col-sm-5">
      <h1>Time's running out!</h1>
      <h2>Sign up now:</h2>
      <form class="form-inline">
        <div class="form-group"><input class="form-control" type="email" placeholder="enter your email" /><button class="btn btn-info" type="submit">Go!</button></div>
      </form>
    </div>
    <div class="col-md-6 col-sm-6">
      <img class="img-responsive full-length" src="/wp-landing-page/wp-content/uploads/2017/09/watch.png">
    </div>
  </div>
</div>

Not much to it hey?

One thing we need to watch out for here is the src attribute for the img tag. You can’t just copy that part verbatim, even if you use the provided download from this article.

Here’s why: you’ll need to upload your image to WordPress’s Media Library, and then copy the URL of the image from the Media Library, and use that URL as the value for the image’s src attribute.

This is how you do that: first, go to the Media Library section of your WordPress admin:

Media Library Add New

Then use the uploader interface to upload your image. Once the image has finished uploading, click Edit (who knows why it’s so far from the image!):

Upload New Media Edit Image

Once you’ve got the Edit Media page open, select and copy the File URL value. This is what we’ll use for the img element’s src attribute in our landing page!

Copy Media Image File URL

Once you’ve pasted that into your landing page code, hit Preview to view your beautiful landing page:

Finished Landing Page

Congratulations! You’ve implemented a landing page in WordPress using a custom page template.

Want the completed example code from today’s article? Click here to get it!

Taking off with landing page templates

We’ve covered a lot in this article, and I hope you’ve found it useful.

Just to recap, here’s what we’ve done:

  • Learnt how and where WordPress keeps is themes.
  • Learnt what a WordPress page template is.
  • Studied the standard page template for the WordPress Twenty Seventeen theme.
  • Implemented our own, custom WordPress template.
  • Used the custom template to implement a landing page design.

That really is a lot, but it really only scratches the surface of how WordPress works and what we can do to customize it.

Nonetheless, this is enough to get you started implementing custom designs for landing pages in WordPress.

Got any questions or comments about what we’ve done? Let me know in the comments – I’m waiting for you! 🙂

Notes

  1. It would definitely be better to use a child theme, but that’s outside the scope of this article. The WordPress documentation on creating child themes expansive, but dense. Smashing Mag has a more gentle introduction.
  2. Or, depending on the configuration of the WordPress install, wp_footer() may inject the CSS & JS resources at the end of the document to help the page load faster.

Appendix A – Getting Access to WordPress

Hey – this whole post presupposes you have access to the files of a WordPress installation.

This means that you’re either working with a WordPress that’s hosted with a provider like GoDaddy or BlueHost (not wordpress.com), or you’re running WordPress on your own computer.

Hosted WordPress

In this case you’ll want to access your WordPress installation via cPanel. You’ll usually access this by clicking on a ‘manage hosting’ option with your provider.

Once you’ve got cPanel open, you’ll be able to access your site’s files using the File Manager:

cPanel File Explorer

When you open the File Manager, it may open in the WordPress root directory, in which case you can start navigating through the WordPress installation by double-clicking directories to open them, and using the Upload, Download and Edit menu options in the File Manager to change WordPress files.

 

If this happens, double-click the public_html directory, and you should find your WordPress files in there.

Running WordPress on your own computer

To run WordPress on your own computer, you’ll have to set up a hosting environment first: a web server, PHP and MySQL.

Lucky for us these technologies can be installed in a bundle as either WAMP (for Windows) or MAMP (on macOS).

What’s a WAMP/MAMP you ask? Well:

  • W/M: Windows/macOS
  • A: Apache (that’s your web server)
  • M: MySQL (the database)
  • P: for PHP

If you’re using Linux you may have one or more of these installed: you’ll have to consult your distro’s package manager to be sure.

Windows users can install WAMP here, and Mac users can install MAMP from here.

After that, you’ll need to download the latest WordPress from here, and expand the WordPress ZIP file in your WAMP/MAMP root server directory (MAMP defaults to /Applications/MAMP/htdocs, WAMP defaults to www under your wamp install directory).

Once you’ve done that, follow the WordPress install instructions here to get your WordPress up and running.

Then you’ll be ready to start installing your custom landing page template described in the main article.

Want the completed example code from today’s article? Click here to get it!

By


2 Responses

  1. ssasha says:

    I like the tutorial thankyou. Was hoping to see more on landing page design?

    • Luke says:

      Hey, thanks for that. I thought I’d concentrate more on getting to the point where we can implement a simple Bootstrap landing page, since setting up the template is 90% of the battle. After that we’re free to do what we want with it.

      Also, I realize I glossed over the fact that our landing page form doesn’t do anything! I left that out because that part is often provided for us by mail list providers, like ConvertKit and MailChimp (for instance).

Leave a Reply

Your email address will not be published. Required fields are marked *