<?php
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
class Custom_Podcast_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'custom_audio_podcast';
}
public function get_title() {
return __('Custom Audio Podcast', 'plugin-name');
}
public function get_icon() {
return 'eicon-play';
}
public function get_categories() {
return ['general'];
}
protected function register_controls() {
$this->start_controls_section(
'author_section',
[
'label' => __('Author Information', 'plugin-name'),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'author_name',
[
'label' => __('Author Name', 'plugin-name'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => __('Author Name', 'plugin-name'),
]
);
$this->add_control(
'author_image',
[
'label' => __('Author Image', 'plugin-name'),
'type' => \Elementor\Controls_Manager::MEDIA,
'media_type' => 'image',
]
);
$this->end_controls_section();
// Content section
$this->start_controls_section(
'content_section',
[
'label' => __('Content', 'plugin-name'),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$repeater = new \Elementor\Repeater();
$repeater->add_control(
'media_type',
[
'label' => __('Media Type', 'plugin-name'),
'type' => \Elementor\Controls_Manager::SELECT,
'options' => [
'audio' => __('Audio', 'plugin-name'),
'video' => __('Video', 'plugin-name'),
],
'default' => 'audio',
]
);
$repeater->add_control(
'file',
[
'label' => __('Media File', 'plugin-name'),
'type' => \Elementor\Controls_Manager::MEDIA,
'media_type' => ['audio', 'video'],
]
);
$repeater->add_control(
'thumbnail',
[
'label' => __('Thumbnail', 'plugin-name'),
'type' => \Elementor\Controls_Manager::MEDIA,
'media_type' => 'image',
]
);
$repeater->add_control(
'title',
[
'label' => __('Title', 'plugin-name'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => __('Podcast Title', 'plugin-name'),
]
);
$repeater->add_control(
'subtitle',
[
'label' => __('Subtitle', 'plugin-name'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => __('Subtitle', 'plugin-name'),
]
);
$repeater->add_control(
'broadcast_label',
[
'label' => __('Broadcast Label', 'plugin-name'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => __('Broadcast on:', 'plugin-name'),
'label_block' => true,
]
);
$repeater->add_control(
'release_date',
[
'label' => __('Release Date', 'plugin-name'),
'type' => \Elementor\Controls_Manager::DATE_TIME,
'default' => '',
'label_block' => true,
]
);
$this->add_control(
'podcast_items',
[
'label' => __('Podcast Items', 'plugin-name'),
'type' => \Elementor\Controls_Manager::REPEATER,
'fields' => $repeater->get_controls(),
'default' => [],
'title_field' => '{{{ title }}}',
]
);
$this->end_controls_section();
$this->start_controls_section(
'content_post',
[
'label' => __('Content Post', 'plugin-name'),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'post_count',
[
'label' => __('Number of Posts', 'plugin-name'),
'type' => \Elementor\Controls_Manager::NUMBER,
'default' => 4,
]
);
$this->add_control(
'post_category',
[
'label' => __('Post Category', 'plugin-name'),
'type' => \Elementor\Controls_Manager::SELECT2,
'options' => $this->get_post_categories(),
'multiple' => false,
'default' => '',
]
);
$this->end_controls_section();
}
private function get_post_categories() {
$categories = get_terms('category');
$category_options = [];
if (!empty($categories)) {
foreach ($categories as $category) {
$category_options[$category->term_id] = $category->name;
}
}
return $category_options;
}
protected function render() {
$settings = $this->get_settings_for_display();
if ($settings['podcast_items']) {
echo '<div class="custom-podcast-faq-widget">';
echo '<div class="faq-header">';
echo '<div class="faq-header-image"><img src="' . esc_url($settings['author_image']['url']) . '" alt="' . esc_attr($settings['author_name']) . '"></div>';
echo '<div class="faq-header-title">' . esc_html($settings['author_name']) . '</div>';
echo '<div class="faq-header-arrow">';
echo '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 -4.5 20 20" version="1.1">
<title>arrow_down [#338]</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Dribbble-Light-Preview" transform="translate(-220.000000, -6684.000000)" fill="#000000">
<g id="icons" transform="translate(56.000000, 160.000000)">
<path d="M164.292308,6524.36583 L164.292308,6524.36583 C163.902564,6524.77071 163.902564,6525.42619 164.292308,6525.83004 L172.555873,6534.39267 C173.33636,6535.20244 174.602528,6535.20244 175.383014,6534.39267 L183.70754,6525.76791 C184.093286,6525.36716 184.098283,6524.71997 183.717533,6524.31405 C183.328789,6523.89985 182.68821,6523.89467 182.29347,6524.30266 L174.676479,6532.19636 C174.285736,6532.60124 173.653152,6532.60124 173.262409,6532.19636 L165.705379,6524.36583 C165.315635,6523.96094 164.683051,6523.96094 164.292308,6524.36583"></path>
</g>
</g>
</g>
</svg>';
echo '</div>';
echo '</div>';
echo '<div class="faq-content" style="display:none;">';
foreach ($settings['podcast_items'] as $item) {
$media_type = $item['media_type'];
$file_url = $item['file']['url'];
$title = $item['title'];
$subtitle = $item['subtitle'];
$broadcast_label = $item['broadcast_label'];
$release_date = $item['release_date'];
if ($media_type === 'audio') {
$thumbnail = wp_get_attachment_image_src($item['thumbnail']['id'], 'full')[0];
echo '<div class="podcast-item podcast-audio">';
echo '<div class="podcast-thumbnail"><img src="' . esc_url($thumbnail) . '" alt="' . esc_attr($title) . '"></div>';
echo '<div class="podcast-info">';
echo '<h3 class="podcast-title">' . esc_html($title) . '</h3>';
echo '<p class="podcast-subtitle">' . esc_html($subtitle) . '</p>';
if (!empty($release_date)) {
echo '<p class="podcast-release-date">' . esc_html($broadcast_label) . ' ' . esc_html(date('F j, Y', strtotime($release_date))) . '</p>';
}
echo '<audio controls><source src="' . esc_url($file_url) . '" type="audio/mpeg"></audio>';
echo '</div>'; // .podcast-info
echo '</div>'; // .podcast-item
} elseif ($media_type === 'video') {
echo '<div class="podcast-item podcast-video">';
echo '<div class="video-thumbnail">';
echo '<div class="icon-play-podcast"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9l0-176c0-8.7 4.7-16.7 12.3-20.9z"/></svg> </div>';
echo '<video class="video-popup-trigger" src="' . esc_url($file_url) . '" muted></video>';
echo '</div>';
echo '<div class="podcast-info">';
echo '<h3 class="podcast-title">' . esc_html($title) . '</h3>';
echo '<p class="podcast-subtitle">' . esc_html($subtitle) . '</p>';
if (!empty($release_date)) {
echo '<p class="podcast-release-date">' . esc_html($broadcast_label) . ' ' . esc_html(date('F j, Y', strtotime($release_date))) . '</p>';
}
echo '<button class="watch-now-btn video-popup-trigger" data-video="' . esc_url($file_url) . '">Watch Now</button>';
echo '</div>';
echo '</div>';
}
}
if (!empty($settings['additional_card_items'])) {
echo '<div class="additional-podcast-cards">';
$post_count = !empty($settings['post_count']) ? intval($settings['post_count']) : 3;
$category_id = !empty($settings['post_category']) ? intval($settings['post_category']) : 0;
var_dump($post_count);
var_dump($category_id);
$args = array(
'posts_per_page' => $post_count,
'category__in' => array($category_id),
);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo '<div class="additional-card-item">';
echo '<div class="card-image" style="position: relative;">';
echo '<img src="' . get_the_post_thumbnail_url(get_the_ID(), 'full') . '" alt="' . get_the_title() . '">';
echo '<a class="play-link" href="' . get_the_permalink() . '">';
echo '<svg aria-hidden="true" class="e-font-icon-svg e-fas-play" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>';
echo '</a>';
echo '<p class="card-date">' . get_the_date() . '</p>';
echo '</div>';
echo '<div class="card-info">';
$tag_link = get_tag_link(get_the_tags()[0]->term_id);
echo '<div class="card-season-title">';
echo '<a href="' . esc_url($tag_link) . '">';
echo '<svg aria-hidden="true" class="e-font-icon-svg e-fas-headphones-alt" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M160 288h-16c-35.35 0-64 28.7-64 64.12v63.76c0 35.41 28.65 64.12 64 64.12h16c17.67 0 32-14.36 32-32.06V320.06c0-17.71-14.33-32.06-32-32.06zm208 0h-16c-17.67 0-32 14.35-32 32.06v127.88c0 17.7 14.33 32.06 32 32.06h16c35.35 0 64-28.71 64-64.12v-63.76c0-35.41-28.65-64.12-64-64.12zM256 32C112.91 32 4.57 151.13 0 288v112c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16V288c0-114.67 93.33-207.8 208-207.82 114.67.02 208 93.15 208 207.82v112c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16V288C507.43 151.13 399.09 32 256 32z"></path></svg>';
echo esc_html(get_the_tags()[0]->name);
echo '</a>';
echo '</div>';
echo '<h3 class="card-main-title"><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
echo '</div>';
echo '</div>';
}
wp_reset_postdata();
} else {
echo '<p>' . __('No posts found.', 'plugin-name') . '</p>';
}
echo '</div>'; // .additional-podcast-cards
}
echo '</div>'; // .faq-content
echo '</div>'; // .custom-podcast-faq-widget
}
}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter