First, you’ll need to sign up for an API key from the CBC. You can do this by visiting the CBC website and signing up for a developer account.
Next, create a new plugin for your Elementor extension. You can do this by creating a new folder in your wp-content/plugins directory and adding a plugin.php file to it.
In your plugin.php file, add the following code to create an Elementor widget:
<?php
class CBC_News_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'cbc-news-widget';
}
public function get_title() {
return __( 'CBC News Widget', 'plugin-name' );
}
public function get_icon() {
return 'fa fa-newspaper';
}
public function get_categories() {
return [ 'general' ];
}
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __( 'Content', 'plugin-name' ),
'tab' =>\Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'query',
[
'label' => __( 'Search Query', 'plugin-name' ),
'type' =>\Elementor\Controls_Manager::TEXT,
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$query = $settings['query'];
if ( ! empty( $query ) ) {
// Fetch the news data from the CBC API
$api_key = 'YOUR_API_KEY_HERE';
$url = "https://www.cbc.ca/aggregate_api/v1/search?q=$query&limit=10&api_key=$api_key";
$response = wp_remote_get( $url );
$data = json_decode( $response['body'], true );
if ( 200 === $response['response']['code'] ) {
// Display the news data
foreach ( $data['results'] as $result ) {
echo '<h3>' . $result['headline'] . '</h3>';
echo '<p>' . $result['summary'] . '</p>';
echo '<p>Read more: <a href="' . $result['url'] . '">' . $result['url'] . '</a></p>';
}
}
}
}
}