Title: Custom tab shortcode
Last modified: August 22, 2016

---

# Custom tab shortcode

 *  [oneruffryder](https://wordpress.org/support/users/oneruffryder/)
 * (@oneruffryder)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/custom-tab-shortcode/)
 * 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](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/custom-tab-shortcode/#post-5468022)
 * 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](http://codex.wordpress.org/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](https://wordpress.org/support/users/oneruffryder/)
 * (@oneruffryder)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/custom-tab-shortcode/#post-5468112)
 * 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](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](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/custom-tab-shortcode/#post-5468162)
 * 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.

## Tags

 * [function](https://wordpress.org/support/topic-tag/function/)
 * [hacks](https://wordpress.org/support/topic-tag/hacks/)
 * [php](https://wordpress.org/support/topic-tag/php/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 3 replies
 * 2 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [11 years, 6 months ago](https://wordpress.org/support/topic/custom-tab-shortcode/#post-5468162)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics