Preserve line breaks from a textarea in Wordpress

October 17, 2021

Today, I have added some customization settings to a Wordpress website. One of these settings consisted of a textarea input that would be used to enter and display an address. When I wanted to display the address, however, the address was displayed as one single line where it should have been displayed on three lines (Street + number, postal code, city).

// Incorrect code:

<?php
$address = get\_theme\_mod('address', '');
if ($address) {
    echo $address;
}
?>

In Wordpress, there are two ways to preserve the line breaks from a textarea input.

Solution 1: wpautop

Wordpress itself has a wpautop() (link ) function that will insert   line break elements into the HTML. A double line break in the textarea will result in a  paragraph element. Lastly, the entire content will be wrapped inside a  paragraph element.

// The "wpautop" solution:

<?php
$address = get\_theme\_mod('address', '');
if ($address) {
    echo wpautop($address);
}
?>

// A textarea input of:
Street no.
Postal code
City

// Will result into:
<p>
  Street no.
  <br>
  Postal code
  <br>
  City
</p>

// But a textarea input of (do note the double line break):
Street no.
Postal code

City

// Will result into:
<p>
  Street no.
  <br>
  Postal code
</p>
<p>
  City
</p>

Solution 2: nl2br

The function nl2br (link ) is actually a function from PHP and not from Wordpress. It converts line breaks to   elements, but does not create  paragraph elements for double line breaks. Instead, it outputs two   line break elements for double line breaks. Lastly, it does not wrap the entire content inside of a  paragraph element, but directly outputs the content.

// The "nl2br" solution:

<?php
$address = get\_theme\_mod('address', '');
if ($address) {
    echo nl2br($address);
}
?>

// A textarea input of:
Street no.
Postal code
City

// Will result into:
Street no.
<br>
Postal code
<br>
City

// But a textarea input of (do note the double line break):
Street no.
Postal code

City

// Will result into:
Street no.
<br>
Postal code
<br>
<br>
City