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

grid_accordion_enqueue_scripts

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

add_action( 'grid_accordion_enqueue_scripts', 'add_my_scripts' );

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

grid_accordion_enqueue_styles

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

add_action( 'grid_accordion_enqueue_styles', 'add_my_styles' );

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

2. Filters

grid_accordion_default_settings

It allows you to modify the default accordion settings.

add_filter( 'grid_accordion_default_settings', 'change_default_settings' );

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

  return $settings;
}

grid_accordion_default_panel_settings

It allows you to modify the default panel settings.

add_filter( 'grid_accordion_default_panel_settings', 'change_default_panel_settings' );

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

  return $settings;
}

grid_accordion_default_layer_settings

It allows you to modify the default layer settings.

add_filter( 'grid_accordion_default_layer_settings', 'change_default_layer_settings' );

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

  return $settings;
}

grid_accordion_posts_query_args

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

add_filter( 'grid_accordion_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;
}

grid_accordion_posts_tags

It allows you to add custom tags to Posts panels.

add_filter( 'grid_accordion_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 ga_ term, like this:[ga_author] .

You can also add an argument to the tag, like [ga_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( 'grid_accordion_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 ga_ term, like this:[ga_image_id] .

You can also add an argument to the tag, like [ga_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;
}

grid_accordion_flickr_tags

It allows you to add custom tags to Flickr panels.

add_filter( 'grid_accordion_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:[ga_photo_id] .

You can also add an argument to the tag, like [ga_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;
}

grid_accordion_data

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

add_filter( 'grid_accordion_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;
}

grid_accordion_javascript

It allows you to append or prepend inline JavaScript code.

add_filter( 'grid_accordion_javascript', 'add_javascript' );

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

  return $js_code;
}

grid_accordion_classes

It allows you to add custom classes to the accordion.

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

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

  return $classes;
}

grid_accordion_panel_classes

It allows you to add custom classes to the panels.

add_filter( 'grid_accordion_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;
}

grid_accordion_layer_classes

It allows you to add custom classes to the layers.

add_filter( 'grid_accordion_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;
}

grid_accordion_markup

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

add_filter( 'grid_accordion_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;
}

grid_accordion_panel_markup

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

add_filter( 'grid_accordion_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;
}

grid_accordion_layer_markup

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

add_filter( 'grid_accordion_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;
}

grid_accordion_background_image_classes

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

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

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

  return $classes;
}

grid_accordion_opened_background_image_classes

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

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

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

  return $classes;
}

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

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

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

  return $classes;
}

grid_accordion_panel_html

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

add_filter( 'grid_accordion_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( 'grid_accordion_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;
}

grid_accordion_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( 'grid_accordion_layer_content', 'change_layer_content', 10, 3 );

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

  return $content;
}

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

add_filter( 'grid_accordion_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