PJ jQuery UI Helper

Introduction

This plugin is intended to implement jQuery UI widgets into WordPress using shortcodes.

This could be a simple plugin, but since it’s my first and I want to use MVC-like architecture moving forward I tried a few different ways to get the result I wanted and to get to grips with WordPress plugins as a whole.

Download the plugin from it’s WordPress page (Linking to this so I don’t have to keep more than one place current ;) and I’m rather proud of myself for getting it hosted as a WordPress plugin).

Widgets

Here are the current widgets

Dialog

Shortcode

[pjjuh-dialog] – Shortcode to insert a button that when clicked opens a dialog which will contain either the contents inside of the shortcode tag.

Allowed Attributes

  • title

    A required string which will be used as the title of the dialog.

  • button_title

    An optional string which can be used as text for the button.
    If this attribute is not given, the string ‘Button’ will be used.

  • width

    An optional number representing the width of the dialog.
    If this attribute is not given, the default set in the plugin settings will be used.

  • height

    An optional number representing the intended height of the dialog.
    If this attribute is not given, the default set in the plugin settings will be used.

  • modal

    An optional attribute representing whether the dialog shown should be modal or not (A modal dialog will prevent any interaction with the rest of the site while the dialog is open).
    Allow values for this attribute can be 1/0 or ‘true’/’false’.
    ‘true’ and 1, mean that it will be a modal dialog.
    ‘false’ and 0, mean that it will not be a modal dialog.
    If this attribute is not set, the default will be what you have set in the plugin options page.

Examples

[pjjuh-dialog title="Hello" button_title="Example"]World[/pjjuh-dialog]

World

[pjjuh-dialog modal=0 title="Foo"]Bar[/pjjuh-dialog]

Bar

Tabs

Shortcodes

[pjjuh-tab-group] – Shortcode to contain tab shortcodes (Parent of the tabs).

[pjjuh-tab] – Shortcode to contain the content of a tab.

Allowed Attributes

[pjjuh-tab-group]
  • title_font_size

    An optional string which will set the font size of the title for the children tabs inside of the shortcode (Unless another title_font_size is specified for the tab specifically). Included in 1.0.6.

  • section_font_size

    An optional string which will set the font size of the content inside of the tabs of the shortcode (Unless another section_font_size is specified for the tab specifically). Included in 1.0.6.

[pjjuh-tab]
  • title

    A required string which will be used as the title of the tab.

  • title_font_size

    An optional string which will set the font size of the tab title (Which will override the parent’s title_font_size if it has been set). Included in 1.0.6.

  • section_font_size

    An optional string which will set the font size of the contents of the tab (Which will override the parent’s section_font_size if it has been set). Included in 1.0.6.

Example

[pjjuh-tab-group][pjjuh-tab title="Tabs"]Content[/pjjuh-tab][/pjjuh-tab-group]

What you are currently seeing (Of course, replace ‘Content’ with everything you’ve read here.

Current limitations

  1. Unable to nest tab groups (Have a tab group inside of a tab group).

Accordion

Shortcodes

[pjjuh-accordion] – Shortcode to contain the section shortcodes (Parent of the Accordion sections).

[pjjuh-acc-section] – Shortcode to contain the content of a section.

Allowed Attributes

[pjjuh-accordion]
  • title_font_size

    An optional string which will set the font size of the title for the children sections inside of the shortcode (Unless another title_font_size is specified for the section specifically).

  • section_font_size

    An optional string which will set the font size of the section for the children sections inside of the shortcode (Unless another section_font_size is specified for the section specifically).

  • height_style

    An optional string which will set the heightStyle option of the Accordion.

    These are the allowed strings:

    • “auto” – The default if no (or an invalid) height_style is set, will set the Accordion height to the height of the tallest section.
    • “content” – The Accordion height will change to the height of the section currently being viewed. Click here for an example.
    • “fill” – The Accordion will use the height of the tag (space) it is currently in and the sections will have scrollbars if their height is greater than the Accordion’s height. Click here for an example.
[pjjuh-acc-section]
  • title

    A required string which will be used as the title of the tab.

  • title_font_size

    An optional string which will set the font size of the title (Which will override the parent’s title_font_size if it has been set).

  • section_font_size

    An optional string which will set the font size of the section (Which will override the parent’s section_font_size if it has been set).

Example

[pjjuh-accordion title_font_size="15px" section_font_size="10px"]
[pjjuh-acc-section title="Section 1"]Section 1 contents[/pjjuh-acc-section]
[pjjuh-acc-section title="Section 2" title_font_size="20px" section_font_size="15px"]Section 2 contents[/pjjuh-acc-section]
[/pjjuh-accordion]

Section 1

Section 1 contents

Section 2

Section 2 contents

Current limitations

  1. Unable to nest accordions (Have an accordion inside of another accordion).
  2. When using “auto” height_style and the tallest section is not the last section, that section has scrollbars.

10 thoughts on “PJ jQuery UI Helper”

    1. Thanks Eugene :) It’s been an interesting journey. Hoping to make a few posts for anybody thinking of doing the same thing.

    1. Hi Alex,

      Thanks for the suggestion, I will implement the heightStyle option for Accordion over the weekend and release an update. Will reply to this comment once it’s available.

    2. Hi Alex, just deployed version 1.0.7. Which implements ‘heightStyle’ into the Accordion and can be set using “height_style” parameter into pjjuh-accordion shortcode, I’ve also updated this page with details on using the parameter. Let me know if it works for you. :)

  1. Love the ease of this plugin and the tabs display properly except for these warnings just above the tabs. WP version 4.1. Is there anything I can do to fix this? Thanks!

    Warning: Invalid argument supplied for foreach() in C:\wamp\www\testsite\wp-content\plugins\pj-jquery-ui-helper\includes\views\shortcodes\tabs-html.php on line 19

    Warning: Invalid argument supplied for foreach() in C:\wamp\www\testsite\wp-content\plugins\pj-jquery-ui-helper\includes\views\shortcodes\tabs-html.php on line 30

    Warning: Invalid argument supplied for foreach() in C:\wamp\www\testsite\wp-content\plugins\pj-jquery-ui-helper\includes\views\shortcodes\tabs-html.php on line 19

    Warning: Invalid argument supplied for foreach() in C:\wamp\www\testsite\wp-content\plugins\pj-jquery-ui-helper\includes\views\shortcodes\tabs-html.php on line 30

    1. Hi Tania,
      Sorry for my late reply. Could you show me the shortcodes that you are using? (Doesn’t have to include the content, just need the shortcodes to try and reproduce on my side). From my initial tests there is no issue with the plugin and WP 4.1, it’s possible that a shortcode might be misplaced.

      1. I’ve done a hundred and one things to the site since my initial comment, including using a different tabs plugin. I like yours better, though. As soon as I can, I’ll try to reproduce the issue and let you know.

        1. Again very sorry for the delay, will keep a closer eye on things moving forward. Happy to help once you can reproduce the issue.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>