✏️ Editing: blog.php Writable

<?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 Nighty_Elementor_Blog extends Widget_Base {

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

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

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

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

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

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

$categories 	= get_categories($args);
		$cate_array 	= array( 'all' => esc_html__( 'All categories', 'nighty' ) );

if ($categories) {
			foreach ( $categories as $cate ) {
				$cate_array[$cate->slug] = $cate->cat_name;
			}
		} else {
			$cate_array[ esc_html__( 'No content Category found', 'nighty' ) ] = 0;
		}

$this->start_controls_section(
			'section_content',
			[
				'label' => esc_html__( 'Content', 'nighty' ),
			]
		);	
			
			$this->add_control(
				  'category',
				[
					'label' => esc_html__( 'Category', 'nighty' ),
					'type' => Controls_Manager::SELECT,
					'default' => 'all',
					'options' => $cate_array
				]
			);
  
			$this->add_control(
				'total_count',
				[
					'label' => esc_html__( 'Post Total', 'nighty' ),
					'type' => Controls_Manager::NUMBER,
					'default' => 3,
				]
			);
  
			$this->add_control(
				'number_column',
				[
					'label' => esc_html__( 'Columns', 'nighty' ),
					'type' => Controls_Manager::SELECT,
					'default' => 'column_3',
					'options' => [
						'column_2' => esc_html__( '2 Columns', 'nighty' ),
						'column_3' => esc_html__( '3 Columns', 'nighty' ),
						'column_4' => esc_html__( '4 Columns', 'nighty' ),
					],
				]
			);
  
			$this->add_control(
				'order',
				[
					'label' => esc_html__('Order', 'nighty'),
					'type' => Controls_Manager::SELECT,
					'default' => 'desc',
					'options' => [
						'asc' => esc_html__('Ascending', 'nighty'),
						'desc' => esc_html__('Descending', 'nighty'),
					]
				]
			);

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

$this->add_control(
				'show_author',
			 	[
					'label' => esc_html__( 'Show Author', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SWITCHER,
					'label_on' => esc_html__( 'Show', 'nighty' ),
					'label_off' => esc_html__( 'Hide', 'nighty' ),
					'return_value' => 'yes',
				 'default' => 'yes',
				]
			);
 
			$this->add_control(
				'show_title',
				[
					'label' => esc_html__( 'Show Title', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SWITCHER,
					'label_on' => esc_html__( 'Show', 'nighty' ),
					'label_off' => esc_html__( 'Hide', 'nighty' ),
					'return_value' => 'yes',
					'default' => 'yes',
				]
			);

$this->add_control(
				'show_date',
				[
					'label' => esc_html__( 'Show Date', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SWITCHER,
					'label_on' => esc_html__( 'Show', 'nighty' ),
					'label_off' => esc_html__( 'Hide', 'nighty' ),
					'return_value' => 'yes',
					'default' => 'yes',
				]
			);
  
			$this->add_control(
				'show_comment',
				[
					'label' => esc_html__( 'Show Comment', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SWITCHER,
					'label_on' => esc_html__( 'Show', 'nighty' ),
					'label_off' => esc_html__( 'Hide', 'nighty' ),
					'return_value' => 'yes',
					'default' => 'yes',
				]
			);

$this->end_controls_section();

/* Begin General Style */
		$this->start_controls_section(
			'general',
			[
				'label' => esc_html__( 'Content', 'nighty' ),
				'tab' 	=> Controls_Manager::TAB_STYLE,
			]
		);

$this->add_control(
				'general_spacing',
				[
					'label' => esc_html__( 'Items Spacing', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 60,
							'step' => 1,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-blog' => 'gap: {{SIZE}}{{UNIT}};',
					],
				]
			);

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

$this->add_responsive_control(
				'general_align',
				[
					'label' 	=> esc_html__( 'Alignment', 'nighty' ),
					'type' 		=> \Elementor\Controls_Manager::CHOOSE,
					'options' 	=> [
						'left' => [
							'title' => esc_html__( 'Left', 'nighty' ),
							'icon' 	=> 'eicon-text-align-left',
						],
						'center' => [
							'title' => esc_html__( 'Center', 'nighty' ),
							'icon' 	=> 'eicon-text-align-center',
						],
						'right' => [
							'title' => esc_html__( 'Right', 'nighty' ),
							'icon' 	=> 'eicon-text-align-right',
						],
						  
					],
					'toggle' 	=> true,
					'selectors' => [
						'{{WRAPPER}} .ova-blog .item .content' => 'text-align: {{VALUE}};',
					],
				]
			);

$this->end_controls_section();

$this->start_controls_section(
			'section_author',
			    [
				    'label' => esc_html__( 'Author', 'nighty' ),
				    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			    ]
			);

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

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

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

$this->add_control(
				'author_background_color',
				[
					'label' => esc_html__( 'Background Color', 'nighty' ),
					'type' => \Elementor\Controls_Manager::COLOR,
					'selectors' => [
						'{{WRAPPER}} .ova-blog .item .media .post-author' => 'background-color: {{VALUE}}',
					],
				]
			);

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

$this->add_control(
				'author_position_heading',
				[
					'label' => esc_html__( 'Position', 'nighty' ),
					'type' => \Elementor\Controls_Manager::HEADING,
					'separator' => 'before',
				]
			);

$this->add_control(
				'author_position_left',
				[
					'label' => esc_html__( 'Left', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 500,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-blog .item .media .post-author' => 'left: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->add_control(
				'author_position_bottom',
				[
					'label' => esc_html__( 'Bottom', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px', '%', 'em', 'rem' ],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 500,
							'step' => 1,
						],
						'%' => [
							'min' => 0,
							'max' => 100,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-blog .item .media .post-author' => 'bottom: {{SIZE}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();

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

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

$this->add_control(
				  'color_title',
				  [
					  'label' => esc_html__( 'Color', 'nighty' ),
					  'type' => \Elementor\Controls_Manager::COLOR,
					  'selectors' => [
						  '{{WRAPPER}} .ova-blog .item .content .post-title a' => 'color : {{VALUE}};',
					  ],
				  ]
			);
	  
			$this->add_control(
				  'color_title_hover',
				  [
					  'label' => esc_html__( 'Color Hover', 'nighty' ),
					  'type' => \Elementor\Controls_Manager::COLOR,
					  'selectors' => [
						  '{{WRAPPER}} .ova-blog .item .content .post-title a:hover ' => 'color : {{VALUE}};',
					  ],
				  ]
			);
	  
			$this->add_responsive_control(
				  'margin_title',
				  [
					  'label' => esc_html__( 'Margin', 'nighty' ),
					  'type' => \Elementor\Controls_Manager::DIMENSIONS,
					  'size_units' => [ 'px', 'em', '%' ],
					  'selectors' => [
						  '{{WRAPPER}} .ova-blog .item .content .post-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					  ],
				  ]
			);

$this->end_controls_section();

// DATE TAB
		$this->start_controls_section(
		'date_section',
		    [
			    'label' => esc_html__( 'Date', 'nighty' ),
			    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
		    ]
	    );

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

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

$this->add_control(
				'date_opacity',
				[
					'label' => esc_html__( 'Opacity', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px'],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 1,
							'step' => 0.01,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-blog .item .content .post-meta .item-meta.post-date .date' => 'opacity: {{SIZE}};',
					],
				]
			);

$this->add_control(
				'date_margin',
				[
					'label' => esc_html__( 'Margin', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem' ],
					'selectors' => [
						'{{WRAPPER}} .ova-blog .item .content .post-meta .item-meta.post-date' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section(); 
		// END date Tab

$this->start_controls_section(
		'section_comment',
		    [
			    'label' => esc_html__( 'Comment', 'nighty' ),
			    'tab' => \Elementor\Controls_Manager::TAB_STYLE,
		    ]
		);

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

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

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

$this->add_control(
				'comment_opacity',
				[
					'label' => esc_html__( 'Opacity', 'nighty' ),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => [ 'px'],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 1,
							'step' => 0.01,
						],
					],
					'selectors' => [
						'{{WRAPPER}} .ova-blog .item .content .post-meta .item-meta.post-comment a' => 'opacity: {{SIZE}};',
					],
				]
			);

$this->add_control(
				'comment_margin',
				[
					'label' => esc_html__( 'Margin', 'nighty' ),
					'type' => \Elementor\Controls_Manager::DIMENSIONS,
					'size_units' => [ 'px', '%', 'em', 'rem' ],
					'selectors' => [
						'{{WRAPPER}} .ova-blog .item .content .post-meta .item-meta.post-comment' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
					],
				]
			);

$this->end_controls_section();
	}

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

$category 			= 	$settings['category'];
		$total_count 		= 	$settings['total_count'];
		$order 				= 	$settings['order'];
		$order_by 			= 	$settings['order_by'];
		$number_column 		= 	$settings['number_column'];

$show_date 			= 	$settings['show_date'];
		$show_author 		= 	$settings['show_author'];
		$show_title 		= 	$settings['show_title'];
		$show_comment 		= 	$settings['show_comment'];

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

$blog = new \WP_Query($args);

?>
			<ul class="ova-blog ova-<?php echo esc_attr( $number_column ); ?>">
				<?php
				  	if($blog->have_posts()) : while($blog->have_posts()) : $blog->the_post();
			  	?>
				  	<li class="item">

<?php
						  	    $post_id   = get_the_ID();
						  		$size_img  = 'large' ;
							  	$thumbnail = wp_get_attachment_image_url(get_post_thumbnail_id() , $size_img );
							  	$url_thumb = $thumbnail ? $thumbnail : \Elementor\Utils::get_placeholder_image_src();
						  	?>
						  	<div class="box-img">

<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
								  	<img src="<?php echo esc_url( $url_thumb ) ?>" alt="<?php the_title(); ?>">
							  	</a>

</div>

<?php if( $show_author == 'yes' ){ ?>
								<div class="post-author">
							  		<span class="by"><?php echo esc_html__('BY: ', 'nighty'); ?></span>
							  		
								  	<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
									  	<?php the_author_meta( 'display_name' ); ?>
								  	</a>
							    </div>
						    <?php } ;?>

</div>

<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
										<?php the_title(); ?>
									</a>

</h2>

<?php } ?>

<?php if( $show_comment == 'yes' ): ?>
								  	<li class="item-meta  post-comment">
									  	<span class="comment">
										  	<?php
										  		comments_popup_link(
											  	esc_html__('Comments (0)', 'nighty'), 
											  	esc_html__('Comments (1)', 'nighty'), 
											  	'Comments (%)',
											  	esc_html__( 'Comment off', 'nighty' ) )
										  	; ?> 
									  	</span>            
								  	</li>
							  	<?php endif; ?>

</ul>

</div>
				  		
				  	</li>
				<?php
				  	endwhile; endif; wp_reset_postdata();
			    ?>
			</ul>
		<?php
	}
}
$widgets_manager->register( new Nighty_Elementor_Blog() );

🔐 Sid Gifari File Manager Pro