Creation of New Archive Shortcode

Dear fellow coders,

On my website I would like to have a shortcode, like the archive shortcode, but only with the featured image and title visible. I thought it would be handy to create a new shortcode for this in my function.php file in my child theme..

However, I can't find a way to retrieve a list of open events and their image..

Can someone help me a hand on this or know a easier way to succeed in this?

Many thanks in advance.

Kind regards,

Simon

  • Predrag Dubajic

    Hey Simon,

    Hope you're doing well today :slight_smile:

    Modifying the shortcode itself to get it working this way could require some complex coding and my suggestion would be creating custom template for Events archive and there adjust it so it shows only featured image and title.

    I've attached modified file below which you can place inside your child theme root folder and after that when you go to /events/ page you should see only title and featured image.

    You may want to modify the file a bit more to accomplish same HTML structure that your theme uses.

    Would this work for you?

    Best regards,
    Predrag

  • Simon

    Dear Predrag,

    I am perfect and yourself?

    I understand, but the problem is that I need a shortcode to present the list inside another page...

    Therefore I thought it would be easier not to adjust the present shortcode, but to build a new function that I will put into a custom shortcode. However, I can't return the events with coding..

    The PHP file you send gives good insides in this, but does not work within a specific function.

    kind regards,

    simon

  • Predrag Dubajic

    Hi Simon,

    Ah, ok, we could try different approach by using default query for custom post type with just title and image.
    Can you try downloading attached file, unzip it and place it inside wp-content/mu-plugins/ folder, if you don't have that folder create one yourself.

    After that try using this shortcode in your page content:
    [custom_events_shortcode]

    Let us know if that'll work for you :slight_smile:

    Best regards,
    Predrag

  • Simon
    function list_events(){
    
            $args = array(
                'post_type' => 'incsub_event',
                'post_status' => 'publish'
            );
    
            $string = '';
            $query = new WP_Query( $args );
            if( $query->have_posts() ){
                $string .= '<ul>';
                while( $query->have_posts() ){
                    $query->the_post();
                    $string .= '<li class="event_list"><a href="'.get_post_permalink().'">';
                    $string .= '<div class="event_list_featured_image">' . get_the_post_thumbnail() . '</div>';
                    $string .= '<h2>' . get_the_title() . '</h2></a></li>';
                }
                $string .= '</ul>';
            }
            wp_reset_postdata();
            return($string);
    }
    
    add_shortcode('custom_event_list','list_events');

    To make it awesome in styling as well add this CSS:

    /* shortcode events  */
    
    .event_list:hover{
        -webkit-box-shadow: 5px 15px 15px rgba(0, 0, 0, .2) !important;
        -moz-box-shadow: 5px 15px 15px rgba(0, 0, 0, .2) !important;
        box-shadow: 5px 15px 15px rgba(0, 0, 0, .2) !important;
        -webkit-transition: all 0.1s linear;
        -o-transition: all 0.1s linear;
        -moz-transition: all 0.1s linear;
        -ms-transition: all 0.1s linear;
        kthtml-transition: all 0.1s linear;
        transition: all 0.1s linear;
        margin-bottom: 0px;
        background-color: #bcbcbc;
    }
    
    .event_list{
        width: 20%;
        background-color: #e5e5e5;
        list-style: none;
        float: left;
        margin-right: 2%;
    }
    
    .event_list h2{
        text-align: center;
        border-top: 4px solid #001144;
        padding-top: 15px;
        padding-bottom: 15px;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    .event_list .event_list_featured_image{
        height:160px;
        overflow: hidden;
    }