wpxdm

Understanding Time Zones in The Events Calendar by Modern Tribe

by Leave a Comment

Time zones can be a little confusing with regard to The Events Calendar by Modern Tribe because most people probably don’t have events in multiple time zones. However, it’s very important to understand how time zones work and what settings would be best for your situation. The good news is there are some recommended settings (see below) that should work well for most websites.

First, a little bit about time zones. Obviously, you know times have a corresponding time zone that makes it possible to compare times at a single point in time in different locations. So, for example there is a 3-hour difference between times in Los Angeles and New York. If it’s 6:00 am in Los Angeles, it’s 9:00 am in New York.

When using The Events Calendar there are 4 places you need to pay attention to time zones:

  • WordPress general settings
  • The Events Calendar settings
  • Event-level settings
  • What is displayed on the calendar

WordPress Settings

The WordPress general settings are located in Settings => General => Timezone (it’s near the middle of the page). This is fairly straightforward and should reflect the time zone of where your organization is located.  This will be very important as it relates to The Events Calendar. If all your events are in New York, then you should set the time zone to New York.

The Events Calendar Settings

The Events Calendar settings are located in Events => Settings => Time Zone Settings (very bottom of the page). There are 2 choices here: “Use the site-wide time zone everywhere” and “Use manual time zones for each event” (recommended). If you use a lot of different time zones it’s recommended to also check “Show time zone.”

Note: within The Events Calendar settings you may see a button labeled “Update Time Zone Data.” You can safely click this button and then it will show the “site-wide” and “manual” options explained above.

Event-Level Settings

The Event-level settings are located in the “Time & Date” section when creating or editing an event. There is a link that shows the timezone. When you click on the link, it will allow you to select a time zone. The time zone shown will default to the time zone you have set in your WordPress general settings.

You can always set a time zone at the event level and it will be saved with your event. However if you have “Use the site-wide time zone everywhere” set in your The Events Calendar settings, the calendar will display the time in the time zone in WordPress general settings. For example, if you have a WordPress time zone of New York, and an Events Calendar setting of “Use the site-wide time zone everywhere” and you create an event at 8:00 am – 5:00 pm in the time zone Los Angeles, the calendar will display 11:00 am – 8:00 pm EDT. This is probably not what you want.

Recommended Settings

  • WordPress general settings: set it to the time zone where most or all of your events are located.
  • The Events Calendar settings: set it to “Use manual time zones for each event”. This will inherit the time zone you have set in WordPress general settings but allow you to set the time zone at an event level. Note: if you have events in multiple time zones, it’s also recommended to select the “Show time zone” checkbox.
  • Event-level settings: here you usually don’t need to change the default and just leave it as-is (it will show what you have set in your WordPress general settings).

Here is the info provided by The Events Calendar:

https://theeventscalendar.com/knowledgebase/time-zones/

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

by 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;
}
 

How to Fix Disqus Comments Not Showing

by Leave a Comment

Here’s how to fix Disqus comments not showing correctly. The solution can be found in the Disqus migration tools.

This fix is for when you have Disqus up and running but your comments are not showing correctly.

First you need to understand that Disqus stores your comments and syncs with your WordPress site, so they can become out of sync. There are tools in the Disqus plugin within your WordPress admin for help with syncing with Disqus. However, that may not fix your problem. In many cases you need to use the migration tools.

How to Use the Migration Tools

  • Domain Migration Tool
    This is for when you change any part of your domain (for example, http to https, domain name, .net to .com).
  • URL Mapper
    This is for when you change any part of your url after the domain.
  • Redirect Crawler (Advanced)
    This is for when you have 301 redirects and Disqus needs to know about them. (I didn’t need to use this one.)

First, log in to your Disqus account and go to Admin then go to Community. The Migration Tools are located on the left side under Tools.

The problem in my particular case had 3 causes:

  • I had recently changed from .io to .com
  • I had recently changed from http to https
  • Comments from my development environment (with .dev) got synced to Disqus

The first thing you should do is use the URL Mapper tool to simply download a csv of all your urls (comments) so you can see what’s going on (the csv file will be emailed to you). Then use the Domain Migration tool and the URL Mapper to correct all your urls. I didn’t need to use the Redirect Crawler as I didn’t have any 301 redirects. Disqus makes this look a bit more complicated than it really is. Just use the csv like a report of all your urls and then use the other tools to search and replace until everything is correct and then all your comments will work great.

Once everything looks good, you should sync the Disqus comments with your WordPress database. Within your WordPress admin, go into Comments and then Disqus. The Disqus plugin defaults to moderation. Click on “Plugin Settings” on the far right. Look for the section “Sync Disqus with WordPress” and check the checkbox for “Remove all Disqus comments before syncing” (This is a very misleading label. This will delete the comments in the WordPress database before synching in the Disqus comments.). WARNING: always backup your database before performing destructive actions on your database.

You can verify your comments are all correct in 2 ways. You can download a new csv file within the URL Mapper or you can go to “Moderate Comments” under “Community.” Be sure you select “All Time” in the filter dropdown. If you have a lot of comments, you’ll probably want to use the csv method instead.

How to Export Contacts from Juno and Import into Gmail

by 2 Comments

This may seem like a convoluted way to export your contacts out of Juno, but this was the only way I could do it when I was helping a client migrate from Juno to Gmail.

In a nutshell you need to copy-paste the contacts out of the source code of the print preview page and generate a csv file with a small amount javascript (provided below). If that sounds really confusing to you then you may need to find somebody else to do this for you following these instructions. It’s easier than it looks and works great. Enjoy!

NOTE: In the examples below, I am using a Juno account that was created for demonstration purposes only. This account doesn’t have any contacts.

Step 1

Sign in to juno.

1-signin

Step 2

Go to your address book.

2-addressbook

Step 3

Click on “Print Contacts”

3-printcontacts

Step 4

Leave the print settings as shown below and click “Print” in the bottom, right.

4-printsettings

Step 5

After clicking print, you will see the print preview page below.

5-printpreview

In your browser, view source for this page and locate the following two javascript arrays:

  • var ContactListTable (this one is for contacts that have first and last name)
  • var EmptyContactListTable (this one is for contacts that do not have first and last name).

(Note: in the example shown below the arrays are empty. Yours will be filled with contacts.)

6-viewsource

Step 6

Open your favorite text editor and create a file called something like “generate-csv.html” and paste in the following code. To download this code, hover your cursor over the code below to expose a small menu in the top, right of the code section. From there you should then be able to save or copy/paste the code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

<script type="text/javascript">

var data = [];

</script>

</head>
<body>

<script>
//var data = [["name1", "city1", "some other info"], ["name2", "city2", "more info"]];
var csvContent = "data:text/csv;charset=utf-8,";
data.forEach(function(infoArray, index){

   dataString = decodeURIComponent(infoArray.join(","));
   csvContent += index < data.length ? dataString+ "\n" : dataString;

});

var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF

link.click(); // This will download the data file named "my_data.csv".

//Thanks to:
//http://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side
//http://stackoverflow.com/users/1768690/default

</script>
  
</body>
</html>

Step 7

Go to the print preview page source code and copy the javascript array “ContactListTable” and paste it into the javascript array “data” in your html file. It will likely be a very large array, so be careful to copy-paste it correctly. You will need to do this again for “EmptyContactListTable”. You will also need to change the name of “my_data.csv” to something appropriate for each of your csv files.

Step 8

Open the html file into a new browser window (Chrome works best). In a moment a new csv file will download, which you can then open in Excel or your text editor.

Step 9

Add column headings at the top of your csv file. Make sure they map to the right values.

First Name,Last Name,Email Address
7-columnheadings

Step 10

Import your csv contacts into gmail.

http://www.wikihow.com/Add-Contacts-to-Gmail-Using-a-CSV-File

IMPORTANT: Always be careful when importing contacts into gmail and make sure you back up all your data as a precaution.

Venue Check Plugin for Use with The Events Calendar by Modern Tribe

by 1 Comment

Introducing Venue Check

Venue Check is a new little plugin for use with The Events Calendar plugin by Modern Tribe.

The Events Calendar thinks of venues as locations with different addresses. I’m working on a project where the venues are rooms at the same location, so we’d like to prevent double booking venues (“rooms”) when setting up an event.

Venue Check will check the availability of venues when adding an event in the admin. It also has a nice added feature of optionally adding setup and cleanup time before and after the event. The setup and cleanup time will not display on the events calendar but will be factored into the venue conflict checking.

Try it out.

Get Venue Check

 

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