How to add different style blog custom widgets in elementor page builder
In this article, you will come to know how to add different styles of blog custom widgets in elementor page builder on a website!
so let’s start.
<?php
namespace Elementor;
class Post_Area extends Widget_Base{
public function get_name(){
return "Teciva_Post";
}
public function get_title(){
return "Posts";
}
public function get_icon(){
return "eicon-post-list";
}
public function get_categories(){
return ['tecivacategory'];
}
protected function register_controls(){
$this-> start_controls_section(
'layout_section',
[
'label' => __('Posts Content', 'teciva-toolkit'),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'teciva_style', [
'label' => __( 'Style', 'teciva-toolkit' ),
'type' => Controls_Manager::SELECT,
'options' => [
'style_01' => esc_html__( 'Style One', 'teciva-toolkit' ),
'style_02' => esc_html__( 'Style Two', 'teciva-toolkit' ),
],
'default' => 'style_01'
]
);
$this->add_control(
'columns',
[
'label' => __( 'Choose Columns', 'teciva-toolkit' ),
'type' => Controls_Manager::SELECT,
'options' => [
2 => __( '2', 'teciva-toolkit' ),
3 => __( '3', 'teciva-toolkit' ),
4 => __( '4', 'teciva-toolkit' ),
],
'default' => 3,
]
);
$this->add_control(
'cat_name',
[
'label' => __( 'Choose Category', 'teciva-toolkit' ),
'type' => Controls_Manager::SELECT,
'options' => teciva_toolkit_get_post_cat_list(),
]
);
$this->add_control(
'post_title_size',
[
'label' => __( 'Post Title Heading Tag', 'teciva-toolkit' ),
'type' => Controls_Manager::SELECT,
'options' => [
'h1' => 'H1',
'h2' => 'H2',
'h3' => 'H3',
'h4' => 'H4',
'h5' => 'H5',
'h6' => 'H6',
],
'default' => 'h3',
]
);
$this->add_control(
'count',
[
'label' => __( 'Show Post Count', 'teciva-toolkit' ),
'default' => __( '3', 'teciva-toolkit' ),
'type' => Controls_Manager::TEXT,
'description' => __('if you went to see all post type -1','teciva-toolkit')
]
);
$this->add_control(
'order',
[
'label' => __( 'Select Order', 'teciva-toolkit' ),
'type' => Controls_Manager::SELECT,
'options' => [
'DESC' => __( 'DESC', 'teciva-toolkit' ),
'ASC' => __( 'ASC', 'teciva-toolkit' ),
],
'default' => 'DESC',
]
);
$this-> end_controls_section();
// Start Style content controls
$this-> start_controls_section(
'heading_style',
[
'label' => __('Posts Style', 'teciva-toolkit'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'title_color',
[
'label' => __( 'Title Color', 'teciva-toolkit' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .blog-item .content h3 a' => 'color: {{VALUE}}',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'title_typography',
'label' => __( 'Title Typography', 'teciva-toolkit' ),
'selector' => '{{WRAPPER}} .blog-item .content h3 a',
]
);
$this-> end_controls_section();
}
protected function render()
{
global $teciva_opt;
$settings = $this->get_settings_for_display();
$columns = $settings['columns'];
if ( $columns == 2 ) {
$column = 'col-lg-6 col-md-6';
} elseif ( $columns == 4 ) {
$column = 'col-lg-3 col-md-6';
} else {
$column = 'col-lg-4 col-md-6';
}
if ( isset( $teciva_opt['blog_title'] ) ) {
$is_post_meta = $teciva_opt['is_post_meta'];
} else {
$is_post_meta = false;
} ?>
<div class="container">
<div class="row">
<?php
if( $settings['cat_name'] != '' ) {
$args = array(
'post_type' => 'post',
'posts_per_page'=> $settings['count'],
'order' => $settings['order'],
'meta_key' => '_thumbnail_id',
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => $settings['cat_name'],
'hide_empty' => false,
)
)
);
} else {
$args = array(
'post_type' => 'post',
'posts_per_page' => $settings['count'],
'order' => $settings['order'],
'ignore_sticky_posts' => 1,
'meta_key' => '_thumbnail_id',
);
}
$post_array = new \WP_Query( $args );
$loop = 1;
while ( $post_array->have_posts() ): $post_array->the_post();
$id = get_the_ID();
$title = get_the_title( get_the_ID() );
if ( $columns == 3 ) {
if( $loop == 3 && $settings['count'] == 3 ) {
$column = "col-lg-4 col-md-6 offset-lg-0 offset-md-3";
} else {
$column = "col-lg-4 col-md-6";
}
}
?>
<?php if( $settings['teciva_style'] == 'style_01' ): ?>
<div class="<?php echo esc_attr( $column ); ?>">
<div class="blog-item">
<div class="image">
<a href="<?php echo esc_url(get_the_permalink($id)); ?>">
<img src="<?php echo esc_url(get_the_post_thumbnail_url($id, 'teciva_el_post_thumb')); ?>" alt="<?php echo esc_attr__('blog image','teciva-toolkit'); ?>">
</a>
<?php if( $is_post_meta == false ) { ?>
<div class="date">
<span><?php echo esc_html__(get_the_date('F d, Y'), 'teciva-toolkit'); ?></span>
</div>
<?php } ?>
</div>
<div class="content">
<h3><a href="<?php echo esc_url(get_the_permalink($id)); ?>"><?php echo esc_html($title); ?></a></h3>
<a href="<?php echo esc_url(get_the_permalink($id)); ?>" class="blog-btn">
<?php if(isset($teciva_opt['post_read_more'] ) && !$teciva_opt['post_read_more'] == ''){ echo esc_html($teciva_opt['post_read_more']); }else { echo esc_html__('Read More +','teciva-toolkit'); } ?>
</a>
</div>
</div>
</div>
<?php else: ?>
<div class="<?php echo esc_attr( $column ); ?>">
<div class="blog-item bg-ffffff">
<div class="image">
<a href="<?php echo esc_url(get_the_permalink($id)); ?>">
<img src="<?php echo esc_url(get_the_post_thumbnail_url($id, 'teciva_el_post_thumb')); ?>" alt="<?php echo esc_attr__('blog image','teciva-toolkit'); ?>">
</a>
<?php if( $is_post_meta == false ) { ?>
<div class="date">
<span><?php echo esc_html__(get_the_date('F d, Y'), 'teciva-toolkit'); ?></span>
</div>
<?php } ?>
</div>
<div class="content">
<h3>
<a href="<?php echo esc_url(get_the_permalink($id)); ?>"><?php echo esc_html($title); ?></a>
</h3>
<a href="<?php echo esc_url(get_the_permalink($id)); ?>" class="blog-btn">
<?php if(isset($teciva_opt['post_read_more'] ) && !$teciva_opt['post_read_more'] == ''){ echo esc_html($teciva_opt['post_read_more']); }else { echo esc_html__('Read More +','teciva-toolkit'); } ?>
</a>
</div>
</div>
</div>
<?php endif; ?>
<?php
$loop++;
endwhile;
wp_reset_query();
?>
</div>
</div>
<?php
}
}
Plugin::instance()->widgets_manager->register_widget_type( new Post_Area );That’s all! If you have any queries, then let me know in the comment section.
