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

 In Development & Technology, Insights

Part 2: How to Make a Child Theme for WordPress

This is the second 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 website. 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

 


Why use a child theme?

Directly modifying files that are developed and maintained by others can make upgrades difficult, so let’s make a child theme that we can use as a foundation for implementing custom landing pages later. If you have already developed your own theme and you want to integrate landing pages directly into it, then you can certainly do so. Child themes are not a prerequisite for adding landing pages to WordPress—just a way for us to do so without modifying our other theme files.

Why use a child theme?

Let’s make a child theme!

A Simple Start

First, create a new folder for your theme. If you’re like most people, you’ll probably want to name it something like “I love burritos,” but the standard WordPress convention is to use lower-case letters and hyphens rather than spaces, so please use a name like “i-love-burritos” instead. We’re going to call ours “webenertia-wordpress-custom-theme” because our love for burritos goes without saying.

To have a minimally functional child theme, you just need to add two files to your new folder:

  • screenshot.png
  • style.css

screenshot.png should eventually be a 1200×900 screenshot of a page using your theme, but you can get started with whatever you like during development—a randomly selected picture from your hard drive or a web search, a photo from your dating profile, or a picture of your pet, for example.

style.css is more than a style sheet file to WordPress; it happens to be where WordPress looks for basic information about your theme. Yes, that is weird, but it’s how things are done in WordPress, so just add something like the following to the top of the file for now:

/*
Theme Name: WebEnertia WordPress Custom Theme
Description: A Child Theme to Demonstrate Custom Landing Pages in WordPress
Version: 1.0.0
Template: twentyseventeen
*/

Not to be confused with a page template, the “Template” value for a child theme determines the parent theme according to the name of that theme’s folder. The Twenty Seventeen theme’s folder is named “twentyseventeen”, so that is what we are using. If you want your child theme to have a different parent theme then just change “twentyseventeen” to the name of its folder instead.

That’s it! Now move your folder (or a copy of it) into the wp-content/themes directory inside of your WordPress installation, navigate to Appearance > Themes in the WordPress admin system, and you should see your new theme listed there and ready to activate or preview.

While using your child theme, everything on your site will look exactly like it would when using the Twenty Seventeen theme unless and until we change that, and both the parent and child theme can be updated independently, so working with a child theme is a great option.

One More Standard File

Now let’s add one more standard file to our child theme folder: functions.php.

functions.php can contain miscellaneous shared code for a theme, including WordPress hooks and filters. Let’s start it with some code to tell WordPress to load our style.css file after the parent theme’s style.css file. This will ensure that our style definitions take precedence over any parent theme style definitions that have selectors with the same specificities.

<?php

// Shared PHP for Landing Page Child Theme

// Hooks and Filters

add_action('wp_enqueue_scripts', 'lp_example_theme_enqueue_assets');

// Functions

function lp_example_theme_enqueue_assets()
{
  $parent_style = 'twentyseventeen-style';
  wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
  wp_enqueue_style('landing-page-style',
    get_stylesheet_directory_uri() . '/style.css',
    array($parent_style),
    wp_get_theme()->get('Version')
  );
}

?>

 

The “add_action” tells WordPress to run our custom function when WordPress reaches a certain point in its page-preparation duties—when it is assembling queues of page assets before actually adding them to the page. Don’t worry about the hook name only mentioning scripts; “wp_enqueue_scripts” is for styles as well.

As for our custom function, that tells WordPress to enqueue the style sheets for both the parent and child theme and it tells WordPress that the child theme style is dependent upon the parent theme style. There are a couple of details worth noting here:

  • The “twentyseventeen-style” handle is specific to our selected parent theme. If you use something else, you will probably end up with WordPress loading two instances of the same style sheet. Don’t rename this.
  • “wp_get_theme()->get(‘Version’)” refers to the version string in the style.css comment block from earlier. This parameter is optional, but if you specify a version string, then WordPress will append it to your style sheet URL, ensuring that browsers will reload the style sheet whenever the version string changes.

We could add some conditional logic to ensure that only certain style sheets are loaded with certain templates (e.g., only for landing pages and not for blog pages), but whether you want to do that will vary depending upon your goals for your particular site, so just be aware that it is possible if you want to do it.

child theme files

That’s it as far as we will be going into child themes in this tutorial. From here, everything we do will be specific to our landing pages: getting them into WordPress then enabling users to customize their content.

Next in This Series

In How to Get Pages with Custom Designs into WordPress we’ll take the first steps toward using a custom page template in WordPress by integrating an HTML page and adding some PHP to get WordPress to generate some if its metadata and asset markup.

 

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