• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

WordPress’s ACF: Dynamically populate a select list with values from repeater text fields

Modified on: January 1, 2021

Table of contents

  1. 1. Task description
    1. 2. How to populate video sections values into video tutorials choices
      1. 3. ACF issue: First row duplication in nested loops

        1. Task description

        There are two custom fields made with Advanced Custom Fields Pro plugin: Video Tutorials and Video Tutorial Sections.

        • Video Tutorials: has a repeater field that include Video name (Text), Video URL from Youtube (Text), and Video section (Select). This will display under a page called Video Tutorials.
        Setting up the Video Tutorials Custom Fields Group
        Setting up the Video Tutorials Custom Fields Group
        • Video Tutorial Sections: a repeater of text fields to list the sections. This is assigned to an Options page. If you don’t use Options page, I guess it is good enough to just create a page and assign the values then.

        The idea is to add a selection field to the Video Tutorials, which takes in values from the Video Tutorial Sections.

        Setting up the Video Tutorials Section Custom Fields Group
        Setting up the Video Tutorials Section Custom Fields Group
        Creating sections
        Creating sections
        This section should take values from the Video Tutorials Section Options page
        This section should take values from the Video Tutorials Section Options page

        I would like to do it so that: first, the page displays a thumbnail image from the Youtube Video, then when people click, the actual video will load. This will make the page load faster than placing a bunch of videos at once. That is also why we need the Video ID instead of the whole URL.

        2. How to populate video sections values into video tutorials choices

        First, the ACF documentation has instructions on this topic already. It is the Example 2 from this link which can be taken and modified a bit in this case. Simply saying, we can hook into the “acf/load_field/name=video_single_section” to add the choices from the Video Tutorials Sections.

        PHP

        Then, come back to the “Video Tutorials” page and reload. You should now see that the selection has successfully takes values from our options page:

        Now you can assign the video to the right category
        Now you can assign the video to the right category

        Notices:

        • When changing the value of any rows in Video Tutorial Section, you have to assign the select field again to the video.

        That’s it, quite simple!

        3. ACF issue: First row duplication in nested loops

        Let’s talk a bit about how to display the videos on the front-end in sections. We have data already, now it’s time to show it in our Video Tutorials page.

        The first solution I think of is to create two nested while loops:

        • The first loop looks for and display the sections
        • The second loop looks for the value of Video Section in each single video, and if the video’s section name is equal to the name of the section from the first loop, the video will be placed under that section.

        But, there comes an issue with this solution: always, the first row is duplicated. And the problem is somewhere from the second loop. I don’t know why, and Googling does not help me much. And I find a workaround solution for this duplicate issue:

        First, loop through the Video Tutorials Section, store the unique values into an array. Then, create another array to store the Video Tutorials information.

        PHP

        Then, in the body, display the information with a nested foreach loop.

        About the thumbnail image: please read this Stackoverflow post. In summary, the link to retrieve the thumbnail is “https://img.youtube.com/vi/<video-id>/0.jpg”

        PHP

        Embedding Youtube videos are quite annoying, because at the end of the video, it always suggests videos from the other channel. The “&feature=youtu.be&rel=0” at the end of the video url will make sure that it only suggests videos from my channel.

        Lastly, I use lity to display the video within the page. There will be video in a lightbox. Download lity style and script file from the link and then enqueue them with wp_enqueue_style and wp_enqueue_scripts in WordPress:

        PHP

        And, of course, you can make some CSS to style up the page that it looks better.

        References

        • How to add an ACF Options page

        Filed Under: Backend, Featured, Front-end, Wordpress, Wordpress Plugins Tagged With: advanced custom fields

        Recent posts

        WordPress: Create custom post type programmatically

        [WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

        Mangools Review: A Productive SEO tool for The Affiliates

        Reader Interactions

        You are here: Home / Backend / WordPress’s ACF: Dynamically populate a select list with values from repeater text fields

        Leave a Reply Cancel reply

        Your email address will not be published. Required fields are marked *

        Primary Sidebar

        Hello! My name is Anh. I am a front-end developer in Oulu, Finland. Currently, I work with PHP, HTML, CSS, JavaScript and love writing about them. Please feel free to join the discussion!

        FOLLOW MY BLOG

        Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.