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.