• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Amethyst Website Design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

Genesis Tutorials Templates

How to Use Sugar Event Calendar with Genesis

January 7, 2014 Updated on January 7, 2014 Marcy Diaz

Share this post:

TwitterFacebookPinterestLinkedinEmail

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.

Styled Event Calendar
Styled Event Calendar

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
    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!

Sugar Event Calendar in Genesis Sample Default
Sugar Event Calendar in Genesis Sample Default

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

First Remove <pre></pre> Tags

Shortcode with pre tags
Shortcode with 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.

Pre Tags Removed
Pre Tags Removed

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!

Event Calendar with Tall Header
Event Calendar with Tall Header

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.

Event Calendar with Small Header
Event Calendar with Small Header

Now you have a great new events calendar!

Share this post:

TwitterFacebookPinterestLinkedinEmail

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!

Contact Marcy »

___

Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Butterfly says

    Really this blog is very nice, very easy understandable and good informative. Thanks for nice post

    Reply
  2. Tony says

    Thank you! Any suggestions how to make it mobile responsive?

    Reply
    • Marcy Diaz says

      Thanks for your comment, Tony. Sugar Events Calendar is mobile responsive. Just go to Pippin’s site and try it.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design
PO Box 94782
Phoenix AZ 85070

Phone: 602.759.0501
Email:

Contact Form
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2019   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!