CODEWITHSUNDEEP
htmlwordpress
Touhidul Sadeek
Touhidul Sadeek

Reputation: 33

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

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]

Upvotes: 1

Views: 813

Answers (3)

Ibrahim Badusha
Ibrahim Badusha

Reputation: 152

Download the plugin from this link - https://wordpress.org/plugins/shortcodes-ultimate/

Try this code 

[su_tabs]
  [su_tab title="Tab 1"] Tab 1 content [/su_tab]
  [su_tab title="Tab 2"] Tab 2 content [/su_tab]
  [su_tab title="Tab 3"] Tab 3 content [/su_tab]
[/su_tabs]

Upvotes: 2

Maze Runner
Maze Runner

Reputation: 244

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.

Upvotes: 1

Oliver
Oliver

Reputation: 1644

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%.

Upvotes: 0

Related Questions