/
readme.txt
166 lines (118 loc) · 5.01 KB
/
readme.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
=== Tabs Shortcodes ===
Contributors: philbuchanan
Author URI: http://philbuchanan.com/
Donate Link: http://philbuchanan.com/
Tags: tab, tabs, shortcodes
Requires at least: 3.3
Tested up to: 4.1
Stable tag: 1.2
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Adds a few shortcodes to allow for tabbed content.
== Description ==
Adds a few shortcodes to allow for tabbed content.
**IMPORTANT:** If you are not comfortable using WordPress shortcodes, this plugin may not be for you. Additionally, you must be able to edit your themes main stylesheet in order to add the [necessary CSS](http://wordpress.org/plugins/tabs-shortcodes/other_notes/).
= Features =
* Adds two shortcodes for adding a tabbed interface to your site
* Select a specific tab by URL
* No default CSS added (you will **need** to [add your own](http://wordpress.org/plugins/tabs-shortcodes/other_notes/))
* Only adds JavaScript on pages that use the shortcodes (and doesn't require jQuery)
= The Shortcodes =
The two shortcodes that are added are:
`[tabs]`
and
`[tab title=""]`
= Basic Usage Example =
[tabs]
[tab title="First Tab"]Content for tab one goes here.[/tab]
[tab title="Second Tab"]Content for tab two goes here.[/tab]
[tab title="Third Tab"]Content for tab three goes here.[/tab]
[/tabs]
This will output the following HTML:
<ul class="tabs">
<li><a href="#tab-1" class="active">First Tab</a></li>
<li><a href="#tab-2">Second Tab</a></li>
<li><a href="#tab-3">Third Tab</a></li>
</ul>
<section id="tab-1" class="tab active">Content for tab one goes here.</section>
<section id="tab-2" class="tab">Content for tab two goes here.</section>
<section id="tab-3" class="tab">Content for tab three goes here.</section>
= Settings =
There are no settings for the plugin. The only additional setup you will need to do is [add some css](http://wordpress.org/plugins/tabs-shortcodes/other_notes/) to style the tabs however you'd like. Adding the CSS is very important as the tabs will not display as tabs until you do so.
= Selecting a Tab by Default =
You can select a tab by default by added the tab number as an option in the opening `[tabs]` shortcode like this:
`[tabs open="2"]`
This will open the second tab when the page loads.
= Selecting a Tab by URL =
You can select a tab by default using a hash in the URL. Simply add `#tab-1` after the trailing / of the URL to select tab number 1. Replace the number with the tab you'd like to select.
This example URL will select tab number 3:
`http://domain.com/your-page/#tab-3`
== Installation ==
1. Upload the 'tabs-shortcodes' folder to the '/wp-content/plugins/' directory.
2. Activate the plugin through the Plugins menu in WordPress.
3. Add the shortcodes to your content.
4. Add some [CSS](http://wordpress.org/plugins/tabs-shortcodes/other_notes/#Other-Notes) to your themes stylesheet to make the tabs look the way you want.
== Frequently Asked Questions ==
= Why isn't the JavaScript file loading on my site? =
This is most likely caused by a poorly coded theme. The plugin makes use of the `wp_footer()` function to load the JavaScript file. Check your theme to ensure that the `wp_footer()` function is being called right before the closing `</body>` tag in your themes footer.php file.
== Other Notes ==
= Sample CSS =
Here is some sample CSS to get you started. Make adjustments as necessary if you want to customize the look and feel of the tabs.
/* Tabs Styles */
ul.tabs {
list-style: none;
margin: 0;
border-bottom: 1px solid #ccc;
}
ul.tabs li {display: inline-block;}
ul.tabs a {
display: block;
position: relative;
top: 1px;
padding: 5px 10px;
border: 1px solid transparent;
text-decoration: none;
}
ul.tabs a.active {
border-color: #ccc;
border-bottom-color: #fff;
}
section.tab {
display: none;
margin-bottom: 15px;
padding: 15px 0;
}
section.tab.active {display: block;}
= Issues/Suggestions =
For bug reports or feature requests or if you'd like to contribute to the plugin you can check everything out on [Github](https://github.com/philbuchanan/Tabs-Shortcodes/).
== Changelog ==
= 1.2 =
* Added an option to open a specific tab by default
* Now compatible up to WordPress 4.1
= 1.1.1 =
* Fixed breaking tabs when clicking outside tab area
= 1.1 =
* Added ability to select a specific tab based on the URL
= 1.0.3 =
* Compatibility with WordPress 3.9
= 1.0.2 =
* Added the shortcode parameter when calling shortcode_atts()
= 1.0.1 =
* Drastically simplified JavaScript
= 1.0 =
* Initial release
== Upgrade Notice ==
= 1.2 =
Added an option to open a specific tab by default.
= 1.1.1 =
Fixed breaking tabs when clicking outside tab area.
= 1.1 =
Added ability to select a specific tab based on the URL.
= 1.0.3 =
Compatibility with WordPress 3.9.
= 1.0.2 =
Added the shortcode parameter when calling shortcode_atts().
= 1.0.1 =
Drastically simplified JavaScript.
= 1.0 =
Initial release.