HTML style shortcode repeated

Hi there,

​I have low knowledge in HTML, but i want to add a shortcode html style to write my articles in my blog.

Thats the code I’m using :

function TAB_shortcode( $atts, $content = null ) {
    $styled_content = '<p style="background-color: #434343; padding: 8px; color: white; border-radius: 10px; font-weight: bold; text-align: center; margin-left: 10%; margin-right: 10%"</p>';
    return $styled_content;}
add_shortcode( 'TAB', 'TAB_shortcode' );

It works perfectly but it is repeated right below as you can see on these images

Anyone know where my problem comes from?

Its seems you are using wordpress if I am not wrong…
I think you targeted

html tags through functions… So every “p” has this style effect.

Thanks
David

You’re right it’s on wordpress. It doesn’t affect every “p” though but it get repeated in an empty block, then all the text block are normal

It appears like on the picture

In the code you posted the starting <p> tag is not closed >

Thanks for the answers. Isn’t it close after the text?

No it isn’t.

<p style="
  background-color: #434343;
  padding: 8px;
  color: white;
  border-radius: 10px;
  font-weight: bold;
  text-align: center;
  margin-left: 10%;
  margin-right: 10%" <!-- > is missing here -->
</p>

I closed it using your advice, but same thing happened. I attached you the code as I wrote it in my functions.php and how it results

Thanks for your answer

Capture d’écran 2023-04-27 à 20.28.42

It still isn’t closed in the image you posted.

I didn’t close it for you in the code I posted, I showed you where it should be closed.

<p style="color: red;">Some text</p>

Validate your HTML.

https://validator.w3.org/nu/#textarea

But I’m looking to create a shortcode, so when I write article, and I add [TAB] at the beginning of the paragraphe and [TAB/] at its end the style apply between those tags

The HTML still needs to be valid.

I don’t know anything about WP shortcodes other than what I can google for but the element needs to be closed properly and I would assume you need to use the $content parameter if you are passing it content.

function content_with_style($atts, $content = null) {
   return '<p style="color: red;">'.$content.'</p>';
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.