How can i make this html tab to WordPress short code?

0 Views

HTML CODE 

<div class="tabs main bottom-40">
    <ul class="tabNavigation list-unstyled bottom-0 clearfix">
        <li class="active"><a data-toggle="tab" href="#tab1">First Tab</a></li>
        <li class=""><a data-toggle="tab" href="#tab2">Second Tab</a></li>
        <li class=""><a data-toggle="tab" href="#tab3"><i class="icon-cloud"></i>Third Tab</a></li>
    </ul>
    <div id="tab1" class="tabs-container active">
        <div class="tabs-content">
            <p>Morbi in dui quis est pulvinar ullamcorper.</p>
        </div>
    </div>
    <div id="tab2" class="tabs-container">
        <div class="tabs-content">
            <p>Morbi in dui quis est pulvinar ullamcorper.</p>
        </div>
    </div>
    <div id="tab3" class="tabs-container">
        <div class="tabs-content">
            <p>Morbi in dui quis est pulvinar ullamcorper.</p>
        </div>
    </div>
</div>

I want short code like:
[tabs]
[tab_item title=”First Tab”]Morbi in dui quis est pulvinar ullamcorper.[/tab_item]
[tab_item title=”Second Tab”]Morbi in dui quis est pulvinar ullamcorper.[/tab_item]
[tab_item title=”Third Tab”]Morbi in dui quis est pulvinar ullamcorper.[/tab_item]
[/tabs]

Post Views: 0

Related posts

Leave a Reply

3 comments

  2. This how you do.

    // Add Shortcode
function custom_shortcode() {
//echo your html in here.
}
add_shortcode( '', 'custom_shortcode' );

// now shortcode available in editor like so
[custom_shortcode]

    // more docs and explanation here to do what you want. its a little tricky but possible.

  3. To make tabs, you’re going to need CSS. Also, the code shown will work best with a with the id ‘tab1’

    For example,

    <div id='tab1'><a href='#'></a></div>
<style>
#tab1{
    position: absolute;
    top: 0%;
    left: 0%;
    height: 4%;
    width: 10%;
    color: white;
    background-color: black;
    border-radius: 5px;
}
a{
    text-decoration: none;
    color: white;
}
a:hover{
    text-decoration: underline;
    color: green;
}
</style>

    You can embed that directly into the webpage.

    If you want to add the others, just copy/paste the div, change it’s id to tab2, copy/paste the inside of the style, rename the the thing at the top #tab2, and change left: to 10%.