Custom tab shortcode

  • oneruffryder

    (@oneruffryder)


    11 years, 6 months ago

    Hi, i built the widget to display recent post tags and comments. It looks really well. Now i want from that code to custom it so i can use it for my posts. I dont want to install plugin, as i already styled this one nice.

    Now i dont know how to do it, this is a problem. I tried many solutions but my php knowledge is not so good.

    This is my html code

    <div class="tabs tabs-style-topline">
                <nav>

<ul>
<li><a href="#section-topline-1"><span>Home</span></a></li>
<li><a href="#section-topline-2"><span>Deals</span></a></li>
<li><a href="#section-topline-3"><span>Upload</span></a></li>
<li><a href="#section-topline-4"><span>Work</span></a></li>
<li><a href="#section-topline-5"><span>Settings</span></a></li>
</ul>
                </nav>
                <div class="content-wrap">
                    <section id="section-topline-1"><p>content</p></section>
                    <section id="section-topline-2"><p>content</p></section>
                    <section id="section-topline-3"><p>content</p></section>
                    <section id="section-topline-4"><p>content</p></section>
                    <section id="section-topline-5"><p>content</p></section>
                </div><!-- /content -->
            </div><!-- /tabs -->

    Now i have to i guess loop the “li” element and then take index and add it dynamically for numbers 1-x , or i am wrong ? Anyway i know this have to be done in function.php but whatever i tried, it doesnt work.

    Inside the code the first -top part is for titles and the second one is for content.

    I want it to be like normal tabs shortocode similar to this

    [tabgroup]

    [tab title=”tab1″]Content[/tab]

    [tab title=”tab2″]Content[/tab]

    [tab title=”tab3″]Content[/tab]

    [/tabgroup]

    So, anyone knows how to do it ?

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    11 years, 6 months ago

    Shortcodes will require some modest PHP skills. If you don’t have such skills but are willing to learn, this is something you could attain. Start
    with Shortcode API. I suggest you start with a basic “Hello World” shortcode just to get the basic mechanism established.

    Once you do that, you can move up to something that has real world applicability.

    Thread Starter oneruffryder

    (@oneruffryder)

    11 years, 6 months ago

    Well as i said, i tried many solutions, and simple one i could manage, but for some reason i got lost in this. I just started to learn php.

    This is what i’v done but it breaks page http://pastebin.com/zWEmXTnr

    Anyway i read lot of tuts and i know where to find it, but neither is close to my situtation.

    Perhaps someone will have time to take a look and fix my error which i’v made

    Moderator bcworkz

    (@bcworkz)

    11 years, 6 months ago

    One problem you have is tab_func() is not returning a string, it is returning an array. You need to extract the array values into some sort of string.

    I think your real problem though is calling do_shortcode() from within a shortcode handler. Depending on what content is passed to do_shortcode(), you could start an infinite loop situation. It would be much safer to extract the inner [tab] content using regexp and calling tab_func() directly for each instance instead of relying on do_shortcode(). This way the whole situation is always under control and an infinite loop situation is avoided.

    There could be other errors that I’m not seeing that is causing your page to break. It’s best to develop in small increments, constantly retesting after each additional little bit of code is added. This way when something breaks you know it has to be something you just did. Much easier to find an error over a few lines of code than dozens.

    Also be sure WP_DEBUG is defined as true in wp-config.php so when something breaks you know what caused it and where.

    Even though you are frustrated by lack of results, I can see you’ve done a lot of work, you’ve surely learned a lot along the way. If you back up some and take small methodical baby steps towards your goal, constantly retesting along the way, you will get there. Tracking down errors is part of coding, everyone makes mistakes. Learning how to debug is probably the most important coding skill to develop. Hang in there!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Custom tab shortcode’ is closed to new replies.