How to add bullet points to new lines in ACF Text Area field

Question

I have an ACF Text Area field (2 actually) on my clients Wordpress site that will contain a list. The client wants this to output as bullet points on the front end.

I am relatively new to JS so trying to work out how exactly to do this!

I found this - https://www.advancedcustomfields.com/resources/acf-format_value/ - from ACF in terms of adding formatting to certain fields, so have worked out how to add the code to the fields! However, I am struggling to figure out what coding to put in the middle to get each <br> to add a new <li> instead...

function my_acf_format_value( $value, $post_id, $field ) {

    $my_acf_format_value = explode("\n", $value);
    
    echo '<ul>';
    echo '<li>' . implode( '</li><li>', $value) . '</li>';
    echo '</ul>';
}

add_filter('acf/format_value/name=averetourism_tour_included', 'my_acf_format_value', 10, 3);
add_filter('acf/format_value/name=averetourism_tour_to_bring', 'my_acf_format_value', 10, 3);

This is being implemented on the fields, but isn't outputting any of the data.

Any help would be greatly appreciated!!!

score 1 · Answer 1 · answered Jul 23 '21 at 03:32

This would work, you need to use return $value instead of echo

    function my_acf_format_value( $value, $post_id, $field ) {
    
         $items_as_array = explode("\n", $value);
    
         $output = "<ul style='list-style-type: circle;'><li>" . implode("</li><li>", $items_as_array) . "</li></ul>";
    
         return $output;
     }
     
     
add_filter('acf/format_value/name=averetourism_tour_included', 'my_acf_format_value', 10, 3);
add_filter('acf/format_value/name=averetourism_tour_to_bring', 'my_acf_format_value', 10, 3);

Thanks, I ended up just making it a wysiwyg field and telling the client to put bullet points if they wanted it — Beth, Jul 24 '21 at 17:42

theking2 · Answer 2 · 2022-09-19T12:27:17.890

Despite the nice attempts it is never a good idea to output (echo) directly in the filter function. It will screw with the difference between the_field() and get_field().

Instead, you'd like to do this


$format_acf_bullet = function(
    string $value,
    int $post_id,
    array $form ):string {
    if( empty($value) ) {
        return '';
    }
    $lines = explode( "\n", $value );
    $result = "<ul>\n";
    $result .= "<li>".implode( "\n<li>", $lines );
    $result .= "</ul>\n";
    return $result;
};

add_filter('acf/format_value/name=averetourism_tour_included', $format_acf_bullet, 10, 3);
add_filter('acf/format_value/name=averetourism_tour_included', $format_acf_bullet, 10, 3);

Tested with ACF 1.3.5 WP 6.0.2 PHP 8.1.5

(and yes the </li> is optional)

score 0 · Answer 3 · edited Jul 23 '21 at 07:26

0

You can add this style list-style: circle; to ul. check below code.

function my_acf_format_value( $value, $post_id, $field ) {

    $my_acf_format_value = explode("\n", $value);
    
    echo '<ul style="list-style-type: circle;">';
    echo '<li>' . implode( '</li><li>', $my_acf_format_value) . '</li>';
    echo '</ul>';
}

add_filter('acf/format_value/name=averetourism_tour_included', 'my_acf_format_value', 10, 3);
add_filter('acf/format_value/name=averetourism_tour_to_bring', 'my_acf_format_value', 10, 3);

edited Jul 23 '21 at 07:26

kipmyk

3
1

answered Apr 01 '21 at 15:57

Bhautik

11,125
3
16
38

Thanks for the suggestion. The problem is that the above code isn't actually outputting the data from within the text field. It was outputting, then I added this code (to try to output with the bullet points) and it stopped showing anything where this field shows. I think that the code is maybe missing something or incorrect (I have jumbled it together from multiple sources), but I am not sure where to change it. – Beth Apr 02 '21 at 16:10

score 0 · Answer 4 · answered Apr 22 '21 at 09:55

function my_acf_format_value( $value, $post_id, $field ) {

     $items_from_text_area = explode("\n", $value);

     $items_as_array = explode('\n', $items_from_text_area);

     $output = "<ul style='list-style-type: circle;'><li>" . implode("</li><li>", $items_as_array) . "</li></ul>";

     return $output;
 }

   add_filter('acf/format_value/name=averetourism_tour_included', 'my_acf_format_value', 10, 3);
   add_filter('acf/format_value/name=averetourism_tour_to_bring', 'my_acf_format_value', 10, 3);

How to add bullet points to new lines in ACF Text Area field

4 Answers4