Support

Account

Home Forums Add-ons Flexible Content Field Can Flexible Content Be Used As Page Layout Builder?

Solved

Can Flexible Content Be Used As Page Layout Builder?

  • Can the Flexible Content Field be used to create page layouts that can be used on multiple pages (without having to recreate the layout each time you add a new page)?

    Currently I can use Flexible Content fields normally by creating a Flexible Content Field Group that has many Layout Blocks (eg: text, wysiwyg, repeater with text and image, gallery, etc), and then on each page I can set up:

    – Image (for a page banner)
    – Repeater with Image and Text (3 across)
    – WYSIWYG (for page content)
    – Gallery

    That is fine and easy, but I have to set this up each time a new page has that particular layout. With many pages, this can take a long time, especially if the pages have many Layout Blocks.

    What I want is the ability to create multiple Page Layouts with ACF (maybe using a Custom Post Type), and then on each new page just select the Page Layout you want to use and the page is populated with those fields.

    Eg:
    – Create a Custom Post Type called “Page Layouts”.

    – Create an ACF Field Group called “Page Layouts”.
    – Set this Field Group to only show on the “Page Layouts” Post Type.
    – This Field Group has a Flexible Content field type, which has all possible Layout Blocks (eg: gallery, wysiwyg, repeater, accordion, etc).

    – Create several “Page Layout” posts (eg: Home Page Layout, Info Layout, Gallery Layout, etc).
    – Set these Page Layouts up how you want them using the Flexible Content field Layout Blocks, but keep them empty of content.

    – Create an ACF Field Group called “Page Layout Selector”.
    – Set this Field Group to display on all Pages.
    – Set it to display in the sidebar
    – This Field Group has a Select/Relationship/Post Object (or something) that lets you choose which “Page Layout” to display in the Page Editor.

    – Create a new Page.
    – This page will have the “Page Layout Selector” in the sidebar.
    – Choose a Page Layout from the ones listed (that you created earlier: Home, Info, Gallery, etc).
    – Choosing a Page Layout causes all the Flexible Content field Layout Blocks from that Page Layout to display in the Page Editor.
    – Fill them in with content as normal and publish the page.

    I hope this makes sense, and any help would be appreciated.

    TL:DR Is there a way to save specific Flexible Content Layouts for use on multiple pages, without having to recreate them every time?

  • The short answer is no, this is not possible.

    The long answer is… well, in theory it should be possible but the solution may be more trouble than it’s worth. You can create acf/load_field filters (http://www.advancedcustomfields.com/resources/acfload_field/) that read what is include on some other post and then created empty fields with default values. This can be a fairly complex process, especially trying to pre-populate flexible content and repeater fields and would be even more complicated with nested repeaters and flex content. This is not something I’d want to do unless I had a lot of time to kill and might actually take longer to research and build than it would take to build out the pages.

  • Thanks for your answer John.

    It wasn’t the answer I was hoping to hear, but I accept it as solving my question.

    We ended up taking a different route using templates and child themes.

  • Hello Matt,

    It is possible and very very easy. There is a WP Plugin called “Duplicate Post”. You can clone posts and pages with it.

    I use it a lot and it works perfect.

  • If you have page with fixed layouts, then it might be better to not use the flexible content fields. Instead just create a new field group with the specific ACF fields that you want, a new page template name, and assign this new field group to the page template you created.

  • What if you created a Custom Post Type, like “Layouts” and then create posts within that type for each page of content. Those posts could have any number of ACF setups on them.

    Then for each of your build pages you just query the Layouts post-type for the ID of the content you’d like to display.

    Apologies if this is a longer solution.

  • One should be extremely careful with the number of layouts added to a single post. When dealing with repeaters and flexible content it is possible to cause WP to time out trying to save a post if there’s too much to save.

  • I’m currently working on a live editor that allows users to build a page with flexible content field elements. I have already built in features to resize columns, sort elements with drag and drop, and delete elements. Now I’m up against the biggest challenge: adding/updating elements via ajax.

    In theory this could be done by creating a duplicate page with a status of “live draft”. Then fields that are added or edited in the front end form get saved to the live draft. When finished editing, the contents of the live draft would be copied to the actual page.

    I’ve got the duplication working, but I’m not sure how to handle adding/editing fields. When I pull data from the form created by acf_form() on the front end, I’m getting field names in this format:

    acf[field_5442aa647c573][2][field_54241c7840131][0][field_54241c784515d][0][field_54241c784a114]

    Looks like field key and row numbers for a few nested flexible content/repeater fields. When I run get_post_meta() on the page, the entries are formatted like this (same field as example above):

    flexible_content_editor_2_elements_0_tab_editor_0_tab_title

    When inspecting the code inside ACF’s api-template.php, I see that the update_sub_field() function utilizes this format that matches the actual post meta:

    {$row[‘name’]}_{$row[‘i’]}_{$field[‘name’]}

    I’m thinking the best way to approach this is to write an ajax call that converts field keys to row and field names to be used in either update_sub_field() or update_post_meta(). Then, return the updated field content to be displayed on the live edit page without reloading.

    I’m interested to hear other approaches and/or advice on how to get this working. Thanks!

  • Take a look at this plugin: https://github.com/infazz/flexible-templates
    It allows saving of Flexible content templates.

  • I’m making a pretty rudimentary one with Flexible Content. I’m making it easier for the end users to make similar layouts by loading a lot of the functionality into shortcodes, and then making TinyMCE buttons for the shortcodes that prompt them for options. So: user lays out flexible content rows, hits buttons to add shortcodes to the rows and columns in the layout they’ve chosen, and the shortcodes produce galleries or post listings or whatever.

    I came up with this when I was originally going to use Divi (a page builder type of plugin and theme) for a particular website until realizing that plugin didn’t scale well at all. The one thing Divi really has going for it are custom pre-fab layouts you can load up, and the ability to create libraries of repeatable content. So my shortcodes, combined with some ACF fields applied to Site Settings, accomplish about 80% of the same thing, but without all the Divi headaches/limitations.

    I agree with Anu’s solution for loading up prefigured layouts. It’s better to have custom fieldsets attached to page templates.

    But I think I’m making a decent freeform editor with FC. It just doesn’t get auto-populated.

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Can Flexible Content Be Used As Page Layout Builder?’ is closed to new replies.