Custom Elementor Widget Code

custom_elementor_widget.php

<?php

// make sure this line is here, the Widget Base belongs to Elementor Namespace 
namespace Elementor;

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

// Extend the \Elementor\Widget_Base class
class My_Widget_Custom_Blog_Loop extends Widget_Base {
    
    // name of the widget, used internally
    public function get_name(){
        return esc_html__( 'prefix-custom-blog-loop', 'my-widget' );
    }
    
    // title of the widget displayed in the Elementor Widget Selection screen
    public function get_title(){
        return esc_html__( 'Custom Blog Loop', 'my-widget' );
    }

    // icon of the widget displayed in the Elementor Widget Selection screen
    public function get_icon(){
        return esc_html__( 'eicon-post', 'my-widget' );
    }
    
    // the widget will fall under the general tab on the Elementor Widget Selection screen
    public function get_categories(){
        return [ 'general' ];
    }

    // used for search filtering
    public function get_keywords(){
        return [ 'posts', 'loop' ];
    }
    
    // register the widget controls, say input fields, that can be fetched later on and used to dynamically alter content
    protected function _register_controls(){
        
        // title of the section
        $this->start_controls_section(
                'section_title',
                [
                    'label' => __( 'Custom Blog Loop Settings', 'my-widget' ),
                ]
        );
        
        // a sample text control
        $this->add_control(
                'title',
                [
                    'type' => \Elementor\Controls_Manager::TEXT,
                    'label' => esc_html__( 'Title', 'my_widget' ),
                    'placeholder' => esc_html__( 'Displays above the area', 'my-widget' ),
                ]
        );

        
        // a sample select control
        $this->add_control(
                'posts_per_page',
                [
                    'type' => \Elementor\Controls_Manager::SELECT,
                    'label' => esc_html__( 'Posts Per Page', 'my-widget' ),
                    'options' => [
                        '-1' => esc_html__( 'All', 'my-widget' ),
                        '5' => esc_html__( '5', 'my-widget' ),
                        '10' => esc_html__( '10', 'my-widget' ),
                    ],
                    'default' => '5',
                ]
        );

        $this->end_controls_section();
    }
    
    // method that displays the widget, we will fetch the saved values and use them to alter our widget's display
    protected function render(){
        
        // get the settings
        $settings = $this->get_settings_for_display();
        
        // get the title from the settings 
        $title = $settings['title'];
        
        // get the posts per page from the settings
        $posts_per_page = $settings['posts_per_page'];
        
        // run the code iff both of these are set
        if ( isset( $title ) and isset( $posts_per_page ) ):
            
            $args = array(
                'posts_per_page' => $posts_per_page,
                'post_type' => 'post',
            );

            $custom_posts = new \WP_Query( $args );
            if ( $custom_posts->have_posts() ):
                ?>
                <h2><?php echo $title; ?></h2>
                <?php
                while ( $custom_posts->have_posts() ):
                    $custom_posts->the_post();
                    ?>
                    <h3><?php the_title(); ?></h3>
                    <?php
                endwhile;
                wp_reset_postdata();
            endif;
        endif;
    }

    // used in the editor, will cover that in one of the next parts
    protected function _content_template(){
        
    }

}