{"id":678,"date":"2019-11-23T19:04:30","date_gmt":"2019-11-23T12:04:30","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=678"},"modified":"2020-06-21T09:49:46","modified_gmt":"2020-06-21T02:49:46","slug":"diy-page-builder-with-acf","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/diy-page-builder-with-acf\/","title":{"rendered":"Creating Page Builder with ACF Flexible Content"},"content":{"rendered":"\n

ACF<\/strong> (Advanced Custom Fields) is a plugin to create user-friendly custom fields. Visit their website<\/a> to learn more.<\/p><\/blockquote>\n\n\n\n

Not satisfied with Gutenberg? Want a fully custom page builder? See no further than Flexible Content which is part of ACF Pro<\/a> (we are not affiliated with them).<\/p>\n\n\n\n

Psst!<\/strong> If you haven’t bought ACF Pro, do it before 2020 because they are grandfathering the Unlimited Lifetime plan.<\/p>\n\n\n\n

What is Flexible Content?<\/h2>\n\n\n\n

It is a field type which act like a Repeater<\/strong> but you can have different fields in each row. Simply perfect for page builder.<\/p>\n\n\n\n

\"\"
A preview of ACF Flexible Content <\/figcaption><\/figure>\n\n\n\n

How to Create?<\/h2>\n\n\n\n

First add a new field and set its type to Flexible Content<\/strong>. In the expanded setting, you can create multiple layouts, each with its own set of fields:<\/p>\n\n\n\n

\"\"
Creating a Flexible Content field<\/figcaption><\/figure><\/div>\n\n\n\n

How to Render?<\/h2>\n\n\n\n

The guide below is for pure-PHP, read here<\/a> if you want to use Timber Library.<\/p><\/blockquote>\n\n\n\n

In your theme, create a new folder called \/layouts<\/code> and create new files with exact name as your layout’s:<\/p>\n\n\n\n

...\nlayouts\/\n\u251c\u2500\u2500 free_content.php\n\u251c\u2500\u2500 testimonials.php\n\u251c\u2500\u2500 gallery.php\n\u251c\u2500\u2500 ...\n...<\/code><\/pre>\n\n\n\n
Then add the following snippets to your page.php<\/code> or if you want to use this in Post, put it in single.php<\/code>:<\/p>\n\n\n\n
<?php if( have_rows('layouts') ):\n  while( have_rows('layouts') ): the_row();\n    \n    $layout_name = get_row_layout();\n    get_template_part( \"layouts\/$layout_name\" );\n\n  endwhile;\nendif; ?><\/code><\/pre>\n\n\n\n
After that, implement the layout file. Some examples:<\/p>\n\n\n\n
<section class=\"free-content-layout\">\n  <h2>\n    <?php echo get_sub_field( 'title' ); ?>\n  <\/h2>\n  <?php echo get_sub_field( 'content' ); ?>\n<\/section><\/code><\/pre>\n\n\n\n
<section class=\"gallery-layout\">\n  <h2>\n    <?php echo get_sub_field( 'title' ); ?>\n  <\/h2>\n  <?php $images = get_sub_field( 'content' ); ?>\n  \n  <div class=\"gallery-items\">\n    <?php foreach( $images as $i ): ?>\n      \n      <figure>\n        <img src=\"<?php echo $i['sizes']['thumbnail']; ?>\"\n          alt=\"<?php echo $i['alt']; ?>\">\n      <\/figure>\n  \n    <?php endforeach; ?>\n  <\/div>\n<\/section><\/code><\/pre>\n\n\n\n
Make the Fields Tidier (Optional)<\/h2>\n\n\n\n
Your group will look messy after having several layouts. First step to make them tidier is to split each layouts into its own group like pictured below:<\/p>\n\n\n\n
\"\"
Free Content group
(*)<\/strong> Don’t forget to deactivate the group<\/figcaption><\/figure>\n\n\n\n
Then inside the Flexible Content, add a single Clone field<\/strong> linking to the splitted group:<\/p>\n\n\n\n
\"\"
Link the splitted group by using Clone field<\/figcaption><\/figure>\n\n\n\n
Now whenever you changed the splitted group, the one inside layout will be changed too.<\/p>\n\n\n\n
\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Flexible Content is a powerful yet underused tool in ACF Pro arsenal. Personally I have used this on all my projects prior to Gutenberg release.<\/p>\n\n\n\n
If you have any question related to Flexible Content field, feel free to leave a comment below \ud83d\ude42<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Not satisfied with Gutenberg? Want a fully custom page builder? See no further than Flexible Content which is part of ACF Pro.<\/p>\n","protected":false},"author":1,"featured_media":752,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[20,40,31],"class_list":["post-678","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-acf","tag-acf","tag-html","tag-php"],"blocksy_meta":{"page_structure_type":"default","page_enable_vertical_spacing":"yes","has_hero_section":"default","hero_section":"type-1","hero_alignment1":"left","hero_alignment2":"center","hero_height":"230px","page_title_bg_type":"color","5063fa32f629466ae7d9355c1ced56e6":"","custom_hero_background":{"attachment_id":null},"parallax":{"desktop":false,"tablet":false,"mobile":false},"single_meta_elements":{"author":true,"date":true,"categories":true,"comments":true,"updated":false,"tags":false},"has_meta_label":"yes","single_meta_date_format":"M j, Y","page_excerpt_visibility":{"desktop":true,"tablet":true,"mobile":false},"pageTitleFont":{"family":"Default","variation":"n7","size":{"desktop":"32px","tablet":"30px","mobile":"25px"},"line-height":"1.3","letter-spacing":"0em","text-transform":"none","text-decoration":"none"},"pageTitleFontColor":{"default":{"color":"var(--paletteColor4)"}},"pageMetaFont":{"family":"Default","variation":"n6","size":{"desktop":"12px","tablet":"12px","mobile":"12px"},"line-height":"1.3","letter-spacing":"0em","text-transform":"uppercase","text-decoration":"none"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"n5","size":"17px","line-height":"1.65","letter-spacing":"0em","text-transform":"none","text-decoration":"none"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"default":{"color":"rgba(41, 51, 60, 0.2)"}},"pageTitleBackground":{"default":{"color":"#EDEFF2"}},"6132ae22a8470e887630e91d247ba688":"","dabbcc4ad0bc56676bb1edb1a855d3cf":"","52c2162393b275ecd0139bfcf5953646":"","a40ba259524ae83fd40ac9de1adfb042":"","b9a02e91075679182a70f2558914131d":"","8c57f672120777422d36dc3ed95ddb26":"","63d2aae7aa63b094f756d1f1875970de":"","3e3ef986bdcbbe3f2f78911698cf1826":"","date_format_source":"custom","af943fc31f0dc9caa49b6fbf9e839afb":"","d95518ef0aee7f72e2e42b9d947da4a8":"","e9300478a20b51138e007c4ebfebbc65":"","e9c389c0f9299cb4712870e966fe8c77":"","4481d24f9adb58dd0e63b586676d57ef":"","8252d716e57250a9450248072dd6a42c":"","b78d5818efdbd46397685f70d0843cb1":""},"_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=678"}],"version-history":[{"count":10,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/678\/revisions"}],"predecessor-version":[{"id":1654,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/678\/revisions\/1654"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/752"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}