Question 166506 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How do I add bullet points to new lines in an ACF Text Area field in WordPress?

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

Tags:

4

Answers


  1. 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);
    Login or Signup to reply.
  2. 0 
    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);
    Login or Signup to reply.
  3. 0

    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);
    Login or Signup to reply.
  4. 0

    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)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search