WP Carousel Pro

  1. Home
  2. Docs
  3. WP Carousel Pro
  4. Hooks: Actions and Filters

Hooks: Actions and Filters

A comprehensive guideline on how to use WP Carousel Pro filter hooks. We have added the following hooks for developers to extend functionalities. Simply add the following custom code to your current theme’s functions.php file. It’s recommended to keep the code in the functions.php file of your child theme. Because you might lose your customizations if the theme is updated. Keeping the modified codes in your child’s theme is, therefore, the best practice.

1) How to modify the carousel content

2) How to add a subtitle below the carousel title

3) How to modify the ‘End of the Content’ text

4) How to add the current post to the carousel

5) How to change the placeholder image for ‘lazy load’ (on demand)

6) How to change the ‘No content found’ text

7) How to change the carousel preloader image

8) How to modify the image caption tag

9) How to add a custom link in the post title

10) How to provide the plugin access to the Editors

11) How to enable mouse drag on the ticker mode carousel

 

1) How to modify the carousel content  

The carousel content can be modified by using the custom code below. You can add a custom wrapper with a class to every single item in the carousel. If you check the function, you will see there is a filter hook available (sp_wpcp_content_carousel_content) by which you can easily modify the carousel content.

function modified_sp_wpcp_content_carousel_content ($carousel_content) {
    $carousel_content = '<div class="my_class">' . $carousel_content . '</div>';
    return $carousel_content;
}
add_filter( 'sp_wpcp_content_carousel_content', 'modified_sp_wpcp_content_carousel_content' );

2) How to add a subtitle under the carousel title

The custom code below can be used to add a subtitle under the carousel title. If you check the function, you will see there is a filter hook (sp_wpcp_section_title) available to add a subtitle under the carousel title. You can also change the HTML heading tags as per your needs just by changing the existing tags in the following code, such as if you want an h1 or h2 tag. Just write the h1 or h2 tag by replacing the h3 tag.

function modified_sp_wpcp_section_title ($section_title) {
    $section_title .= '<h3 class="wcp-subtitle">This is sub-title</h3>';
    return $section_title;
}
add_filter( 'sp_wpcp_section_title', 'modified_sp_wpcp_section_title' );

3) How to modify the ‘End of the Content’ text 

By using the following custom code, you can easily change the text “End Of the Content”. When you use the Layout Type > Gallery and there is no more content available, the text “End of the Content” appears. Now, you can change the text as per your needs. If you look at the code below, you will see there is a filter hook (wpcpro_end_content_text) available by which you can easily change the text. You just need to replace the text “No more items” with your desired text. “No more items” itself is a custom text. By default, it shows “End of the content”.

function wpcpro_end_content_text_modified() {
    return __( 'No more items.', 'wp-carousel-pro' );
}
add_filter( 'wpcpro_end_content_text', 'wpcpro_end_content_text_modified' );

Besides, you may not want to show any text at all at the end of the content. For that, you can use the custom function below. In which we have modified the functionality of the filter hook by returning no value at the end of the content.

function wpcpro_end_content_text_modified() {
    return;
}
add_filter( 'wpcpro_end_content_text', 'wpcpro_end_content_text_modified' );

4) How to include the current post in the carousel

Suppose you want to show a post carousel in one of your posts. By default, the current post in which the carousel is displayed won’t display the post in the carousel. But with the custom function below, you can do this easily. You can display the current post in the carousel. If you check the code, you will see a filter hook (sp_wpcp_include_current_post) is available to enhance the functionality of the current post in the carousel. The return value of the function that modified the current post has been written.

add_filter( 'sp_wpcp_include_current_post', '__return_true' );

5) How to change the lazy load (on demand) placeholder image

If you want to change the lazy load (on demand) default image, you can do it with the custom code below. If you check the code, you will see that a filter hook (wpcp_lazy_load_img) is available in the function by which you can easily do the customization. You just have to upload the custom lazy load image to your WordPress site and then copy the image link going to the Dashboard > Media > Upload. Select the image and just paste the link in the code below within the $preloader_url, inside the quotation.

function wpcp_lazy_load_custom_img_url($preloader_url) {
    $preloader_url = 'http://localhost:8888/ftp-wcp/wp-content/uploads/2021/12/preloader-custom.png';
    return $preloader_url;
}
add_filter( 'wpcp_lazy_load_img', 'wpcp_lazy_load_custom_img_url' );

6) How to change the ‘No content found’ text

As you know, WP Carousel Pro can display WooCommerce products. Suppose you have created a slider to display the products, but there are no products available on your site. By default, it will show ‘No products found’ on the front end. Now, with the help of this custom code below, you can change the text as you want. If you check the code, you will see a filter hook (wpcp_product_no_content_found_text) is available there by which you can customize the text as you want. Suppose you want to show “There is no product available,” then just replace the text inside the function where “No products available” is written.

function wpcp_product_no_content_found_text_new($no_product_text) {
    $no_product_text = '<p class="sp-not-found-any-post" >' . esc_html__( 'No products available.', 'wp-carousel-pro' ) . '</p>';
    return $no_product_text;
}
add_filter( 'wpcp_product_no_content_found_text', 'wpcp_product_no_content_found_text_new' );

7) How to change the carousel preloader image

The custom code below is about changing the carousel preloader image. With the help of this code, you can upload your custom preloader image for the carousel. If you check the code, you will find there is a filter hook (wpcp_preloader_image) available through which you can do this. You just need to upload the image on your WordPress site and then copy the image link and paste it into the function within the $preloader_url inside the quotation. The preloader image will show up on the front end. Make sure the preloader option is on in the General Settings of the plugin.

function wpcp_preloader_image_($preloader_url) {
    $preloader_url = 'http://wp-carousel-pro.local/wp-content/uploads/2022/01/unnamed.gif';
    return $preloader_url;
}
add_filter( 'wpcp_preloader_image', 'wpcp_preloader_image_' );

8) How to modify the HTML heading tags of the image caption tag

By using the following custom code, you can easily change the HTML heading tag of the image captain tag as you want. If you check the function, you will see there is a filter hook (filter_wpcp_image_caption_tag) available in the plugin by which you can easily modify the HTML heading tag of the image caption tag. Simply enter the desired tag in the $caption_tag.

function filter_wpcp_image_caption_tag_modified($caption_tag){
    $caption_tag = 'h4';
    return $caption_tag;
}
add_filter( 'filter_wpcp_image_caption_tag', 'filter_wpcp_image_caption_tag_modified' );

9) How to add a custom link in the post title

If you want to add a custom link to your post title, you can do it easily with the custom code below. By default, the post title link takes you to the post, but with this function, you can modify the link. When someone clicks on the post title, it will take them to the link you have added instead of the post. If you check the function, you will see there is a filter hook (wpcp_post_title_url) available through which you can easily modify the post title link.

function wpcp_post_title_url_modified($title_url){
    // custom link
    $title_url = 'https://www.youtube.com/';
    return $title_url;
}
add_filter( 'wpcp_post_title_url', 'wpcp_post_title_url_modified' );

10) How to provide the plugin access to the Editors

If you want to give the plugin access to the Editor role users you can do it easily with the help of the following custom code. If you check the code you can see there is an action hook (sp_wp_carousel_ui_permission) available in the plugin which allows you to modify the plugin’s functionality.

// Give access to the Editors
function sp_wp_carousel_to_editor($capability){
    $capability = 'edit_others_pages';
    return $capability;
}
add_filter( 'sp_wp_carousel_ui_permission', 'sp_wp_carousel_to_editor' );

11) How to enable mouse drag on the ticker mode carousel

If you want to have a darg option for the ticker mode carousel you can use the following custom code to enable it. Just add the code to your current theme’s functions.php file.

add_filter( 'sp_wpcp_enable_mouse_drag_in_ticker', '__return_true' );