This is the first 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.
WordPress may be best known as a blogging platform, but it is well suited for managing any kind of web content. With a little customization, a developer or an administrator can extend the capabilities of WordPress to provide users with ways to efficiently manage the content that is most relevant to them without requiring those users to touch any source code themselves.
There are many different kinds of user and there can be more than one kind for a single project. For the purposes of this series, we can consider web site users as belonging to one of two general categories: visitors and staff.
Web site visitors include the new users and potential customers who landing pages are typically intended to inform and entice. Thus, the design and content of landing pages tends to be carefully planned by marketers, designers, and copywriters.
Web site staff includes developers and others with access to change the site’s content, such as writers and editors.
In this series, we are concerned with implementing a custom landing page on a web site that is powered by WordPress, so we will assume that at least one landing page has already been designed and produced as static HTML and CSS. Our task will be to integrate that HTML and CSS into WordPress in such a way that writers, editors, or other appropriate staff members who manage the site’s content can publish and edit landing pages as easily as any other page on their site.
With that in mind, we can properly consider the staff’s needs so we can design a user experience that is not merely for them, but truly user-centric.
Let’s image that we have interviewed our editors and that they have told us what they want and need for publishing landing pages.
In broad terms, they told us that they want to manage landing page content using the standard WordPress forms with which they are already familiar and without having to edit any source code directly. They want their landing pages to be able to look entirely different from the WordPress theme that is in use across the rest of their website through the use of separate page templates and style sheets that will be provided by their designers and front-end developers.
We are also told that our editors don’t want even to see any HTML, CSS, or JavaScript if they can avoid it. They want to leave those things to their front-end team.
We are provided with the following mock-up of a landing page as a reference:
With all of that in mind, we settle on the following functional requirements for our project:
In this series, we’ll see how to implement custom landing pages in WordPress and how to enable editor users to manage and edit them easily.
We’ll start by looking at how and why to use a child theme rather than modifying our WordPress theme directly. Next, we’ll have to get our landing page into WordPress. After that, we’ll make its content editable by our users. Finally, we’ll add some finishing touches by customizing the site menu and the way WordPress generates the landing page titles.
We have a lot to do, but don’t be intimidated by it! We’ll take things slowly and tackle our big job by breaking it down into smaller tasks.
As with most frequently updated software, WordPress capabilities and default settings change over time. We’ll be using the latest version of WordPress that is available at the time of this writing, 4.7.3, and the latest default theme for WordPress—”Twenty Seventeen.”
Please note that WordPress.com does not allow users to upload custom themes. If you want to develop your own child theme and landing page as you follow along with this series, you’ll need to make sure you’re using an installation of WordPress that does allow you to use custom themes.
In How to Make a Child Theme for WordPress, we’ll explore the benefits of using child themes, and we’ll build our own simple child theme from scratch.
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.
