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.
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.
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 “Clear Digital-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 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:
|
1
2
3
4
5
6
|
/*Theme Name: Clear Digital WordPress Custom ThemeDescription: A Child Theme to Demonstrate Custom Landing Pages in WordPressVersion: 1.0.0Template: 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.
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?php// Shared PHP for Landing Page Child Theme// Hooks and Filtersadd_action('wp_enqueue_scripts', 'lp_example_theme_enqueue_assets');// Functionsfunction 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:
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.
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.
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.
From web design, CMS websites, applications, ecommerce, motion graphics and multimedia, graphic design, and print, to Internet marketing solutions, we’ve got you covered.
Clear Digital is a founding member of Myrious Group's expertise-driven agencies.
Myrious Group is an independent holding company enabling forward-thinking brands to achieve breakthrough performance through power of orchestration.
Visit Myrious.com
© Copyright 2024 Clear Digital, Inc., a Silicon Valley / San Jose Web Design Company. All Rights Reserved.
