• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Andrea Whitmer

Andrea Whitmer

Musings of a web developer, blogger, and dog mom

  • Home
  • About
  • Contact
  • Projects
  • Blog
  • Museum

Note: This article is a relic from the past and may be outdated. Learn More

How to Build a Genesis Landing Page with Advanced Custom Fields

How to Build a Genesis Landing Page with ACF Pro - This tutorial walks you through all the steps (including project files) to create a custom Genesis landing page using the Advanced Custom Fields plugin. via @awhitmer83

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.

View Demo

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.


Getting Started

Before we do anything else, we need to upload files. Click below to download the project files, then unzip and use as follows:

Download Project Files

  • 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
click to view larger

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.

Fields Walkthrough

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.

Code Walkthrough

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!

This is an ancient article,
so comments are now closed.
Back to the Museum

Reader Interactions

Comments

  1. Stephanie hellwig says

    April 10, 2017 at 12:13 pm

    This is so helpful Andrea! Thank you

    • Andrea Whitmer says

      April 10, 2017 at 12:13 pm

      You’re so welcome!!

  2. Matt Ryan says

    April 11, 2017 at 4:41 pm

    Hey Andrea,

    I love the way you put these tutorials together. Good level of detail and really appreciate breaking it into two parts.

    I haven’t used the Pro version of ACF before. Might just be time to take the leap. I have a new project I’m starting that I could try it out on.

    I’ll let you know how it goes.

    C’ya.

    • Andrea Whitmer says

      April 11, 2017 at 4:43 pm

      I think you’ll really like it! The repeater and flexible content fields are SUPER worth the money. There are very few problems it can’t solve – let me know what you think if you try it out!

  3. Wayne Stratton says

    May 25, 2017 at 4:39 pm

    Finally able to sit down with this again Andrea! Loving the possibilities here, sure beats wigdteized home pages and HTML! Have you adapted this to a regular page template?

    • Andrea Whitmer says

      May 25, 2017 at 5:06 pm

      I haven’t, but it wouldn’t be hard to do. What are you thinking – same concept, but leaving the header and footer intact?

  4. Adrianne says

    June 21, 2017 at 1:02 pm

    When I imported this into the Hello theme, it’s not removing the site-inner wrap for some reason and it’s continuing to use the theme-specified 1140px width. I feel like I’m missing something simple here, but I can’t figure it out haha any suggestions?

    Thanks – this is a great tutorial and great idea – super useful for the project I’m working on ๐Ÿ™‚

    • Andrea Whitmer says

      June 21, 2017 at 1:06 pm

      Hmmmm I’d have to see it – can you email me a link?

    • Andrea Whitmer says

      June 21, 2017 at 11:34 pm

      For anyone else who may be using this theme, this was resolved with CSS. ๐Ÿ™‚

      • Adrianne says

        June 22, 2017 at 1:18 pm

        Yeah, sorry I was doing too many things at the same time yesterday when I tried to implement this – so sorry for the confusion. Thank you for an awesome tutorial ๐Ÿ™‚

  5. Tilak says

    November 30, 2017 at 2:12 am

    This is very helpful. Every detail you put together in this article. It will help me for upcoming projects.

  6. James says

    February 22, 2018 at 11:13 am

    Andrea,
    Thanks for this tutorial. It’s very helpful. I noticed that every ACF item in the json file has a unique key. I’ve imported this json into my project and then made changes to some of the field groups to work with my project. I want to be able to use this same set of field groups to work with other page templates, but I’m not 100% sure on the best way to do that and I’m concerned that the unique keys might cause a conflict if I try to export and then re-import the json for a new page. Any thoughts/suggestions would be welcome. Thanks.

    • Andrea Whitmer says

      February 24, 2018 at 4:07 pm

      Hi James,

      Okay, let me get some clarification here – are you wanting to reuse the landing page template on multiple pages? Or are you wanting to make a new template with some of the same elements as the landing page template? If it’s the former, you can use the landing page template more than once – just create a new page and select the template from the dropdown inside the page editor screen. If it’s the latter, you’ll need to create a new field group, set up the same way as the existing one, and write a template to display the fields.

      • James says

        March 5, 2018 at 4:03 pm

        I was wanting to make a new template with many of the same elements as the landing page template.
        I tried duplicating the Landing Page field group (that way it’s set up the same as the existing one) and changed the name to “Regular Page” field group. I then cloned the landing-page template for use as my regular-page template, but I seem to be missing something. The field group shows up fine in the page editor and I can choose my new template, but other than header and footer, content isn’t displaying. Any thoughts on what I’ve overlooked?

        • Andrea Whitmer says

          March 7, 2018 at 3:08 pm

          Without logging in via FTP and in the dashboard, it’s hard to tell. If you want me to take a look, use the contact form and I’ll be glad to see if I can figure out why it’s unhappy.

  7. James says

    April 6, 2018 at 3:42 pm

    I’ve been building a site using the Genesis child sample theme and I’ve run into an issue where the default search doesn’t return any results. No matter where I am in the site, if I enter a word or phrase into the Search box I always get a “Sorry, no content matched your criteria” message. And this is when I intentionally search for something that I know is on the site. Just curious if you have seen this before and have any thoughts. I’ve been googling this and have yet to find a solid troubleshooting example.

    • Andrea Whitmer says

      April 6, 2018 at 4:25 pm

      Hi James,

      A couple of things come to mind. Do you have published posts and pages? Have you tried re-saving permalinks? Have you made any changes to the search results template in your child? Any plugins related to search?

  8. Dare says

    May 29, 2018 at 12:40 pm

    Thank you Andrea for this tutorial. I just came across the videos today while researching for something else and was wondering why I havenโ€™t used the ACF Pro all this time.

    Youโ€™ve been very helpful on the genesiswp Facebook and on the Studiopress forum.

    Hopefully it will be compatible with Gutenberg so I can use this in my next project.

    • Andrea Whitmer says

      May 30, 2018 at 7:00 pm

      ACF will definitely be updated for Gutenberg compatibility. It’s the #1 must-have plugin I use for my business – makes life so much easier!

  9. Dare says

    March 13, 2019 at 10:02 pm

    Hello Andrea,

    Sorry to bother you with my question. I was trying to implement the ACF tutorial with Gutenberg (locally) but the fields are not showing. It appears the custom template is correctly called because when “echo” a sentence it shows on the front page. I am not sure if you have or plan a tutorial on using ACF with Gutenberg + Genesis.

    • Dare says

      March 16, 2019 at 9:06 am

      Sorry, ignore my message. I was trying too hard. The template worked right inside blocks so it’s showing on both back and from ends.

  10. Amy says

    November 9, 2019 at 8:48 am

    So great! Thank you for this!! Still working and it’s late 2019 ๐Ÿ™‚ Just awesome!!

    • Andrea Whitmer says

      November 13, 2019 at 8:46 am

      Glad to hear it was helpful!

  11. This is an ancient article,
    so comments are now closed.
    Back to the Museum

Footer

look, i’m social…ish.

  • facebook
  • twitter
  • pinterest
  • instagram
  • github

Random Andrea Facts

andrea's husband is in paramedic school and will hopefully be finished in 2023.

Hey, I think you’re awesome.

Listen, the world can be a terrible place, but it costs zero dollars to be kind to people, whether or not they deserve it. If we all committed to being nice, maybe it would suck less to exist, you know? Highly recommended.

  • Home
  • About
  • Contact
  • Blog
  • Projects
  • Museum
  • Privacy

© 2012–2023 andrea whitmer