Hidden markup in WordPress/Bootstrap template

2 Views

I’m developing my website locally and therefore can’t share a URL to the project, but hopefully what I detail here is enough to explain my issue. I have been noticing that additional HTML markup is being appended to certain tags throughout my website and they are throwing off my layout. I will give an example below.

My code:

Read More
<div class="row">
 <div class="col-sm-8 col-sm-offset-2">
  <div class="btn-group btn-group-justified" role="group">
   <button type="button" class="btn-ghost">button</button>
   <button type="button" class="btn-ghost">button</button>
   <button type="button" class="btn-ghost">button</button>
  </div>
 </div>
</div><!--/row-->

Rendered code (what I see via Inspector): 

<div class="row">
 <div class="col-sm-8 col-sm-offset-2">
  <div class="btn-group btn-group-justified" role="group">
   <button type="button" class="btn-ghost">button</button>
   <br>
   <button type="button" class="btn-ghost">button</button>
   <br>
   <button type="button" class="btn-ghost">button</button>
  </div>
 </div>
</div><!--/row-->

I did not consciously place line break tags in my code, yet somehow they end up there by the time my code is rendered in a browser. Does anyone have an idea where those line break tags came from?

My website is running WordPress v4.2.1 and the template I am developing is built on Bootstrap v3.3.4. I have debugged using Chrome 42.0.2311.135 (64-bit) and FirefoxDeveloperEdition v39.0a2 (2015-05-01). I am running OS X Yosemite 10.10.3 and use MAMP 3.2.1 for Apache and MySQL.

Please let me know if you need any additional information such as my WordPress pages or my PHP templates.

Thanks in advance for any help,

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. as I guest this is effected of wpautop filter function. Your code maybe inside a shortcode callback or in the content of post. I have two way to resolve this problem:

    First way: PHP code

    remove_filter ('the_content', 'wpautop');
add_filter ('the_content', 'wpautop', 9);

    Second way: CSS code

    .unwantedbr br { 
   display: none
}

    Updated:

    As I see you use that code in wp editor. For this case, every time you press shift + enter on wp editor wordpress will automatic add <br/> tag to page content.

    You can try this code at the beginning of page.php template file of your theme:

    remove_filter('the_content', 'wpautop');

    It will remove unwanted br tag, but it is also break default wordpress’s default for blog post. Try to use shortcode or css strick instead.