Tabby Responsive Tabs - Version 1.3.4

Version Description

  • tab titles sanitized with wp_kses() to allow line breaks in tab titles
  • Sanitize html for tab title element
Download this release

Release Info

Developer numeeja
Plugin Icon 128x128 Tabby Responsive Tabs
Version 1.3.4
Comparing to
See all releases

Code changes from version 1.3.3 to 1.3.4

Files changed (8) hide show
  1. css/index.html +0 -1
  2. css/index.php +1 -0
  3. images/index.php +1 -0
  4. includes/index.php +1 -0
  5. index.php +1 -1
  6. js/index.php +1 -1
  7. readme.txt +48 -91
  8. tabby-responsive-tabs.php +28 -13
css/index.html DELETED
@@ -1 +0,0 @@
1
- <?php // Silence will fall
 
css/index.php ADDED
@@ -0,0 +1 @@
 
1
+ <?php // the sound of silence
images/index.php ADDED
@@ -0,0 +1 @@
 
1
+ <?php // the sound of silence
includes/index.php ADDED
@@ -0,0 +1 @@
 
1
+ <?php // the sound of silence
index.php CHANGED
@@ -1 +1 @@
1
- <?php // Silence will fall
1
+ <?php // the sound of silence
js/index.php CHANGED
@@ -1 +1 @@
1
- <?php // Silence will fall
1
+ <?php // the sound of silence
readme.txt CHANGED
@@ -1,9 +1,9 @@
1
  === Tabby Responsive Tabs ===
2
  Contributors: numeeja
3
- Donate link: http://cubecolour.co.uk/wp
4
  Tags: tabs, tab, responsive, accordion, shortcode
5
  Tested up to: 5.9
6
- Stable tag: 1.3.3
7
  License: GPLv2
8
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
9
  License of javascript:
@@ -15,26 +15,28 @@ Create responsive tabs inside your posts, pages or custom post content by adding
15
  * Adds a set of horizontal tabs which changes to an accordion on narrow viewports
16
  * Tabs and accordion are created with jQuery
17
  * Supports multiple sets of tabs on same page
18
- * Uses Semantic header and Content markup
19
  * Aria attributes and roles aid screen reader accessibility
20
  * Tabs and content are accessible via keyboard
21
 
22
- The Tabby Responsive Tabs plugin is designed to be an easy and lightweight way to add responsive tabs to your content. Experienced developers should be able to easily customize how the tabs display on their site by replacing the built-in CSS rules with a customised version (see note below for more details of this).
23
 
24
  = Optional Add-ons =
25
- > The [Tabby responsive tabs customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") add-on adds a settings panel with several parameters for customising your tabs. to provide the easiest way to customise the display of your tabs without editing any code. You can use the default tabby styles or one of the included one-click presets as a starting point for customisation. It also enables you to easily add icons to your tab titles.
26
 
27
- > The [Tabby link to tab](http://cubecolour.co.uk/downloads/tabby-link-to-tab/ "Tabby Link to Tab") add-on provides a simple shortcode to create links to specific tabs which can appear anywhere on the same page as the tabgroup without the page needing to reload.
28
 
29
- > The [Tabby tab to URL link](http://cubecolour.co.uk/downloads/tabby-tab-to-url-link/ "Tabby Tab to URL Link") add-on enables you to set one or more of your tabs to act as a link to any URL.
30
 
31
- > The [Tabby load accordion closed](http://cubecolour.co.uk/downloads/tabby-load-accordion-closed/ "Tabby Load Accordion Closed") add-on changes the default behaviour when the tabs are displayed as an accordion so no accordion sections are open when the page initially loads.
32
 
33
- > The [Tabby reopen current tab on reload](https://cubecolour.co.uk/downloads/tabby-reopen-current-tab-on-reload/ "Tabby Tab to URL Link") add-on enables the currently active tab to remain the active (open) tab after the page has been reloaded/refreshed.
34
 
35
  = Usage: =
36
 
37
- There are two shortcodes which should both be used to create the tab group: `[tabby]` and `[tabbyending]`
 
 
38
 
39
  `[tabby title="tabname"]`
40
 
@@ -58,30 +60,30 @@ This is the content of the first tab.
58
  [tabby title="Second Tab"]
59
 
60
 
61
- This is the content of the second tab.
62
 
63
 
64
  [tabby title="Third Tab"]
65
 
66
 
67
- This is the content of the third tab.
68
 
69
 
70
  [tabbyending]
71
 
72
  `
73
 
74
- *note: To prevent stray paragraph tags being introduced by WordPress's wpautop filter, ensure that there is a blank line above and below each tabby shortcode and the tabbyending.*
75
 
76
- You can see the tabs on the [demo page](http://cubecolour.co.uk/tabby-responsive-tabs/ "Tabby Responsive Tabs demo").
77
 
78
  You can add the shortcodes to a page made using the WordPress block editor by using WordPress's shortcode block.
79
 
80
  If you want to change how the tabs and accordion display on your site, you have two options:
81
 
82
- 1. Use the [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") plugin which provides a very easy way to customise the display of your tabs without needing to edit any code.
83
 
84
- 2. Copy the contents of the plugin's stylesheet into your child theme or custom styles plugin and make the changes to the copy as required. If you do this you will also need to prevent the built-in styles from loading by going to the admin page at settings => tabby and unchecking the "Include the default tabby stylesheet" checkbox.
85
 
86
  = Additional Shortcode attributes =
87
 
@@ -107,11 +109,11 @@ The markup required to show an icon alongside a tab title can be added by using
107
  `
108
  This adds a pseudo element before the tab title with the classes "fa" and "fa-cog". Other icon font sets can be used if you ensure the CSS rules target the classes added by the plugin.
109
 
110
- The [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") plugin can be used to add the Font Awesome files required to display the icons in the tab titles.
111
 
112
 
113
  = Controlling which tab is open when linking to the page =
114
- You can use a 'target' URL parameter to set which tab will be open when the page initially loads. The value of this parameter is based on the tab title specified in the tabby shortcode, but formatted with punctuation & special characters removed, accents removed, and with dashes replacing the spaces.
115
 
116
  If you want to link to a 'contacts' page with a tab titled 'Phone Numbers' open, the url you use to link to this page would look like:
117
  `
@@ -145,16 +147,14 @@ There are a few things you can investigate when troubleshooting any plugin which
145
  If you copied &amp; pasted in the Tabby Responsive Tabs shortcodes from a web page showing an example usage rather than directly typing them into the page, it is possible that there may be invisible or invalid characters in the shortcode text, or the shortcodes are enclosed within code tags. Correct this by deleting the shortcodes and type them directly instead.
146
 
147
  **Plugin or theme conflicts**
148
- To troubleshoot whether you have a plugin or theme conflicting with the Tabby Responsive Tabs plugin, switch to a default theme such as Twenty-Twentytwo. If the plugin starts working correctly at that point, you know that the theme needs to be investigated.
149
-
150
- If changing the theme makes no difference, deactivate all plugins except Tabby Responsive Tabs. If your Tabs appear correctly at that point, discover which plugin caused the issue by reactivating the plugins one by one until Tabby Responsive Tabs stops working again.
151
 
152
- *If the plugin isn't working for you*, please read the documentation carefully to check whether your issue is covered. Then review the topics in the [plugin support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum"). You may find an appropriate solution outlined in a resolved topic if someone had the same or a similar issue. If you do not find an answer that enables you to solve your issue, please post a new topic on the forum so we have an opportunity to get it working before you consider leaving a review.
153
 
154
  = What levels of support are available? =
155
- You can receive free support for the plugin if you have problems getting it working. To access this please open a new topic on the [plugin support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum") all communication must take place on the forum for free support
156
 
157
- If you require a greater level of support than can be provided on the plugin support forum on WordPress.org - eg you prefer not to post the url or you require CSS support to fit specific requirements for your site, you can request non-free support via the [paid email support form for cubecolour plugins](http://cubecolour.co.uk/premium-support/ "paid email support form for cubecolour plugins") form.
158
 
159
  = How can I remove extra paragraph tags which appear at the beginning or end of the tab content? =
160
  These extra tags are often be added by WordPress's wpautop function. It is recommended to leave a blank line before and after each tabby shortcode to prevent these from appearing.
@@ -166,43 +166,31 @@ If you are copying & pasting the example shortcodes into the visual editor and t
166
  In your your WordPress admin, go to settings -> tabby and uncheck the "Include the default tabby stylesheet" checkbox.
167
 
168
  = Where is the plugin's admin page? =
169
-
170
  The admin page is at settings => tabby.
171
 
172
- If you want to be able to customise your tabs without editing code, the [Tabby Responsive Tabs Customiser plugin](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser plugin") is available, and provides options to customise how the tabs display.
173
-
174
- = Does this plugin work with responsive Themes? =
175
-
176
- Yes - it should work with any well-coded responsive theme.
177
-
178
 
179
  = Does it work with a multisite installation of WordPress? =
180
-
181
  Yes
182
 
183
  = How can I change the colours? =
184
-
185
  The recommended method for experienced developers to customise how the tabs display is to copy the css rules from the plugin's stylesheet into the child theme's stylesheet and then customise the colours and other CSS as required. When using customised version of the plugin's styles in the child theme, you should also prevent the plugin's default built-in styles from loading by going to settings -> tabby in your WordPress admin, and uncheck the "Include the default tabby stylesheet" checkbox.
186
 
187
- If you prefer to use a settings page in your WordPress admin to set a custom tab style, you can use the [Tabby Responsive Tabs Customiser plugin](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser plugin") which contains several tab style presets which can be further customised with a comprehensive set of easy to set options. The customiser plugin was designed to be easy for non-developers to use to customise how the tabs display.
188
 
189
  = Can I change the responsive breakpoint from the default 767px? =
190
-
191
  Yes, you can see where that is set in the plugin's CSS. Refer to the answer above about using custom css to use a custom value.
192
 
193
  This value can also be set using the Tabby Responsive Tabs Customiser plugin's admin panel.
194
 
195
 
196
  = How can I get rid of unmatched opening or closing paragraph tags in the tabs making my markup invalid? =
197
-
198
  This can be caused by WordPress's wpautop filter being applied to the post/page content. To prevent stray paragraph tags appearing, leave a blank line before and after each shortcode.
199
 
200
  = Can I display multiple tab groups on a single page? =
201
-
202
  Yes you can have as many sets of tabs as you like.
203
 
204
  = Can I include tabs in my sidebar? =
205
-
206
  It is possible to include tabs within a text widget if you have added shortcode support to text widgets by adding the filter below to your child theme's functions.php or a custom functionality plugin.
207
 
208
  `
@@ -212,80 +200,60 @@ This filter will enable you to use any shortcodes within text widgets.
212
 
213
 
214
  = Can I nest a Tag Group within an existing tab? =
215
-
216
  No, this is not supported.
217
 
218
  = Can I specify which tab is open when the page initially loads? =
219
-
220
  Yes, see the documentation for the 'open' shortcode parameter for details.
221
 
222
  = Can I specify which tab is open from a link pointing to the page =
223
-
224
  Yes, see the documentation for the usage of a 'target' URL parameter in the link.
225
 
226
  = I want to use a custom class for my icons without the font-awesome prefixes =
227
-
228
  You can do this by using an 'ico' parameter instead of the 'icon' parameter in the shortcode.
229
 
230
- = I've just updated the plugin and the tabs are now displaying differently =
231
-
232
- The default CSS has changed in version 1.0.2 and version 1.1.0. If your tabs now appear 'broken' after an update, this may be due to your site using customised tab styles added to your theme instead of following the recommended method of replacing the default CSS with a complete customised version. To fix this remove the CSS rules you added to your theme to target the tabs and add the custom styles using the method outlined in the documentation.
233
-
234
  = Can you create a customised stylesheet for me to fit in with the colours or style of my website? =
 
235
 
236
- Site-specific customisation work is beyond of the scope of the free support I am able to provide. I am happy to take on CSS work as a paid job or you can style your tabs to match your theme using the optional [Tabby Responsive Tabs Customiser](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") add-on plugin.
237
-
238
- Plugin support for Tabby Responsive Tabs is provided at the [plugin's support forum](http://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum") on WordPress.org.
239
 
240
  = Why can't I get the Target Parameter to Work? =
241
-
242
  This is used just like any other URL parameter in a query string so you need to use a valid structure for the query string.
243
 
244
- If there's already a parameter in a query string, including the one included in the url when using default ugly permalinks, subsequent parameters must be appended using an ampersand.
245
  eg:
246
 
247
  `
248
  yoursite.com/?page_id=1&target=phone-numbers
249
  `
250
 
251
- = How can I use the Target Parameter on a link on the same page as the tabgroup without the page reloading? =
252
-
253
- This is not possible with the target parameter, however this can be achieved by using the optional [Tabby Link to Tab plugin](http://cubecolour.co.uk/downloads/tabby-link-to-tab/ "Tabby Link to Tab plugin")
254
 
255
  = How will the tabs print? =
256
-
257
  Basic print styles are included. This is designed to print the tab titles and content in series.
258
- = Are there any other free cubecolour plugins? =
259
 
260
- If you like Tabby Responsive Tabs, you may like some of my other plugins in the WordPress.org plugins directory. These are listed on my [profile](http://profiles.wordpress.org/numeeja/ "cubecolour profile") page under the 'plugins' tab.
 
261
 
262
  = Who or what is cubecolour? =
263
-
264
- My name is Michael Atkins. Cubecolour is the name of my web design and development business in South London where I work with businesses, organisations and individuals to build and support their websites using WordPress. I enjoy attending local WordCamps and WordPress meetups. I have used WordPress since 2007 and I am a moderator on the WordPress.org support forums. When I'm not sitting in front of my MacBook I can usually be found playing bass or ukulele.
265
 
266
  = Why do you spell the word 'color' incorrectly? =
267
-
268
  I don't, I'm from England and 'colour' is the correct spelling.
269
 
270
  = I am using the plugin and love it, how can I show my appreciation? =
 
271
 
272
- You can donate any amount via [my donation page](http://cubecolour.co.uk/wp/ "cubecolour donation page") or you could purchase a copy of the [Tabby Responsive Tabs Customiser plugin](http://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser plugin").
273
-
274
- If you find Tabby Responsive Tabs useful, I would also appreciate a review on the [plugin review page](http://wordpress.org/support/view/plugin-reviews/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin reviews")
275
-
276
- = Is the Tabby Responsive Tabs Customiser plugin a Premium or Pro Version of Tabby Responsive Tabs? =
277
 
278
- No, Tabby Responsive Tabs works great on its own and customising how the tabs display should be straightforward for anyone comfortable with editing a child theme. The Tabby Responsive Tabs Customiser plugin is an add-on which is designed to be useful for anyone who wants an easy way to customise how their tabs display without touching any code.
 
279
 
280
- = Why is the Tabby Responsive Tabs Customiser an add-on plugin rather than part of Tabby Responsive Tabs? =
281
 
282
- The free Tabby Responsive Tabs plugin was designed as a lightweight plugin for WordPress developers to add responsive tabs to their WordPress site. The functionality provided by the optional add-on customiser plugin was never intended to be included as part of Tabby Responsive Tabs and is designed to be particularly useful for people who prefer not to code.
283
 
284
- = What is the Tabby Link to Tab plugin? =
285
-
286
- Tabby Link to tab is an optional add-on for Tabby Responsive Tabs which provides a simple shortcode to create links to specific tabs which can appear anywhere on the same page as the tabgroup. When this is used, the tab becomes active without the page reloading. This add-on is not required in most cases but can be useful if you want to include links to specific tabs within the tab content or in a different area of the page.
287
-
288
- For more details please see: [Tabby Link to Tab plugin](http://cubecolour.co.uk/downloads/tabby-link-to-tab/ "Tabby Link to Tab plugin"). This add-on was developed after several users requested the functionality.
289
 
290
  == Screenshots ==
291
 
@@ -295,6 +263,10 @@ For more details please see: [Tabby Link to Tab plugin](http://cubecolour.co.uk/
295
 
296
  == Changelog ==
297
 
 
 
 
 
298
  = 1.3.3 =
299
  * Added option to change the tab title element
300
 
@@ -314,23 +286,18 @@ For more details please see: [Tabby Link to Tab plugin](http://cubecolour.co.uk/
314
  * ico shortcode parameter added to enable custom icons to be added without adding font-awesome prefixes
315
 
316
  = 1.2.3 =
317
-
318
  * Enable targeting the tab from url query string when the title contains an accent
319
 
320
  = 1.2.2 =
321
-
322
  * Included print stylesheet as a separate file
323
 
324
  = 1.2.1 =
325
-
326
  * Added index.php to prevent the content of plugin directories being viewed if the site has not had directory browsing disallowed.
327
 
328
  = 1.2.0 =
329
-
330
  * Added basic print styles to default stylesheet
331
 
332
  = 1.1.1 =
333
-
334
  * Improvements to default CSS
335
  * Addition of 'open' shortcode attribute to allow tabs other than the first to be open when the page loads
336
  * First tab now is open by default when displayed as accordion
@@ -342,23 +309,22 @@ For more details please see: [Tabby Link to Tab plugin](http://cubecolour.co.uk/
342
  * Added functionality to allow target url parameter to control which tab is open on page load.
343
 
344
  = 1.0.3 =
345
-
346
  * improved theme compatibility with default css
347
 
348
  = 1.0.2 =
349
-
350
  * enqueue plugin js only when needed
351
  * css for improved specificity
352
 
353
  = 1.0.1 =
354
-
355
  * Updated js & css
356
 
357
  = 1.0.0 =
358
-
359
  * Initial Version
360
 
361
  == Upgrade Notice ==
 
 
 
362
 
363
  = 1.3.3 =
364
  * Added option to change the tab title element markup
@@ -374,41 +340,32 @@ For more details please see: [Tabby Link to Tab plugin](http://cubecolour.co.uk/
374
  * ico shortcode parameter added to enable custom icons to be added without adding font-awesome prefixes
375
 
376
  = 1.2.3 =
377
-
378
  * Enable targeting the tab from url query string when the title contains an accent
379
 
380
  = 1.2.2 =
381
-
382
  * Included print stylesheet as a separate file
383
 
384
  = 1.2.1 =
385
-
386
  * Added index.php to prevent the content of plugin directories being viewed if the site has not had directory browsing disallowed.
387
 
388
  = 1.2.0 =
389
-
390
  * Added print styles to default stylesheet
391
 
392
  = 1.1.1 =
393
-
394
  * Added Support for Tabby Responsive Tabs Customiser add-on
395
  * Further improved theme compatibility with default css
396
  * Control which tab is open on page load using short code parameter or url parameter
397
  * Font Awesome icon support in tabs
398
 
399
  = 1.0.3 =
400
-
401
  * improved theme compatibility with default css
402
 
403
  = 1.0.2 =
404
-
405
  * improved efficiency - enqueue plugin only when needed
406
  * improved theme compatibility with default css
407
 
408
  = 1.0.1 =
409
-
410
  * Updated js & css
411
 
412
  = 1.0.0 =
413
-
414
  * Initial Version
1
  === Tabby Responsive Tabs ===
2
  Contributors: numeeja
3
+ Donate link: https://cubecolour.co.uk/wp
4
  Tags: tabs, tab, responsive, accordion, shortcode
5
  Tested up to: 5.9
6
+ Stable tag: 1.3.4
7
  License: GPLv2
8
  License URI: https://www.gnu.org/licenses/gpl-2.0.html
9
  License of javascript:
15
  * Adds a set of horizontal tabs which changes to an accordion on narrow viewports
16
  * Tabs and accordion are created with jQuery
17
  * Supports multiple sets of tabs on same page
18
+ * Uses semantic header and content markup
19
  * Aria attributes and roles aid screen reader accessibility
20
  * Tabs and content are accessible via keyboard
21
 
22
+ The Tabby responsive tabs plugin is designed to be an easy and lightweight way to add responsive tabs to your content. Experienced developers should be able to easily customize how the tabs display on their site by replacing the built-in CSS rules with an edited version (see note below for more details of this).
23
 
24
  = Optional Add-ons =
25
+ > The [Tabby responsive tabs customiser](https://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby responsive tabs customiser") add-on adds a settings panel with several parameters to provide the easiest way to customise the display of your tabs without editing any code. You can use the default tabby styles or one of the included one-click presets as a starting point for customisation. It also enables you to easily add icons to your tab titles.
26
 
27
+ > The [Tabby link to tab](https://cubecolour.co.uk/downloads/tabby-link-to-tab/ "Tabby link to tab") add-on provides a simple shortcode to create links to specific tabs which can appear anywhere on the same page as the tabgroup without the page reloading.
28
 
29
+ > The [Tabby tab to URL link](https://cubecolour.co.uk/downloads/tabby-tab-to-url-link/ "Tabby tab to URL link") add-on enables you to set one or more of your tabs to act as a link to any URL.
30
 
31
+ > The [Tabby load accordion closed](https://cubecolour.co.uk/downloads/tabby-load-accordion-closed/ "Tabby load accordion closed") add-on changes the default behaviour when the tabs are displayed as an accordion so that no accordion sections are open when the page initially loads.
32
 
33
+ > The [Tabby reopen current tab on reload](https://cubecolour.co.uk/downloads/tabby-reopen-current-tab-on-reload/ "Tabby reopen current tab on reload") add-on enables the currently active tab to remain the active (open) tab after the page has been reloaded/refreshed.
34
 
35
  = Usage: =
36
 
37
+ There are two shortcodes used to create the tab group: `[tabby]` and `[tabbyending]` both must be used as below to create a tab group.
38
+
39
+ To start a new tab use a `[tabby]` shortcode, eg:
40
 
41
  `[tabby title="tabname"]`
42
 
60
  [tabby title="Second Tab"]
61
 
62
 
63
+ This is the content of the second tab. This is the content of the second tab.
64
 
65
 
66
  [tabby title="Third Tab"]
67
 
68
 
69
+ This is the content of the third tab. This is the content of the third tab. This is the content of the third tab.
70
 
71
 
72
  [tabbyending]
73
 
74
  `
75
 
76
+ *note: To prevent stray paragraph tags being introduced by WordPress's wpautop filter, ensure that there is a blank line above and below each tabby shortcode and the tabbyending shortcode.*
77
 
78
+ You can see the tabs on the [demo page](https://cubecolour.co.uk/tabby-responsive-tabs/ "Tabby Responsive Tabs demo").
79
 
80
  You can add the shortcodes to a page made using the WordPress block editor by using WordPress's shortcode block.
81
 
82
  If you want to change how the tabs and accordion display on your site, you have two options:
83
 
84
+ 1. Use the [Tabby Responsive Tabs Customiser](https://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") plugin which provides a very easy way to customise the display of your tabs without needing to edit any code.
85
 
86
+ 2. Copy the contents of the plugin's stylesheet into your child theme or custom styles plugin and make the changes to that copy as required. If you do this you will also need to prevent the built-in styles from loading by going to the admin page at settings => tabby and unchecking the "Include the default tabby stylesheet" checkbox.
87
 
88
  = Additional Shortcode attributes =
89
 
109
  `
110
  This adds a pseudo element before the tab title with the classes "fa" and "fa-cog". Other icon font sets can be used if you ensure the CSS rules target the classes added by the plugin.
111
 
112
+ The [Tabby Responsive Tabs Customiser](https://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") plugin can be used to add the Font Awesome files required to display the icons in the tab titles.
113
 
114
 
115
  = Controlling which tab is open when linking to the page =
116
+ You can use a 'target' URL parameter in your link to set which tab will be open when the page initially loads. The value of this parameter is based on the tab title specified in the tabby shortcode which built the tab, but formatted with punctuation & special characters removed, accents removed, and with dashes replacing the spaces.
117
 
118
  If you want to link to a 'contacts' page with a tab titled 'Phone Numbers' open, the url you use to link to this page would look like:
119
  `
147
  If you copied &amp; pasted in the Tabby Responsive Tabs shortcodes from a web page showing an example usage rather than directly typing them into the page, it is possible that there may be invisible or invalid characters in the shortcode text, or the shortcodes are enclosed within code tags. Correct this by deleting the shortcodes and type them directly instead.
148
 
149
  **Plugin or theme conflicts**
150
+ To troubleshoot whether a plugin or theme is conflicting with the Tabby Responsive Tabs plugin on your site, install the [health check and troubleshooting plugin](https://wordpress.org/plugins/health-check/ "health check and troubleshooting plugin") and use the troubleshooting mode.
 
 
151
 
152
+ *If the plugin isn't working for you*, please read the documentation carefully to check whether your issue is covered. Then review the topics in the [plugin support forum](https://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum"). You may find an appropriate solution outlined in a resolved topic if someone previously posted the same or a similar issue. If you do not find an answer that enables you to solve your issue, please post a new topic on the forum so we have an opportunity to get it working before you consider leaving a review.
153
 
154
  = What levels of support are available? =
155
+ You can receive free support for the plugin if you have problems getting it working. To access this please open a new topic on the [plugin support forum](https://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum") all communication must take place on the forum for free support. Please note that CSS support for customization of the tab display is not within the scope of the free support that can be provided.
156
 
157
+ If you require a greater level of support than can be provided on the plugin support forum on WordPress.org - eg you prefer not to post the url or you require CSS support to fit specific requirements for your site, you can request non-free support via the [paid email support form for cubecolour plugins](https://cubecolour.co.uk/premium-support/ "paid email support form for cubecolour plugins") form.
158
 
159
  = How can I remove extra paragraph tags which appear at the beginning or end of the tab content? =
160
  These extra tags are often be added by WordPress's wpautop function. It is recommended to leave a blank line before and after each tabby shortcode to prevent these from appearing.
166
  In your your WordPress admin, go to settings -> tabby and uncheck the "Include the default tabby stylesheet" checkbox.
167
 
168
  = Where is the plugin's admin page? =
 
169
  The admin page is at settings => tabby.
170
 
171
+ If you want to be able to customise the tabs without editing code, the [Tabby Responsive Tabs Customiser plugin](https://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser plugin") is available, and provides options to customise how the tabs display.
 
 
 
 
 
172
 
173
  = Does it work with a multisite installation of WordPress? =
 
174
  Yes
175
 
176
  = How can I change the colours? =
 
177
  The recommended method for experienced developers to customise how the tabs display is to copy the css rules from the plugin's stylesheet into the child theme's stylesheet and then customise the colours and other CSS as required. When using customised version of the plugin's styles in the child theme, you should also prevent the plugin's default built-in styles from loading by going to settings -> tabby in your WordPress admin, and uncheck the "Include the default tabby stylesheet" checkbox.
178
 
179
+ If you prefer to use a settings page in your WordPress admin to set a custom tab style, you can use the [Tabby Responsive Tabs Customiser plugin](https://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser plugin") which contains several tab style presets which can be further customised with a comprehensive set of easy to set options. The customiser plugin was designed to be easy for non-developers to use to customise how the tabs display.
180
 
181
  = Can I change the responsive breakpoint from the default 767px? =
 
182
  Yes, you can see where that is set in the plugin's CSS. Refer to the answer above about using custom css to use a custom value.
183
 
184
  This value can also be set using the Tabby Responsive Tabs Customiser plugin's admin panel.
185
 
186
 
187
  = How can I get rid of unmatched opening or closing paragraph tags in the tabs making my markup invalid? =
 
188
  This can be caused by WordPress's wpautop filter being applied to the post/page content. To prevent stray paragraph tags appearing, leave a blank line before and after each shortcode.
189
 
190
  = Can I display multiple tab groups on a single page? =
 
191
  Yes you can have as many sets of tabs as you like.
192
 
193
  = Can I include tabs in my sidebar? =
 
194
  It is possible to include tabs within a text widget if you have added shortcode support to text widgets by adding the filter below to your child theme's functions.php or a custom functionality plugin.
195
 
196
  `
200
 
201
 
202
  = Can I nest a Tag Group within an existing tab? =
 
203
  No, this is not supported.
204
 
205
  = Can I specify which tab is open when the page initially loads? =
 
206
  Yes, see the documentation for the 'open' shortcode parameter for details.
207
 
208
  = Can I specify which tab is open from a link pointing to the page =
 
209
  Yes, see the documentation for the usage of a 'target' URL parameter in the link.
210
 
211
  = I want to use a custom class for my icons without the font-awesome prefixes =
 
212
  You can do this by using an 'ico' parameter instead of the 'icon' parameter in the shortcode.
213
 
 
 
 
 
214
  = Can you create a customised stylesheet for me to fit in with the colours or style of my website? =
215
+ Site-specific customisation work is beyond of the scope of the free support. You can style your tabs to match your theme using the optional [Tabby Responsive Tabs Customiser](https://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby Responsive Tabs Customiser") add-on plugin or you can commission a custom plugin which provides custom tab styes specific to your site. This is a paid service, for a quote please send a message via the [cubecolour contact form](https://cubecolour.co.uk/contact/ "cubecolour contact form")
216
 
217
+ Plugin support for Tabby Responsive Tabs is provided at the [plugin's support forum](https://wordpress.org/support/plugin/tabby-responsive-tabs/ "Tabby Responsive Tabs plugin support forum") on WordPress.org.
 
 
218
 
219
  = Why can't I get the Target Parameter to Work? =
 
220
  This is used just like any other URL parameter in a query string so you need to use a valid structure for the query string.
221
 
222
+ If there's already a parameter in a query string, including the one included in the url when not using 'pretty' permalinks, subsequent parameters must be appended using an ampersand.
223
  eg:
224
 
225
  `
226
  yoursite.com/?page_id=1&target=phone-numbers
227
  `
228
 
229
+ = How can I use the target parameter on a link on the same page as the tabgroup without the page reloading?
230
+ This is not possible with the target parameter, however this can be achieved by using the optional [Tabby link to tab plugin](https://cubecolour.co.uk/downloads/tabby-link-to-tab/ "Tabby Link to Tab plugin")
 
231
 
232
  = How will the tabs print? =
 
233
  Basic print styles are included. This is designed to print the tab titles and content in series.
 
234
 
235
+ = Are there any other free cubecolour plugins? =
236
+ If you like Tabby Responsive Tabs, you may like some of my other plugins in the WordPress.org plugins directory. These are listed on my [profile](https://profiles.wordpress.org/numeeja/ "cubecolour profile") page under the 'plugins' tab.
237
 
238
  = Who or what is cubecolour? =
239
+ My name is Michael Atkins. Cubecolour is the name of my web design and development business in South London where I work with businesses, organisations and individuals to build and support their websites using WordPress. I enjoy attending local WordCamps and WordPress meetups. I have used WordPress since 2007 and I am a moderator on the WordPress.org support forums. When I'm not sitting in front of my MacBook I can usually be found playing bass, guitar or ukulele.
 
240
 
241
  = Why do you spell the word 'color' incorrectly? =
 
242
  I don't, I'm from England and 'colour' is the correct spelling.
243
 
244
  = I am using the plugin and love it, how can I show my appreciation? =
245
+ You can donate any amount via [my donation page](https://cubecolour.co.uk/wp/ "cubecolour donation page") or you could purchase a copy of the [Tabby responsive tabs customiser plugin](https://cubecolour.co.uk/tabby-responsive-tabs-customiser/ "Tabby responsive tabs customiser plugin").
246
 
247
+ If you find Tabby responsive tabs useful, I would also appreciate a review on the [plugin review page](https://wordpress.org/support/view/plugin-reviews/tabby-responsive-tabs/ "Tabby responsive tabs plugin reviews")
 
 
 
 
248
 
249
+ = Is the Tabby responsive tabs customiser plugin a Premium or Pro version of Tabby responsive tabs? =
250
+ No, Tabby responsive tabs works great on its own and customising how the tabs display should be straightforward for anyone comfortable with editing a child theme. The Tabby Responsive Tabs Customiser plugin is an add-on which is designed to be useful for anyone who wants an easy way to customise how their tabs display without touching any code.
251
 
252
+ = What is the Tabby link to tab plugin? =
253
 
254
+ Tabby link to tab is an optional add-on for Tabby responsive tabs which provides a simple shortcode to create links to specific tabs which can appear anywhere on the same page as the tabgroup. When this is used, the tab becomes active without the page reloading. This add-on is not required in most cases but can be useful if you want to include links to specific tabs within the tab content or in a different area of the page.
255
 
256
+ For more details please see: [Tabby link to tab plugin](https://cubecolour.co.uk/downloads/tabby-link-to-tab/ "Tabby link to tab plugin"). This add-on was developed after several users requested the functionality.
 
 
 
 
257
 
258
  == Screenshots ==
259
 
263
 
264
  == Changelog ==
265
 
266
+ = 1.3.4 =
267
+ * tab titles sanitized with `wp_kses()` to allow line breaks in tab titles
268
+ * Sanitize html for tab title element
269
+
270
  = 1.3.3 =
271
  * Added option to change the tab title element
272
 
286
  * ico shortcode parameter added to enable custom icons to be added without adding font-awesome prefixes
287
 
288
  = 1.2.3 =
 
289
  * Enable targeting the tab from url query string when the title contains an accent
290
 
291
  = 1.2.2 =
 
292
  * Included print stylesheet as a separate file
293
 
294
  = 1.2.1 =
 
295
  * Added index.php to prevent the content of plugin directories being viewed if the site has not had directory browsing disallowed.
296
 
297
  = 1.2.0 =
 
298
  * Added basic print styles to default stylesheet
299
 
300
  = 1.1.1 =
 
301
  * Improvements to default CSS
302
  * Addition of 'open' shortcode attribute to allow tabs other than the first to be open when the page loads
303
  * First tab now is open by default when displayed as accordion
309
  * Added functionality to allow target url parameter to control which tab is open on page load.
310
 
311
  = 1.0.3 =
 
312
  * improved theme compatibility with default css
313
 
314
  = 1.0.2 =
 
315
  * enqueue plugin js only when needed
316
  * css for improved specificity
317
 
318
  = 1.0.1 =
 
319
  * Updated js & css
320
 
321
  = 1.0.0 =
 
322
  * Initial Version
323
 
324
  == Upgrade Notice ==
325
+ = 1.3.4 =
326
+ * tab titles sanitized with `wp_kses()` to allow line breaks in tab titles
327
+ * Sanitize html for tab title element
328
 
329
  = 1.3.3 =
330
  * Added option to change the tab title element markup
340
  * ico shortcode parameter added to enable custom icons to be added without adding font-awesome prefixes
341
 
342
  = 1.2.3 =
 
343
  * Enable targeting the tab from url query string when the title contains an accent
344
 
345
  = 1.2.2 =
 
346
  * Included print stylesheet as a separate file
347
 
348
  = 1.2.1 =
 
349
  * Added index.php to prevent the content of plugin directories being viewed if the site has not had directory browsing disallowed.
350
 
351
  = 1.2.0 =
 
352
  * Added print styles to default stylesheet
353
 
354
  = 1.1.1 =
 
355
  * Added Support for Tabby Responsive Tabs Customiser add-on
356
  * Further improved theme compatibility with default css
357
  * Control which tab is open on page load using short code parameter or url parameter
358
  * Font Awesome icon support in tabs
359
 
360
  = 1.0.3 =
 
361
  * improved theme compatibility with default css
362
 
363
  = 1.0.2 =
 
364
  * improved efficiency - enqueue plugin only when needed
365
  * improved theme compatibility with default css
366
 
367
  = 1.0.1 =
 
368
  * Updated js & css
369
 
370
  = 1.0.0 =
 
371
  * Initial Version
tabby-responsive-tabs.php CHANGED
@@ -4,7 +4,7 @@ Plugin Name: Tabby Responsive Tabs
4
  Plugin URI: https://cubecolour.co.uk/tabby-responsive-tabs
5
  Description: Create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes. An easy to use admin page can be added to customise the tab styles with the optional Tabby Responsive Tabs Customiser add-on plugin.
6
  Author: cubecolour
7
- Version: 1.3.3
8
  Requires at least: 5.0
9
  Requires PHP: 5.6
10
  Author URI: https://cubecolour.co.uk
@@ -63,7 +63,7 @@ if ( ! defined( 'ABSPATH' ) ) exit;
63
  */
64
  define( 'CC_TABBY_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
65
  define( 'CC_TABBY_PLUGIN_PATH', plugin_dir_path( __FILE__ ) );
66
- define( 'CC_TABBY_PLUGIN_VERSION', '1.3.3' );
67
 
68
  function cc_tabby_plugin_version(){
69
  return CC_TABBY_PLUGIN_VERSION;
@@ -117,15 +117,18 @@ if ( !function_exists( 'cc_remove_tabby_default_css' ) ) {
117
 
118
  /**
119
  * Register & enqueue the stylesheet
120
- * If you want to use custom styles, copy the content of the tabby.css to your child theme and edit the styles there
121
- * Prevent the default styles from loading by deselecting the "Include default tab by stylesheet" checkbox in the tabby settings page at settings/tabby
122
- * Alternatively use the tabby responsive tabs customiser plugin
 
123
  * available from from https:cubecolour.co.uk/tabby-responsive-tabs-customiser
124
  *
125
  */
126
 
127
-
128
- //* Register script & styles
 
 
129
  function cc_tabby_register_cssjs() {
130
  wp_register_style( 'tabby', CC_TABBY_PLUGIN_URL . 'css/tabby.css', '', CC_TABBY_PLUGIN_VERSION );
131
  wp_register_style( 'tabby-print', CC_TABBY_PLUGIN_URL . 'css/tabby-print.css', '', CC_TABBY_PLUGIN_VERSION, 'print' );
@@ -137,6 +140,20 @@ function cc_tabby_register_cssjs() {
137
  }
138
  add_action( 'wp_enqueue_scripts', 'cc_tabby_register_cssjs' );
139
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
 
141
  /**
142
  * SHORTCODE FOR TABBY
@@ -163,10 +180,8 @@ function cc_shortcode_tabby( $atts, $content = null ) {
163
  'required' => FALSE,
164
  ), $atts );
165
 
166
-
167
  $tabtarget = sanitize_title_with_dashes( remove_accents( wp_kses_decode_entities( $args['title'] ) ) );
168
-
169
- $tab_title_element = esc_html( get_option( 'cc_tabby_tab_title_element', 'h2' ) );
170
 
171
  //* initialise urltarget
172
  $urltarget = '';
@@ -204,12 +219,12 @@ function cc_shortcode_tabby( $atts, $content = null ) {
204
  $firsttab = FALSE;
205
 
206
  //* Build output if we are making the first tab
207
- return '<div class="responsive-tabs">' . "\n" . '<' . $tab_title_element . ' class="tabtitle">' . $addtabicon . sanitize_text_field( $args['title'] ) . '</' . $tab_title_element . '>' . "\n" . '<div class="' . sanitize_text_field( $tabcontentclass ) . '">' . "\n";
208
  }
209
 
210
  else {
211
  //* Build output if we are making a non-first tab
212
- return "\n" . '</div><' . $tab_title_element . ' class="tabtitle">' . $addtabicon . sanitize_text_field( $args['title'] ) . '</' . $tab_title_element . '>' . "\n" . '<div class="' . sanitize_text_field( $tabcontentclass ) . '">' . "\n";
213
  }
214
  }
215
  add_shortcode( 'tabby', 'cc_shortcode_tabby' );
@@ -222,7 +237,7 @@ add_shortcode( 'tabby', 'cc_shortcode_tabby' );
222
  */
223
  function cc_shortcode_tabbyending( $atts, $content = null ) {
224
 
225
- //* add screen styles, but only if the customiser or a custom styles plugin is not active
226
  if ( ( !function_exists( 'cc_remove_tabby_default_css' ) ) && ( !function_exists( 'cc_remove_tabby_default_style' ) ) && ( 1 == get_option( 'cc_tabby_default_styles' ) ) ) {
227
  wp_enqueue_style( 'tabby' );
228
  }
4
  Plugin URI: https://cubecolour.co.uk/tabby-responsive-tabs
5
  Description: Create responsive tabs inside your posts, pages or custom post types by adding simple shortcodes. An easy to use admin page can be added to customise the tab styles with the optional Tabby Responsive Tabs Customiser add-on plugin.
6
  Author: cubecolour
7
+ Version: 1.3.4
8
  Requires at least: 5.0
9
  Requires PHP: 5.6
10
  Author URI: https://cubecolour.co.uk
63
  */
64
  define( 'CC_TABBY_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
65
  define( 'CC_TABBY_PLUGIN_PATH', plugin_dir_path( __FILE__ ) );
66
+ define( 'CC_TABBY_PLUGIN_VERSION', '1.3.4' );
67
 
68
  function cc_tabby_plugin_version(){
69
  return CC_TABBY_PLUGIN_VERSION;
117
 
118
  /**
119
  * Register & enqueue the stylesheet
120
+ * To use custom styles, copy the content of the tabby.css to your child theme (or additional css in the WordPress customizer) and edit the styles there.
121
+ * When using custom styles, it is important to prevent the default styles from loading by deselecting the "Include default tab by stylesheet" checkbox in the tabby settings page at settings/tabby
122
+
123
+ * Alternatively, for a 'no code' solution, use the tabby responsive tabs customiser plugin
124
  * available from from https:cubecolour.co.uk/tabby-responsive-tabs-customiser
125
  *
126
  */
127
 
128
+ /**
129
+ * Register script & styles
130
+ *
131
+ */
132
  function cc_tabby_register_cssjs() {
133
  wp_register_style( 'tabby', CC_TABBY_PLUGIN_URL . 'css/tabby.css', '', CC_TABBY_PLUGIN_VERSION );
134
  wp_register_style( 'tabby-print', CC_TABBY_PLUGIN_URL . 'css/tabby-print.css', '', CC_TABBY_PLUGIN_VERSION, 'print' );
140
  }
141
  add_action( 'wp_enqueue_scripts', 'cc_tabby_register_cssjs' );
142
 
143
+ /**
144
+ * Sanitize html element
145
+ *
146
+ */
147
+ function cc_sanitize_html_element( $element ){
148
+
149
+ $allowed = array( 'h1','h2','h3','h4','h5','h6','p' );
150
+
151
+ if (in_array( $element, $allowed) ) {
152
+ return $element;
153
+ } else {
154
+ return 'h2';
155
+ }
156
+ }
157
 
158
  /**
159
  * SHORTCODE FOR TABBY
180
  'required' => FALSE,
181
  ), $atts );
182
 
 
183
  $tabtarget = sanitize_title_with_dashes( remove_accents( wp_kses_decode_entities( $args['title'] ) ) );
184
+ $tab_title_element = cc_sanitize_html_element( get_option( 'cc_tabby_tab_title_element', 'h2' ) );
 
185
 
186
  //* initialise urltarget
187
  $urltarget = '';
219
  $firsttab = FALSE;
220
 
221
  //* Build output if we are making the first tab
222
+ return '<div class="responsive-tabs">' . "\n" . '<' . $tab_title_element . ' class="tabtitle">' . $addtabicon . wp_kses( $args['title'], array( 'br' => array(), 'strong' => array(), 'em' => array() ) ) . '</' . $tab_title_element . '>' . "\n" . '<div class="' . sanitize_html_class( $tabcontentclass ) . '">' . "\n";
223
  }
224
 
225
  else {
226
  //* Build output if we are making a non-first tab
227
+ return "\n" . '</div><' . $tab_title_element . ' class="tabtitle">' . $addtabicon . wp_kses( $args['title'], array( 'br' => array(), 'strong' => array(), 'em' => array() ) ) . '</' . $tab_title_element . '>' . "\n" . '<div class="' . sanitize_html_class( $tabcontentclass ) . '">' . "\n";
228
  }
229
  }
230
  add_shortcode( 'tabby', 'cc_shortcode_tabby' );
237
  */
238
  function cc_shortcode_tabbyending( $atts, $content = null ) {
239
 
240
+ //* add screen styles, but only if the tabby responsive tabs customiser or a custom tabby styles plugin is not active
241
  if ( ( !function_exists( 'cc_remove_tabby_default_css' ) ) && ( !function_exists( 'cc_remove_tabby_default_style' ) ) && ( 1 == get_option( 'cc_tabby_default_styles' ) ) ) {
242
  wp_enqueue_style( 'tabby' );
243
  }