Wordpress Tabs Slides
October 27th, 2009Summary
Wordpress Tabs Slides give you tabs and slides (in post/page) gives you the ability to easily add content tabs and/or content slides. The tabs emulate a multi-page structure, while the slides emulate an accordion-like structure, inside a single page!Installation
- 1. Upload folder wp-tabs-slides to the /wp-content/plugins/ directory.
- 2. Activate the plugin through the 'Plugins' menu in WordPress.
- 3. Test and enjoy!
Usage
You can use shortcode Tabs:
{tab=Tab Title} Contents {/tabs}
or
{tab=Tab 1}
Contents Tab 1
{tab=Tab 2}
Contents Tab 2
{/tabs}
Slides:
{slide=Slide Title} Contents {/slide}
Screenshot
Tabs
Slider
Changelog
Support & Donate
Report bugs and feature request use contact form.
Support plugin development if you need support regarding to this plugin.
Download
Download Wordpress Tabs Slides Download Wordpress Tabs Slides Beta 2.0Sponsors
Incoming search terms for the article:
- Powered by Wordpress
- wordpress slide
- Wordpress Tabs Slides
- wordpress tabs
- slide wordpress
- wordpress tabs plugin
- wordpress tab
- wordpress tab plugin
- tabs wordpress
- wordpress tab slider
Category: Projects
Abdul,
Thanks so much for your quick reply. Awesome customer service. I actually tried that earlier and it just wreaked havoc on my template--I probably did it wrong. Eventually I just stepped away from it for a little while and then found a simple fix right in the Photosmash plugin.
QUICK FIX--> Rather than using the "Standard" display I switched each gallery I was trying to show to "std_widget" display and the grid layout opens just perfectly each time.
I know you have another user on your site who had the same problem. It's great to know the fix is just that simple.
Thanks again for a great plugin and for all your help.
Rashell
Thanks for the suggestion to use the disable-wpautop plugin.Thank you so much!
I'm having trouble loading a gallery of photos into a tab. Everything loads except the layout. Rather than a nice grid of photos I get a group of photos layered atop one another. If I remove the tabs they layout in the grid style just fine. Any ideas of how to fix this? You can get an idea of what I'm talking about at
http://nanascrafts.com/general-crafts/recycled-storage-jars under the "member submissions" and "more projects" tabs.
Thanks much,
Rashell
Hi rashell
try to wrapper the content with div and add padding-top to the wrapper
Hi Abdul I have already written to you for one thing and you already asked me...
It was all about closing opened tabs everytime the user click on a new one ...
Your answer was "add this: jQuery(\".wts_slidewrapper\").hide(); before jQuery(\"#hideslide".$uniqueToggleID.$pid."\").slideToggle(".$sliderspeed."); " but this last line there is no more in the last upgrade.
Can you tell me what can i add this time to do the same thing.
you can use {accordion} tag
ex:
{accordion=title 1}Content 1{/accordion}
{accordion=title 2}Content 2{/accordion}
or you can
add that line in tabs_slides.js
Hi Abdul, thanks for the suggestion to use the disable-wpautop plugin. That did the trick. A few more things if you don't mind:
1) any way to configure so that the first slider is open by default?
2) any way to configure so that opening a new slider will close the open slider?
3) any way to style the slider title bar with an individual color for each subsequent bar?
Thanks again for a great plugin! I'll send you a link when completed!
Hi Abdul, I figured out how to enable unique styling for each title bar by adding .$uniqueSlideID. after the "wts_title" class in wp-tabs-slide.php.
Still hoping for with a push in the right direction with regard to items 1 and 2.
Thx, > JH
Hi john
You can use linkId.
You can find linkId in anchor.
For my first problem, I tried to remove the comment marks in //showHideContent(false,1);}); but it didn't work. Can you advise?
For my second problem, I tried to add this:
jQuery(\".wts_slidewrapper\").hide();
before:
jQuery(\"#hideslide".$uniqueToggleID.$pid."\").slideToggle(".$sliderspeed.");
as was suggested earlier, but this did not solve the problem. (Actually I couldn't find the jquery above but I found jQuery(wrapper).slideToggle(speed);
and added it above.
Any suggestions? I'm not sure what you mean by use linkid in anchor.
The accordion method worked for the problem of toggling between sliders, but I'm still not seeing the solution for the problem of having the first slider open when the page loads. I greatly appreciate the assistance thus far.
Thanks!
> JH
See the accordion source john.
you will see
id="hideslide0pxx"
xx is post id
and you can set style into css
#hideslide0pxx{ display: block; }Thank you so much! So simple I cannot believe I missed that... I truly appreciate your help. I'll send a link once I finish styling the elements. And also a donation will be on the way in short order. Thanks again!!
> JH
You're welcome john
Hi Abdul,
Great plugin! I find it to be exactly what I need to style my site, but I'm running into a slight problem:
When I insert the Slider shortcode and publish my page, I'm finding that my page fails to validate correctly. The W3C validation error is as follows:
Line 145, Column 29: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
JH
Sorry, here's the full error message:
Line 145, Column 29: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<!-- Error is here: <a id="loweryourenergyb...
Ugh... how do I correctly paste the code into comment so it won't run?
Hi John.
Try to disable wpautop and validate again your page.
Hi Abdul,
Thanks for the quick reply. I've checked the codex but I don't see any explanation on disabling wpautop. I found that remarking it out in formatting.php did not do the trick.
Thanks!
> JH
// Error message: Line 145, Column 29: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag ... Code Snippet: <a id="loweryourenergyb...
Code Snippet: // <a id="loweryourenergyb...
Ugh, your comment field keeps decimating the code. I'll try it with spaces. Here goes: Code Snippet: <a id="loweryourenergyb...
Use contact form or email me.
were do you add
{slide=Slide Title} Contents {/slide}
{slide=Slide Title} Contents {/slide}
to?
style.css/header.php.....?
You would put that into a post or page.
Never mind. I changed it in the .css file. Thanks
Hi there! Thanks for the update. In the previous version I had used CSS to change the hover color of the tabs, but it's not working now. Any hints? Thanks!
By the way, how can i change the color of the tabs?. Can i do 2 files of tabs?
Thank you again.