Need to format Event + Widget

I want to format the widget for Event + I need to change the thumbnail size and have title and excerpt layered over the thumbnail with a colored background.

  • Sajid

    Hi Jen Nelson,
    Hope you are doing good today :slight_smile:

    I am sorry but there is no option to override the default template of Events+ widget. We have to modify the core that is totally not recommended.

    However, what you can do is use Display Posts Shortcode plugin and add its shortcode in a text widget.

    We can then try to make those events look like your screenshot.

    So now install the Display Posts Shortcode plugin.

    Add this shortcode in the text widget and post the
    [display-posts image_size="thumbnail" post_type="incsub_event" include_excerpt="true" excerpt_length="30" excerpt_more="Continue Reading" excerpt_more_link="true"]

    Once you have this added, then share the link of page where I can see the widget and try to make it like screenshot.

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Best Regards,
    Sajid

  • Sajid

    Hi Jen Nelson ,
    Hope you are doing good today :slight_smile:

    I wrote some custom PHP and some CSS code for you to display the events images like the screenshot you shared.

    Here are the steps:

    1. Use following shortcode instead:
    [display-posts image_size="full" post_type="incsub_event" include_excerpt="true" taxonomy="eab_events_category" tax_term="featured-school-event"]

    2. Add following code in functions.php file of your child theme or use it as mu-plugin.

    add_filter( 'display_posts_shortcode_output', 'be_display_posts_time', 10, 9 );
    /**
     * Add Time to Display Posts Shortcode
     * author Bill Erickson
     * obito http://www.billerickson.net/code/add-time-to-display-posts-shortcode/
     *
     * param $output string, the original markup for an individual post
     * param $atts array, all the attributes passed to the shortcode
     * param $image string, the image part of the output
     * param $title string, the title part of the output
     * param $date string, the date part of the output
     * param $excerpt string, the excerpt part of the output
     * param $inner_wrapper string, what html element to wrap each post in (default is li)
     * param $content string, post content
     * param $class array, post classes
     * @return $output string, the modified markup for an individual post
     */
    function be_display_posts_time( $output, $atts, $image, $title, $date, $excerpt, $inner_wrapper, $content, $class ) {
    	// Find out if 'include_time=true' was added to  the shortcode
    	$time = '';
    	if( isset( $atts['include_time'] ) )
    		$time = ' at ' . get_the_time( 'g:i a' );
    
    	$read_more_link = '<span class="readmore"><a class="read_more_tag" href='.get_permalink().'>Read More</a></span>';
    	// Now let's rebuild the output and add the $time to it
    	$output = '<' . $inner_wrapper . ' class="' . implode( ' ', $class ) . '">'; 
    
    		$output .=	'<div class="image_wraper">'.$image.'</div>'; 
    
    		$output .= '<div class="content_wraper">'. $title . $date . $time . $excerpt . $read_more_link . $content .'</div>';
    
    	$output .= '</' . $inner_wrapper . '>';
    	// Finally we'll return the modified output
    	return $output;
    }

    If you take the mu-plugin route, you'll want to log into your site via FTP, and go to your /wp-content/ folder via FTP, finding the folder called "mu-plugins".

    If there's no folder with that name, then you'll want to create one. Then, create a file inside that folder, and give the file any name you like (making sure the file has an extension of .php, e.g. example.php) and paste the code in there.

    It'll always be active, so there's no need to activate the plugin after creation. Be sure to add a PHP start tag at the beginning of the code, like this:

    <?php

    3. Now finally add the following CSS code in style.css file of your child theme or use Simple Custom CSS plugin.

    .shortcodes ul li.listing-item {
        background: #127ea3;
        list-style-type: none;
        margin-bottom: 35px;
    }
    li.listing-item .image_wraper img{
    width: 100%;
    height: auto;
    }
    .content_wraper {
        background: #127ea3;
        margin-right: 25px;
        margin-left: 25px;
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 10px;
        padding-top: 20px;
        display: inline-block;
        margin-top: -50px;
    }
    .content_wraper a.title {
        font-size: 24px;
        color: #fff;
        display: block;
    }
    .content_wraper span.excerpt {
        color: #fff;
    }
    .content_wraper .excerpt a{
    	display:block;
    	margin-top:10px;
    }
    .content_wraper span.readmore {
        display: block;
    }
    
    .content_wraper a.read_more_tag {
        padding: 5px 15px;
        background: #042855;
        color: #fff;
    }

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Best Regards,
    Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.