How to Use Sugar Event Calendar with Genesis

Sometimes you need to have a simple calendar of events on your WordPress website. This tutorial will show you how to use Sugar Event Calendar by Pippin Williams with Genesis 2.0.1 Sample theme.

I have used this calendar plugin before, and because Pippin uses minimal styling in his plugins, the calendar just picked up the styles from the theme, and looked great, as installed. When I installed it in a recent custom Genesis theme, it looked a bit off, so I want to share a few quick tips to get it looking beautiful in your Genesis child theme.

There are many WordPress event calendar plugins both free and premium; some have lots of features, but are very complex to use. Sugar Event Calendar is a really simple and flexible events calendar plugin. This is a premium plugin, but a lite version is available in the WordPress plugin directory which may be all you need.

This plugin creates a calendar page with your events and also creates an events archive page with event custom posts listed by date of occurrence. The premium plugin has some additional widgets, so you can have a smaller calendar, a list of events, and a list of event categories in your sidebar. If you need to show the event location, there is also a Sugar Event Calendar – Google Maps add-on available for download from the WordPress Plugins page. If you want to take registrations for your events, there is a Gravity Forms add-on, as well.

Install Sugar Event Calendar (Premium or Lite)

You can get the lite version of the plugin in the WordPress plugins directory. Install and activate it as usual. If you use the premium plugin, you will get a zip file to download. Then you can upload this zip file to your WordPress install using your WordPress menu, Plugins > Add New, and then choose Upload. Activate the plugin.

Add A New Event

You will see a new Events section in your WordPress menu on the left. Click it to add new events. Add at least one new event.

There is a new Event Details section at the bottom of the page for the event date and time. You can hover over the words Event Details and drag this section up just below the WordPress editor, if you like.

Add a Calendar Page and an Events Archive Page

1. Click on Page and then on Add New in your WordPress menu. Give the page a title like Calendar or Events Calendar (it can be anything you like).
2. Add the sc_events_calendar shortcode
   
   to the content editor area.
3. Choose the Genesis layout you prefer. (I like to use the full page layout for the calendar or you can choose a single sidebar layout.)
4. Save the page.
5. Create a second new page, and give it the title Events, so that the permalink slug is /events. Note that the slug must be /events. This is your events archive page.
6. You can use your default layout for this page; save it.

Now view the Calendar and Events pages you just created.

404 Error?

When you view your new pages, do you see them or do you get a 404 error? If you have a 404, you need to flush your WordPress permalinks.

In your WordPress menu on the left, you can click on Settings > Permalinks. You don’t need to save, but you can. Then you should be able to view both pages. (Also your Permalink Settings should have “Post name” selected.

View Events and Calendar Pages

The Events page should pick up your Genesis Sample child theme styles, and the single events should look great, as well.

But the Calendar page may look a bit wonky. Yikes!

The calendar header is all over the place. So let’s fix it.

First Remove <pre></pre> Tags

1. Go to Edit page for the Calendar page.
2. This time, click on the Text tab (not the Visual tab), so you can see the code.
3. If you see <pre></pre> tags, you will need to remove them, so that you only have the sc_events_calendar shortcode on the page.
4. Save the Calendar page.

Now it’s beginning to look better, but the month and year select boxes are still not lined up.

Let’s Style the Calendar

The section of code in the Genesis Sample theme’s style.css that causes the month and year select boxes to be stacked instead of inline is the “width: 100%” line in the Forms section:

/* Forms
--------------------------------------------- */

input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-shadow: 1px 1px 3px #eee inset;
	color: #999;
	font-size: 14px;
	font-size: 1.4rem;
	padding: 16px;
	padding: 1.6rem;
	width: 100%;
}

You can add some CSS to either a Custom CSS plugin or edit your styles.css. If you edit your styles.css, you can add this CSS at the bottom of the Plugins section.

Give the select boxes a width of auto:

#sc_event_select select {
    width: auto;
}

Next add some height to the calendar header:

#sc_events_calendar_head {
    height: 66px !important;
}

Finally adjust the calendar header name so that it is centered:

#sc_events_calendar_head h2 {
	margin-top: 12px !important;
}

So with three easy CSS edits, you have a beautiful events calendar!

Smaller Header Like Calendar Default

If you prefer a smaller calendar header with smaller select and navigation buttons, you can use the CSS below instead of the CSS above.

/* Small header */
#sc_events_calendar_head select,
#sc_events_calendar_head input {
    width: auto;
    padding: 4px 8px;
    text-transform: none;
}

#sc_events_calendar_head {
    height: 46px !important;
}

And this is the beautiful corresponding calendar.

Now you have a great new events calendar!