Question 166384 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I display selected categories post Title & thumbnail using an Elementor SELECT2 Control in WordPress?

I have created an elementor SELECT2 Control and now I want to display selected categories post Title and thumbnail

I have created a custom post type which is ‘post_type’ => ‘video’ in my control displayed all the video categories now i want to display all selected that posts Title and Thumbnail in Elementor content_template() and render() function..



    <?php  

$options = array();

$args = array(
    'hide_empty' => false,
    'post_type'     => 'video',
    'taxonomy'  => 'video_categories',

);

$categories = get_categories($args);

foreach ( $categories as $key => $category ) {
    $options[$category->term_id] = $category->name;
}

$this->add_control(
    'video_categories',
    [
        'label' => __( 'Post Categoris', 'plugin-domain' ),
        'type' => ElementorControls_Manager::SELECT2,
        'multiple' => true,
        'options' => $options,
        
    ]
);

}

// Want to display selected posts title and thumbnale in loop

protected function render() {
    $settings = $this->get_settings_for_display();
    foreach ( $settings['show_elements'] as $element ) {
        echo '<div>' . $element . '</div>';
    }

}

protected function _content_template() {
    ?>
    <# _.each( settings.show_elements, function( element ) { #>
        <div>{{{ element }}}</div>
    <# } ) #>
    <?php
}


}

?> ```
Tags:

2

Answers


  1. 0

    First of all, you have to change
    $settings['show_elements']
    to
    $settings['video_categories']

    $element showes only the IDs of the selected categories.

    With this WP-functions you get i.e. the Name of the Category by ID in the render output:
    get_cat_name( int $cat_id )

    For getting a post loop of the selected categories, you have to look further.

    Login or Signup to reply.
  2. 0

    Maybe somebody can improve it or check it.

    As I did you can create two functions, one you will pass to the select2 control type
    as the ‘options’ parameter which will populate only the ‘value’ and the ‘text’ within
    the options tags. The code will look something like this:

    //The add_control method that populates de select2 field
$this->add_control(
    'filter_cloud_tags',
    [
        'label' => esc_html__( 'Select Tags', 'tw360-elementor-add-on'),
        'type' => ElementorControls_Manager::SELECT2,
        'multiple' => true,
        'default' => 'all',
        'options' => $this->getControlTags(),
    ]
);

    getControlTags() return an array with the options for the select2 field
    like this value => name, the choosen values will be returned to pass them later into the render() method.
    html returned by elementor in my case ‘slug}”>{tag->name}

            /*The two functions -> */
        protected function getControlTags()
        {
            $args = array(
                'taxonomy'           => 'post_tag',
                'orderby'            => 'count',
                'order'              => 'DESC',
                'hide_empty'         => true,
            );
        
            foreach (get_tags($args) as $tag):
                $tags[$tag->slug] = $tag->name . "($tag->count)";
            endforeach;
        
            return $tags;
        }
        
        protected function getTags($limit = 10, $include = [])
        {
        
            $args = array(
                'taxonomy'           => 'post_tag',
                'orderby'            => 'count',
                'order'              => 'DESC',
                'hide_empty'         => true,
                'include'            => $include,
                'number'             => $limit,
            );
            $tags = get_tags($args);
            
            return $tags;
        }

    And then in the render method you could pass some parameters to the second function which is
    getTags($limit = 10, $include = []) limit = maximum number of tags to return and include = the specific tags to return
    which in my case is by slug which I passed to the value attributes of the select2 options in the first add_control method

    In my render function I check that if specicif tags are choosen then the ‘limit’ parameter will be the number of choosen tags.
    If you do not set it to the number of choosen tags when specific tags are choosen then you may not see all the choosen tags when render.

    //This is my render function
protected function render() {

    $settings = $this->get_settings_for_display();
    if(is_array($settings['filter_cloud_tags']) && count($settings['filter_cloud_tags']) > 0)
        $limit = count($settings['filter_cloud_tags']);
    else
        $limit = $settings['tag_limit'];

    $this->add_inline_editing_attributes('cloud_title','basic');
    $this->add_render_attribute(
        'wrapper', [
            'class' => ['elementor-widget-wp-widget-tag_cloud'],
        ]
    );
    $this->add_render_attribute(
        'cloud_title', [
            'class' => ['tw360_sidewiget_title'],
        ]
    );
    ?>

    <div <?php echo $this->get_render_attribute_string('wrapper') ?>>
        <?php if($settings['cloud_title']){ ?>
        <h5 <?php echo $this->get_render_attribute_string('cloud_title') ?>><?php echo $settings['cloud_title'] ?></h5>
        <?php } ?>
        <div class="tagcloud">
            <?php 
            foreach($this->getTags($limit, $settings['filter_cloud_tags']) as $tag){
                if($settings['show_tag_count'] == 1){
            ?>
                <a href="<?php echo get_tag_link($tag->term_id) ?>"><?php echo $tag->name." (".$tag->count.")"; ?></a>
            <?php }else{ ?>

                <a href="<?php echo get_tag_link($tag->term_id) ?>"><?php echo $tag->name; ?></a>
            <?php } ?>
        <?php } ?>
        </div>
    </div>

    <?php

}

    At last I leave you the add_control method that shows you the text field to set the limit and
    a switcher in case you also want to show the number of posts for that tag.

    $this->add_control(
    'tag_limit',
    [
        'label'   => esc_html__('Limit', 'tw360-elementor-add-on'),
        'type'    => ElementorControls_Manager::TEXT,
        'default' => 10
    ]
);

$this->add_control(
    'show_tag_count',
    [
        'label' => esc_html__('Show Count', 'tw360-elementor-add-on'),
        'type' => ElementorControls_Manager::SWITCHER,
        'return_value' => '1',
        'default' => '0'
    ]
);

    Hope this is helpfull for someone.

    If you modify it a little with the right wp methods it will work for categories, posts, custom posts and custom taxonomies…
    Sorry this is not the right exact function you wanted but I needed an explatation like this long time ago and I think
    you (the reeder) could make it even more usefull for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search