WordPress.org

Forums

Shortcodes Ultimate
[resolved] Tabs (14 posts)

  1. sleenmg
    Member
    Posted 2 years ago #

    I'm hoping you can help me. I'm using the Tabs shortcode and I love it. Is it possible to set one of the Tab titles to a link? I really need to have users click on one of the and have them be sent to another page.

    I have tried setting the title as a link but it just stays on the same page.

    Sure hope you can help me.

    http://wordpress.org/plugins/shortcodes-ultimate/

  2. Vladimir Anokhin
    Member
    Plugin Author

    Posted 2 years ago #

    Hello,

    I can help you, but you should show me the page with tabs.

  3. sleenmg
    Member
    Posted 2 years ago #

    Thanks, the one that I'm working on is http://hoffbrausteaks.com/amarillo-menu/ I want to add one in between Kids and To Go but i want it to link to another page instead.

    Thanks for your assistance.

  4. Vladimir Anokhin
    Member
    Plugin Author

    Posted 2 years ago #

    You can put link inside tab title, but you need to use single quotes for link tag.

    Code:

    [tabs]
       [tab title="<a href='http://example.com/'>Tab title</a>"] Content [/tab]
    [/tabs]

    And JS-code:

    <script type="text/javascript">
    jQuery(document).ready(function($) {
       $('.su-tabs-nav span').click(function() {
          if ($(this).find('a').length > 0) window.location.href = $(this).find('a').attr('href');
       });
    });
    </script>

    You can paste js-code right inside post editor in HTML mode, but I recommend to use theme files.

  5. Vladimir Anokhin
    Member
    Plugin Author

    Posted 2 years ago #

    I found easy way to solve your problem.

    Go to Dashboard > Shortcodes Ultimate > Custom CSS (tab) and add next portion of CSS code to the editor:

    .su-tabs-nav span a {
       display: block;
       margin: -5px -15px;
       padding: 5px 15px;
       font-weight: normal;
    }
  6. Vladimir Anokhin
    Member
    Plugin Author

    Posted 2 years ago #

    Use this CSS code instead of js-code I've provided above.
    BTW you still need to use link in tab title attribute.

    And there is final solution:

    Shortcode

    [tabs]
       [tab title="<a href='http://example.com/'>Tab title</a>"] Content [/tab]
    [/tabs]

    Custom CSS

    .su-tabs-nav span a {
       display: block;
       margin: -5px -15px;
       padding: 5px 15px;
       font-weight: normal;
    }
  7. sleenmg
    Member
    Posted 2 years ago #

    Thanks, I'm trying to get this to work. Right now I see the code on my sample page. I' thinking I may have put the javascript in the wrong place.

    Can you tell me exactly where I would put it? I'm trying to put it in the theme files and I've tried Body Tag, Body Top, Body Header None of them seem to work.

    My test page is http://hoffbrausteaks.com/test-menu and I've used

    [/tab]
    [tab title="Tab title"]
    Test
    [/tab]
    [/tabs]

    Thanks for yoyu assistance.

  8. Vladimir Anokhin
    Member
    Plugin Author

    Posted 2 years ago #

    See my latest reply. You can do it without javascript and this way is better.

  9. Vladimir Anokhin
    Member
    Plugin Author

    Posted 2 years ago #

    As I see, you're using visual editor that converts your link into text.
    I've recorded a video that will explain you how to add this link properly using visual editor.

    This is code that I paste to editor in the video:
    [tabs]
    [tab title=''] Content [/tab]
    [/tabs]

  10. Vladimir Anokhin
    Member
    Plugin Author

    Posted 2 years ago #

  11. sleenmg
    Member
    Posted 2 years ago #

    Ok...I've added rthe CSS code and used the following shortcode

    [/tab]
       [tab title="<a href='http://example.com/'>Tab title</a>"] Content [/tab]
    [/tabs]

    all i see is code.

    Does this need to be set up as another set of tabs?

  12. Vladimir Anokhin
    Member
    Plugin Author

    Posted 2 years ago #

    Please watch the video and make sure you're doing same things

  13. sleenmg
    Member
    Posted 2 years ago #

    I watched the video and that is how i was adding it. I appreciate it.

    I did finally get it working though. This is what i did.

    [tab title='Bar'][/tab]
    [/tabs]

    It fits now right under the rest of the tabs and I think I feel comfrtable that I can add/move it where i need it to be within the tabs.

    Thank you so much for your help. I can now finish the page.

  14. Vladimir Anokhin
    Member
    Plugin Author

    Posted 2 years ago #

    Glad to have helped you

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Shortcodes Ultimate
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic