Accordion Slider - by bqworks

Version 1.9.4

Hi!

The plugin's admin interface contains inline information, which most of the time should be sufficient for understanding how to use the plugin. However, many details are not covered there, but you can find them covered in this guide.

Because an image is worth a thousand words, you might find these video tutorials useful:

• 1. Create and publish accordions
• 2. Create accordions from posts
• 3. Create accordions from galleries
• 4. Working with layers
• 5. Working with breakpoints
• 6. Import and Export accordions

1. Creating and publishing accordions

Creating accordions is simple and intuitive. Also, the admin area contains inline information that describe the settings and possibilities that the Accordion Slider plugin offers. In this chapter we'll take a quick look at the various content types that the accordion supports and then we'll take a look at how to publish the accordion in your posts and pages.

1.1. Panels

You can manually specify the images and text in an accordion, or you can let the accordion to automatically load content (e.g., featured image, post title, excerpt, etc.) from any post type. Two other possibilities provided by the accordion is to load photos from Flickr or to load images from a post's [gallery] shortcode.

Also, you can have panels with different content types in the same accordion. The content type can be set in the panel's Settings window, or you can directly create a panel with a specific content type from the Add Panel button. More about each panel type, later in this chapter.

Panel editors

You can see four buttons on each panel. These are for: adding a background image, adding layers, adding HTML content or changing the panel's content type.

If you click on each of these buttons, a certain modal window will be opened, that allow you to make the respective edits.

Background image editor

It consists of 3 sections: the Background Image section, which allows you to set the panel's main background image, the Opened Background Image section, which allows you to set the a background image that will only be visible when the panel is opened, and the Link section, which allows you to set a link for the background image.

Note: When you select an image from the WordPress Media Library, also select the most appropriate size for it in the Media Library's right sidebar, under ATTACHMENT DISPLAY SETTINGS . You will want to select an image size that is similar to the panel size.

Layers editor

It allows you to add static or animated layers. You can select from several layer types: paragraph layers, which allow you to add simple text paragraphs, heading layers, which allow you to add headings (e.g., H1, H2, H5, etc.), image layers, for adding images, video layers for adding several supported video types, and DIV layers, for any other HTML content.

After you add a layer, a group of settings will appear for that layer, allowing you to set the layer's position, size, animation effects and more. The name of the settings are intuitive and there's also inline information for those settings that have more complex roles.

It's possible to set the depth of the layers by sorting them in the list of layers from the left side.

HTML editor

It allows you to add any HTML content.

Settings editor

It allows you to change the panel's content type. By default, the Content Type setting is set to Custom Content , which allows you to manually set the panel's background image and all the other content. The Content from Posts option will enable the panel to load featured images and other content from posts, the Images from Post's gallery option will fetch images added through a [gallery] shortcode, and Flickr images will load images from Flickr.

Panel Types

The plugin tries to make it as easy as possible for you to add content, so it offers a direct way to create a certain panel type, populating it with some specific data from the start. All you have to do is hover the Add Panel button and click on the panel type that you want to create.

Empty Panels

This will create an empty panel, with no preset content or settings. After the panel was added, you can set a background image for it, html content, add layers, or even change its content type to something else.

Image Panels

To add image panels, hover the Add Panels button and select Image panels . The WordPress Media Loader will be opened, where you can select a single image or multiple images (by holding the CTRL key on PC and Cmd key on Mac).

Note: When you select an image, also select the most appropriate size for it in the Media Library's right sidebar, under ATTACHMENT DISPLAY SETTINGS . You will want to select an image size that is similar to the panel size.

After you select the images, click on the Insert into post button, and one panel for each selected image will be added in the accordion.

Posts Panels

This will add a single panel in the admin interface, but this single panel will dynamically generate multiple panels in the published accordion, based on the set parameters.

When you select this panel type the Content Type setting in the panel's Settings window will automatically be set to Content from posts . Also, in the Background editor, some fields will be automatically populated with data. For example, the [as_image_src] will be added in the background's Source field and [as_link_url] in the link's URL field.

[as_image_src] and [as_link_url] are dynamic tags and are used for fetching a specific data from the posts that were loaded. You can also use these tags in the Layers and HTML editors. Each of these editors have, in their inline info, a list of the dynamic tags that can be used inside that specific editor.

This is the complete list of dynamic tags for Posts panels:

Gallery Panels

This will add a single panel in the admin interface, but this single panel will dynamically generate multiple panels in the published accordion, one panel for each image from the [gallery] shortcode.

You just need to drop the accordion slider shortcode in a post that contains a [gallery] shortcode, and the images from the [gallery] will automatically be loaded in the accordion. Then, if you want to hide the original gallery, you can add the hide attribute to the [gallery] shortcode: [gallery ids="1,2,3" hide="true"] .

This is the complete list of dynamic tags for Gallery panels:

Flickr Panels

This will add a single panel in the admin interface, but this single panel will dynamically generate multiple panels in the published accordion, one panel for each image loaded from Flickr.

First, you need to request an API key from Flickr and then specify it in the API Key field, in the Settings modal window.

This is the complete list of dynamic tags for Flickr panels:

1.2. General settings

The accordion's general settings can be found in the sidebar of the accordion's admin interface. The description of each setting can be seen if you hover the setting's label.

The last panel in the sidebar is for breakpoints. Breakpoints allow you to modify the look of the accordion for different window sizes. Each breakpoint allows you to set the width of the window for which the breakpoint will apply, and then add several settings which will override the general settings.

1.3. Publishing the accordion

The accordion can be published in posts and pages, in widgets, and also in PHP code.

In posts and pages you can use the Gutenberg block, which will allow you to select which accordion instance to insert from a list of created sliders. Alternatively, you can use the shortcode provided in the Accordion Slider -> All Accordions page, like this:

[accordion_slider id="3"]

In PHP code, you need to use the do_shortcode() call and provide the actual shortcode as an argument, like this:

<?php echo do_shortcode( '[accordion_slider id="3"]' ); ?>

Note: When you add the accordion in PHP code, the plugin won't be able to detect the presence of the accordion there so it won't be able to automatically load the necessary CSS files. Because of this, you need to go to the Accordion Slider -> Plugin Settings page and set the Load stylesheets setting to On homepage if you load the accordion on the homepage or to On all pages if you load the accordion in other pages.

1.4. Previewing the accordion

The accordions can be previewed directly in the admin area, and you don't have to create or update the accordion before previewing the edits you make to the panels or to the general settings.

1.5. Cache

All accordions are automatically cached the first time when they're viewed by a visitor, so next time when someone visits the page, the accordion will be served from the cache. This mechanism saves processing time and is especially useful when loading content from posts or external services.

When an accordion is updated in the admin area, the cached version of the accordion will be deleted. Also, you can deleted all cached accordions from within the Accordion Slider -> Plugin Settings page, by clicking on the Clear all cache now button.

If you want to not cache an accordion, you can set the allow_cache attribute to false , in the shortcode:

[accordion_slider id="3" allow_cache="false"]

2. Responsiveness

2.1. Responsive modes

By default, the accordion will scale proportionally in order to fit the bounds of the window or of the container it was added to. This is called Auto responsiveness, and it's useful when you don't have CSS knowledge, to be able to customize the responsive behavior yourself. In this responsive mode, the accordion will resize everything in it, like layers or HTML content, proportionally.

If you have CSS knowledge, it's recommended to use Custom responsiveness, by setting the Responsive Mode setting to Custom and then use CSS media queries to define different text sizes or to hide certain elements when the accordion becomes smaller, ensuring that all content remains readable without having to zoom in.

In both cases, the Width and Height settings can be set to fixed values, not necessarily percentage values, as the accordion will still scale down and properly. Also, the Width and Height will represent the maximum width and height that the accordion will have.

When you use Auto responsiveness, the Width and Height need to be set to fixed values. Setting them to percentages would not allow the accordion to properly calculate how it needs to resize itself.

2.2. Aspect ratio

If you want to set the Width and/or Height to a percentage value, like 100%, the accordion will not be able to calculate the aspect ratio that it needs to maintain while it's being resized (as it does when the Width and Height are set to fixed values). For example, if the Width is set to 960 and the Height is set to 400, that results in an aspect ratio of 2.4 (960/400). However, as you can guess, if either the Width or Height is a percentage, the division operation can't be done. To overcome this, you need to use the Aspect Ratio setting, for manually setting the aspect ratio that the accordion needs to maintain while it's resizing.

By default, Aspect Ratio is set to -1, which indicates that the aspect ratio of the accordion will be automatically calculated based on the Width and Height specified.

3. Custom CSS and JavaScript

Sometimes you want to change the look of the accordion or add new functionality, and for this you can use the "Custom CSS and JS" premium add-on, which is optimized to load the custom code only on pages where there are published accordions. The add-on also features syntax highlighting code editors and a revisions system that will save all code edits and allow you to compare and restore revisions.

3.1. Custom CSS

Before adding any custom CSS, it's recommended to give the accordion that you want to target a custom class. This can be set in the Custom Class field, in the accordion's Appearance sidebar panel.

Note: The custom class name you specify in the Custom Class field doesn't need to include the dot, only the name of the class. For example, you need to enter my-accordion , not .my-accordion .

After you assigned a custom class to the accordion, you can use it in the Custom CSS field, to target that specific accordion.

You could use a general selector, like .accordion-slider if you want to target all your accordion instances.

3.2. Custom JavaScript

Just like with custom CSS, you need to assign a custom class to the accordion and then use it in your custom code to target that specific accordion.

The next chapter offers a presentation of the accordion's JavaScript API, which allows you to programatically control the accordion. Using this API requires some programming knowledge and familiarity with jQuery.

3.3 JavaScript API

Methods

The public methods below allow you to manipulate the accordion using external controls. There are two ways of calling a public method.

The first way is by calling the accordionSlider plugin and passing the name of the method and additional arguments:

$( '.my-accordion' ).accordionSlider( 'openPanel', 3 );

The first argument represents the name of the method and the second argument represents the value which will be applied. Please note that some methods don't have a second argument. For example:

$( '.my-accordion' ).accordionSlider( 'nextPanel' );

The second way is by getting a reference to the AccordionSlider instance and calling the method on the instance:

// get a reference to the AccordionSlider instance
var accordion = $( '.my-accordion' ).data( 'accordionSlider' );

console.log( accordion.getTotalPanels() );

accordion.gotoPage( 2 );

This way of calling a public method is mandatory when you use public methods that return data: getPanelAt , getCurrentIndex , getTotalPanels , getVisiblePanels , getTotalPages and getCurrentPage , but it can be used with all the other public methods as well.

Here is the list of available methods:

Callbacks

Callbacks (or events) are used to detect when certain actions take place. The callbacks can be added when the accordion is instantiated, or at a later time.

Examples:

$( '.my-accordion' ).on( 'panelOpen', function( event ) {
    console.log( event.index );
})

As you can notice, the callback functions have an event parameter which contains some information about that event.

The list of available events:

4. Import and export accordions

You can move accordions between Accordion Slider installations by exporting and then importing them. Accordions can be exported by clicking on the Export link in the Accordion Slider -> All Accordions page. The exported text is a JSON-encoded representation of the accordion's data.

To import an accordion, you need to click on the Import Accordion button in the Accordion Slider -> All Accordions page and, inside the modal window, copy the exported text.

The examples showcased on the accordion's presentation page can be found in the examples folder included in the package downloaded from CodeCanyon, and I recommend importing them into your own Accordion Slider installation to see how certain featured are used.

5. 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 name="background_source"]path/to/new_image.jpg[/accordion_slider_panel_element]
    [/accordion_slider_panel]
    [accordion_slider_panel]
        [accordion_slider_panel_element name="background_source"]path/to/image.jpg[/accordion_slider_panel_element]
        [accordion_slider_panel_element name="opened_background_source"]path/to/opened_image.jpg[/accordion_slider_panel_element]
        [accordion_slider_panel_element name="background_link"]https://bqworks.net/accordion-slider/[/accordion_slider_panel_element]
        [accordion_slider_panel_element name="layer" horizontal="center" show_transition="right"]some layer content[/accordion_slider_panel_element]
    [/accordion_slider_panel]
[/accordion_slider]

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

The second accordion_slider_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 name="background_source"][as_image_src][/accordion_slider_panel_element]
        [accordion_slider_panel_element name="background_alt"][as_image_alt][/accordion_slider_panel_element]
        [accordion_slider_panel_element name="background_link"][as_link_url][/accordion_slider_panel_element]
    [/accordion_slider_panel]
[/accordion_slider]

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 accordion_slider_panel shortcode, 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:

6. Action and filter hooks

Actions allow you to detect when certain actions are performed, while hooks allow to modify the output of the accordion.

The information in this chapter is for developers that are familiar with PHP and the WordPress API.

6.1. Actions

accordion_slider_enqueue_scripts

Called when the slider's JavaScript files are enqueued. You can use this action to enqueue your own JavaScript files.

add_action( 'accordion_slider_enqueue_scripts', 'add_my_scripts' );

function add_my_scripts() {
  wp_enqueue_script( 'my-script', 'path/to/script.js' );
}

accordion_slider_enqueue_styles

Called when the slider's CSS files are enqueued. You can use this action to enqueue your own CSS files.

add_action( 'accordion_slider_enqueue_styles', 'add_my_styles' );

function add_my_styles() {
  wp_enqueue_script( 'my-style', 'path/to/style.css' );
}

6.2. Filters

Note: The accordions are cached by default, so applying filters will not have an immediate effect, until the cache is cleared. However, you can disable the caching while testing in order to see your changes immediately. To do this, you need to add the allow_cache="false" attribute to the shortcode: [accordion_slider id="3" allow_cache="false"].

accordion_slider_default_settings

It allows you to modify the default accordion settings.

add_filter( 'accordion_slider_default_settings', 'change_default_settings' );

function change_default_settings( $settings ) {
  $settings['visible_panels']['default_value'] = 3;

  return $settings;
}

accordion_slider_default_panel_settings

It allows you to modify the default panel settings.

add_filter( 'accordion_slider_default_panel_settings', 'change_default_panel_settings' );

function change_default_panel_settings( $settings ) {
  $settings['posts_operator']['default_value'] = 'NOT IN';

  return $settings;
}

accordion_slider_default_layer_settings

It allows you to modify the default layer settings.

add_filter( 'accordion_slider_default_layer_settings', 'change_default_layer_settings' );

function change_default_layer_settings( $settings ) {
  $settings['preset_styles']['default_value'] = array( 'as-white', 'as-padding', 'as-rounded' );

  return $settings;
}

accordion_slider_breakpoint_settings

It allows you to add/remove settings for the Breakpoints.

  add_filter( 'accordion_slider_breakpoint_settings', 'add_breakpoint_settings' );
 
  function add_breakpoint_settings( $settings ) {
    $settings[] = 'opened_panel_size';
 
    return $settings;
  }
  

accordion_slider_posts_query_args

It allows you to modify the parameters passed to the WP_Query call when Posts panels are created.

add_filter( 'accordion_slider_posts_query_args', 'custom_query', 10, 3 );

function custom_query( $query_args, $accordion_id, $panel_index ) {
  if ( $accordion_id === 3 && $panel_index === 1 ) {
    $query_args['order'] = 'DESC';
  }

  return $query_args;
}

accordion_slider_posts_tags

It allows you to add custom tags to Posts panels.

add_filter( 'accordion_slider_posts_tags', 'add_author_tag' );

// add the 'author' tag to the list of supported tags
function add_author_tag( $tags ) {
  // associate the 'author' tag with the function that will render the tag
  $tags['author'] = 'render_author_tag';
  
  return $tags;
}

// return the actual post author for the 'author' tag
function render_author_tag( $tag_arg, $post ) {
  return $post->post_author;
}

Please note that when you use a tag in the accordion, you need to append the as_ term, like this: [as_author] .

You can also add an argument to the tag, like [as_author.first] , and use that argument in the rendering function:

function render_author_tag( $tag_arg, $post ) {
  $result = $post->post_author;
  
  // if the 'first' argument is present, return only the first name
  if ( $tag_arg !== false && $tag_arg === 'first' ) {
    $name = explode( $result, ' ' );
    $result = $name[0];
  }

  return $result;
}

accordion_slider_gallery_tags

It allows you to add custom tags to Gallery panels.

add_filter( 'accordion_slider_gallery_tags', 'add_image_id_tag' );

// add the 'image_id' tag to the list of supported tags
function add_image_id_tag( $tags ) {
  // associate the 'image_id' tag with the function that will render the tag
  $tags['image_id'] = 'render_image_id';
  
  return $tags;
}

// return the actual image ID for the 'image_id' tag
function render_image_id( $tag_arg, $image ) {
  return $image->ID;
}

Please note that when you use a tag in the accordion, you need to append the as_ term, like this: [as_image_id] .

You can also add an argument to the tag, like [as_image_id.my_arg] , and use that argument in the rendering function:

function render_image_id( $tag_arg, $image ) {
  $result = $image->ID;
  
  // if the 'my_arg' argument is present, do something
  if ( $tag_arg !== false && $tag_arg === 'my_arg' ) {
    // do something
  }

  return $result;
}

accordion_slider_flickr_tags

It allows you to add custom tags to Flickr panels.

add_filter( 'accordion_slider_flickr_tags', 'add_photo_id_tag' );

// add the 'photo_id' tag to the list of supported tags
function add_photo_id_tag( $tags ) {
  // associate the 'photo_id' tag with the function that will render the tag
  $tags['photo_id'] = 'render_photo_id';
  
  return $tags;
}

// return the actual photo ID for the 'photo_id' tag
function render_photo_id( $tag_arg, $photo ) {
  return $photo['id'];
}

Please note that when you use a tag in the accordion, you need to append the as_ term, like this: [as_photo_id] .

You can also add an argument to the tag, like [as_photo_id.my_arg] , and use that argument in the rendering function:

function render_photo_id( $tag_arg, $photo ) {
  $result = $photo['id'];
  
  // if the 'my_arg' argument is present, do something
  if ( $tag_arg !== false && $tag_arg === 'my_arg' ) {
    // do something
  }

  return $result;
}

accordion_slider_data

It allows you to modify the accordion's set data, before the accordion's output is generated based on that data.

add_filter( 'accordion_slider_data', 'change_panel_content_type', 10, 2 );

function change_panel_content_type( $data, $accordion_id ) {
  if ( $accordion_id === 2 ) {
    $data['panels'][0]['settings']['content_type'] = 'posts';
  }

  return $data;
}

accordion_slider_javascript

It allows you to append or prepend inline JavaScript code.

add_filter( 'accordion_slider_javascript', 'add_javascript' );

function add_javascript( $js_code ) {
  $js_code .= '<script>alert('Hello World!');</script>';

  return $js_code;
}

accordion_slider_classes

It allows you to add custom classes to the accordion.

add_filter( 'accordion_slider_classes', 'add_custom_accordion_class', 10, 2 );

function add_custom_class( $classes, $accordion_id ) {
  if ( $accordion_id === 2 ) {
    $classes .= ' ' . 'my-custom-class';
  }

  return $classes;
}

accordion_slider_panel_classes

It allows you to add custom classes to the panels.

add_filter( 'accordion_slider_panel_classes', 'add_custom_panel_class', 10, 3 );

function add_custom_panel_class( $classes, $accordion_id, $panel_index ) {
  if ( $accordion_id === 1 && $panel_index === 2 ) {
    $classes .= ' ' . 'my-custom-class';
  }

  return $classes;
}

accordion_slider_layer_classes

It allows you to add custom classes to the layers.

add_filter( 'accordion_slider_layer_classes', 'add_custom_layer_class', 10, 3 );

function add_custom_layer_class( $classes, $accordion_id, $panel_index ) {
  if ( $accordion_id === 1 && $panel_index === 2 ) {
    $classes .= ' ' . 'my-custom-class';
  }

  return $classes;
}

accordion_slider_markup

It allows you to modify the accordion's HTML markup before it's printed.

add_filter( 'accordion_slider_markup', 'accordion_markup', 10, 2 );

function accordion_markup( $html_markup, $accordion_id ) {
  if ( $accordion_id === 3 ) {
    $html_markup .= '<div class="extra-element">some content</div>';
  }

  return $html_markup;
}

accordion_slider_panel_markup

It allows you to modify the panel's HTML markup before it's printed.

add_filter( 'accordion_slider_panel_markup', 'accordion_panel_markup', 10, 3 );

function accordion_panel_markup( $html_markup, $accordion_id, $panel_index ) {
  $html_markup .= '<div class="extra-element">some content</div>';

  return $html_markup;
}

accordion_slider_layer_markup

It allows you to modify the layer's HTML markup before it's printed.

add_filter( 'accordion_slider_layer_markup', 'accordion_layer_markup', 10, 3 );

function accordion_layer_markup( $html_markup, $accordion_id, $panel_index ) {
  $html_markup .= '<div class="extra-element">some content</div>';

  return $html_markup;
}

accordion_slider_background_image_classes

It allows you to add custom classes to the background image.

add_filter( 'accordion_slider_background_image_classes', 'add_background_image_class', 10, 3 );

function add_background_image_class( $classes, $accordion_id, $panel_index ) {
  $classes .= ' as-custom-bg-class';

  return $classes;
}

accordion_slider_opened_background_image_classes

It allows you to add custom classes to the opened background image.

add_filter( 'accordion_slider_opened_background_image_classes', 'add_opened_background_image_class', 10, 3 );

function add_opened_background_image_class( $classes, $accordion_id, $panel_index ) {
  $classes .= ' as-custom-opened-bg-class';

  return $classes;
}

accordion_slider_panel_link_classes

It allows you to add custom classes to the panel's link.

add_filter( 'accordion_slider_panel_link_classes', 'add_panel_link_class', 10, 3 );

function add_panel_link_class( $classes, $accordion_id, $panel_index ) {
  $classes .= ' as-custom-link-class';

  return $classes;
}

accordion_slider_panel_html

It allows you to modify the panel's inline HTML content before it's printed. Please note that this is different from accordion_slider_panel_markup , which returns the entire HTML markup of the panel, not only the inline HTML content.

add_filter( 'accordion_slider_panel_html', 'panel_html', 10, 3 );

function panel_html( $inline_html, $accordion_id, $panel_index ) {
  $inline_html = '<div class="wrapper">' . $inline_html . '</div>';

  return $inline_html;
}

accordion_slider_panel_link_url

It allows you to modify the URL of the panel's link.

add_filter( 'accordion_slider_panel_link_url', 'change_url', 10, 3 );

function change_url( $link_url, $accordion_id, $panel_index ) {
  $link_url = str_replace( '/en/', '/de/', $link_url );

  return $link_url;
}

accordion_slider_layer_content

Called when the layer's inner text (in the case of paragraph or heading layers) or inner HTML (in the case of DIV or video layers) is printed. It allows you to modify the content of the layer.

add_filter( 'accordion_slider_layer_content', 'change_layer_content', 10, 3 );

function change_layer_content( $content, $accordion_id, $panel_index ) {
  $content = '<strong>' . $content . '</strong>';

  return $content;
}

accordion_slider_layer_image_link_url

It allows you to modify the URL of the link specified for an image layer.

add_filter( 'accordion_slider_layer_image_link_url', 'change_image_url', 10, 3 );

function change_image_url( $link_url, $accordion_id, $panel_index ) {
  $link_url = str_replace( '/en/', '/de/', $link_url );

  return $link_url;
}

accordion_slider_lightbox_options

It allows you to add options for the bundled lightbox script (FancyBox).

  add_filter( 'accordion_slider_lightbox_options', 'lightbox_options' );

  function lightbox_options( $options ) {
    $options[ 'autoPlay' ] = true;
    $options[ 'arrows' ] = false;

    return $options;
  }

accordion_slider_restricted_pages

It allows you to hide the plugin's admin pages. For example, you could hide the 'Plugins Settings' page from 'Editors'.

  add_filter( 'accordion_slider_restricted_pages', 'restricted_pages' );

  function restricted_pages( $restricted_pages ) {
    $restricted_pages[] = 'accordion-slider-settings';

    return $restricted_pages;
  }
  

accordion_slider_allowed_html

It allows you to filter what HTML tags and attributes are allowed in the HTML/text areas.

  add_filter( 'accordion_slider_allowed_html', 'filter_allowed_html' );

  function filter_allowed_html( $allowed_html ) {
    $allowed_html[] = 'iframe' => array( 'src' => true, 'width' => true, 'height' => true );

    return $allowed_html;
  }
  

7. Deep Linking

Deep linking provides the possibility to link to a specific panel in the accordion. For this, you need to append a hashtag to the original URL of the page. The hashtag will contain the id attribute of the accordion and the index of the panel, separated by a slash (/) character.

http://domain.com/page#accordion-slider-3/0

The link above will open the first panel (because panel indexes start with 0) in the accordion that has the id set to accordion-slider-3 .

The id attributes of the accordions are assigned automatically by the plugin, and they are formed by appending the ID that the accordion has in the admin area to accordion-slider- .

8. Translating the plugin

There are several tools for translating the plugin's admin text, but I will show you how to do this using Poedit .

First, download and install the software. Open Poedit and go to File -> Open and and select the accordion-slider.po file, which you can find in accordion-slider/languages/ . Then go to File -> Save As and save the file using a name that corresponds to the language in which you're translating the plugin. For example, if you translate the plugin to German, save the file as "accordion-slider-de_DE"; if you're translating it to French, save the file as "accordion-slider-fr_FR".

After you saved the file, you're ready to begin translating the plugin. All you have to do is click on the string that you want to translate, and write the translation for it in the second box, below the English version.

9. Adding videos

The accordion has built-in support for YouTube, Vimeo, HTML5, VideoJS and Sublime videos. The support consists in the accordion's ability to control the videos automatically (i.e., pause the video when the panel is closed, play the video when the panel is opened, etc.).

In addition to these supported video types, you can add any other video, but you will also need to add your own code for implementing the automatic handling.

Videos can be added in the Layers editor, as Video Layers . This type of layer provide a field where you simply need to put the iframe embed, in the case of YouTube and Vimeo videos, or the HTML code in the case of HTML5 videos.

YouTube example:

HTML5 Video example:

You might notice that after you save the layers, the code you added is modified a little. This is because the accordion prepares the video for allowing it to be automatically controlled. For this purpose it adds the as-video class to the iframe or video tag. Also, it adds the enablejsapi=1 parameter to YouTube videos and the api=1 parameter to Vimeo videos.

In the admin area, in accordion's Video sidebar panel, you can set how the video will react to the opening or closing of panels.

10. Troubleshooting

1. The accordion doesn't show up on the page

a) JavaScript errors

First, it's important to check if you have any JavaScript errors on the page that contains the accordion. JavaScript errors thrown by other scripts can break all the JavaScript functionality that follows on that page, including the accordion. I would like to note that Accordion Slider follows WordPress development best practices and is actively maintained to make sure it's bug free and works seamlessly. However, when something else (another plugin or theme) breaks in the site, it can affect the accordion as well, as mentioned before. Most of the times it's possible to check where the problem comes from, and I will show you 2 methods.

FIRST METHOD

Please open Chrome or Safari, and navigate to the page that should contain the accordion. Then, press the F12 key if you're on Windows, and Option + Command + I if you're on Mac. Alternatively, you can right-click and select "Inspect element" on both systems. After the "Developer Tools" is opened please click on the "Console" tab. You will be able to see there all the errors and warnings that occur on the page. Some of them can be ignored but others need to be addressed, especially if they are JavaScript errors.

On the left side you will see the error message and on the right side you will see the name/path of the script that contains the error (if the full path of the script is not displayed please hover the text, and the full path should appear). By looking at the path of the script you can identify the theme or plugin that causes the error. If the error comes from another theme or plugin, and not Accordion Slider , it's best to contact the developer of that theme/plugin, so he can fix the error. If you have difficulties interpreting the data from Console, please try the second method.

SECOND METHOD

This method is very simple but normally you would use it only if you can't find the problem using the first method.

What you need to do is temporarily deactivate the current theme and then the plugins one by one and test each time if the problem has disappeared. This way you can find which theme/plugin causes the problem.

If you identify the problem as being caused by a theme or another plugin, it's best to contact the developer of that theme/plugin, so he can fix the problem. It's in the best interests of both the developer of the theme/plugin and its user that the theme/plugin doesn't cause errors because a buggy theme/plugin could cause even more problems in the future.

b) Missing wp_footer() call

If you don't see any errors in the Console, it's possible that the theme is missing some elements: the wp_head() and wp_footer() calls. These calls are used by many plugins, including this accordion, to insert the necessary scrips in the page.

The wp_head() call should be in the theme's header.php call just above </head> :

<?php wp_head(); ?>
</head>

The wp_footer() call should be in the theme's footer.php call just above </body> :

<?php wp_footer(); ?>
</body>

2. The admin area doesn't work

This is most likely caused by JavaScript errors. Please try the debugging methods suggested above for point a) .

3. The accordion looks different in the page than it looks in the preview

The theme might include CSS code that gets applied to the accordion's elements. For example, if you add a paragraph layer, the style added to paragraphs by the theme, will also get applied to the paragraph layers inside the accordion. The same can happen for heading or image layers.

The accordion includes some CSS code that minimizes the influence of external CSS, but it's not always possible to eliminate this influence completely. So, when you see unexpected styles in a published accordion, you will need to add some custom CSS to override the style added by the theme's CSS.

Regarding layers, another solution for preventing CSS influences from the theme would be to use DIV layers instead of Paragraph or Heading layers, since DIV elements are usually not styled by themes. However, my recommendation is to use Paragraph or Heading layers every time it's appropriate and simply use custom CSS to prevent theme influences.