MIGHTYminnow’s Favorite WordPress Plugins: Events Manager

Events ManagerIf you are an organization that hosts frequent events (like we do), Events Manager / Events Manager Pro is a must have. This is a free WordPress plugin, with an optional “Pro” upgrade if you need to take payments. Events Manager offers a robust array of settings and features, which makes it really easy to create and display events, registration forms, and much more.

(Free) Features We Love:

  • Screen Shot 2013-10-10 at 2.08.24 PMTemplates & widgets
    Events Manager makes it extremely simple to output your events in a bunch of different ways. The plugin comes with great default templates for events list, calendar, and widget views – plus you have the ability to set up your own templates using simple placeholder tags (e.g. #_EVENTTITLE)
  • Google integration
    Google Maps are seamlessly integrated, meaning your guests can see a map of each event location, and can even look up directions from their location – all from within the page they are viewing. Events Manager also integrates with Google calendars and iCal, so your guests can add your events to their personal calendars in one click.
  • Categories and tags
    Just like WordPress’ Posts, you can categorize and tag your events. Additionally, you can output custom lists of particular categories and tags.
  • Create multiple tickets
    If your event has separate prices for members and non-members, or if you have different levels of entry (1-day pass vs. conference pass), you can create different tickets for these groups.
  • Timing and recurring events
    Events Manager really shines when it comes to scheduling your events. The plugin places a huge number of possibilities at your fingertips, including the ability to custom schedule recurring events. Whether your event is all day, 7-9pm, or recurs every Thursday at noon – you’ll easily be able to set it up in Events Manager.

(Pro) Features We Love:

  • Coupon Codes
    You can set up multiple coupon codes for specific discounts (fixed-price or percentage). You can also limit the number of coupons available and/or set an expiration date.
  • Online Payments
    Probably the #1 pro feature is the ability to take payments through PayPal, Authorize.net, and other offline payment methods. We use Events Manager Pro on the MIGHTYminnow site to facilitate class registrations through our payment gateway.

Mm Plugin: Super Simple Related Posts

Super Simple Related Posts

A super simple widget to output related posts based on categories, tags, or custom taxonomies. You get to decide how the posts are related (categories, tags, custom taxonomies), what to show (posts, pages, custom post types), and a whole lot more.

Download Now » See Demo » GitHub Repo »

Super Simple Related Posts

The Super Simple Related Posts widget

The Story

This plugin came about as the result of a recent project in which we needed to output related content on pages and posts in a unique way. We often create a lot of custom post types and taxonomies using Toolset’s amazing Types & Views plugins, and we needed a way to show related content based on specific criteria (e.g. post type and taxonomy).

The other thing we needed was an alternative to some of the many resource-intensive “related content” plugins out there – and make no mistake, there are MANY. Yet a lot of these plugins work their magic by querying your database, running post content through algorithms, and performing processes that put a heavy strain on the server. So much so, that they sometimes get banned from premier hosting companies like WP Engine. So, with all this in mind, we developed this handy plugin and decided to share it with the world.

How it Works

In short, SSRP gives you a widget that can output a list of content related to the current page/post by any category, tag, or custom taxonomy. Let’s look at a real-world example to demonstrate what the widget can do. We recently utilized this plugin on a fundraising site that incorporates several different post types for their knowledge base:

Post Types

  1. Blog Posts (built in WP post type)
  2. FAQs (custom post type)
  3. Articles (custom post type)

. . . as well as a few custom taxonomies shared across these post types. . .

Custom Taxonomies

  1. Life Cycle (e.g. Beginning, Middle, End)
  2. Industry (e.g. Music, Sports, Arts)

So to sum up, we have a bunch of posts, FAQs, and articles – all of which are classified with Life Cycle and/or Industry taxonomies. With Types & Views it’s really easy to set something like this up, and we often end up using numerous custom post types and taxonomies on the sites we build. So in this case, an example of a typical FAQ might look like this:

  • FAQ: How do run a fundraiser for my team?
    • Life Cycle: Beginning, Middle
    • Industry: Sports

So now comes the fun part – related content. We want to display related content in the sidebar of our FAQ, and we want to be able to dictate exactly how it appears. That’s where Super Simple Related Posts comes in. Using this plugin, you can decide what type of content you want to output (posts, FAQs, and/or articles) as well as the taxonomy (category, tag, or custom taxonomy) by which to select related content. Back to our example. . .

Output

Using SSRP, you might choose the following settings (note: these are just a few of the many settings you’ll be able to modify):

  • Posts Types to Include: FAQs, articles
  • Show Posts Related By: Life Cycle
  • Number of Posts to Show: 3

With those settings, your SSRP widget would output the following when viewing the above FAQ on your live site:
FAQs
Beginning

Middle

Articles
Beginning

Middle

As you can see, SSRP give you the ability to add functionality much like you might find on a site like Amazon.com, which offers sidebar suggestions based on the content you’re looking at. Here are other blue shoes for you to look at. Here are more books written by American authors. Here are all the other long-haired crazy cat photos. You get the idea.

In Conclusion

Whether you’re using WordPress straight out of the box, hand-coding your own custom post types and taxonomies in functions.php, or using the awesome Types & Views plugin to work some serious magic, Super Simple Related Posts might be just what you’re looking for. Head on over to the official WordPress.org site to learn more. And, as always, if you have any questions, comments, or feature requests, we’d love to hear from you. WordPress.org: Super Simple Related Posts Plugin »

Chrome Extension: User-Agent Switcher

If you don’t live close enough to MIGHTYminnow HQ to visit our device lab for testing, there’s a handy alternative: User Agent Switcher. With this nifty Chrome extension you can quickly and easily switch between user-agent strings, meaning you don’t have to have a mobile phone or tablet to do your device testing!

That said, remember: there is no substitute for real hands-on device testing, but User Agent Switcher is a close second.

Mm Plugin: HTML5 Placeholder Polyfill

Without placeholder support

Your form without the plugin (IE 7/8/9 & Opera Mini)

With placeholder support

After installing HTML5 Placeholder Plugin

MIGHTYminnow is proud to announce our new plugin: HTML5 Placeholder Polyfill!

The plugin adds placeholder support for older browsers like Internet Explorer 7/8/9 and Opera Mini which don’t support placeholders natively. We simply took Mathias Bynens’ amazing jQuery placeholder polyfill and bundled it as a WordPress Plugin – the jQuery itself is widely used and well-vetted. In case you’re wondering what a placeholder is, it’s that handy text inside a form input or text area that is often used to suggest what the user should enter (e.g. “Enter your email address”). This functionality can be super handy when it’s working, and can create a major mystery for your users when it’s missing (imagine a form without labels, in which the placeholder text is the only indicator of what the user should enter).

Our plugin guarantees that your users are never left in the dark. To learn more or download it, just visit the WordPress Plugin Page:

Visit the Plugin Page »

Free training for unemployed developers/designers

Thanks to Dave from Fire on the Bay, we recently learned of a new web-y, design-y program for those struggling in the current economy.

If you are unemployed and looking for ways to improve your skill set, Bay Area Video Coalition (BAVC) is offering a 16 week intensive training program to help improve your skills. BAVC is a Bay Area non profit that was asked by the city of San Francisco to head up their TechSF initiative to help technologists and multimedia artists back to work. If you qualify after filling out the application, the training is free.

The new training session, called Digital Directions, starts next week and offers 16 weeks of training of Adobe CS6 workflow in Illustrator and Photoshop as well as basic UX, typography, and more. The latter part of the training will be spend working for a client.

There are some eligibility requirements so be sure to read them before applying.

We thought this opportunity was worth passing on.

How to Make a Custom jQuery WordPress Plugin

We love jQuery. A lot. And we use it a lot too. In fact, on pretty much every site we build, we utilize a common set of basic jQuery snippets that do some handy things (opening external links in a new window, adding helpful classes to list elements, labeling links based on there “href” attributes, etc). Sounds like the job for a simple plugin, right? No need to copy and paste all your snippets on each new project – you can create your own custom jQuery plugin in 4 easy steps:

1. Set Up Your Plugin

First thing you’ll want to do is create a new directory for your plugin. Name it something intuitive, like my-custom-jquery (typically all lowercase with hyphens).

In this new directory, create 2 new files:

  1. my-custom-jquery.php
    The file name should essentially match your plugin name.
  2. my-custom-jquery.js
    Similar naming scheme. We’ve chosen to name our file mightyminnow-custom-jquery.js in the code below.

Now you’re ready for the actual coding.

2. PHP (my-custom-jquery.php)

This is the guts of your plugin – your main PHP file.

This code does a few things:

  1. The first commented bit is a standard WordPress plugin information header. It contains important info about the plugin, such as author, URI’s, and a brief description.
  2. Further down, we have a basic function that does two things. First, it enqueues jQuery (notice the function wp_enqueue_script which is the safe and proper way to include jQuery in WordPress). Second, we enqueue our custom jQuery.
  3. Lastly, we add an action to run the whole shebang. We use the wp_enqueue_scripts hook, which is a good place to include all scripts.

3. jQuery (my-custom-jquery.js)

Now we just have to add our actual jQuery to the .js file we’ve made. Here is the code we’re using – feel free to add your own snippets as well.

As you can see, this jQuery does a number of things including:

  • Opens external links in a new window
  • Adds special classes to image, email, and pdf links (we often use these classes to add small background-image icons)
  • Add special classes to first, last, and parent list elements

This is where you can get creative and add whatever jQuery snippets you like to use on a regular basis. If you have any suggestions, definitely post them in the comments below!

4. Install Your Plugin

At this point, you’re ready to install your plugin. You’ve got two options. The first is just to upload your plugin folder directly to /wp-content/plugins. The second is to create a .zip of your plugin folder and use WordPress’ built-in plugin installer to upload it. Once it’s up and running, make sure to thoroughly test any jQuery snippets you’ve added, and definitely let us know what sorts of cool stuff you come up with.

Questions? Comments? Let us know below!

Custom Excerpt Placeholder for Events Manager

This PHP snippet creates a #_CUSTOMEXCERPT placeholder to be used with the Events Manager plugin. Just throw it in functions.php, and you can then use #_CUSTOMEXCERPT in place of #_EVENTEXCERPT in your event/list templates.

The snippet has two variables you may wish to edit:

  • $strip_HTML – whether or not to remove HTML tags from the custom excerpt. Be careful if setting this to false, as this can cut off in the middle of your tag attributes (e.g., <img src=”/wp-content/uploa” />)
  • $length – the length of your custom excerpt (characters)

Our New Mobile First Child Theme for Genesis 2.0+

[box type=”download”]

Mobile First Genesis 2.0 Child Theme

Download our new Mobile First Child Theme for Genesis 2.0. The theme looks and feels identical to the Genesis 2.0 Sample Theme, however it has been optimized with a “Mobile First” approach, meaning faster load times and an overall better experience for mobile users.

Download Now »
See Demo »[/box]

Intro

We’ve long been huge fans of the Genesis Framework – it integrates with tons of well-designed child themes, it offers lots of amazing functionality and plugins, and the StudioPress support team is consistently speedy and helpful. One thing we’ve always wanted, however, is a basic Genesis child theme that is “Mobile First.” So we decided to go ahead and make our own! We wanted to keep things as simple as possible, so we started with the Genesis 2.0 Sample Theme and went from there. Most of the work just involved rearranging CSS, however you may want to check out the full list of details below for more information.

Theme Details

    • Requires Genesis 2.0+.
    • All media queries have been switched from “max-width” to “min-width”.
    • Media queries have been rearranged to proceed from smallest to largest widths.
    • Only two changes were made to the original CSS to preserve styling after rearranging the media queries:
      • Line 700: .sidebar .enews-widget was changed to .sidebar .widget.enews-widget
      • Line 1366-67: the margin-top selector was changed to margin
    • This theme’s functions.php is identical to that in the Genesis 2.0 Sample Theme, only difference being the child theme name, url, and version definitions. It adds theme support for:
      • HTML5
      • Responsive viewport meta tag
      • Custom background
      • 3-column footer widgets

Important Note

Being as this theme utilizes mobile first media queries, you’ll need to utilize a polyfill if you want the theme to appear correctly in Internet Explorer 8 and below. Here are a few options:

Installation

  1. Install Genesis 2.0. If don’t already have Genesis, you might want to get it.
  2. Download the Mobile First Child Theme for Genesis 2.0.
  3. Install the the child theme, either manually or via WordPress’ theme installer.
  4. Activate the child theme.
  5. Feel free to modify the child theme’s CSS and PHP to create your own unique look and feel.
  6. All done!

Change Log

  • 1.4
    • Fixed nav extras CSS to better display search bar.
  • 1.3
    • Moved .first {} CSS rule into media queries where it belongs (thanks again @GaryJ)
  • 1.2
    • Added missing width: 100%; rule for full width content
    • Added missing float: right; rule for .content div
  • 1.1
    • Updated style.css table of contents to reflect new media queries (thanks @GaryJ)

Feedback?

We’d love to hear it. Please let us know if you have any comments or suggestions below. Thanks!

Two amazing tools to find and edit images

In our most recent weekly team meeting, one of our minnows pointed out to the team two very awesome tools that will make our lives and our clients’ lives much easier. The first is an image search tool and the second is an image editing tool. Both are online, fast, and best of all – free!

Creative Commons Search

Creative Commons Search is a tool that allows you to search through various image search engines and look for images with licenses that allow you to use them commercially and/or modify, adapt, or build on to them. This is such a great alternative to Google Images because you know that these can be used on your website, for free, and do not have to worry about getting in trouble.

Screen Shot 2013-08-12 at 10.26.13 AM

Clipping Magic

One technique that is often used when we are building websites is taking an image and removing the background. Clipping Magic is an alternative to the expensive, often confusing to navigate, Photoshop. Simply mark the area that you would like to keep with green and the area you would like to remove with red and in live time, this tool will allow you to take out the background!Screen Shot 2013-08-13 at 10.09.48 AM

Add Expanding “Read More” Links to Your WordPress Blog

Here’s a handy jQuery/CSS snippet that adds special “read more” links to expand and hide your WordPress blog posts, accordion style. This is pretty useful if your blog page is spitting out a bunch of long posts, and you’d like to consolidate some space. The code is set to work with default WordPress classes and ID’s, however it can be easily modified to work on any HTML. Enjoy!

Check out this Pen!