Support

Account

Register Login

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

Solved

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 basically what I’m looking for. But how can I achieve this? Since the checkbox field can only provide 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 could query these values and wrap them appropriately into i and a tags in the template.

  • 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

  • Thanks, John, for your help. I appreciate it!

    It turns out that having HTML code in the checkbox field itself is not a good idea. When using the field, the selections don’t stick (i.e. the selected options are gone the next time you edit the post).

    So I went with only plain text values for the checkbox field and coded everything else in the template. Unfortunately, I read your code sample too late. Going with “switch” would have been a good idea, but as I’m not experienced with PHP, I handcrafted this subpar solution:

    $tools_choices = get_field('tools');

if( $tools_choices ): ?>
  <h3 class="acf-title">Tools</h3>
		  
  <?php foreach( $tools_choices as $name ): ?>

    <?php if( $name == 'Tool1' ): ?>
    <a href="https://url1.com/" target="_blank"><i class="fab fa-icon-x"></i><?php echo $name; ?></a>
    <?php elseif( $name == 'Tool2' ): ?>
    <a href="https://url2.com/" target="_blank"><i class="fab fa-icon-y"></i><?php echo $name; ?></a>
    <?php elseif( $name == 'Tool3' ): ?>
    <a href="https://url3.com/" target="_blank"><i class="fab fa-icon-z"></i><?php echo $name; ?></a>
    <?php else: ?>
    <p><i class="fab fa-icon-a"></i><?php echo $name; ?></p>
    <?php endif; ?>

  <?php endforeach; ?>

<?php endif; ?>

    It’s not the best code, but it works. If I later have the time and energy, I might change my code to a cleaner version based on your input.

    Thanks again,
    Patrick

  • Thanks, John, for your help. I appreciate it!

    It turns out that having HTML code in the checkbox field itself is not a good idea. When using the field, the selections don’t stick (i.e. the selected options are gone the next time you edit the post).

    So I went with only plain text values for the checkbox field and coded everything else in the template. Unfortunately, I read your sample code too late – going with “switch” would have been a good idea. As I’m not experienced with PHP, I handcrafted this subpar solution:

    $tools_choices = get_field('tools');

if( $tools_choices ): ?>
  <h3 class="acf-title">Tools</h3>
		  
  <?php foreach( $tools_choices as $name ): ?>

    <?php if( $name == 'Tool1' ): ?>
    <a href="https://url1.com/" target="_blank"><i class="fab fa-icon-x"></i><?php echo $name; ?></a>
    <?php elseif( $name == 'Tool2' ): ?>
    <a href="https://url2.com/" target="_blank"><i class="fab fa-icon-y"></i><?php echo $name; ?></a>
    <?php elseif( $name == 'Tool3' ): ?>
    <a href="https://url3.com/" target="_blank"><i class="fab fa-icon-z"></i><?php echo $name; ?></a>
    <?php else: ?>
    <p><i class="fab fa-icon-a"></i><?php echo $name; ?></p>
    <?php endif; ?>

  <?php endforeach; ?>

<?php endif; ?>

    It’s not the best code, but it works. If I later have the time and energy, I might change my code to a cleaner version based on your input.

    Thanks again,
    Patrick

  • I would probably do something more complex with less code if you have many of these, or you plan on adding many more in the future, so that I can change the values and not look at the template again. I just did something recently where I do something similar. What I would do is have a function that returns an array of values.

    
function my_tool_choices() {
  $tools = array(
    'wordpress' => array(
      'label' => 'WordPress',
      'icon' => 'fa fa-wordpress',
      'url' => 'http://ws1/'
    ),
   'plugin a' => array(
      'label' => 'Pludin A',
      'icon' => 'fa fa-apple',
      'url' => 'http://ws2/'
    )
  )
  return $tools;
}

    You can then add new tools to this as you need them. Then I would create an acf/load_field filter to populate the choices from this array. https://www.advancedcustomfields.com/resources/acf-load_field/

    
add_filter('acf/load_field/name=my_tools', 'load_acf_tools_choices');
function load_acf_tools_choices($field) {
  $tools = my_tool_choices();
  $choices = array();
  foreach ($tools as $value => $tool) {
    $choices[$value] = $tool['label'];
  }
  $field['choices'] = $choices;
  return $field;
}

    Then in the template I would do something like this

    
$tools = my_tool_choices();
$values = get_field('my_tools');
foreach ($values as $value) {
  ?><a href="<?php 
      echo $tools[$value]['url']; ?>" target="_blank"><i class="<?php 
      echo $tools[$value]['icon']; ?>"></i><?php 
      echo $tools[$value]['label']; ?></a><?php 
}
Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Multiple values for checkbox choices’ is closed to new replies.