Shortcode gets wrapped in and tags – looks messy

[philboyuser1000]

Hello,

I have purchased your plugin today and since I installed it, I cant get it really ready to work like it should.
I already know what is causing the problem but I cant get rid of it.

I have to use shortcodes for displaying the search-bar on my site.
Unfortunately my wordpress is adding a ton of <br> and <p> tags to the content of the shordcode which makes it look like a mess.
I have tried over hours now to deactivate wpautop over function.php and various plugins and things like that to get rid of this behaviour but.. nothing.. the search bar displays always wrong and messy.

Do you have a solution for this problem or did my site not work with your plugin?
If there issnt any – please let me know so I can take a refund for the plugin purchase.

I have a put a little screenshot from the HTML that gets displayed from the site.

Thanks a lot.

Philipp

[philboyuser1000]

You cannot access this content.

[Ernest Marcinko]

Hi,

This issue happens when the plugin shortcode is placed into a text container which does not support HTML or shortcodes. Text containers will automatically append line breaks and paragraphs to anything as they consider the contents as text and not HTML.

Make sure to use the correct widget/module type where the shortcode is placed. Usually theme builders/plugins have specific modules to place shortcodes into. HTML modules could also work.

[philboyuser1000]

Hi,

Thank you very much for your last reply.
I now tried several modules in my page builder to display the shortcode.
Of course I use always the shordcode-module to type in the shortcode I want to display.
But none of the modules I try disabled the behaviour of the paragraph-tags.

I attach a picture were you can see how I use the shortcodes.

As you can see Its now simply the shortcode module inside a group (with other plugins it works like a charm), but it always prints breaks and paragraphs around and inside the displayed element.

Thanks a lot.

[Ernest Marcinko]

If you use the correct module then there might be a problem somewhere in the page builder output, the plugin is definitely not adding any paragraphs or line breaks, that would be devastating for the output and would cause issues in every case.

If you place the shortcode somewhere else, say like a post content or a page content, then I assume it does not have the auto generated line breaks and paragraph wrappers?

[philboyuser1000]

Yes you are right.

If I set the shortcode in the page content for a single page (like this: https://ihrschulranzen.de/schulranzenberatung/ ) it works like a charm.

If I set the shortcode inside a Site-Template (or directly onto the front page) inside the builder then it prints the p and br tags again inside the displayed element.

But how can I get it to work on my frontpage and my other site-templates (so i can use it inside the menu-header) ? Maybe if I put the shortcode inside “a page-content” and this page content is then displayed with another shortcode inside my page-templates?

[Ernest Marcinko]

But how can I get it to work on my frontpage and my other site-templates (so i can use it inside the menu-header) ? Maybe if I put the shortcode inside “a page-content” and this page content is then displayed with another shortcode inside my page-templates?

That may work, but I hope it is not neccessary to over complicate it. I guess for some reason the page builder does some sort of a conversion for paragraphs and empty line break?

I think it might be just easier to ask the page builder support if they know what this is. There might be just an option to turn off or a line of code to use. It is also possible that this is a yet unknown bug, or it’s intentional for some reason.

I guess another possibility is to simply “minify” the search shortcode HTML output by removing any line breaks by wrapping it to a new shortcode, but that might be a bit fishy solution. Something like:

// use as [wd_asp_wrap]
add_shortcode( 'wd_asp_wrap', 'asp_wrap_shortcode' );
function asp_wrap_shortcode() {
	$output = do_shortcode('[wd_asp id=1]');
	return preg_replace(['/\>[^\S ]+/s','/[^\S ]+\</s','/(\s)+/s'],['>','<','\\1'],$output);
}

Then use this new shortcode [wd_asp_wrap], but I don’t know if this will actually do anything at all.

[philboyuser1000]

Thank you very much for the fast answer.

I’ve tried your coding in my functions.php and then use the the new shortcode [wd_asp_wrap].
Luckily all line breaks are now gone, but the empty and wrapped paragraphs are still there. (see in attached picture)
If i get the button out of the paragraph tags (you can see in picture) then the positioning will be allright.

Is there something I have to add to the coding in functions php to get also rid of the paragraphs?

Thanks a lot.

[Ernest Marcinko]

If this didn’t work, then there is a very high chance that it’s not possible. The paragraphs are added after this code, during the pageview. If they are added just randomly and not because of white space, then that has to be solved on the page builder side.

You can try a different variation, mabe something like this:

add_shortcode( 'wd_asp_wrap', 'asp_wrap_shortcode' );
function asp_wrap_shortcode() {
	$output = do_shortcode('[wd_asp id=1]');
	$search = array(
		'/(\n|^)(\x20+|\t)/',
		'/(\n|^)\/\/(.*?)(\n|$)/',
		'/\n/',
		'/\<\!--.*?-->/',
		'/(\x20+|\t)/', # Delete multispace (Without \n)
		'/\>\s+\</', # strip whitespaces between tags
		'/(\"|\')\s+\>/', # strip whitespaces between quotation ("') and end tags
		'/=\s+(\"|\')/'); # strip whitespaces between = "'

	$replace = array(
		"\n",
		"\n",
		" ",
		"",
		" ",
		"><",
		"$1>",
		"=$1");

    $output = preg_replace($search,$replace,$output);
	return $output;
}

This is a bit more aggressive with whitespace removal. If the paragraph around the button is added for some other reason by the page handler, then it is going to be still there.

[philboyuser1000]

Thank you very very much.

Now all empty paragraphs are gone but you are right with the paragraphs around the button, these are still there, maybe cause the handler added this for some other reason as you said.

Then I think I have to ask the page builder support for a solution.

[Ernest Marcinko]

Okay! Let me know if there is anything I can do afterwards, I am curious why these extra tags were added.

[philboyuser1000]

Of course, I will keep you informed in case this issue have other of your customers too.

While I’m waiting for a solution from the page-builder support i was able to get temporarily rid of the problem by copying the button css to the paragraph inside the probox DIV (by simply adding div.probox > p inside the additional CSS)

Now the Paragraph has same style behaviour as the button, and it displays like a charm. 🙂

• This reply was modified 2 years, 11 months ago by .

[Ernest Marcinko]

Great 🙂 Let me know if anything.

[Author]

Posts