wpxdm

  • Services
    • WordPress Maintenance Troubleshooting and Support
    • Recent Work
  • About
  • Contact
  • Blog

How to Create an Event Flag in The Events Calendar by Modern Tribe

December 29, 2017 by Eric Gauvin Leave a Comment

You can easily add a flag next to your events listing in The Events Calendar by Modern Tribe. Simply compare the event’s date with today’s date. I recently implemented this on the Avon Free Public Library website. I also included a flag for events happing tomorrow.

an event title flagged as happing today
How to create an event flag in The Events Calendar by Modern Tribe

As you can see below, we simply compare dates and create a small div which you can style any way you want. I included my css below.

//This goes somewhere in your loop where you have access to the post ID 
//in order to get its start date with tribe_get_start_date

//begin event flag
date_default_timezone_set('America/New_York');
$today = new DateTime('today');
$tomorrow = new DateTime('tomorrow');
$event_date = new DateTime(tribe_get_start_date($post->ID, false, 'Y-m-d'));
$event_flag = '';

if ($event_date == $today){
  $event_flag = '<div class="event-flag">Today!</div>';
}
if ($event_date == $tomorrow){
  $event_flag = '<div class="event-flag">Tomorrow!</div>';
}
//end event flag

This is how to output the flag on your page. I included some of the surrounding code for context. As you can see, I don’t use conditionals here since it’s initially set to nothing.

<?php echo $event_flag; ?><!--begin .front-page-list-info-->
        <div class="front-page-list-info">
           
            <?php echo ($event_featured_heading != "") ? '<div class="featured-heading">'.$event_featured_heading.'</div>' : ''; ?>
            <?php echo $event_flag; ?>

        <?php
        echo '<h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>';

Here’s an example of the css I’m using. The key things to pay attention to are how to align the flag correctly with other elements. In this case, the secret sauce is “position: relative;” and “top: -1px;”.

.event-flag {
    position: relative;
    top: -1px;
    margin: -3px 0 .8em 0;
    padding: 2px 7px;
    display: inline-block;
    background-color: $bright-purple;
    color: white;
    font-size: .6em;
    font-family: $font__main;
    text-transform: uppercase;
}
 

Filed Under: Design, Development, Work

BrightRising

November 15, 2015 by Eric Gauvin Leave a Comment

BrightRising (formerly Dayspring Arts and Education) offers high quality educational experiences and courses in a fun, creative, group setting. They came to Expient for an assessment of their website design and branding strategy. They wanted to take their website to the next level with a fresh contemporary look that will connect with parents and students and showcase their three business segments of arts, academics and travel.

Rebranding with a New Logo

The project also included rebranding with a new logo.

View Site

Filed Under: Work

Asetta Music

July 3, 2013 by Eric Gauvin

portfolio_screen_01_asettamusic

Mike Asetta is a highly-respected, professional musician and came to Expient for a site that would showcase his music performance with the right personality and tone. The target audience includes both prospective customers and fellow musicians, so the look needed to be professional yet genuine. The black and white color palette is crisp and formal, while the photography references the laid-back look of a 1950’s jazz session.

This site was built with WordPress. It’s fully responsive and has audio clips and a performance calendar.

View Site

Filed Under: Work

The Latimer Group

July 3, 2013 by Eric Gauvin

portfolio_screen_02_latimer-groupThe Latimer Group is an Information Technology Staffing Agency with global reach and multi-faceted service offerings. Their target audience requires detailed technical information that’s clear and organized. Through the use of color, typography and a playful branding animation on the home page, a clear and consistent message is reinforced across the site.

View Site

Filed Under: Work

IT Consulting Consortium Services

July 3, 2013 by Eric Gauvin

portfolio_screen_02_itccsIT Consulting Consortium Services is one of the fastest growing independent software consulting firms in the New York Metropolitan area. Their target audience is broad and requires a wide range of information on the site. Through the use of no-nonsense lists, sidebar boxes, headings and a clean, uncluttered and consistent visual design, customers can quickly find the information they need.

View Site

Filed Under: Work

Search

Newsletter

Subscribe to my mailing list for all the latest news updates.

* indicates required

Recent Posts

  • Understanding Time Zones in The Events Calendar by Modern Tribe
  • How to Create an Event Flag in The Events Calendar by Modern Tribe
  • Review: Optitek Computer Readers by Select-A-Vision

About Me

Hi. I love designing and building websites with WordPress. I have many years experience working on websites for large corporations, and I'd like to use my skills and experience to bring your website idea to life. Read More…

Location

I'm nestled in the heart of New England's quaint Farmington Valley.

Expient LLC
71 Brookmoor Road, Avon CT, 06001

Start a Project

I'd love to hear about your upcoming project. Tell me about it by filling out my contact form.

Or, give me a call at 860-335-6082.

Connect

  • Dribbble
  • Email
  • Facebook
  • GitHub
  • Google+
  • LinkedIn
  • Pinterest
  • Tumblr
  • Twitter

Copyright © 2023 Expient LLC | Expient® is a registered trademark of Expient LLC.

Copyright © 2023 · Agency Pro Theme for expient on Genesis Framework · WordPress · Log in

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT