At the VERY core, my question is - how to remove linebreaks on a single ACF field that is inserted with the ACF shortcode.
I have a lot of "shortcodes within shortcodes" here so I will walk this thing through.
First, I am using ACF to dictate the direction of the content. I have two ACF fields, one where I am inputting into the WordPress WYSIWYG, and the other that I am inputting into the first ACF field by means of the ACF Shortcode:
[acf field="home-icons"]
The contents of the home-icons
field is this (using a custom shortcode and Boostrap 3 Shortcodes):
[row xclass="home-icons"]
[column sm="6"][flaticon class="hourglass"][/flaticon] Saves Time[/column]
[column sm="6"][flaticon class="graph-upward"][/flaticon] Benchmarking[/column]
[/row]
[row xclass="home-icons"]
[column sm="6"][flaticon class="24h"][/flaticon] Instant and secure access[/column]
[column sm="6"][flaticon class="site-settings"][/flaticon] Customization[/column]
[/row]
This is how I am building my shortcode, flaticon
:
function flaticon( $atts, $content = null ) {
$a = shortcode_atts( array(
'class' => 'flaticon',
), $atts );
return '<i class="btn-icon btn-footer flaticon-' . esc_attr($a['class']) . '"></i>' . $content . '';
}
add_shortcode( 'flaticon', 'flaticon' );
This is the intended output:
<div class="row home-icons">
<div class=" col-sm-6"><i class="btn-icon btn-footer flaticon-hourglass"></i> Saves Time</div>
<div class=" col-sm-6"><i class="btn-icon btn-footer flaticon-graph-upward"></i> Benchmarking</div>
</div>
This is the actual output:
<div class="row home-icons"><br>
<div class=" col-sm-6"><i class="btn-icon btn-footer flaticon-hourglass"></i> Saves Time</div><br>
<div class=" col-sm-6"><i class="btn-icon btn-footer flaticon-graph-upward"></i> Benchmarking</div><br>
</div>
It is adding unnecessary line breaks which shift the content so the icons don't line up. Now the issue is, ACF uses acf_the_content
and I don't want to remove line breaks for everything, just that field (home-icons
), but since it is a shortcode, I'm not sure how to target it directly.
Yes, I realize if I had everything on one line there is a chance it might be fine, but this is going to get handed over to a client and I'm not going to assume they would keep anything intact or remember to do so.