Creating Custom Featured Block style

Last updated on by

In this tip we’ll learn how to create a custom featured block style. This tip is valid from WPLMS version 1.6.4 onwards.

A featured block is a block which is shown in the page builder elements :

and the output looks like the featured blocks is like this :

Lets get started :

STEP 1 : Adding the New featured block in Page Builder 

1. Go to WP Admin -> Plugins -> Editor -> WPLMS Customizer -> customizer_class.php
2. Add the following code in the _construct function :\

PHP Code:
add_filter('vibe_builder_thumb_styles',array($this,'custom_vibe_builder_thumb_styles'));

3. Upload the image of your thumbnail on web, for consistency use the below image for creating you own custom thumbnail style :

right click on above image and download the image on your desktop. Edit this to match your corresponding style in page builder for identification.

4. Add the following function in the Class:

PHP Code:

function custom_vibe_builder_thumb_styles($thumb_array){
            $thumb_array['custom_block']= 'http://xyz.com/custom_thumbnail_image.png';
            return $thumb_array;
        }

This will now add the thumbnail image in the Page builder components like carousels and Post grid. Refer screenshot :

STEP 2 : Adding the function for New featured block

1. Go to WP Admin -> Plugins -> Editor -> WPLMS Customizer -> customizer_class.php
2. Add the following code in the _construct function :

PHP Code:
add_filter('vibe_featured_thumbnail_style',array($this,'custom_vibe_featured_thumbnail_style'),10,3);

3. Add the following function in the Class:
You can add your custom HTML content based on your requirements.

PHP Code:
function custom_vibe_featured_thumbnail_style($thumbnail_html,$post,$style){
    if($style == 'custom_block'){ //Custom block is the same name as added for the thumbnail in pagebuilder
        $thumbnail_html ='';
        $thumbnail_html .= '<div class="block customblock">';
        $thumbnail_html .= '<div class="block_media">';
        $thumbnail_html .= '<a href="'.get_permalink($post->ID).'">'.get_the_post_thumbnail($post->ID,'medium').'</a>';
        $thumbnail_html .= '</div>';
        $thumbnail_html .= '<div class="block_content">';
        $thumbnail_html .= '<h4 class="block_title"><a href="'.get_permalink($post->ID).'" title="'.$post->post_title.'">'.$post->post_title.'</a></h4>';
        $thumbnail_html .= '</div>';
    }
    return $thumbnail_html;
}