No announcement yet.

Using DWB with ACF (Advanced Custom Fields) = brilliant!

  • Filter
  • Time
  • Show
Clear All
new posts

  • Using DWB with ACF (Advanced Custom Fields) = brilliant!

    This is a bit of a longish thread (for me) and is more aimed towards those who are competent with a little php and javascript coding, and customising scripts from the net. If you want to skip my witterings just scroll down to the youtube videos and watch them to see what you can do with DWB and ACF.

    I've been using Dynamik for some time now and have dropped every other framework I've used (such as ultimatumtheme and headway etc) because of the sheer power of the system. I've also used Advanced Custom Fields for some time which has proved equally invaluable.

    Recently I've been using the ACF Flexible Content field and have realised just how much power this gives you when added to DWB for making reuseable flexible layouts which hook in wherever you want them (this is available as part of the Pro plugin, not the free version). I thought I'd share my experiences with other DWB users who may not have considered exploring ACF before.

    Each of the video screencasts below are under 5 mins each and show how you can add blocks of content and rearrange it. The scripts for the image gallery, slider and charts are freely available on the net (I got most of these from, all I've done is enqueue them into DWB and referenced them with a hookbox/shortcode using ACF.

    Creating the back-end interface (for selecting images and adding columns etc) is really easy in ACF, its passing everything to hookboxes which involves the coding. Passing a text field is easy, passing an image is equally as easy but involves a little more effort. Using a repeater/gallery field is more challenging but reasonably easy to get your head around (if I can do it, you can do it - I'm no php/javascript guru). The documentation on the ACF website is invaluable.

    One thing I'd like to point out is the ability of choosing whether something appears in a left column or right column - this is using the 'gumby' framework which I mentioned in another thread with siga and Eric. I stripped the framework back to just the column classes which means I can push and pull columns, something you can't curently do with the Genesis classes.

    For example, choosing to put a slider on the right adds a push class which pushes the left column to the right and a pull class which pulls the right column to the left. The beauty of this is that it stays responsive, but keep in mind that when the columns drop ontop of each other for responsive devices (i.e. mobile phone) any left columns you've pushed right will still appear before the second column (does that make sense?).

    I've removed the default loop and hooked all of this into entry_content (apart from the main slider which is after_header). ACF lets you choose which standard parts of the Wordpress interface are displayed (i.e. editor, page template etc) - I turned pretty much everything apart from the page title off.

    Styling is basic on these so not everything is spaced nicely - the reason for this is that I've built it using classes for each block so I can target them in css which makes styling a breeze.

    Videos are best watched full screen set to HD (720):

    Here's one more I've added which shows a layout made using the various blocks as per the above and how I target each type of blocks row class to style it. The style is carried throughout the site so its all uniform. The only thing which is a little tricky is the chart when being resized - I need to do a little more work on that bit.

    I've put this together using a single hookbox for the loop which checks for a flexible layout name. When it finds it, it calls a shortcode for the left column (the main in most cases since this is where sliders, videos and charts are placed) and - if it will be two columns and not full width - it calls a shortcode for the right column (calling a simple text field).

    This is why I mentioned (on another thread) the ability of passing variables in shortcodes would be useful, something like [sc_site_feed type="news"] would be much quicker than using [sc_site_feed] and then running other checks to load the relevant feed.

    Personally I think Eric should hook up with Elliot Condon (the developer for ACF) and see if they could do some cross promotion as these two products together make Wordpress development fast and easy.

    If anyone else feels like giving this a try and has any questions, feel free to ask - I'll help if I can!

    Edit: Here's links to the scripts I've used in the above videos:
    Image gallery:
    Lightbox (used in the gallery):
    Last edited by progedge; 09-10-2014, 03:54 PM.

  • #2
    A very timely thread for me , just bought the pro version after giving up with types and views .... And a few others that have gone on the scrap heap. I've not watched the vids yet , but will do , done so much reading in the last few weeks my head is mush .... At this point I'm pretty clueless on even knowing how to add a CPT or field to a page or page template , so any help I can get is MUCH appreciated , I'll watch the vids later ... Cheers


    • La Geek
      La Geek commented
      Editing a comment
      Hehe, that's my poor english. Sorry! And why you gave up?

    • andytc
      andytc commented
      Editing a comment
      I just found the views method confusing , i kept coming across the need to add complicated custom functions to get things to display as i wanted , i also found nested shortcodes confusing for a novice. In the end i realised i'd be much better off learning some PHP which can help me a lot more in other ways , rather than spend time learning the "views" way of doing things , which wouldn't be of use anywhere else.

    • La Geek
      La Geek commented
      Editing a comment
      Thanks. I also own a license of toolset. Yes it has a steep learning curve.

  • #3
    I was also relying on plugins for lots of bits and pieces but have now got it down to about two - ACF and Menu Editor Pro. I'm also using a neat little script for Twitter which doesn't need any access keys or token secrets etc - it just uses a Twitter widget reference: (there's a fiddle page here to try it out: ).

    Hope you find the vids useful.


    • #4
      I looked at several of the videos. Is there any audio on the video to augment what you are doing?

      I think I understand the concept but can you outline the steps and resources required to make this work?


      • #5
        Hi, there's no audio I'm afraid but I'll try and work on something to explain the process a little more; the videos were a spur of the moment thing – I was working on a Mac Mini which doesn't t have a microphone!

        I'll work on doing a screencast showing what I'm doing from scratch (with audio) - I won't go into the columns part as that gets a little complicated but just creating an ACF block and hooking it using DWB.

        In the meantime, here's the steps I used:
        1. Install ACF (Pro version) as this has the flexible content field element - the free version doesn't.
        2. Create a new field group and call it what you want (i.e. 'Custom Layouts'). This acts as the holder for your flexible content blocks (think of it like a folder).
        3. Inside that field group you add a single flexible content field. You can call this 'Custom content' or suchlike (think of this as being your library which will contain blocks, such as sliders and teasers etc).
        4. Now, the way the flexible content field works is that you can nest as many layouts inside it as you want.
        5. A simple layout would be two text areas - one for the left and one for the right. Just add two text fields and you're done.
        6. A more complex layout would be your slider which uses a repeater field which itself has an image field nested inside it (this is how the slider and teaser blocks work in my video - clicking 'add image/add teaser' creates another field on-the-fly so you can have as many items as you want).
        7. ACF can use conditionals where something is only visible if you activate it. This is how I control adding the second text column in the first video - if a certain radio button is selected then it is visible, else its not. Its all drag and drop, no coding needed at all in this stage.
        8. You can choose where to make the custom content will be visible - it could be specific pages or a certain post type etc.
        9. You can now go to a page and add your custom content. You can re-use your blocks as much as you want but it is possible to limit how many times a layout is used on a page (if needed).
        10. Once you've added your text and/or images, its time to code it so it displays.
        11. In DWB, in the hook box area, create a new hook box and hook it into the entry_content hook.
        12. You now drop in the flexible content area code (you can get this from the ACF documentation area) and code it to display the fields you've assigned to them.
        13. You can either put all your code in that box or refer to them using DWB's shortcode (this is what I did):
          1. You add a new hook box and set it to shortcode.
          2. Now you put the code you want to appear in it.
          3. Finally, you call the shortcode in your main layout hookbox. This normally works without any problems but when you start using galleries or repeaters it sometimes won't be able to access settings from the main hook box which is why I mentioned about shortcodes being expanded on to accept things like [my_shortcode name="something"] etc.

        That's all the steps it takes - it probably doesn't make much sense right now (and I'll also admit the final couple of steps skips a heck of a lot of the work) but I'll try and post a short step-by-step video tomorrow if I can.
        Last edited by progedge; 09-10-2014, 06:24 PM.


        • #6
          Dude .. Right now you're my new best friend I really need all the help I can get , thanks for taking the time to post this


          • #7
            Okay, if you've got about an hour free, grab yourself a cup of coffee and watch these videos. Excuse my scouse accent and all the 'umms' and 'erms' as I've never done a screencast before and I was pretty much making everything up as I went along!

            The first three videos are 10 mins, 6mins and 3 mins each with the fourth being a lot longer at almost 30 mins because I'm trying to explain as clearly as possible how you would use a gallery field or use a colour picker field with charts etc.

            I was using Camtasia to record the videos but it crashed a couple of times so I had to go back a few times on the fourth video in particular.

            Hope you find these helpful!

            ACF & DWB - creating a flexible content layout system - part 1

            ACF & DWB - creating a flexible content layout system - part 2

            ACF & DWB - creating a flexible content layout system - part 3

            ACF & DWB - creating a flexible content layout system - part 4

            Last edited by progedge; 09-17-2014, 04:09 PM. Reason: Added titles above videos to help people find them quickly.


            • BillH
              BillH commented
              Editing a comment
              Thanks. Very generous with your time.

            • Kellylise
              Kellylise commented
              Editing a comment
              If you are new to PHP, echo, $variables, etc., Progedge's videos here: may help!

            • Febrodroid
              Febrodroid commented
              Editing a comment
              thanks for your videos. they gave me just what i needed to start. may i ask if you are willed to answer some questions i have? 😊

          • #8
            Great tutorial , some great information in there for me. Thank's for taking the time.


            • #9
              Thanks for the videos. I've heard about the power of ACFs and it's on my list of things to learn next. Your videos are great to give me some understanding how to use them.


              • #10
                Wow, that's exactly that what I am working with since some time. I have not watched the videos yet, but read through your posts here, thanks a lot for your tutorials.

                Did you try to use ACF and DWB with custom post types and terms? What I try to figure out is how I can make a CPT template in DWB. I don't want a page template.

                In a regular WordPress theme it's easy: Take single.php, copy it and rename it to single_yourcptname.php (the same for archive.php / archive_yourcptname.php). Then remove what you don't need. Add what you want to display in this case the ACF. But look into single.php and archive.php of Genesis - they are nearly empty. I had not tried it yet, atm I have headache from theoretical thoughts. Probably I can avoid several tries and errors, if you could advise me, how to set up a CPT template .

                I head read this tut from the brilliant Sridhar Katakam -> but it's confusing me a bit. He puts the ACF into functions.php for example. What I want, is a template, that shows date and author only on this CPT template ( I guess the functions.php is a good place to code this). I want to insert the Custom Fields into the CPT Template and wrap them with HTML tags. I want to use more then one term and add them into the CPT template. I need an own loop in the CPT template (here I could use the code that Sridhar provided).


                • progedge
                  progedge commented
                  Editing a comment
                  I've just done a quick video on creating a CPT and using with custom fields. Also shows how to create a single template - I did this after your other post but before the one you've just posted so I've based mine on a CPT called testimonials but the process is the same for anything. Will add it to the forum once its finished exporting and has been uploaded to youtube.

                  I've got a fair bit of work come in whilst I was doing it so apologies if I lose my train of thought in a few places (also, you can see that Firefox decided to quit on me whilst I was recording!).

                • La Geek
                  La Geek commented
                  Editing a comment
                  Awesome, thank you. I am sure, that will help me a few steps further
                  Last edited by La Geek; 09-12-2014, 11:22 AM.

                • Kellylise
                  Kellylise commented
                  Editing a comment
                  May help with this:
                  'What I want, is a template, that shows date and author only on this CPT template ( I guess the functions.php is a good place to code this). I want to insert the Custom Fields into the CPT Template and wrap them with HTML tags. I want to use more then one term and add them into the CPT template. I need an own loop in the CPT template"
                  Last edited by Kellylise; 10-05-2014, 05:13 AM.

              • #11
                Wow, I am just watching video 2 of your first post. The options of ACF are amazing. Thanks for sharing this with us.

                How did you make the charts? Is this a feature of ACF? I have hesitated to buy the pro version of ACF, since I own a license for the toolset (views, cred, etc.). But now, I am convinced. I searched on Eliots website, but unfortunately he has no affilate link. I would click on yours, if he had one.
                Last edited by La Geek; 09-12-2014, 11:47 AM.


                • progedge
                  progedge commented
                  Editing a comment
                  Watch them all and on the last one of the second set (all of which have audio) I explain where you can get the script for it and give a brief overview of how you'd use a colour picker field to change the colour of the pie chart segments/bar charts. Its quite tricky to implement but its certainly worth it in the end.
                  Last edited by progedge; 09-12-2014, 11:47 AM.

                • La Geek
                  La Geek commented
                  Editing a comment
                  ah, okay. I was wondering, why I did not read about it on ACF website.

                • La Geek
                  La Geek commented
                  Editing a comment
                  And yeah I will watch them all. I am curious what you will conjure next

              • #12
                @progedge, thank you, you're a legend. Your information and tutorials are outstanding!


                • #13
                  Wow, thanks for the kind words folks, glad you like them.

                  Okay, one more about creating a custom post type without using a plugin, setting up some custom fields (and how to hide/show them depending on what data the user wants to accept), creating a single template and hooking the custom fields into it.

                  Again, I was pushed for time (I said at the start this is a very quick demo but still made it last almost 40 mins…) and as a result I did make a couple of mistakes typing in a couple of lines of code but I thought I'd leave them in so you can see what I did wrong and learn from my mistakes - looking back at the video I can see myself making the mistake but I think my brain and mouth aren't really used to working at the same time!

                  I do have a tendancy of repeating myself (sorry!) but its partly so I can keep my train of thought and also because I'm aware that people may be doing this for the first time and I'm trying to make sure I don't make any assumptions or miss a critical step.

                  I am aware that there are ways to make the php code more efficient but I'm just trying to give you the basics to get started.

                  Grab a cup of coffee and off you go...

                  Adding 'Advanced Custom Fields' to custom post types

                  Last edited by progedge; 09-17-2014, 04:11 PM. Reason: Added titles above videos to help people find them quickly.


                  • Nick
                    Nick commented
                    Editing a comment
                    Excellent video, thanks! I've been going round in circles with page templates trying to do this.... hook box method is so much easier. Going to look for your archive page video now:-)

                • #14
                  Terrific video! I was not aware, that it is possible to build a CPT Page with DWB tools. A very very helpful video for me. 1000 thx. And it was a pleasure to listen to your "Liverpool slang", really nice. I am german and was able to understand every single word
                  Last edited by La Geek; 09-12-2014, 02:03 PM.


                  • #15
                    Glad to have helped! As for the archive page, just do this:
                    • Go to Dynamik > Custom > Templates (where you created 'single-dwb_testimonials')
                    • Add a new Wordpress template and call it 'archive-dwb_testimonials'
                    • Add the same php code to call genesis(); and add/remove any parts you want (such as post meta etc).
                    • Now go to your hook boxes and create a new one (call it 'Archive listings' or suchlike) - and hook it into 'entry_content'.
                    • Add this code:
                      PHP Code:
                      <?php if(is_post_type_archive('dwb_testimonials')): ?> <?php endif; ?>
                    • Inbetween the closing and opening php tags of the above, copy and paste the custom field code from the single testimonial area (but don't include the 'if(is_singular(…' part, nor the last '…endif;?>' part).
                    • In functions, set
                      PHP Code:
                      'has_archive' => true
                    • Go to your permalinks again and save them.
                    • In your browser, go to your site and add '/testimonials' to the url to display them all. You can set how many display in the Wordpress 'Reading' options.
                    • If you want to change the archive slug from testimonials to something else, like 'what-people-are-saying', in functions change
                      PHP Code:
                      'rewrite' => array('slug' => 'testimonials'), 
                      PHP Code:
                      'rewrite' => array('slug' => 'what-people-are-saying'), 
                    • Refresh your permalinks and go to that url instead of the original /testimonials url and you should see your posts.

                    I've done this by memory so apologies if I've missed anything out.