Adding Advanced Custom Fields Flexible Content Fields to Genesis

So I was in the position to make the local Adventure Sports Club website easier to add and remove content with different page layouts instead of using shortcodes, making it easier for the end user to add content. With lots of bashing around the interwebs, I decided on using Advanced Custom Fields Pro plugin to make use of their Flexible Content Fields and, of course, use a Genesis child theme to keep Genesis Framework intact.

advanced-custom-fields-for-genesisHere is a quick overview on how to add ACF flexible content fields to your Genesis child theme. Please feel free to use this as a base template and modify from there. If you’re a coding master, feel free to skip the tutorial and go straight to the download on Github.

  1. You’ll want to purchase, install and activate Advanced Custom Fields Pro in the WordPress install you plan on using.
  2. Since I’m a super nice guy, I’ve already created the flexible content fields in ACF and a page template for your Genesis child theme. You can go ahead and download them from Github.
  3. Our next step is to add the flexible content fields to ACF. This can easily be done by using ACF import tool which can be found under the WordPress side menu- Custom Fields > Tools > Import Field Groups. Select the page-events-acf-export.json file which you downloaded from Github earlier and import.
  4. The fields will are added to a new Group in ACF called Event Pages. You might want to check how these are setup so you can create or customise these fields in future.
  5. Within your download from Github, you will need to add the file page_event.php to the root of your Genesis child theme.

If you have come this far you have successfully added ACF flexible content fields to your WordPress pages, now all you need to do is set them to your liking which I’ll show you below.

  1. Choose a page you would like to customise the layout and change the Page Attributes Template to Event. This will then add a flexible content area called Event Pages below your main page content.
  2. Now to add your first content object or layout click on Add Row and continue until you have your preferred design.
  3. Rows can be expanded or collapsed and sorted on the fly.
  4. Lastly, Publish your page for the world to see your brilliant new layout.

If you are having problems or need a little hand, please ask as this is my first tutorial and I plan on getting better.