Upcoming events widget styling


I'm trying to style upcoming events in the same way other lists are being displayed (e.g. recent posts)

Out of the box I have some issues
- read more, whilst I can get elipses by setting except length, no read more is displayed, is there a trick to this or not?
- The format of the title appears to be hard coded to be image title, and the style I would like to achieve is title (block) followed by image float left of the excerpt. Are there filters available for this widget to allow restructuring the output?

  • Patrick

    Hi there @Locally

    I hope you are having a great day!

    I just tried the standard code tweak to customize the "Read more" link as seen here, but it does not want to work with the events widget.

    You can see the custom text just fine in the post in the archive on my test site here:

    ... but the events widget in the sidebar still shows the ellipsis. :slight_frown:

    I'll see if I can find someone more codeworthy to help out with that one.

    As for the layout issues, that largely depends on the theme you are using, as most of the styling is inherited from the widget styles from your theme.

    it would be much easier to help out if we could see an example of what you are trying to modify. Can you please post a link to a page on your site where the widget can be seen?

  • Fullworks

    I had a look in the code and there isn't any filters of hooks that can help, its hard coded that way, which isn't the greatest when trying to make a consistent style on a sidebar.

    It is coded as a class, actually an extension of a class

    class Eab_Upcoming_Widget extends Eab_Widget {
    	   snip ...
        function widget ($args, $instance) {
             .... hard coded layout ....

    I did try to extend the extension in my functions.php e.g.

    add_action('plugins_loaded', 'my_extension');
    function my_extension() {
    	class My_Upcoming_Widget extends Eab_Upcoming_Widget {
        	function widget ($args, $instance) {
            /* my code */

    but can't seem to be able to replace the widget function, I'm sure it is a lack of by understanding of classes

  • Ash

    Hello @Locally

    I hope you are well today.

    To show read more text, please go to /wp-content/plugins/events-and-bookings/lib/widgets/Wpcoming_Widget.class.php line no 73 and replace:
    if (!empty($options['excerpt']) && !empty($excerpt)) echo '<p>' . $excerpt . '</p>';
    if (!empty($options['excerpt']) && !empty($excerpt)) echo '<p>' . $excerpt . '</p>' . '<p><a href="'.get_permalink( $_event->get_id() ).'">[Read more]</a></p>';

    Please note that, this changes will be lost in next update. So it's worth to note down this changes somewhere and apply again after your updates.

    About the image issue, use the following css:

    #event-popular h2 a img {
    float: left;
    margin-right: 5px;
    #event-popular h2 br{
    display: none;
    #event-popular h2{
    margin-bottom: 4px !important;

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    Hope it helps :slight_smile: Please feel free to ask more question if you have.


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.