CODEWITHSUNDEEP
wordpressechoadvanced-custom-fieldsexplodeimplode
Beth
Beth

Reputation: 31

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

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!!!

Upvotes: 3

Views: 3089

Answers (4)

theking2
theking2

Reputation: 2838

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)

Upvotes: 1

Bhautik
Bhautik

Reputation: 11282

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);

Upvotes: 0

Blue Li
Blue Li

Reputation: 51

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);

Upvotes: 1

AmintaCode
AmintaCode

Reputation: 364

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);

Upvotes: 0

Related Questions