Support

Account

Home Forums Backend Issues (wp-admin) Multiple values for checkbox choices

Solving

Multiple values for checkbox choices

  • Hi guys,

    I created a checkbox field called “Tools” that contains multiple values. The idea is to select the tools that I used to build a website (e.g. WordPress, Plugin A, Plugin B, etc.) when I create a portfolio post. I understand how to pre-define the values and labels and how to implement them into my templates.

    My problem is that I need more than one value for each selection.

    WordPress : WordPress
    Plugin A : Plugin A
    Plugin B : Plugin B

    is not good enough for me as I want to also assign a link to the plugin and a Font Awesome icon to every choice. Right now I “solved” this issue by using something like this, which basically includes the entire HTML code as the value:

    <i class="fab fa-wordpress"></i><a href="#"><p>WordPress</p></a> : WordPress
    <i class="far fa-acorn"></i><a href="#"><p>Plugin A</p></a> : Plugin A
    <i class="far fa-apple"></i><a href="#"><p>Plugin B</p></a> : Plugin B

    This solution seems messy and I’m pretty sure there’s a better way to do this, but I can’t figure it out.

    Is there a way to define multiple values to each choice? I then could define the tool name, the url, and the name of the icon and do the HTML stuff in the template where it belongs.

  • What you have is one method of doing this with a single field.

    You could also code the icons and url into your template based on the values selected, but your code would need to supply the icon and the url information.

    You could use multiple fields, probably in a repeater, where you supply all the information. For example a “URL” field, a link “Text” field and an field to enter the icon you want to use.

    Beyond this you would need to create your own custom field type to do what you want. https://www.advancedcustomfields.com/resources/creating-a-new-field-type/

  • You could use multiple fields, probably in a repeater, where you supply all the information. For example a “URL” field, a link “Text” field and an field to enter the icon you want to use.

    Yes, I thought about that but I don’t want/need to input new information every time I create a post. The choices and their values should be pre-defined. Every time I choose “WordPress”, for instance, it should show the WordPress Icon followed by the word WordPress as a link on the front end. I can’t do that with the repeater field, can I?

    You could also code the icons and url into your template based on the values selected, but your code would need to supply the icon and the url information.

    That would be ideal and is basically what I’m looking for. But how can I achieve this? Since the checkbox field only provides one value per choice, I would have to find a way to check if that value matches a certain string and if so, prepend the code for the icon and wrap the value into the right link tag. I’m sure this would be possible with PHP, but I’m not that good at it and I’m pretty sure that it would lead to very long code in the template, right?

    If I would just have the option to assign the three variables icon word, url, and name to each choice and if it would provide those three values separately instead of just as one single value, then I would be comfortable to do the rest in the template.

  • I would go with what you are doing or code it. Coding could run into a lot of code, depending on how it is coded.

    here is one example, and it is not complete

    To make it easier you can return the value and the label of the field, this is one of the options for the checkbox field. And if you have values set like

    
    WordPress : WordPress
    Plugin A : Plugin A
    Plugin B : Plugin B
    
    
    $values = get_field('my_check_box');
    if ($values) {
      ?>
        <ul>
          <?php 
            foreach ($values as $value) {
              $icon = 'fa ';
              switch ($value['value']) {
                case 'WordPress':
                  $icon .= 'fa-wordpress';
                  $url = 'https://www.wordpresss.org/';
                  break;
                case 'Plugin A':
                  $icon .= 'fa-acorn';
                  $url = 'url here';
                  break;
                case 'Plugin B':
                  $icon .= 'fa-apple';
                  $url = 'url here';
                  break;
                default:
                  // assign a generic icon
                  $icon .= 'fa-something';
                  $url = '#';
                  break;
              } // end switch
              ?>
                <li><i class="<?php 
                    echo $icon; ?>"></i><a href="<?php 
                    echo $url; ?>"><?php echo $value['label']; ?></li>
              <?php 
            } // end foeach value
          ?>
        </ul>
      <?php 
    } // end if values
    
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.