Mm Plugin: Equal Height Columns

Making columns that have the same height without explicitly setting a height on each of them has always been a web design challenge. Doing this in a way that is full responsive so that content never overflows and the heights are equal on all screen sizes has always been an extreme challenge. We’re pleased to announce that this challenge has finally been solved with our Equal Height Columns plugin for WordPress.

Our Equal Height Columns plugin is simple but very powerful. Once it is activated it adds a settings page where you input a CSS selector for the elements you want to have the same height. You can also input a breakpoint below which you do not want the plugin to equalize the heights. Simple as that.

This information gets passed to a jQuery script that does all the magic. When the page loads the script measures the height of all the items that match the selector and sets each item’s height to match the height of the tallest item. Then it sets up some event listeners for window resize and orientation change and re-equalizes the heights whenever these events are triggered.

Equalizing the heights on page load and window resize was good, but we took it a step further and added some extra functionality to make it bulletproof:

– We check the selector that was input and catch any errors that happen if the selector is malformed so that we never stop JavaScript execution due to bad input. This plugin will never break your site!
– We added some debouncing on the resize and orientation change events so that the plugin only re-triggers once as you resize the window
– It supports multiple selectors at a time so that multiple collections if items can be equalized without affecting each other
– It always grab the items fresh from the DOM so that it will still work in situations where a new item has been added to the collection via AJAX or cloned with jQuery
– We added a custom event ‘equalheights’ that can be used to easily trigger the equalizing manually with jQuery’s trigger method like so:

There are also two jQuery methods that you can call directly, initEqualHeights() and equalizeTheHeights(). The difference between them is that initEqualHeights() sets up all of the event handlers for when the window resizes and when the ‘equalheights’ event is triggered on the window, but equalizeTheHeights() simply does direct equalizing of the heights without involving any events. Both methods can be used in the same way and support the same 3 args:

There is also a filter that allows you to programmatically set up the selectors and args you want to use, which allows you set certain elements to always equalize heights regardless of whether their selector has been entered on the settings page:

After many, many hours of refactoring and improving, we’re very happy with the plugin and are using it on many of the custom sites we build for our clients. Check it out on the WordPress Plugin Repository and on Github and let us know if you find it useful.

-Mm

Mm Plugin: Better Font Awesome

Better Font Awesome allows you to automatically integrate the latest available version of Font Awesome into your WordPress project, along with accompanying CSS, shortcodes, and TinyMCE icon shortcode generator.

Features

  • Always up-to-date – automatically fetches the most recent available version of Font Awesome, meaning you no longer need to manually update the version included in your theme/plugin.
  • Backwards compatible – shortcode output is automatically updated depending on which version of Font Awesome you choose, meaning that you can switch versions without having to modify your shortcodes.
  • Compatible with other plugins – designed to work with shortcodes generated with plugins like Font Awesome Icons, Font Awesome More Icons, and Font Awesome Shortcodes, so you can switch to Better Font Awesome and your existing shortcodes will still work.
  • CDN speeds – Font Awesome CSS is pulled from the super-fast and reliable jsDelivr CDN.
  • Shortcode generator – includes an easy-to-use TinyMCE dropdown shortcode generator.

Visit the Plugin Page »

Mm Plugin: Custom Post Type Parents

This plugin is meant to solve the problem of highlighting “parent” pages for Custom Post Types in the menu and lists of pages. It integrates with custom menu output as well as output for any functions like wp_list_pages() that utilize the page_css_classor nav_menu_css_class filters. When viewing a custom post type, the assigned “parent page” will be indicated with standard WordPress classes (e.g. current_page_item) in navigation menus and lists of pages.

Usage

  1. In the admin, navigate to Settings > Custom Post Type Parents
  2. For each custom post type, use the dropdown to select a “parent page”

Menus and lists of pages will now have the appropriate classes applied to the specified parent pages. Additionally, Custom Post Type Parents will apply these classes to Simple Section Navigation widgets, if the plugin is installed.

Classes

Custom Post Type Parents applies the following classes to parent and ancestor pages (all classes are consistent with default WordPress classes and are backwards compatible).

Parent

  • .current-menu-parent
  • .current_page_parent
  • .current-custom-post-type-parent
  • .current-{post type}-parent

Ancestor

  • .current-menu-ancestor
  • .current_page_ancestor
  • .current-custom-post-type-ancestor
  • .current-{post type}-ancestor

Visit the Plugin Page »

Mm Plugin: Taxonomy Icons

Taxonomy Icons allows you to easily add icons to your taxononomy, category, and tag terms. The plugin automatically integrates the latest version of Font Awesome Icons, allowing you to choose from hundreds of icons to assign to your taxonomy terms.

Assigning Icons

Taxonomy Icons gives you an easy-to-use icon selector that is available when creating new taxonomy terms (categories, tags, custom taxonomies), or editing existing ones. Simply navigate to the taxonomy screen in the WordPress admin (e.g. Posts > Categories), and you’ll see the drop down selector under the heading “Taxonomy Icon”. When you select a new icon, a preview of that icon will appear to the side of the dropdown.
Visit the Plugin Page »

Mm Plugin: Widget Alias

Widget Alias allows you to create an “alias” of any existing widget, effectively reproducing / duplicating it. This can be especially handy when you want the same widget to appear in multiple sidebars. Normally you would have to edit each widget independently, but Widget Alias means you’ll only have to edit one.

Features

This plugin is similar to Duplicate Widget, with a few key differences:

  • Widget Alias gives you the option to override the aliased widget’s title.
  • Widget Alias uses AJAX to update the drop-down <select> menus on the fly, which means you see widget changes (adding widgets, deleting widgets, re-ordering widgets, etc) in real time.
  • If you delete a widget that is being aliased, the aliased copies simply revert to “None”, instead of being deleted. This allows you to keep track of where you’ve used Widget Alias widgets, if need be.

Visit the Plugin Page »

Mm Plugin: HTTP URLs

Use the simple [http-url] shortcode to convert any URL to either HTTP or HTTPS.

Why Use This Plugin?

The most common case for using this plugin is in conjunction with social media sharing/commenting plugins, in which data is tied to a specific URL. On sites that are visible via both HTTP and HTTPS, this means that two different sets of differing data are created for every page. HTTP URLs provides a handy solution to this common problem.

Visit the Plugin Page »

Mm Plugin: Dashboard Notes

Dashboard Notes lets you create super simple notes and instructions for your clients within the WordPress dashboard. Choose the color of the notification, whether or not to include a logo, and exactly what pages to include the notification on (uses simple URL matching).

Usage

  • Install the Dashboard Notes.
  • Go to Appearance > Widgets where you will see a new “Dashboard Notes” sidebar.
  • To create a note, simply drag a new widget into the sidebar and give it some content (we typically use a text/HTML widget).
  • Once you’ve added content to the widget, click save, and the Dashboard Notes settings for this widget will appear.
  • Adjust the settings to meet your needs, and click save when you’re done.
  • Refresh, or navigate to any page to see your new note in action.

Visit the Plugin Page »

Mm Plugin: WP Hotkeys

WP Hotkeys

WP Hotkeys provides time-saving keyboard shortcuts to help you quickly navigate the WordPress dashboard.

Download Now »

WP Hotkeys helps you navigate your dashboard as quickly as possible with fully customizable keyboard shortcuts. After installing WP Hotkeys, you will see the default hotkey hints display in brackets next to each standard menu item in the admin. Typing a hotkey will access the associated top-level admin menu item (e.g. Pages), and will display any submenu items and activate their associated hotkeys (e.g. All Pages, Add New). At any point you can use the arrow keys to navigate between menu items (left/right will enter/exit submenus), and the enter key to navigate to the active (underlined) menu item.

Features

  • Works right out of the box with built-in default hotkeys for each standard dashboard menu item.
  • Hotkey hints next to each menu item help you remember your shortcuts (can be toggled on/off).
  • Fully customizable – define your own hotkeys.
  • Lightweight – less than 4kb minified jQuery.
  • Built-in warning to let you know if you have duplicate hotkeys.

Coming Soon…

  • Export/import your favorite hotkey setup
  • Define custom URL/hotkey pairings

Mm Plugin: jQuery Responsive Select Menu

jQuery Responsive Select Menu

Automatically turn your standard WordPress navigation menus into responsive select / drop-down menus when the screen is below a certain width.

Download Now » See Demo » GitHub Repo »

jQuery Responsive Select Navigation Menu

The responsive select menu in action.

jQuery Responsive Select Navigation Menu

Settings for the responsive select menu.

jQuery Responsive Select Menu gives you a simple way to make your navigation menus responsive for mobile devices like phones and tablets (iPhone, Android, Kindle, etc). The plugin lets you specify a width at which to turn your normal menus into responsive, drop-down select menus – a proven method for solid, responsive navigation.

You also get specify some other handy settings including:

  • CSS class/ID selectors to specify exactly which menus to affect
  • The width at which to switch from normal to responsive navigation menus
  • The character/spacer to add to sub-items in your drop-down select menu
  • A “dummy” first term to add to the top of your drop-down navigation (e.g. ⇒ Navigation)
  • Whether to show the current page, or the top-level “dummy” item, as the default

Languages/Translations

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 »