{"id":588,"date":"2019-09-18T00:25:04","date_gmt":"2019-09-18T04:25:04","guid":{"rendered":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/?p=588"},"modified":"2021-02-05T10:34:41","modified_gmt":"2021-02-05T15:34:41","slug":"shortcode-autop","status":"publish","type":"post","link":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/2019\/shortcode-autop\/","title":{"rendered":"Shortcode & Autop"},"content":{"rendered":"\n

I have a little WordPress plugin<\/a> I use on some of my sites and it employs shortcodes. The shortcodes are not self-closing and they are wrapped in more shortcodes. They’re nested shortcodes. Using them looks like this:<\/p>\n\n\n\n

[ltabjes talen=\"Taal Language\"][ltab taal=\"Taal\"]\n\nContent\n\n[\/ltab][ltab taal=\"Language\"]\n\nMore content\n\n[\/ltab][\/ltabjes]<\/code><\/pre>\n\n\n\n
WordPress wraps p-tags around each of these shortcode tags, and adds more p-tags inside the shortcodes, adding more space than is wanted. All those empty p-tags are a drag. The shortcode_unautop<\/a> function removes the outer paragraph tags, but not the inner ones. I don’t want to remove wpautop altogether because the content in the shortcode might still need it. How to solve this?
<\/p>\n\n\n\n\n\n\n\n
EDIT!<\/strong> Don’t do this first solution: It targets all content instead of just the content inside the shortcode–which is what you want. Not only bad practice, but it could seriously mess up the rest of your site’s content as well, paragraph tags are added in odd places.<\/p>\n\n\n\n
Solution 1<\/h2>\n\n\n\n
What:<\/strong> Basically, removing wpautop and then adding it again with a lower priority, so it gets executed after the shortcode has been executed, and adding shortcode_unautop just to be save.<\/del><\/p>\n\n\n\n
\/\/move wpautop filter to AFTER shortcode is processed\nremove_filter( 'the_content', 'wpautop' );\nadd_filter( 'the_content', 'wpautop' , 99);\nadd_filter( 'the_content', 'shortcode_unautop',100 );<\/del><\/code><\/pre>\n\n\n\n
Where:<\/strong>Stack Overflow<\/a> by helgatheviking and confirmed by Matthew Blackford – <\/del>it’s old but good. <\/del>and terrible
<\/del><\/p>\n\n\n\n
Notes:<\/strong> It helps if users keep the shortcodes on their own lines, as in the example above, but it doesn’t break functionality or look bad if they were to put everything on one line either.<\/del><\/p>\n\n\n\n
EDIT!<\/strong> Do this instead:<\/p>\n\n\n\n
Solution 2<\/h2>\n\n\n\n
What:<\/strong> A general function that replaces paragraphs with a new-line escape character, removes br-tags and then reapplies filters, so you’ll keep formatting. You then call that general function inside your shortcode so it only gets applied to your shortcode. Beautiful.<\/p>\n\n\n\n
\/*\n * The shortcode, any that filters complex content\n *\/\n    function my_custom_shortcode( $atts, $content = \"\") {\n        $content = custom_filter_shortcode_text($content);\n        return '<div class=\"looks-different\">'. $content .'<\/div>';\n    }\n    add_shortcode( \"altered_content\", \"my_custom_shortcode\" );\n\n\n\/*\n * Utility function to deal with the way \n * WordPress auto formats text in a shortcode.\n *\/\n    function custom_filter_shortcode_text($text = \"\") {\n        \/\/ Replace all the poorly formatted P tags that WP adds by default.\n        $tags = array(\"<p>\", \"<\/p>\");\n        $text = str_replace($tags, \"\\n\", $text);\n\n        \/\/ Remove any BR tags\n        $tags = array(\"<br>\", \"<br\/>\", \"<br \/>\");\n        $text = str_replace($tags, \"\", $text);\n\n        \/\/ Add back in the P and BR tags again, remove empty ones\n        return apply_filters(\"the_content\", $text);\n    }<\/code><\/pre>\n\n\n\n
Where:<\/strong> Stack Overflow<\/a> by Drew Baker<\/a><\/p>\n\n\n\n
Notes:<\/strong> This works beautifully on the extra paragraphs inside shortcodes. Users can keep shortcodes on the same line as the content or not, doesn’t matter.<\/p>\n\n\n\n
EDIT:<\/strong> Gutenberg Note: if you find that this removes more <br><\/code> tags than you want when using the Gutenberg editor, comment out the two lines directly below \/\/ Remove any BR tags<\/code>.<\/p>\n\n\n\n
\n\n\n\n
\n
Photo by Kimo Kremer<\/a> on Unsplash<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
I have a little WordPress plugin I use on some of my sites and it employs shortcodes. The shortcodes are not self-closing and they are wrapped in more shortcodes. They’re nested shortcodes. Using them looks like this: WordPress wraps p-tags around each of these shortcode tags, and adds more p-tags inside the shortcodes, adding more … <\/p>\n
Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[67,69,68,66,35,41],"class_list":["post-588","post","type-post","status-publish","format-standard","hentry","category-new-things","tag-autop","tag-nested-shortcodes","tag-plugin","tag-shortcode","tag-stack-overflow","tag-wordpress","infinite-scroll-item"],"_links":{"self":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/comments?post=588"}],"version-history":[{"count":3,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/588\/revisions"}],"predecessor-version":[{"id":1157,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/posts\/588\/revisions\/1157"}],"wp:attachment":[{"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/media?parent=588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/categories?post=588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blindemanwebsites.com\/today-i-learned\/wp-json\/wp\/v2\/tags?post=588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}