Advanced shortcode use

Not only you can insert accordions into pages using shortcodes, but you can also override settings, add or modify panels. It's even possible to create an accordion using only shortcodes, without setting it up in the admin area.

You can override the accordion's settings like this:

[accordion_slider id="1" width="700" aspect_ratio="2" visible_panels="5"]

As you can notice, the name of the settings are the same as those in the admin area, but they are lower case and with an underscore between words. This applies for all settings.

If you want to add breakpoint settings in the shortcode, you need to add them in a JSON-encoded string, since the breakpoints setting accepts an associated array-like value. You can create some breakpoints in the admin area and then see how the JavaScript code generated looks like.

As mentioned before, you can add new panels or change the data of existing ones:

[accordion_slider id="1" width="700" aspect_ratio="2" visible_panels="5"]
    [accordion_slider_panel index="1"]
        [accordion_slider_panel_element type="background_source"]path/to/new_image.jpg[/accordion_slider_panel_element]
        [accordion_slider_panel_element type="background_source"]path/to/image.jpg[/accordion_slider_panel_element]
        [accordion_slider_panel_element type="opened_background_source"]path/to/opened_image.jpg[/accordion_slider_panel_element]
        [accordion_slider_panel_element type="background_link"][/accordion_slider_panel_element]
        [accordion_slider_panel_element type="layer" horizontal="center" show_transition="right"]some layer content[/accordion_slider_panel_element]

The first panel shortcode will override the first panel in the accordion As you can notice that it has theindex attribute specified and set to 1.

The second panel shortcode doesn't have an index, so this will be a new panel element added after the panels created in the accordion's admin area.

This is the list of available types for accordion_slider_panel_element shortcodes:

  • background_source
  • background_alt
  • background_title
  • background_retina_source
  • opened_background_source
  • opened_background_alt
  • opened_background_title
  • opened_background_retina_source
  • background_link
  • background_link_title
  • layer
  • html

When you create an accordion from scratch using only shortcodes, you need to assign it a unique id attribute that doesn't already exist in the admin area.

[accordion_slider id="99" width="960" height="400" responsive_mode="custom" visible_panels="5"]
    [accordion_slider_panel content_type="posts" posts_post_types="post,page" posts_taxonomies="tag|design;tag|development;tag|planning"]
        [accordion_slider_panel_element type="background_source"][as_image_src][/accordion_slider_panel_element]
        [accordion_slider_panel_element type="background_alt"][as_image_alt][/accordion_slider_panel_element]
        [accordion_slider_panel_element type="link_url"][as_link_url][/accordion_slider_panel_element]

The accordion above contains a panel that will load data from posts. The dynamic tags, like [as_image_src] were discussed in previous chapter. As for the attributes added to the panelshortcode, those are the equivalent of the settings from the panel's Settings modal window in the admin area.

Below is a list of all the available panel settings:

Shortcode attributeAccepted values
content_type custom_content, posts, gallery or flickr

Posts panels

posts_post_types post, page or any custom post type
posts_taxonomies must be composed of the taxonomy name and the term, separated by a vertical bar: category|uncategorized
posts_relation OR or AND
posts_operator IN or NOT IN
posts_orderby date , comments , title or random
posts_order ASC or DESC
posts_maximum any number

Flickr panels

flickr_api_key the API key provided by Flickr
flickr_load_by set_id or username_id
flickr_id the ID of the data
flickr_maximum any number

Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk