Flex Editor


ACF Pro has a great feature called Flexible Content Field. It allows blocks of content to be added dynamically to a page. For more information, check out the documentation.

Start by adding a new Custom Field, and set the type as “Flexible Content”. Within this field you can now add “Layouts,” which act as sort of a sub-group of fields. Be sure to name each group and then be sure to set where to show your field group.

In your code, create a new Jade file called flex.jade and add it to your _views/_includes directory. Structure the file as follows:

- function flexLayoutOne(){
    - if(get_row_layout()=='layoutName1'):
        //HTML and PHP for block layout
    - endif
- function flexLayoutTwo(){
    - if(get_row_layout()=='layoutName2'):
        //HTML and PHP for block layout
    - endif
- if ( have_rows('flexFieldGroupName') ) :
    - while ( have_rows('flexFieldGroupName') ) : the_row()
        - flexLayoutOne()
        - flexLayoutTwo()
    - endwhile
- endif

Each flex layout or codeblock is called within a function, then a loop runs through all the blocks. On the back end, a user can choose which block to use, and the flex file is “smart” enough to figure out which block to use and where. This allows for flexible, adjustable content by the user while maintaining consistent code. Finally, be sure to include your flex file in the page.jade file (or wherever you would like to call it)
– include(‘includes/flex.php’)


PHOS Creative – https://phoscreative.com

Ginnie Springs – https://ginniespringsoutdoors.com

Greenhouse Church – https://greenhousechurch.org/