Advanced Custom Fields is an amazing tool, and I use it constantly when building custom Genesis themes. The developer license ($100 for lifetime usage on unlimited sites as of this writing) is one of the best investments I’ve made for my business.
Let’s be honest – the stock landing page template that comes with Genesis is a little…. boring. Sure, it removes the header, footer, and sidebar(s) to give you a full width blank slate, but it really doesn’t do much else. Luckily ACF makes it easy to create an awesome Genesis landing page, and I’ve written a template that can serve as a great starting point for your own projects.
What You’ll Need
I’ve provided all the code you’ll need to create a custom Genesis landing page but you’ll need ACF Pro to implement it.
The free version doesn’t have the field options used in the demo, so while you’re welcome to play around with it before you buy, you won’t be able to follow this tutorial unless you own a Pro license. I promise it’s worth it!
You’ll also need FTP access to your site, and please don’t skip making a full backup before you make changes, just in case (I use and recommend BlogVault).
Finally, you’ll need Genesis and a child theme. The demo site was built using Genesis Sample, but you can use any Genesis theme. You may need to make some CSS changes to better fit your theme’s style.
Before we do anything else, we need to upload files. Click below to download the project files, then unzip and use as follows:
page_landing.php: Add to your child theme’s root folder. If there is an existing page_landing.php, we’ll be overwriting it with this one.*
landing.css: Add to your child theme’s root folder. (Why a separate CSS file? There is a lot of CSS involved, and keeping it in a separate file makes it easy to find it later.)
landing-page.json: This is the import file for ACF. We’ll install it shortly.
*If you’ve already created pages using the existing landing page template, you won’t want to overwrite it as that would break your other pages. Let me know if you need help renaming the new template so they can both coexist.
Installing ACF and Importing Fields
Upload ACF Pro via Plugins > Add New > Upload and activate it, then go to Custom Fields > Updates to enter your license key.
You can then (optionally) install the free Advanced Custom Fields Repeater & Flexible Content Fields Collapser plugin (phew, what a mouthful) to help keep things organized. If your landing page will make use of multiple sections, trust me – you want the plugin no matter how goofy its name may be.
Now navigate to Custom Fields > Tools and look for the Import file uploader at the bottom. Use this to upload the
.json file from the project download, which will create the entire field group for the landing page template.
Checking the Field Group
Once you import the field group, it’s important to check it over to be sure everything is still configured properly. If you install ACF before uploading the project files to your theme, for example, some of the settings may not import.
Scroll past the fields themselves and look at the bottom section of the page. In particular, you want to be sure these attributes haven’t changed:
- Location: Show this field group if Page Template is equal to Landing
- Position: High (after title)
- Hide on screen: Content Editor should be checked
Create Your Page
Now you’re ready to add a new page and apply the landing page template (via the template dropdown on the right side of the editor screen). Once you do, the landing page fields will appear at the top of the screen.
I made use of the ACF flexible content field almost exclusively to give you a variety of layouts to choose from. These can be applied in any order, quantity, design, etc. you choose. I also added a logo option in case you want to display a logo at the top of the page.
Want an explanation of installation and how each field works? The video below goes through the upload process, each layout option, and how it looks on the front end.
Want a brief overview of the template file and how it works? This video will explain how and what the template does.
Let’s see your Genesis landing page!
Now that you have a convenient builder for landing pages, I want to see what you create! Leave a comment below and let us check out your work!