Multiple drag-n-drop Hero, Text-Image and Image-Text sections using ACF Pro in Centric Pro’s front page

In the comments section of Using ACF Pro for multiple drag-n-drop Hero, Text-Image and Image-Text sections in Genesis tutorial a user wrote:

Great tutorial thanks.

Ive got this working perfectly on the “Home Page” ive created, but what i want to do is to put it into a widget area in the Centric child theme. The title “Home page” appears but nothing else, am i missing something, or should i be approaching this differently ?

In this article we shall

• use Advanced Custom Fields Pro plugin to create a Flexible Content type field having three sub fields for Hero, Image - Text and Text - Image
• attach the field group to Pages
• set a static Page called 'Home' as front page
• write PHP code to display rows of Hero and/or Image - Text and/or Text - Image if populated for the Home Page. If not, show the standard Home 2 widget area's widget(s) in Centric Pro's front page
• set the images as cover background rather than display inline like in the previous tutorial
• use matchHeight jQuery script to ensure that image blocks get the same height as that of text blocks in their corresponding rows

Screenshot showing fields of 'Home' Page populated:

Screenshot of the homepage:

We will simplify the solution by eliminating the use of Modernizr and Flexbox for the front-end display.

While the tutorial has been written for Centric Pro child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Create a static Page titled Home and set it as front page at Settings > Reading.

Step 2

In functions.php change

if ( is_page() and !is_page_template() ) {

to

if ( is_page() && !is_front_page() and !is_page_template() ) {

Step 3

Upload jquery.matchHeight-min.js to child theme's js directory.

Create a file named say, matchheight-init.js in the same location having: