Support » Plugin: Very Simple Event List » Using a custom snippet for widget and event list

  • I love this plugin. It’s simple and does it’s job. One thing that I really would love to see is an option to use my own HTML code for an event to have full control. There need to be predefined variables that could be included into the snippet. The snippet will then be used for each event.

    The result might look like this:

    <div class="event">
      <h4 class="event-title">{vselTitleWithLink}</h4>
      <div class="event-content">
        <p class="event-date">{vselStartAndEndDate}</p>
        <p class="event-time">{vselTime}</p>
        <p class="event-location">{vselLocation}</p>
      <a class="event-link button" href="{vselLink}">More...</a>

    Thanks for VSEL!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Guido



    So the HTML is your own and the variables such as vselLocation and vselLink are standalone functions you could output everywhere on your site, when VSCF is activated?


    Hi Guido,
    thanks for your answer and interest! Yes, exactly. I (plugin user) write the snippet. Your plugin parses it and replaces every occurence of {VARIABLE_NAME} with the defined variable value. At least, that’s one typicall approach used by other WP plugins.
    VSEL offers the list of variables that can be used in the snippet. They might or might not start with “vsel”.

    The variables could be:


    To be able to control the displayed events, the allready implemented attributes might be to use as a HTML data attribute. eg:

    <div data-vsel="posts_per_page:5;event_cat:'first-category, second-category'">
      <div class="event">

    Or using single attributes:

    <div data-vsel-posts_per_page="5" data-vsel-event_cat="first-category, second-category">
      <div class="event">

    You may even add some logic like:

    <p data-vsel-if="no_events==true">Sorry, no events this time</p>
    <div data-vsel-if="no_events==false">
     Here are the upcomming events

    Or maybe easier: provide it as a variable I may then controll via CSS

    <div class="{vselEventsClass}">
      <p class="no">Sorry, no events this time</p>
      <p class="yes">Here are the upcomming events...</p>

    Where vselEventsClass is either “events”, when at least one event is given or “no-events” when no event is available.

    In my CSS I could then use selectors like this:

    .no-events > .yes, .events > .no {
      display: none;

    Of course, the vsel settings like “don’t show the date” are not relevant when using a HTML snippet as this is then responsible for the informationen it wants to provide.


    Plugin Author Guido


    Hi Daniel,

    I will definitely consider including this because I like the idea. To use it outside the plugin I must create a function for each variable or a shortcode. Guess a function is a cleaner and more common way.

    An alternative is creating a custom plugin that contains all functions described above, in case including this in VSEL itself causes a problem/conflict.

    Am currently busy working on another plugin, but will look into this later this week.


    I’m happy to read that you like the idea.

    I would define the snippet directly on the VSEL settings page. (Or an additional vessel snippet page.) IMHO this would make it easier for you to deal with it and I only have a little shortcode in my text.

    In the first step, one single snippet is enough, but being able to add more snippets might be a cool feature. Each snippet might then be used using a shortcode and an id.

    [vsel id="23"]

    The shortcode might be displayed directly beside the snippet. Or – more readable – I can give my snippet a name and use this instead:

    [vsel snippet="myevents"] or [vsel name="myevents"]

    Good luck with your other plugin. What is it about?


    Me again,
    would be cool to be able to provide at least two snippets. One to be used for the widget in a sidebar and one on the list of events. And to make it complete, the third snippet could be the single event page.

    Plugin Author Guido


    Hi Daniel,

    Have thought about this again but it might not be as simple as we think.. to display a list with events they should be inside a loop. So every new meta function as described before (date, time, location, etc) will only work if it’s operating inside this loop. So your custom HTML snippet will only work if there’s also an operator that contains this loop. And this loop should be having an unique ID/prefix otherwise it might conflict with other loops on your site. Any thoughts about this?

    You’re not able to make the changes you want using custom CSS via the CSS page in the Customizer? Current event list only contains very little styling, just enough to make it look nice.


    Good morning Guido,
    I’m very happy to see you interested in your users suggestions and I have a huge respect for your effort. If the implementation is far more work than expected, it would probably be much easier to maybe add some additional HTML and classes and just style the thing using CSS. So in other words: Keep it simple.

    I’m totally new to WP-Plugin programming so my ideas might be harder to implement than I think.

    After taking a deeper look at the widget and your code, here is how I would try to implement it:

    – A snippet consists of two parts. The html code and a name. It can be defined on the plugins setting page.
    – It can be included using a shortcode. Additional attributes might be given in the shortcode – comparable to your current implementation.

    [vsel-snippet name="mysnippet" posts_per_page="5"]

    Some Pseudocode to illustrate the idea:

    snippet = getSnippet($snippet['name']);
    if (snippet)
        properties = getSingleEventProperties() // include 'vsel-meta.php';
        output = replaceSnippetVariablesWithEventProperties(properties ) // include 'vsel-snippet.php';

    Some suggestions
    In vsel-widget-meta.php instead of using an individual variable for each data, I would use a hash. This would make it much easier to simply replace strings from the snippet.

    So instead of

    $widget_start_date = get_post_meta( get_the_ID(), 'event-start-date', true );
    $widget_end_date = get_post_meta( get_the_ID(), 'event-date', true );
    $widget_time = get_post_meta( get_the_ID(), 'event-time', true ); 

    You might use this:

    $props = ['event-start-date', 'event-date', 'event-time'];
    $id = get_the_ID();
    $vselProps = [];
    foreach ($props as $prop => $val) {
      $vselProps[] = get_post_meta( $id, $val, true );

    Add additional properties

    $vselProps['event-title-with-link'] = '<a href="'. get_permalink() .'" rel="bookmark" title="'. get_the_title() .'">'. get_the_title() .'</a>';

    And in your snippet script you might then search for the {…} patterns and replace them.

    Here is a small proof of concept I just wrote:

    $snippet = '<div class="event">
      <h4 class="event-title">Start: {start-date}</h4>
      <div class="event-content">
        <p class="event-date">End: {end-date}</p>
        <p class="event-time">Time: {time}</p>
        <p class="event-location">At: {location}</p>
    $props = ['event-start-date' => 'Today', 'event-end-date' => 'Tomorrow', 'event-time' => '12:00-14:00', 'event-location' => "home"];
    $vselProps = [];
    foreach ($props as $prop => $val) {
      // remove the "event-" part just to keep it simple in the snippet
      $propWithoutEventPrefix = preg_replace("/^event-/", "", $prop);
      $vselProps[$propWithoutEventPrefix] = $val;
    // replace all occurences in the snippet
    echo preg_replace_callback(
      function ($foundPattern) {
        global $vselProps;
        return $vselProps[$foundPattern[1]];


    Plugin Author Guido


    Hi Daniel,

    And ik becomes more and more complex every time 😉

    Between you and me, I’m not a very experienced programmer and that’s why my plugins have a very solid and easy to understand code structure. And I want to keep it that way. It seems that in order to do this properly I need a partial rewrite of my plugin and this is too much for me. And I don’t like to include third party scripts, without fully understanding it, so that’s why I want to build it myself. But it’s not as easy as I thought before..

    As mentioned before, a good alternative would be a custom plugin with it’s own shortcode that contains the event list how you want it. You can retrieve all meta options directly from the database and use your own custom loop.


    I like your straight point of view and am totally fine with your answer.

    Finally your plugin and this discussion helped me a lot to understand the practical nature of WP plugins.

    Have a good day

    Plugin Author Guido


    Hi Daniel,

    I thought it was possible without making heavy changes to my plugin, but when I take a closer look my new conclusion is it’s a lot of work and not easy to do 🙁 It’s a partial rewrite of my plugin, for sure.

    All the elements of the list itself (title, date, time, etc) are included in file vsel-list and vsel-widget-list. So I was thinking about including all these elements in one function and putting all elements in an array. Then you can hook into this function afterwards and change array order. But it’s just too much work for me right now.




    What about overwriting the template files by sourcing those from theme/vse folder like Tribe event plugin?

    Plugin Author Guido


    Hi there,

    Maybe I will add this in a future release, because for that I should make some major changes too. Might have to change file structure even.

    And to be honest, I like the layout of my plugin as it is now; it’s very simple and using some custom CSS you can change it’s appearance completely.


Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.