Remove new lines after echoing HTML from PHP - php

Question

I have a Wordpress function that checks if a user has filled in some fields on his or her profile. If it is filled in, echo its contents, if not: don't. Here is a stripped down version of the fun
<ul>
<?php if (get_the_author_meta('url',$theID)) : ?>
<li class="url">
Website
</li>
<?php endif; // End check for url ?>
<?php if ( get_the_author_meta('twitter',$theID)) : ?>
<li class="twitter">
Twitter
</li>
<?php endif; // End check for twitter ?>
<?php if ( get_the_author_meta('instagram',$theID)) : ?>
<li class="instagram">
Instagram
</li>
<?php endif; // End check for instagram ?>
<?php if ( get_the_author_meta('linkedin',$theID)) : ?>
<li class="linkedin">
LinkedIn
</li>
<?php endif; // End check for linkedin ?>
</ul>
This works well. However, for layout purposes I am using inline on these elements and I can't use floats. As you may know, this causes "gaps" in between the elements because they are all echoed on new lines.
I don't want these gaps. I know I can solve it by an arbitrary negative margin, but I don't want to use it because I am using a responsive, percentage based layout. The solution would be to "fill the gaps" in HTML by glueing all HTML together without new lines. As an example:
Will create gaps when displayed inline:
<ul>
<li>Twitter</li>
<li>Instagram</li>
<li>LinkedIn</li>
</ul>
Won't have gaps:
<ul>
<li>Twitter</li><li>Instagram</li><li>LinkedIn</li>
</ul>
I am looking for a PHP solution (no CSS) that can get rid of all the new lines inside the ul, but I don't know where to start. Or, more precisely, I don't know where to put the function that removes the new lines. How can I wrap all that HTML, and then replace the new lines by ... nothing?

Answer 1

Have you tried something like:
$string = str_replace("\n", "", $string);
or:
$string = str_replace("\n\r", "", $string);
(where $string is the html you want to get on one line)

Answer 2

<ul class="author-meta">
<?php
if (get_the_author_meta('url', $theID)) {
$output = '<li class="url">Website</li>';
}
if ( get_the_author_meta('twitter', $theID)) {
$output .= '<li class="twitter">Twitter</li>';
}
if ( get_the_author_meta('instagram', $theID)) {
$output .= '<li class="instagram">Instagram</li>';
}
if ( get_the_author_meta('linkedin', $theID)) {
$output .= '<li class="linkedin">LinkedIn</li>';
}
echo $output;
?>
</ul>
Edit by Bram Vanroy: make sure to use get_the_author_meta instead of the_author_meta when using the function in PHP.

Answer 3

You can do something like this:
ob_start();
//echo whatever stuff you need
echo str_replace(PHP_EOL, NULL, ob_get_clean());
Using PHP_EOL instead of \n or \r\n will catch line breaks regardless of platform.

Answer 4

You can use buffer for that :
<?php
function remove_white_spaces($buffer){
return trim(preg_replace('/\s\s+/', ' ', $buffer));
}
ob_start('remove_white_spaces');
?>
<ul>
<?php if (get_the_author_meta('url',$theID)) : ?>
<li class="url">
Website
</li>
<?php endif; // End check for url ?>
<?php if ( get_the_author_meta('twitter',$theID)) : ?>
<li class="twitter">
Twitter
</li>
<?php endif; // End check for twitter ?>
<?php if ( get_the_author_meta('instagram',$theID)) : ?>
<li class="instagram">
Instagram
</li>
<?php endif; // End check for instagram ?>
<?php if ( get_the_author_meta('linkedin',$theID)) : ?>
<li class="linkedin">
LinkedIn
</li>
<?php endif; // End check for linkedin ?>
</ul>
<?php ob_end_flush(); ?>
Catch all the output on a buffer, run a function to replace new lines with blanks, and release the buffer.

Answer 5

Just set your ul font-size to 0 and apply the size to your li
font-size: 15px; display: inline-block;

Answer 6

As per comment by #APAD1 and feedback by #CBRoe, I decided to go with the comment method. It works flawlessly, though the HTML output isn't pretty (empty comments, byebye semantics).
<ul class="author-meta">
<?php if (get_the_author_meta('url',$theID)) : ?><li class="url">
Website
</li><?php endif; // End check for url ?><!--
--><?php if ( get_the_author_meta('twitter',$theID)) : ?><li class="twitter">
Twitter
</li><?php endif; // End check for twitter ?><!--
--><?php if ( get_the_author_meta('instagram',$theID)) : ?><li class="instagram">
Instagram
</li><?php endif; // End check for instagram ?><!--
--><?php if ( get_the_author_meta('linkedin',$theID)) : ?><li class="linkedin">
LinkedIn
</li><?php endif; // End check for linkedin ?>
</ul>
Note that the comments should be outside the if clauses, because if they are inside they might not be echoed corretly, e.g. missing a opening or closing tag.

Answer 7

Here you go:
<ul><?php
$output = '';
if (get_the_author_meta('url', $theID)) {
$output .= '<li class="url">Website</li>';
} elseif (get_the_author_meta('twitter', $theID)) {
$output .= '<li class="twitter">Twitter</li>';
} elseif (get_the_author_meta('instagram', $theID)) {
$output .= '<li class="instagram">Instagram</li>';
} elseif (get_the_author_meta('linkedin',$theID)) {
$output .= '<li class="linkedin">LinkedIn</li>';
}
echo $output;
?></ul>

Answer 8

To make an easy to use version, you can store all your websites data in an array:
$site=Array(
"url"=>"Website",
"twitter"=> "Twitter",
"instagram"=> "Instagram",
"linkedin"=>"LinkedIn"
);
And then generating the whole list. I used a simple sample case where all domains are .com. You will have to improve the array format if you want more information to be stored.
<ul><?php
foreach($site as $k=>$v)
if (get_the_author_meta($k,$theID))
echo '<li class="'.$k.'"><a href="'
.(($k=="url")?"":"http://$k.com/")
.the_author_meta($k,$theID).'">'.$v.'</a></li>';
?></ul>
Don't forget to remove your empty title attribute in your a tags.
Note that there are others CSS alternatives: using display:table on your ul and display:table-cell on your li, or using display: flex and so on.