OwlCyberSecurity - MANAGER

Edit File: blog-grid.php

<?php

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Utils;
use Elementor\Group_Control_Border;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

class Chursy_Elementor_Blog_Grid extends Widget_Base {

public function get_name() {
		return 'chursy_elementor_blog_grid';
	}

public function get_title() {
		return esc_html__( 'Blog Grid', 'chursy' );
	}

public function get_icon() {
		return 'eicon-posts-ticker';
	}

public function get_categories() {
		return [ 'chursy' ];
	}

public function get_script_depends() {
		return [ 'chursy-elementor-blog-grid' ];
	}
	
	// Add Your Controll In This Function
	protected function register_controls() {

$args = array(
			'orderby' => 'name',
			'order' => 'ASC'
		);

$categories 	= get_categories($args);
		$cate_array 	= array();
		$arrayCateAll 	= array( 'all' => esc_html__( 'All categories', 'chursy' ) );
		if ( $categories ) {
			foreach ( $categories as $cate ) {
				$cate_array[$cate->slug] = $cate->cat_name;
			}
		} else {
			$cate_array[ esc_html__( 'No content Category found', 'chursy' ) ] = 0;
		}

$this->start_controls_section(
			'section_content',
			[
				'label' => esc_html__( 'Content', 'chursy' ),
			]
		);

$this->add_control(
			'category',
			[
				'label' 	=> esc_html__( 'Category', 'chursy' ),
				'type' 		=> \Elementor\Controls_Manager::SELECT,
				'default' 	=> 'all',
				'options' 	=> array_merge( $arrayCateAll, $cate_array ),
			]
		);

$this->add_control(
			'posts_per_page',
			[
				'label' 	=> esc_html__( 'Posts Per Page', 'chursy' ),
				'type' 		=> \Elementor\Controls_Manager::NUMBER,
				'default' 	=> 3,
			]
		);

$this->add_control(
			'number_column',
			[
				'label' 	=> esc_html__( 'Columns', 'chursy' ),
				'type' 		=> \Elementor\Controls_Manager::SELECT,
				'default' 	=> 'column_3',
				'options' 	=> [
					'column_2' 	=> esc_html__( '2 Columns', 'chursy' ),
					'column_3' 	=> esc_html__( '3 Columns', 'chursy' ),
					'column_4' 	=> esc_html__( '4 Columns', 'chursy' ),
				]
			]
		);

$this->add_control(
			'order',
			[
				'label' 	=> esc_html__('Order', 'chursy'),
				'type' 		=> \Elementor\Controls_Manager::SELECT,
				'default' 	=> 'desc',
				'options' 	=> [
					'asc' 	=> esc_html__('Ascending', 'chursy'),
					'desc' 	=> esc_html__('Descending', 'chursy'),
				]
			]
		);

$this->add_control(
			'orderby',
			[
				'label' 	=> esc_html__('Order By', 'chursy'),
				'type' 		=> \Elementor\Controls_Manager::SELECT,
				'default' 	=> 'ID',
				'options' 	=> [
					'none' => esc_html__('None', 'chursy'),
					'ID' 	=> esc_html__('ID', 'chursy'),
					'title' => esc_html__('Title', 'chursy'),
					'date' 	=> esc_html__('Date', 'chursy'),
					'modified' => esc_html__('Modified', 'chursy'),
					'rand' 	=> esc_html__('Rand', 'chursy'),
				]
			]
		);

$this->add_control(
			'show_pagination',
			[
				'label' 		=> esc_html__( 'Show Ajax Pagination', 'chursy' ),
				'type' 			=> \Elementor\Controls_Manager::SWITCHER,
				'label_on' 		=> esc_html__( 'Show', 'chursy' ),
				'label_off' 	=> esc_html__( 'Hide', 'chursy' ),
				'return_value' 	=> 'yes',
				'default' 		=> 'no',
				'separator'     => 'before' 
			]
		);

$this->add_responsive_control(
				'align_pagination',
				[
					'label' 	=> esc_html__( 'Pagination Alignment', 'chursy' ),
					'type' 		=> \Elementor\Controls_Manager::CHOOSE,
					'options' 	=> [
						'flex-start' => [
							'title' => esc_html__( 'Left', 'chursy' ),
							'icon' 	=> 'eicon-text-align-left',
						],
						'center' => [
							'title' => esc_html__( 'Center', 'chursy' ),
							'icon' 	=> 'eicon-text-align-center',
						],
						'flex-end' => [
							'title' => esc_html__( 'Right', 'chursy' ),
							'icon' 	=> 'eicon-text-align-right',
						],
					],
					'toggle' 	=> true,
					'selectors' => [
						'{{WRAPPER}} .ova_pagination_ajax ul' => 'justify-content: {{VALUE}}',
					],
					'condition' => [
						'show_pagination' => 'yes'
					]
				]
			);

$this->end_controls_section();

/* General */
		$this->start_controls_section(
			'items_style_section',
			[
				'label' => esc_html__( 'General', 'chursy' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_responsive_control(
			'items_padding',
			[
				'label' => esc_html__( 'Padding', 'chursy' ),
				'type' => \Elementor\Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors' => [
					'{{WRAPPER}} .ova-blog .item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

$this->add_group_control(
			\Elementor\Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'items_box_shadow',
				'selector' => '{{WRAPPER}} .ova-blog .item',
			]
		);

$this->add_control(
			'items_bg',
			[
				'label' => esc_html__( 'Background', 'chursy' ),
				'type' => \Elementor\Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .ova-blog .item' => 'background: {{VALUE}}',
				],
			]
		);

$this->end_controls_section();

//SECTION TAB STYLE TITLE
		$this->start_controls_section(
			'section_title',
			[
				'label' => esc_html__( 'Title', 'chursy' ),
				'tab' 	=> \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' 		=> 'title_typography',
					'selector' 	=> '{{WRAPPER}} .ova-blog .post-title',
				]
			);

$this->add_control(
				'color_title',
				[
					'label' 	=> esc_html__( 'Color', 'chursy' ),
					'type' 		=> \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-blog .post-title a' => 'color : {{VALUE}};',
					],
				]
			);

$this->add_control(
				'color_title_hover',
				[
					'label' 	=> esc_html__( 'Color Hover', 'chursy' ),
					'type' 		=> \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-blog .post-title a:hover' => 'color : {{VALUE}};',
					],
				]
			);

$this->add_responsive_control(
				'margin_title',
				[
					'label' 		=> esc_html__( 'Margin', 'chursy' ),
					'type' 			=> \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' 	=> [ 'px', 'em', '%' ],
					'selectors' 	=> [
						'{{WRAPPER}} .ova-blog .post-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();
		//END SECTION TAB STYLE TITLE

/* Meta */
		$this->start_controls_section(
			'section_meta',
			[
				'label' => esc_html__( 'Meta', 'chursy' ),
				'tab' 	=> \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' => 'meta_text_typography',
					'selector' => '{{WRAPPER}} .ova-blog .item .post-meta .item-meta .right',
				]
			);

$this->add_control(
				'meta_text_color',
				[
					'label' => esc_html__( 'Color', 'chursy' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-blog .item .post-meta .item-meta .right, {{WRAPPER}} .ova-blog .item .post-meta .item-meta .right a' => 'color: {{VALUE}}',
					],
				]
			);

$this->add_control(
				'meta_text_color_hover',
				[
					'label' => esc_html__( 'Link Hover', 'chursy' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-blog .item .post-meta .item-meta .right a:hover' => 'color: {{VALUE}}',
					],
				]
			);

$this->end_controls_section();

/* Category */
		$this->start_controls_section(
			'section_category',
			[
				'label' => esc_html__( 'Category', 'chursy' ),
				'tab' 	=> \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' 		=> 'category_typography',
					'selector' 	=> '{{WRAPPER}} .ova-blog .item .category',
				]
			);

$this->add_control(
				'color_category',
				[
					'label' 	=> esc_html__( 'Color', 'chursy' ),
					'type' 		=> \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-blog .item .category' => 'color : {{VALUE}};',
					],
				]
			);

$this->end_controls_section();

/* Short Description */
		$this->start_controls_section(
			'section_short_desc',
			[
				'label' => esc_html__( 'Short Description', 'chursy' ),
				'tab' 	=> \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

$this->add_group_control(
				\Elementor\Group_Control_Typography::get_type(),
				[
					'name' 		=> 'short_desc_typography',
					'selector' 	=> '{{WRAPPER}} .ova-blog .short_desc',
				]
			);

$this->add_control(
				'color_short_desc',
				[
					'label' 	=> esc_html__( 'Color', 'chursy' ),
					'type' 		=> \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-blog .short_desc, {{WRAPPER}} .ova-blog .short_desc p' => 'color : {{VALUE}};',
					],
				]
			);

$this->add_responsive_control(
				'margin_short_desc',
				[
					'label' 		=> esc_html__( 'Margin', 'chursy' ),
					'type' 			=> \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' 	=> [ 'px', 'em', '%' ],
					'selectors' 	=> [
						'{{WRAPPER}} .ova-blog .short_desc' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();

}

// Render Template Here
	protected function render() {
		$settings = $this->get_settings_for_display();

$category 			= $settings['category'];
		$posts_per_page 	= $settings['posts_per_page'];
		$order 				= $settings['order'];
		$orderby 			= $settings['orderby'];
		$number_column 		= $settings['number_column'];
		$show_pagination	= $settings['show_pagination'];

$args = [];
		if ( $category == 'all' ) {
			$args = [
				'post_type' 		=> 'post',
				'posts_per_page' 	=> $posts_per_page,
				'order' 			=> $order,
				'orderby' 			=> $orderby,
			];
		} else {
			$args = [
				'post_type' 		=> 'post', 
				'category_name'		=> $category,
				'posts_per_page' 	=> $posts_per_page,
				'order' 			=> $order,
				'orderby' 			=> $orderby,
				'fields'			=> 'ids'
			];
		}

$blog = new \WP_Query($args);

?>
		
		<div class="ova-blog-has-ajax"
			data-posts_per_page="<?php echo esc_attr($posts_per_page);?>"
			data-orderby="<?php echo esc_attr($orderby);?>"
			data-order="<?php echo esc_attr($order);?>"
			data-category="<?php echo esc_attr($category);?>"
			data-number_column="<?php echo esc_attr($number_column);?>"
			data-show_pagination="<?php echo esc_attr($show_pagination);?>"
		>
			
			<div class="wrap-load-more" style="display: none;">
				<svg class="loader" width="50" height="50">
					<circle cx="25" cy="25" r="10" />
					<circle cx="25" cy="25" r="20" />
				</svg>
			</div>

<div class="ova-blog <?php echo esc_attr($number_column); ?>">
					<?php if( $blog->have_posts() ) : while( $blog->have_posts() ) : $blog->the_post(); 
						$categories = get_the_category();
						$thumbnail  = wp_get_attachment_image_url(get_post_thumbnail_id() , 'chursy_thumbnail' );
					?>
						<div class="item">
							<?php if( has_post_thumbnail() ) { ?>
								<div class="media">
									<img src="<?php echo esc_url( $thumbnail ); ?>" alt="<?php the_title(); ?>">
								</div>
							<?php } ?>
							<div class="info">
								<?php if ( get_the_title() ) { ?>
									<h2 class="post-title">
										<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
											<?php echo get_the_title(); ?>
										</a>
									</h2>
								<?php } ?>
								<?php if ( get_the_excerpt() ) { ?>
									<div class="short_desc">
										<?php echo chursy_custom_text( get_the_excerpt(), 15 ); ?>
									</div>
								<?php } ?>
								<div class="post-bottom">
									<ul class="post-meta">
										<li class="item-meta post-date">
											<span class="right date">
												<?php the_time( get_option( 'date_format' ) ); ?>
											</span>
										</li>
									</ul>
									<?php if( has_category() && is_array($categories) ) { ?>
										<span class="category">
											<?php echo esc_html( $categories[0]->name ); ?> 
										</span>
									<?php } ?>
								</div>
							</div>
						</div>
					<?php endwhile; endif; wp_reset_postdata(); ?>
				</div>

<?php $total = $blog->max_num_pages;

if (  $total > 1 && $show_pagination == 'yes' ): ?>
						<div class="ova_pagination_ajax">
						<?php
							echo ova_pagination_ajax( $blog->found_posts, $blog->query_vars['posts_per_page'], 1 );
						?>
						</div>
						<?php
					endif;
				?>

</div>

<?php
	}

}
$widgets_manager->register( new Chursy_Elementor_Blog_Grid() );