WordPress.org

Support

Support » Plugins and Hacks » Use shortcodes within tab name

Use shortcodes within tab name

Viewing 1 replies (of 1 total)
  • Plugin Author Mark / t31os

    @t31os_

    Unfortunately i don’t think it would be wise to try and allow shortcodes inside another shortcode, the shortcode parser just doesn’t handle these cases extremely well and i’m not really prepared to add another layer of shortcode parsing to the plugin to support it either.

    What i can offer to do though, is to add support for unique classes on the tab names, so you would be able to customize the CSS for tabs on a per tab basis.

    For example, assume this is the tab markup for a moment..

    <div id="tabs-1">
    	<ul>
    		<li class="ui-state-default ui-corner-top"><a href="#tabs-1-1">Tab 1</a></li>
    		<li class="ui-state-default ui-corner-top"><a href="#tabs-1-2">Tab 2</a></li>
    		<li class="ui-state-default ui-corner-top"><a href="#tabs-1-3">Tab 3</a></li>
    	</ul>
    
    ... rest of the markup, etc ...

    And now imagine that same markup with unique tab classes, eg.

    <div id="tabs-1">
    	<ul>
    		<li class="my-tab-1 ui-state-default ui-corner-top"><a href="#tabs-1-1">Tab 1</a></li>
    		<li class="my-tab-2 ui-state-default ui-corner-top"><a href="#tabs-1-1"><a href="#tabs-1-2">Tab 2</a></li>
    		<li class="my-tab-3 ui-state-default ui-corner-top"><a href="#tabs-1-1"><a href="#tabs-1-3">Tab 3</a></li>
    	</ul>
    
    ... rest of the markup, etc ...

    You then have a unique class for every tab(using ids instead of classes is also an option), giving you room to style those tabs with images if you so choose, for example(based on the above).

    #tabs-1 li.my-tab-1 { background: transparent url(/path/to/image1.jpg) no-repeat center center; }
    
    /* If you wanted to hide the tab text at the same time */
    #tabs-1 li.my-tab-1 a {
    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    	filter: alpha(opacity=0);
    	-moz-opacity: 0;
    	-khtml-opacity: 0;
    	opacity: 0;
    	/* Cross browser opacity */
    }
    
    #tabs-1 li.my-tab-2 { background: transparent url(/path/to/image2.jpg) no-repeat center center; }
    
    /* It doesn't need to stop there, you could change the height, padding or whatever you want on a per tab basis this way */

    Naturally if i did add these additional classes to the plugin, i’d have to ensure the tab class names are unique across however many sets of tabs are on the page, so the names would likely run a bit longer than the example i gave above, but it would in essence provide the functionality i’ve demonstrated.

    Thinking out loud, i could optionally append the post name, id or some other identifier if users such as yourself think it will be useful.

    Let me know what you think.

Viewing 1 replies (of 1 total)
  • The topic ‘Use shortcodes within tab name’ is closed to new replies.