Developer API
Details of the hooks and filters that are available to developers
- metaslider_capability
- metaslider_post_feed_args
- metaslider_hoplink
- metaslider_default_parameters
- metaslider_resized_image_url
- metaslider_image_{$type}_slider_markup
- metaslider_{type}_slider_image_attributes
- metaslider_{type}_slider_anchor_attributes
- metaslider_{type}_slider_javascript
- metaslider_{type}_slider_javascript_before
- metaslider_{type}_slider_parameters
metaslider_capability
Description
Use this filter to modify the user capability required to use MetaSlider. The default capability is ‘edit_others_posts’.
Parameters
$capability
(string) (required) User role capability
Examples
Change the capability required to use MetaSlider
You can change the required capability to any default capability included in WordPress.
In the example below we’ve used the User Role Editor plugin to create a custom capability (called ‘metaslider_use’).
|
1 2 3 4 5 6 7 8 9 10 11 |
/** * You can change this to a different capability by pasting the code below into * your themes functions.php file. * * You can use the 'User Role Editor' plugin to add a custom capability to WordPress * specifically for MetaSlider users. */ function metaslider_change_required_role($capability) { return 'metaslider_use'; // this is the ID of a custom capability added using User Role Editor } add_filter('metaslider_capability', 'metaslider_change_required_role'); |
metaslider_post_feed_args
Description
Use this filter to modify the query arguments used to extract posts in a Post Feed slide.
Parameters
$args
(array) (required) WP_Query arguments as defined by the slide settings
$slide
(object) (required) Current slide data
$slider_settings
(array) (required) Current slider settings
$slide_settings
(array) (required) Current slide settings
Examples
The following code samples should be added to your theme’s functions.php file.
Display all posts tagged to the current category
Use this code to override the taxonomy restrictions defined in the slide settings, and instead extract all posts which are tagged to the current category. With this code in place you can create a single slideshow and add the Template Include to your category.php template. The slideshow will automatically show posts that are tagged to the current category.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function metaslider_restrict_to_current_category( $args, $slide, $slider_settings, $slide_settings ) { // check slide ID so we only apply this functionality where it's needed // replace "123" with the slide ID to target. if ( $slide->ID == 123 && is_category() ) { // remove any existing restrictions if ( isset ( $args['tax_query'] ) ) { unset( $args['tax_query'] ); } // restrict to posts tagged to the current category $args['tax_query'][] = array( 'taxonomy' => 'category', 'field' => 'id', 'terms' => get_query_var( 'cat' ) ); } return $args; } add_filter( 'metaslider_post_feed_args', 'metaslider_restrict_to_current_category', 10, 4); |
Display Sticky Posts only
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function metaslider_post_feed_sticky( $args, $slide, $slider_settings, $slide_settings ) { // replace "735" with the slide ID to target. // get the slide ID by hovering over the delete icon and noting down the "deleteSlide" ID in the status bar if ( $slide->ID == 735 ) { $args['post__in'] = get_option('sticky_posts'); $args['ignore_sticky_posts'] = true; } return $args; } add_filter( 'metaslider_post_feed_args', 'metaslider_post_feed_sticky', 10, 4); |
metaslider_hoplink
Description
Use this filter to modify the URL used in the “Go Pro” links throughout MetaSlider. This is for use by theme developers who have signed up as an affiliate.
Parameters
$link
(string) (required) The URL used to direct users to www.metaslider.com from all “Go Pro” links within the MetaSlider interface.
Examples
Use Affiliate URL
|
1 2 3 4 5 |
function metaslider_hoplink($link) { return "https://getdpd.com/cart/hoplink/15318?referrer=fh887eioypcsc4ok"; } add_filter('metaslider_hoplink', 'metaslider_hoplink', 10, 1); |
metaslider_default_parameters
Description
Use this filter to modify the default slideshow settings. Theme developers may wish to use this to automatically set a ‘recommended’ slideshow size.
Note: this will only apply to the first ever slideshow created in MetaSlider. Subsequent slideshows are given a copy of the settings for the last edited slideshow.
Parameters
$params
(array) (required) Default slideshow settings
Examples
Change Default Slideshow Size
|
1 2 3 4 5 6 7 |
function metaslider_default_slideshow_properties($params) { $params['width'] = 960; $params['height'] = 300; return $params; } add_filter('metaslider_default_parameters', 'metaslider_default_parameters', 10, 1); |
metaslider_resized_image_url
Description
Usethis filter to modify the slide image URL used by MetaSlider. For example, it could be used to change the full image URL to a relative image URL.
Parameters
$cropped_url
(string) (required) The URL to the cropped/resized image (e.g. http://[…]/image-150x150.jpg)
$orig_url
(string) (required) The URL to the full size image (e.g. http://[…]/image.jpg)
Examples
Protocol Relative URLs
The example below will remove the “http:” portion of the image URL, making it into a “protocol relative URL”. This will allow the image to be loaded over the same protocol as the page itself (ideal for https pages).
|
1 2 3 4 |
function metaslider_protocol_relative_urls($cropped_url, $orig_url) { return str_replace('http://', '//', $cropped_url); } add_filter('metaslider_resized_image_url', 'metaslider_protocol_relative_urls', 10, 2); |
Disable Cropping
The example below effectively disables cropping by returning the original, full size image URL for each slide.
|
1 2 3 4 5 |
function metaslider_disable_crop($cropped_url, $orig_url) { return $orig_url; } add_filter('metaslider_resized_image_url', 'metaslider_disable_crop', 10, 2); |
metaslider_image_{$type}_slider_markup
Description
This filter allows you to modify the complete slide HTML generated by MetaSlider.
{type} can be flex, coin, responsive or nivo.
Parameters
$html
(string) (required) HTML markup for the complete slide
$slide
(array) (required) Slide data
$settings
(array) (required) Slideshow settings
Examples
Append custom HTML to each slide
|
1 2 3 4 |
function metaslider_append_pinit_button($html, $slide, $settings) { return $html .= "<div class="pinit">Pin It</div>"; } add_filter('metaslider_image_coin_slider_markup', 'metaslider_append_pinit_button', 10, 3); |
metaslider_{type}_slider_image_attributes
Description
Use this filter to modify or add attributes to each slide image tag.
{type} can be flex, coin, responsive or nivo.
Parameters
$attributes
(array) (required) Default image attributes (eg width, height, src).
$slide
(array) (required) Slide data
$slider_id
(int) (required) Slideshow ID
Examples
Add rel attribute
This example will add a ‘rel’ attribute of ‘lightbox’ to each slide in the slideshow. Eg, <img width='x' height='x' src='x' rel='lightbox' />
|
1 2 3 4 5 6 |
function metaslider_add_rel_attribute_to_images($attributes, $slide, $slider_id) { $attributes['rel'] = 'lightbox'; return $attributes; } add_filter('metaslider_flex_slider_image_attributes', 'metaslider_add_rel_attribute_to_images', 10, 3); |
metaslider_{type}_slider_anchor_attributes
Description
Use this filter to modify or add attributes to each slide anchor (link) tag.
{type} can be flex, coin, responsive or nivo.
Parameters
$attributes
(array) (required) Default anchor attributes (eg url, target etc).
$slide
(array) (required) Slide data
$slider_id
(int) (required) Slideshow ID
Examples
This example will automatically link each slide to it’s full image URL. {type} can be flex, coin, responsive or nivo.
|
1 2 3 4 5 6 7 8 |
function metaslider_add_full_url_to_slides($attributes, $slide, $slider_id) { if (!strlen($attributes['href'])) { $attributes['href'] = wp_get_attachment_url($slide['id']); } return $attributes; } add_filter('metaslider_flex_slider_anchor_attributes', 'metaslider_add_full_url_to_slides', 10, 3); |
metaslider_{type}_slider_javascript
Use this filter to add javascript below (after) the slider JavaScript call. {type} can be flex, coin, responsive or nivo.
|
1 2 3 4 5 6 7 8 |
function metaslider_nivo_js($javascript, $slider_id) { $javascript .= "alert('Nivo slider has loaded');"; return $javascript; } add_filter('metaslider_nivo_slider_javascript', 'metaslider_nivo_js', 10, 2); |
metaslider_{type}_slider_javascript_before
Use this filter to add javascript before the slider JavaScript call. {type} can be flex, coin, responsive or nivo.
|
1 2 3 4 5 6 7 |
function metaslider_nivo_js($javascript, $slider_id) { $javascript .= "alert('Nivo slider is about to be initiated.');"; return $javascript; } add_filter('metaslider_nivo_slider_javascript', 'metaslider_nivo_js', 10, 2); |
metaslider_{type}_slider_parameters
Description
Use this filter to modify the JavaScript properties used to initiate the slideshow.
MetaSlider exposes most of each slideshows options in the slideshow settings, but there are some specialist options that are offered by each slideshow library that you cannot change through the MetaSlider interface. This filter allows you to change existing properties or add new ones.
For a full list of available properties, see Flex Slider Properties, Nivo Slider Properties (scroll down to ‘Play with settings’), Coin Slider Properties (scroll down to ‘List of all options’), Responsive Slides Properties (scroll down to ‘Options you can customise’)
Important:
- To create/alter an integer property value, omit quotes
- To create/alter a string property value, use single or double quotes
- To create or add to a function, assign the value to an array (see first example)
{type} can be flex, coin, responsive or nivo.
Parameters
$options
(array) (required) Slideshow properties
$slider_id
(array) (required) Slideshow ID
$settings
(int) (required) Slideshow settings
Examples
Altering Flex Slider Properties
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function metaslider_flex_params($options, $slider_id, $settings) { if ($slider_id == 123) { // check for slider ID (optional) $options['startAt'] = 2; // startAt: 2 $options['animationLoop'] = "false"; // animationLoop: false $options['namespace'] = "'flex-'"; // namespace: 'flex' $options['start'][] = "alert('hello');"; // start: function() { alert('hello'); } } return $options; } add_filter('metaslider_flex_slider_parameters', 'metaslider_flex_params', 10, 3); |
The above code will result in the following output:
|
1 2 3 4 5 6 7 8 9 |
$('#metaslider_123').flexslider({ [existing properties], startAt: 2, animationLoop: false, namespace: 'flex-', start: function(slider) { alert('hello'); } }); |