Support

Account

Home Forums Backend Issues (wp-admin) Use ACF to make drag-drop page builder? (Bootstrap) Reply To: Use ACF to make drag-drop page builder? (Bootstrap)

  • John,
    In the last couple of days, I have been hacking away at building what seems to have become a Bootstrap-infused, semi-visual CMS builder inside WordPress, dependent on ACF.

    It struck me that, if I was going to use ACF in any way at all like this, i had to roll up my sleeves. I’m very happy with what I’ve been able to achieve so far, even if it is i) fairly tied to my own theme requirements and ii) perhaps even pretty messy and rough-‘n-ready.

    I made an ACF field group applied only to pages, and am running everything off one Flexible Content field, which itself contains multiple layouts, many of which themselves contain layouts, fields and what-have-you. It’s a nested, hierarchical mindbender, and just the kind of pseudo-programming task I enjoy. I did it this way because this seemed like the only way of guaranteeing I could drag around top-level elements.

    All code is output only in to the page.php, which contains a number of if statements corresponding to the different containers. Now I can create new container divs in the WordPress/ACF backend, and have a number of UI switches, boxes and buttons, whose values are typically classes that I output in the relevant places if available.

    I have certainly spent more time on this than I otherwise would have had I simply written what is going to be only a small set of pages for my new site, but I feel a) like am learning a bit and b) like I am building something more foundational than that.

    I am now part-way through re-casting my home page, which had previously existed as a flat HTML page, as WordPress page ACF content. There’s something strangely satisfying about that. Next up, I then aim to create a set of containers for inner pages from scratch in the tool.

    Here is what the beast looks like, only partly expanded.