CODEWITHSUNDEEP
htmlcsswordpress
Viet Than
Viet Than

Reputation: 320

Wordpress mysterious elements (<p>, <a>) shows up on live site

first time developing a website on Wordpress and mucking about on my home page to make it looks better. I ran into a problem when trying to wrap my div with a to make the entire box clickable/link.

in page editing code looks like this:

<a href="random_link1">
  <div>
    <img src="random_image1"/><br>
    random text 1
  </div>
</a>
<a href="random_link2">
  <div>
    <img src="random_image2"/><br>
    random text 2
  </div>
</a>

And there are multiple divs in a row like this that is supposed to be side by side (using css display: inline-block)

But then the live site would have these divs stack vertically. Upon examining using developer tools (chrome), I find the code to turn up extra p element with the exact same a in the middle of the divs:

<a href="random_link1">
  <div>
    <img src="random_image1"/><br>
    random text 1
  </div>
</a>
<p>
  <a href="random_link1"></a>
  <a href="random_link2"></a>
</p>
<a href="random_link2">
  <div>
    <img src="random_image2"/><br>
    random text 2
  </div>
</a>

Anyone knows how to fix this?

Upvotes: 0

Views: 47

Answers (1)

tao
tao

Reputation: 90068

Wordpress automatically runs a filter on your content, called wpautop. It's used to transform carriage returns from editor into html spacing. You can remove it globally using functions.php 

remove_filter( 'the_content', 'wpautop' );

...or look for a plugin that enables you more fine-grained control over what gets autop-ed and what not.

Additionally, you have the option of hiding empty <p> tags:

p:empty {
  display: none;
}

The same filter (wpautop) wraps your links into <p> elements. The solution is to either:

  • wrap your <a> tags into <div> tags, or...
  • run your own filter on content, undoing what wpautop did, after wpautop. See this question.

Upvotes: 1

Related Questions