Install and activate the Elementor plugin on your WordPress site.

Create a custom plugin for your widget. This plugin will contain the code for your widget, and will allow you to extend the functionality of Elementor.

Use the Elementor widget API to register your widget with Elementor. This will make your widget available to use in the Elementor editor.

Use the WordPress HTTP API or a third-party API client like Guzzle to make an HTTP request to a sports API that provides score and standings data for the Toronto Raptors.

Parse the response from the API and extract the relevant data for the score and standings.

Use the Elementor template system to create the HTML and CSS for your widget, and use the extracted data to display the score and standings in your widget.

Use the Elementor controls system to create options for your widget that allow the user to customize the appearance and behavior of your widget.

This is how you can create a custom widget in Elementor:

<?
namespace Elementor;

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

class Raptors_Widget extends Widget_Base {

  public function get_name() {
    return 'raptors-widget';
  }

  public function get_title() {
    return __( 'Raptors Score and Standings', 'raptors-widget' );
  }

  public function get_icon() {
    return 'fa fa-basketball-ball';
  }

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

  protected function _register_controls() {
    $this->start_controls_section(
      'section_score',
      [
        'label' => __( 'Score and Standings', 'raptors-widget' ),
      ]
    );

    $this->add_control(
      'title',
      [
        'label' => __( 'Title', 'raptors-widget' ),
        'type' => Controls_Manager::TEXT,
        'default' => __( 'Raptors Score and Standings', 'raptors-widget' ),
      ]
    );

    $this->add_control(
      'api_key',
      [
        'label' => __( 'API Key', 'raptors-widget' ),
        'type' => Controls_Manager::TEXT,
        'default' => '',
      ]
    );
    $this->end_controls_section();
  }

protected function render() {
    $settings = $this->get_settings_for_display();

    $api_key = $settings['api_key'];
    $team_id = '1610612761'; // Toronto Raptors team ID
    $response = wp_remote_get( "https://api.sportradar.us/nba/trial/v7/en/teams/$team_id/schedule.json?api_key=$api_key" );
    $data = json_decode( wp_remote_retrieve_body( $response ) );

    $score = $data->games[0]->home->score . ' - ' . $data->games[0]->away->score;
    $standings = $data->games[0]->home->standings;

    echo '<h2>' . esc_html( $settings['title'] ) . '</h2>';
    echo '<p>Score: ' . esc_html( $score ) . '</p>';
    echo '<p>Standings: ' . esc_html( $standings ) . '</p>';
  }
}

Plugin::instance()->widgets_manager->register_widget_type( new Raptors_Widget() );

Categorized in:

Wordpress

Tagged in:

, , ,