Support

Account

Register Login

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

Solving

Use ACF to make drag-drop page builder? (Bootstrap)

  • I am building a set of web pages offline, in the Bootstrap 4 web framework.

    I then want to move them in to WordPress. Some of those pages may be page templates, ie. various parts of the actual content should be customisable in a vanilla standard page layout.

    I have built WordPress themes out of Bootstrap pages in the past – threading Bootstrap in to a WordPress theme.

    But I am also considering this…

    I am struggling to see how to overcome subtley different page markup requirements across otherwise similar pages – ie. different background image in equivalent div or different containers to be used, different number of columns, at different breakpoints, depending on the page.

    So, let’s say I don’t just want page templates but actual drag-and-drop page building capability – placing containers and columns on the page in the ways I want, adding the classes I want at that time (rather than as page templates)…

    I have looked around and, whilst there are many WordPress page builders, they all seem to use their own mark-up, whereas I would want to use only Bootstrap 4 markup and classes (plus my custom classes). Bootstrap 4 has a particular way of defining columns, rows etc, and mobile breakpoints – which would be messed up by these builders’ own markup.

    I suppose I’m talking about, on the one hand, creating my own reusable blocks of code that could be added to a page structure, and the author would then write in the content of those blocks. And, on the other hand, wondering if I could have something that is more open-ended – dragging and dropping blocks that adhere to and represent Bootstrap 4 mark-up.

    Can Advanced Custom Fields be used for any of this? I have seen there is an add-on for the Site Origin Page Builder – but I’m not sure this fits my needs.

    Thanks.

  • @iamrobertandrews I have been working on a “page builder” of sorts in my spare time, not making much headway. It uses ACF and I’m designing it specifically for BS4. My main issue is that it is not “drag and drop”. Just last night I was thinking about how I could go about hiding the actual ACF fields and providing a drag-n-drop editor where there could also be icons or links to “pop up” various settings fields for each container, row and column. There really isn’t much to see yet https://github.com/Hube2/acf-bootstrap4-page-builder

    Edit: if anyone wants to discuss this with me please open an issue on github.

  • Great minds think alike. I opened an issue on Github.

  • 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.

  • Glad your making headway, I have not been working on mine at all, too busy. I’ve also decided that I’m going to take a different path with the ACF fields. Basically, the builder is going to be based on ACF fields, but those fields are going to be completely hidden to allow a semi-visual editor. It’s going to take a lot of JavaScript work. I’ve been really just contemplating how I’m going to build the ACF field groups in a way that will best support what I am visualizing as the end result.

  • Hi John and Robert,

    It is definitely possible, and the three of us are definitely not the ones to have tried / done such a thing. I’ve built a custom page builder for Bootstrap 3 for the exact same reasons, and will certainly update for BS4 when it’s out of alpha.

    The challenge I’m currently tackling is how to update fields & layouts in a non-destructive way. One of my requirements for my page builder was that I needed to not only import json data, but to import in such a way that it exposed the fields in ACF (which is not default, I believe, when just importing the json) so that I could add additional layouts on a per-site basis.

    However, adding custom layouts per-site makes it very difficult to update my base set of layouts. I’m working on this currently and have a routine down for detecting the correct layouts, deleting and updating fields. Where I’m stuck is on adding layouts, since they are not fields, but content in the flexible column’s post. Hopefully I’ll get over that hump quickly.

    I’d be happy to compare notes when I’m finished with my current updates!

  • Dynamically adding new layouts complicated the matter, since you’d need to call acf local field functions to do the work every time https://www.advancedcustomfields.com/resources/register-fields-via-php/, you’ve really got nowhere to make them a permanent part of the field group.

    I’ve been neglecting my project, just been too busy. Don’t know if I’ll ever really find the time to realize what I envision.

  • @iamrobertandrews I may have a very rude question, but may I be able to get the json of this acf fields setup?

  • there is a json export in the repo. My project isn’t going anywhere, have not worked on it over 2 years.

  • Oh sorry I didn’t know it was your job, I didn’t read the message well haha

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

The topic ‘Use ACF to make drag-drop page builder? (Bootstrap)’ is closed to new replies.