This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Raw shortcode not working inside Tabs shortcode

  • Creator
    Topic
  • #8123
    daganray
    Participant

    I have column shortcode inside tabs shortcode and the raw shortcode from the columns is being ignored, the results is WP adding <p> and <br /> tags into the column html output.

    Any suggestions?

    Here’s the markup where I have placed columns inside the 2nd tab:

    [tab_2]
    <h3>Customized Programs</h3>
    Here at the Environmental Education Center we work with you to custom design a program that meets your classroom needs.
    
    [box style="green"]
    <h3>Start the Process Now</h3>
    [/box]
    
    To begin the process, take a look at the detailed descriptions for the following programs and see which interest you and your students.  All of these programs can be customized to meet your specific IB objectives.
    
    [raw]
    [one_half]
    <h3>Bakawan Trail</h3>
    <a href="http://oceanadventure.com.ph/dev/environmental-education-center/bakawan-trail/"><img class="aligncenter size-medium wp-image-988" alt="bakawan trail program" src="http://oceanadventure.com.ph/dev/wp-content/uploads/2013/03/bakawan-trail-program-300x185.jpg" width="300" height="185" /></a>
    [/one_half]
    [one_half last]
    <h3>Gugo Vine Trail</h3>
    <a href="http://oceanadventure.com.ph/dev/environmental-education-center/gugo-vine-trail/"><img class="aligncenter size-medium wp-image-998" alt="gugo vine trail edu program" src="http://oceanadventure.com.ph/dev/wp-content/uploads/2013/03/gugo-vine-trail-edu-program-300x185.jpg" width="300" height="185" /></a>
    [/one_half]
    [clear]
    [/raw]
    
    [raw]
    [one_half]
    <h3>Molave Trail</h3>
    <a href="http://oceanadventure.com.ph/dev/environmental-education-center/molave-trail/"><img class="aligncenter size-medium wp-image-989" alt="molave monkey in forest" src="http://oceanadventure.com.ph/dev/wp-content/uploads/2013/03/molave-monkey-in-forest-300x185.jpg" width="300" height="185" /></a>
    [/one_half]
    [one_half last]
    <h3>Banite Trail</h3>
    <a href="http://oceanadventure.com.ph/dev/environmental-education-center/banite-trail/"><img class="aligncenter size-medium wp-image-1000" alt="banite trail program" src="http://oceanadventure.com.ph/dev/wp-content/uploads/2013/03/banite-trail-program-300x185.jpg" width="300" height="185" /></a>
    [/one_half]
    [clear]
    [/raw]
    
    [raw]
    [one_half]
    <h3>Wildlife in Need Rescue Program</h3>
    <a href="http://oceanadventure.com.ph/dev/environmental-education-center/wildlife-in-need-rescue-program/"><img class="aligncenter size-medium wp-image-1947" alt="wildlife in need training center" src="http://oceanadventure.com.ph/dev/wp-content/uploads/2013/03/wildlife-in-need-center-0-300x209.jpg" width="300" height="209" /></a>
    [/one_half]
    [one_half last]
    <h3>Discover Coral Reefs</h3>
    <a href="http://oceanadventure.com.ph/dev/environmental-education-center/reef-check/"><img class="aligncenter size-medium wp-image-955" alt="reef check education program" src="http://oceanadventure.com.ph/dev/wp-content/uploads/2013/03/reef-check-education-program-300x185.jpg" width="300" height="185" /></a>
    [/one_half]
    [clear]
    [/raw]
    
    Other programs can be added to your educational adventure
    
    [/tab_2]
Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #8129
    Jason Bobich
    Keymaster

    I think for these sorts of complex, nested scenario to work the way you’re expecting you’d need to ironically remove the [raw] shortcode feature from these little inner content areas (because it’s already on the page’s entire content).

    Try leaving your shortcode usage the same, but putting this in your Child theme’s functions.php:

    function my_formatting() {
    	remove_filter( 'themeblvd_the_content', 'themeblvd_content_formatter', 9 );
    }
    add_action('after_setup_theme', 'my_formatting'); // After Shortcodes plugin
    #8248
    daganray
    Participant

    yep, that worked. If you have time to explain briefly what’s happening with this that’d be cool, if not no worries. Thanks =)

    #8253
    Jason Bobich
    Keymaster

    Yeah, no problem.

    As you probably know, by default in WordPress you have wpautop, which adds the paragraph tags around everything in the content of the page Before shortcodes are processed.

    In order to implement this [raw] feature (which is not a true shortcode), our plugin removes WordPress’s wpautop from the content and replaces it by filtering on a function called “themeblvd_content_formatter” — This function basically re-applies wpautop to a chunk of content by only applying wpautop the portions not wrapped in the [raw] tag.

    This themeblvd_content_formatter function is used for both the content of a page or post, and also in other smaller areas like the content of the tabs, for example.

    So, in your case previously, there were two passes that the content had to get through. (1) Your [raw] tabs are being processed in the content of the page. (2) However, then they are gone by the time it reaches the processing of the content of the tabs. Now you have no more [raw] tags and wpautop gets applied to the whole content of the tab.

    The big dilemma with all of this is that many people want to naturally do this:

    [raw]
    [tabs style="framed" nav="tabs_above" height="100" tab_1="Title #1" tab_2="Title #2" tab_3="Title #3"]
    [tab_1]
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
    [/tab_1]
    [tab_2]Tab 2 content...[/tab_2]
    [tab_3]Tab 3 content...[/tab_3]
    [/tabs]
    [/raw]

    … They don’t want the wpautop to be inserted all throughout their actual tabs, but then what happens to the paragraphs in the content of the tab? Well, they would lose their formatting also and most people don’t like it. So, this is why the second pass of the themeblvd_content_formatter is necessary.

    However, in more rare cases like yours’, this isn’t ideal because you’re in more control of what you’re putting into your tabs, which is all more complex. So, with that code I provided previously, you’re just removing that second processing of the themeblvd_content_formatter and allowing the original one to hold true. But this means you have to manually put <p> tags in your tab’s content if you want them.

    #8395
    daganray
    Participant

    Thanks for the info. And as an fyi, I didn’t add tags to the paragraphs inside the tabs, but they’re being generated by WP – but not inside the columns that are in the tabs – maybe because each column is wrapped by the [raw] code but the overall tabs are not.

    And WP is still generating a couple stray closing tags on the page for some reason. You can see a screenshot of the source code in FF here: http://oi44.tinypic.com/ejsl05.jpg and you’ll see the tags in red.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.