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.

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' );
}

2. Filters

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_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;
}

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;
}

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;
}

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;
}
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk