UberMenu Extensions now available exclusively through sevenspark.com

Back in September, Envato enabled “Author Driven Pricing” for WordPress products on CodeCanyon. Coupled with this change, Envato changed their pricing policy adding a new fixed buyer fee. As a result, for inexpensive items like UberMenu extensions, Envato was taking over 70% of the revenue from each sale.

The long and the short of it is that with these new fees, selling inexpensive extensions on Envato is no longer economically viable.

Envato’s suggested solution is to raise prices (now that authors have control over this) to maintain the 70% share after factoring in the fixed fee. However, this would have meant a significant increase and extra burden on customers in order to make continuing to sell on Envato worthwhile.

Instead, UberMenu extensions – UberMenu Sticky Extension, UberMenu Icons Extension, UberMenu Conditionals Extension, and the UberMenu Flat Skins Pack – will now be sold on sevenspark.com. This way prices can remain low for customers, and it’s still economical to sell them inexpensively.

What about UberMenu core?

The core UberMenu plugin is still for sale through CodeCanyon. While Envato is taking slightly more of a cut than they used to, I feel that this is still the best place to provide UberMenu to customers.

What does this mean for new customers?

For new customers, you can now purchase UberMenu Extensions directly from sevenspark.com. All 4 extensions are still available at their most recent price from Envato.

What does this mean for existing customers?

If you are an existing customer who has purchased an UberMenu extension, don’t worry. The extensions are still maintained, your license code is still valid, you will still receive updates (through the WordPress admin), and any support packages purchased with the extensions will be honored.

In short, nothing has changed with your existing purchase, there’s just a new home for the product.

How do I get updates?

Updates will be delivered through the WordPress update system. Just enter your extension license codes in the UberMenu Control Panel > Updates tab.

Note that you will need to be running UberMenu 3.2.6 or later to be able to see these settings.

What if I need more support for an item purchased on Envato and my support has expired?

If you purchased your Extension license through Envato, you’ll no longer be able to renew support there, since the item has been removed. (Note that you can still Submit a Ticket with your existing license and receive support for any remaining support period you have already purchased).

Instead, you can now purchase a license through sevenspark.com, and this will provide a year of support. For comparison, the $8 plugin on CodeCanyon would have cost $7 for 6 additional months of support ($1.16/month) after the support period expired. Your purchase through sevenspark.com will cost $8, but will provide you with an entire year of support rather than just 6 months ($0.67/month). That support can optionally be renewed yearly at an additional 30% discount.

Questions, concerns?

Questions or concerns? Please Submit a Ticket and we’ll get back to you.

An added bonus!

As an added bonus, we’re now able to sell a discounted bundle of all 4 current UberMenu Extensions – save big when purchasing them altogether here: UberMenu Extensions Bundle

Introducing Bellows Accordion Menu for WordPress

WordPress Accordion Menu Demo

One of the most frequent requests I get from customers is how to create an accordion menu on their WordPress sites. Having researched the few existing options, and not feeling comfortable recommending any of these to my customers, I set out to create a smart, robust, flexible, and modern accordion menu plugin for WordPress.

Introducing Bellows

I’m very pleased to announce the release of the new Bellows Accordion Menu plugin for WordPress. Bellows is the culmination of almost a year of development and beta testing to produce a slick and easy to use accordion navigation solution.

Bellows comes in two flavors – Bellows Pro and Bellows Lite.

Bellows Lite – Accordion Menu is available on the WordPress plugin repository for free. It’s a fully functional standard accordion menu. The menu structure is built in the standard WordPress Appearance > Menus screen. It includes 3 skin presets, supports multiple submenu levels, multiple- or single-folding of submenus, automatic expansion of current submenus, and integration via either shortcode or widget.

Bellows Lite Accordion Menu for WordPress

Bellows Pro – Accordion Menu works on the same foundation as Bellows lite, and adds a variety of extra features that make the plugin very flexible and dynamic. These include:

  • Over 20 Skins
  • Style customizations via the Customizer, a well as individual menu item styles
  • Icons and images within menu items
  • Widgets and custom content within menu items
  • Ability to automatically generate the accordion menu contents based on post or taxonomy term hierarchy

Bellows Pro Accordion Menu

If you’re curious about the full feature set and want to see how Bellows works, check out the Bellows WordPress Accordion Menu demo site

Menu Generator UI

One of the features I’m most excited about is the Menu Generator UI. This feature gives the user the ability to quickly configure complex query filters to generate automatically populated menus, and preview the results in real time. The user simply checks the filters/parameters they wish to use to produce their menu results, and the interface provides a preview and the appropriate shortcode to be used. This feature gives users a lot of power to create the menu they want without needing any coding skills.

Auto-generating accordion menus with Bellows

Moreover, the menu can be made dynamic relative to the current page. The auto-populated menu can inherit the current page as a parent, and can therefore dynamically change based on the currently viewed page. So a single menu could be used across the site to produce a hierarchical menu specific to that page, with minimal configuration.

Menu queries can also be saved and reconfigured at a later time, so that when a change needs to be made, it can be made in one location and propagate across the entire site.

Beyond just menu items

While accordions are great for standard navigation lists, Bellows also allows the insertion of any type of HTML, shortcode, or widget content. This means there are effectively no limits to the type of content that can be added within the accordion. Add images, icons, contact forms, third party content feeds, maps, and more!

Multiple Configurations

Bellows Pro’s Configuration system makes it easy to both configure separate menus independently, as well as re-use your settings across menus when desired. Create multiple configurations and apply them to your various menus as desired to control the look and feel of each accordion instance individually.

Why an accordion menu?

Accordion menus are pretty simple beasts. The menu has a hierarchical structure, and when a parent item is activated, its child items appear below it. Their usefulness is in the extremely clean hierarchical display that allows the user to explore a list of items. It’s a very common UI paradigm, seen in all sorts of interfaces. In fact, it’s become more common on mobile interfaces where content tends to stack vertically due to lack of horizontal screen real estate.

The real value in accordion menus is providing contextual content. They tend to be used as secondary navigation systems, and as such, may change from page to page. This is why the flexibility and dynamism of Bellows is so powerful, as it can be placed just about anywhere and display content based on the current page. Allowing the user to explore within the current context saves time and energy, helping them find the content they’re looking for more efficiently.

Complementing Ubermenu

One mistake I see UberMenu customers make is trying to add too much content to their primary navigation. A site’s primary navigation should generally have no more than 3 hierarchical levels, and less than 100 items. When well organized, this keeps the menu structure easily digestible by site visitors. But when a site has many levels of taxonomical terms or posts, it can be tempting to try to cram all of this structure into the primary navigation. Unfortunately, this often leads to an unusable menu, with so many items that visitors can’t actually find what they’re looking for, defeating the purpose of the navigation in the first place.

The solution is to have section-specific secondary menus on the site, which allow users to drill down further into the site contents within a given context. This is one thing that Bellows will help customers with large sites a lot – first, navigate to a section of the site using the main menu; then drill down within that section using an accordion menu in the sidebar. Bellows Pro’s dynamic menu content population can make this much easier to achieve.

Have you checked out the demo?

I’m really excited to release Bellows, and I really hope you enjoy it! Check out the Bellows demo for more information. Questions? Ask away by clicking the “Questions” button here: Bellows Pro

ShiftNav 1.5 is here!

ShiftNav v1.5 was just released! This is a feature release, with a variety of new features and enhancements. Listed below are the biggest new features of the plugin for this version. Enjoy!

 

Hamburger-only button toggle

One of the most requested features for ShiftNav was to simplify the default full-width toggle bar into a simple hamburger button.  While it’s always been possible to do this by disabling the main toggle bar and adding a simple custom toggle to the site, v1.5 now includes this as an option in the settings.  Now it’s easy to have a simple hamburger toggle that sits on top of the site content on mobile.

 

UberMenu Menu Segment Processing

Many customers enjoy making use of both UberMenu and ShiftNav in tandem.  While in most cases, maintaining a separate, streamlined menu for mobile users is best practice, sometimes it’s useful to be able to re-use the same menu structure for both UberMenu and ShiftNav.  Therefore ShiftNav will now process UberMenu Menu Segments, a useful tool for breaking WordPress menus down into more manageable segments.

 

Icon Enhancements

ShiftNav Pro now provides further flexibility when it comes to applying icons to your ShiftNav menu items.

The Disable Text setting allows users to set up icon-only menu items. And the Custom Icon Class setting allows users to use custom icon sets that are already loaded on their site without having to write any custom code.

 

Login/Logout shortcodes

ShiftNav Pro 1.5 now includes two new shortcodes that are useful for customers that have a registered user base.

The login and logout shortcodes are a set of easy to use shortcodes that provide a link to the login page, and a logout link, respectively, in the toggle bar.

The icon and content of the links are configurable in the shortcode settings.

 
Check out the full changelog on the ShiftNav Pro product page

UberMenu 3.2.2 Release Notes

UberMenu 3.2.2 was released on December 8, 2015. This was a minor feature update release.

Questions about updating? Check out the Update FAQs and be sure to follow the Installing Updates guide

Responsive Images

The most interesting new feature with UberMenu 3.2.2 is support for WordPress’s new Responsive Images functionality. This means that when you upload an image for UberMenu, those images will automatically get the srcset and sizes attributes so that compatible browsers will pull the most appropriate size image from the server.

The upshot is that you’ll save bandwidth for mobile users, and get higher resolution images for your users with larger screens.

Automatic Updates (beta)

Automatic update capability shipped with 3.2.1, but with this update it’s the first time users will actually be able to test this functionality. The feature is disabled by default, but to enable it for beta testing you can set a constant in the wp-config.php. Check out Automatic Updates (Beta) for more details.

New Settings

A variety of new settings were added to give additional control when configuring the menu, including a submenu minimum height, disabling UberMenu when mobile devices are detected, disabling top level item dividers, and automatically collapsing the mobile menu after following a ScrollTo link.

WordPress 4.4 Updates

WordPress 4.4 changed some admin screen styles, so UberMenu 3.2.2 has been updated to work with these new admin styles and set the appropriate header tags. The new nav_menu_items_arg filter has also been added, though it is disabled by default and can be enabled by setting UBERMENU_ALLOW_NAV_MENU_ITEM_ARGS_FILTER to true in wp-config.php

Enhancements & Fixes

A variety of tweaks have also been made to improve user experience. The sensor parameter has been removed from the Google Maps API as it is no longer required. Font Awesome has been update to the latest release, 4.5.0. If settings fail to load in the Menus Panel due to interference from a theme or another plugin, the settings panel output and/or console will attempt to display helpful troubleshooting messages for the user.

A few minor bugs have also been squashed, including a clipping issue with multi-level left-expanding flyout submenus, and submenu overlap on mobile with vertical-oriented menus with flyout submenus in particular positions.

New features in UberMenu 3.2.1 update

UberMenu 3.2.1 was released today – here’s a quick rundown of some of the new features.

Have questions about updating?

Submenu Column Dividers

You can now add visual dividers (borders) to your submenu columns via a setting in the UberMenu menu item settings.

You can set the divider color as well as a minimum column height, which keeps heights even.

Submenu Auto-Columns for static items

With most mega menus, second level items become column headers in the submenu, and third level items fill the columns vertically below those headers, as shown here:

If you only use second level items, they will organize from left to right, then wrap to the next line.

If you effectively only have two levels of menu items – meaning there are no column headers – but want the items to organize in columns from top to bottom, you can use the special Columns menu items to organize your items into submenu columns manually.

With the new Submenu Automatic Columns feature in UberMenu 3.2.1, you can automatically divide your second level items into columns organized top to bottom, rather than left to right, without manually adding Column items. Just set the number of columns you want to create for that submenu, and UberMenu will automatically divide up the item’s child items into evenly distributed, even-width columns.

If you need more fine-grain control, you can still use the Column items, of course.

If you are using Menu Segments, you can now cache the output of the menu segment as HTML, stored as a transient in the database. This can mean a substantial processing savings, as this caching can mean running one query per submenu rather than dozens to process each menu item individually.

You can enable and disable caching on each menu segment, as well as set the expiration time, or how frequently the segment should be regenerated.

This feature is very similar to the WP Menu Cache plugin (so if you are using that plugin, you don’t need this feature), however it is simpler – there’s less concern about caching per page or per user, since you’d generally only be using menu segments in submenus. But do keep in mind that if your content varies on any axis (page/user/etc), you should not enable caching.

For Developers

Mobile toggle events

UberMenu 3.2.1 adds two new Javascript API events, ubermenutoggledopen and ubermenutoggledclose. These events fire on when the mobile menu is toggled opened and closed so that developers can trigger their own callbacks at these points.

Menu Item Image filters

There are now 3 new image filters, which allow greater control over automatically setting the image for specific items. This can be useful if you want to programmatically assign images other than Feature Images to a menu item that aren’t standard Core features – such as WooCommerce product images, for example. More info: Knowledgebase: Image filters

Dynamic Post Items Title filter

The ubermenu_dp_title filter allows you to alter the title of the posts returned by the Dynamic Posts items, for example to trim the length of the post titles.

Enhancements

A few enhancements were made as well.

Mobile Scrolling – You can now scroll the page on a mobile device without closing the submenus even with touch-off close enabled.

Fonts – There’s a new setting to set the Font Family specifically for the menu (without loading a Google Font), and Google Fonts are now sorted alphabetically rather than by popularity so they can be located more easily.

Improved WPML Compatbility – In some instances, WPML passes a non-standard value to an argument in the wp_nav_menu() parameters, which can throw an error. UberMenu now handles this scenario.

Improved Mobile Tabs – Tab toggles can now close their submenus when tapped on mobile, provided they have their links disabled. This makes it easier to open and close tabs on mobile devices. Tabs also now automatically collapse when the browser is resized to mobile sizes.

Extensions

Please note that the Icons Extension has also been updated to version 3.2.1, and now includes the new icons from Font Awesome 4.4. If you are using the extension, you can update this plugin separately in the same fashion if you would like to use the new icons.

Questions about updating?

To update to UberMenu 3.2.1, please follow the standard instructions in the Knowledgebase: Installing Updates

Updating FAQs

Will I lose my settings when updating?

No, your settings are stored in the database; only the files in the plugins/ubermenu directory will be replaced. You should never edit the UberMenu plugins files, so this should not be an issue. If you have added files in the /custom directory, they should automatically be backed up and restored after updating if your installation is running properly, but taking a backup of the /custom directory is a good idea just in case.

Of course, you should always back up your site before running any sort of update so that you can revert in case something goes wrong.

If you are updating from UberMenu version 2, please be sure to read and follow the UberMenu 2 to UberMenu 3 Migration Guide

Where can I download the update?

If you are an UberMenu customer, you can download the latest version of UberMenu from your CodeCanyon Downloads page. Otherwise, you can purchase UberMenu through CodeCanyon

Automatic Updates aren’t working, I get an error trying to update

There are no automatic updates. Please review the update notes and notices in your admin interface. To install the update, you’ll need to download the zip from CodeCanyon and update the plugin manually. Please see the instructions here: Installing Updates

Is the update free?

Yes, if you have purchased the plugin you can get the latest version via your CodeCanyon Downloads page

Any further questions?

If you have any questions not answered here or in the Knowledgebase, please Submit a Ticket

Seeking 2 Support Team Members

SevenSpark is currently seeking two qualified part-time support team members. This is a contract position.

Job Description & Responsibilities

Support Team Members handle customer support for SevenSpark products (WordPress plugins and themes), fielding usage questions and providing technical assistance.

95% of support tickets relate to UberMenu. Much of the job is assessing the user’s site and pointing them to the appropriate support resource (Knowledgebase, Video Tutorials, etc), but some customers will require technical assistance involving code for incompatible themes.

  • Provide approximately 2-3 hours of support each day (Monday – Friday)
  • Provide 2 sessions of support daily (1-1.5 hours each on average)
  • Work from anywhere, but must be available at least half of the hours from 9AM-5PM EST
  • Respond to customers via Help Scout
  • You will receive payment via PayPal

Qualifications

  • Working knowledge of WordPress, including theme and plugin basics
  • Advanced understanding of CSS
  • Proficient in PHP (comfortable assessing and editing code)
  • Basic understanding of javascript / jQuery
  • Proficient in HTML
  • Fluent written English
  • Skilled with troubleshooting problem solving, and using Chrome DevTools (or web inspector of your choice to source CSS, HTML, and Javascript issues
  • Polite, patient, professional, and good customer service skills

In general, you should feel comfortable assessing any front-end problem given the appropriate tools and access.

Above all, I am looking for a fast learner. I don’t expect you to know everything right away, but to be able to pick up on things quickly.

Bonus attributes

These are not required, but would be considered advantageous

  • Experience with UberMenu 3
  • Experience developing WordPress themes or plugins
  • Experience supporting other Envato authors, or providing WordPress assistance elsewhere

How to Apply

Please fill out the application below to apply. I expect to get back to candidates early next week, depending on how many applications I receive. Thanks for your interest and I’m looking forward to hearing from you!

Help a dev out! When asking for support: ALWAYS include a URL

So, something isn’t working on your website, and you need an expert to tell you what’s wrong. To get the best support possible, you need to allow them to view your website so they can investigate.

I frequently receive support requests from customers asking me to diagnose issues based on just a description or a screenshot. As someone who deals with troubleshooting customer site issues a lot, I can tell you that access to the site itself is almost always a prerequisite to providing assistance. While it seems obvious to a developer that this is a necessity, it doesn’t occur to some customers, so I thought I’d explain why access to the actual site is so critical when troubleshooting.

Vague symptom reports and screenshots don’t tell the whole story

Unfortunately, customer reports of site issues are rarely reliable, simply due to lack of expertise. Just like I can’t give a mechanic a useful diagnosis of issues with my carburetor, non-developer analyses of website issues are similarly unhelpful (or at least incomplete) for troubleshooting the problem (customers with the skills to provide a complete analysis have already solved their own problem in 99% of cases). In the best case, the report is but one piece of the puzzle; in the worst case, the report is misleading as the user has misinterpreted the issue (that’s not a z-index issue, it’s a hidden overflow problem).

Screenshots are little better for troubleshooting – though they can certainly be useful in drawing attention to the location of the problem. The visual output of an issue is only a small fraction of the information available to an expert attempting to diagnose a problem. In my experience, guessing based on a screenshot is essentially pointless.

Analogy time.

Accessing your site in a browser is like getting under the hood of your car

Car troubleshooting

When you’ve got automobile problems, you need to bring your car into the shop. They can run diagnostics, test the battery, check the oil level, and see the engine firsthand. In short, the mechanic needs to get under the hood to investigate the source of the problem.

The same thing is true with websites. The customer only sees the symptoms on the surface – the end result. The developer, with specific browser tools, can look at the underlying HTML, CSS, JS, and DOM structure, view javascript error logs, investigate the loading of resources over the network, troubleshoot CSS selector specificities, debug javascript execution, and even test solutions.

Firsthand access to the website is absolutely critical to the accurate diagnosis of any non-trivial site issue.

Luckily, providing access to a website is a lot cheaper than a tow truck.

Just the tip of the iceberg

Keep in mind that symptoms and diagnoses are not 1:1 relationships. There could be multiple causes for the same symptom, so a developer can rarely offer a definitive solution based on a symptom report alone. For example, let’s say a custom CSS style isn’t working on a website (a common support request: “I added some CSS but it didn’t work – why?”). Here’s a partial list of why that might occur:

  1. The stylesheet didn’t load (this in and of itself could have several different causes)
  2. The stylesheet loaded, but a syntax error prior to the style in question prevented the style from being processed by the browser
  3. The custom CSS selector did not properly target the intended element
  4. The custom CSS selector targeted the element properly, but did not have a high enough specificity and was overridden by another style.
  5. The custom CSS was properly applied but was missing the prefix for the desired browser.
  6. A caching plugin is in use and the cache was not cleared, so the site is still serving up old stylesheets without the new custom CSS
  7. An HTML syntax error caused a DOM error that prevents style rendering in Internet Explorer
  8. A bad doctype has sent IE into quirks mode, altering the rendering of the DOM elements

A single symptom might be the indicator for a number of underlying causes

A report that “the CSS doesn’t work” or a screenshot showing a lack of styling gets us no closer to a resolution because it gives us no information to troubleshoot. As soon as the URL is provided and the developer can get “under the hood,” the cause behind the symptom can be diagnosed, and a solution can be provided.

Imagine calling your mechanic and saying “my car won’t start, what is wrong?”

Well,

  1. Your battery might be dead
  2. The spark plugs might be worn out
  3. The ignition timing might be off
  4. The distributor cap might be cracked
  5. The car might be out of gas
  6. Maybe the engine is flooded from that time you drove through that puddle the size of Lake Michigan
  7. Maybe you didn’t turn the key or have your foot on the break when you pressed the keyless ignition start button

(or probably 50 other reasons – I’m not a mechanic, and I don’t play one on TV)

You’ll need to bring it into the shop, because your mechanic can’t tell the source of the issue without looking under the hood. Neither can your web developer.

But I’m still in development!

So, what do you do if your site isn’t public, so your expert/developer can’t see it? You have a few options:

1. Try to debug it yourself with the resources at your disposal. In the case of UberMenu for example, I’ve provided a Troubleshooter that will walk you through troubleshooting common symptoms.

2. If your site is on a public server but requires credentials, provide credentials to the expert troubleshooting your site.

3. If your site is not on a public server, and you don’t know how to troubleshoot it yourself, you’ll either need to hire someone to come over and view the site on your local network, or put the site up on a public server temporarily so the expert can troubleshoot it remotely. I recommend the latter.

4. If it’s a code problem that isn’t site-specific, create a demonstration of the issue that others can troubleshoot. CodePen and JS Fiddle are excellent resources. As CodePen states: Demo or it didn’t happen.

Demo or it didn’t happen


If you want help from a developer, it’s up to you to provide the requisite access. Your doctor needs to X-ray your arm to see if it’s broken, your mechanic needs to check your car’s oil to tell if it needs replacing, and web developers need to see your website in a browser in order to troubleshoot it. Expecting a developer to be able to diagnose and provide a solution for a problem that they can’t investigate simply isn’t reasonable.

Want good support? The most important thing to do is to make it as easy as possible for the developer to troubleshoot your site by providing them all the resources they need. That and be polite – the friendly customer is going to get a better response than the belligerent customer any day of the week 🙂

Happy troubleshooting!

Quick Tip: How to add a Skype URI Link to your WordPress Menu

Overview

Skype URIs provide the ability to insert links into your website which will launch the Skype app when clicked.

You might think that adding a Skype link to your WordPress site’s menu would be a nice idea, but when you go to save your custom URL, you’ll notice that the URL is stripped by the WordPress menu system and you’re left with an anchor tag with no href attribute.

This happens because WordPress rejects URLs whose protocols aren’t whitelisted. By default, the following protocols are whitelisted and can therefore be added to custom URLS in your menu:

  • http
  • https
  • ftp
  • ftps
  • mailto
  • news
  • irc
  • gopher
  • nntp
  • feed
  • telnet

The solution is therefore to add the skype protocol to the whitelist.

Tracking the issue

There isn’t much documentation for custom menu item (Link) URLs, so when you try to save it silently fails and there is no indication as to why the URL won’t save properly.

By digging through the core code, I found that the menu item settings are validated and saved in the wp_update_nav_menu_item function located in wp-includes/nav-menu.php. This function calls esc_url_raw() on the submitted menu item URL prior to saving the updated value.

The esc_url_raw function can take a list of protocols as a parameter, however at this point there is no hook with which we could add our custom protocol without editing the core file – therefore we continue to dig for a customization point. The esc_url_raw function calls the esc_url function in wp-includes/formatting.php, which checks that the protocol of the URL is present in the array of whitelisted protocols returned by wp_allowed_protocols.

Thankfully, the wp_allowed_protocols function, defined in wp-includes/functions.php, provides a filter kses_allowed_protocols, which is the key to adding our Skype protocol to the whitelist.

The solution

Once we track down the appropriate filter, the solution is actually quite simple. We filter the $protocol array and add the Skype protocol:

function ss_allow_skype_protocol( $protocols ){
	$protocols[] = 'skype';
	return $protocols;
}
add_filter( 'kses_allowed_protocols' , 'ss_allow_skype_protocol' );

This code would be well placed in a child theme’s functions.php

After adding this code to your installation, you should be able to save Skype URIs like skype:username?call by creating a new Custom Menu Item (Link) in your menu and adding the Skype URI as your custom URL:

The same method should work with any other custom protocols.

UberMenu 2.4 Update Announcement

UberMenu 2.4 is here! It offers a few new features and tweaks.

Common Questions

Is it backwards compatible?

Yes, it’s backwards compatible. Installing this update won’t change any of your settings or require you to redo everything.

How do I update?

In short, back up any custom files and overwrite the old files on your server with the new ones in the download package. There are no special update instructions for this version.

For a complete walkthrough, see Knowledgebase: Installing Updates

Where do I get the latest version?

The latest version of UberMenu is always available through your CodeCanyon Downloads Page.

New Features

Here are some new features in UberMenu 2.4

Improved Android and Windows 8 Touch handling

UberMenu 2.4 takes a big step toward unifying the touch interface for all devices. Android and Windows 8 touch devices now work more like iOS devices – the first tap on a menu item opens its submenu, and the second will follow the link.

New Media Uploader

UberMenu 2.4 integrates the latest WordPress media uploader so that selecting images is even easier than before. Drag and Drop your images to upload, and just click “Select” to set your image.

HTML now allowed in Descriptions

You can now place HTML markup right in your descriptions box, increasing the flexibility of your menu styles.

Search the Knowledgebase from the Control Panel

You can now search the Knowledgebase straight from the Control Panel, making it even easier to find the article relevant to your question without leaving your admin screen.

WordPress 3.8 Compatibility

UberMenu 2.3 already ran properly on WordPress 3.8, but UberMenu 2.4 adds a few extra tweaks to make it even more seamless.


Various other tweaks and minor browser bug fixes also come with this release, so I recommend upgrading to take advantage of this new version.

Enjoy UberMenu 2.4!

Displaying Categories Dynamically with UberMenu: Writing an auto-population shortcode

Please note this functionality is now built in to UberMenu 3, with the new Dynamic Content feature.

One thing the WordPress 3 Menu System lacks is the ability to dynamically insert/auto-populate content such as Categories. However, with UberMenu – Responsive WordPress Mega Menu Plugin you can use the menu’s Content Override / Shortcode capability to insert any content you want to into the menu.

One use case is the need to place several columns of categories, stacked top to bottom and then left to right. We could do this with the standard WordPress Menu System and UberMenu by creating third level menu items for each category. The main issue with this is ease of maintenance, which can become tedious when dealing with large numbers of menu items that may change frequently.

Our goal is to:

  1. create a shortcode that will dynamically generate several columns of categories
  2. automatically optimize the number of categories per column to keep them as level as possible
  3. make the shortcode flexible to be able to return specific terms from any taxonomy

The strategy will be to create a wrapper shortcode for the WordPress core get_terms() function, and then output the results in several lists, which we will turn into a column layout with some simple CSS.

Download the PHP & CSS

Part 1: The Shortcode

Shortcode Skeleton

First, we’re going to define a shortcode, menu-terms, in our child theme’s functions.php, along with its accompanying function.

function ss_menu_terms( $atts ){

}
add_shortcode( 'menu-terms' , 'ss_menu_terms' );

The rest of the PHP will go inside the ss_menu_terms function, which will take the arguments passed to the shortcode and return the requested terms in the proper number of columns.

Define Arguments

Next we’re going to define the arguments for the shortcode, along with intelligent defaults, to minimize the amount of arguments that need to be passed to the shortcode. We’re going to define a few output-specific arguments, plus the arguments taken by the get_terms function, to make our shortcode as flexible as possible.

After that we’ll also convert our arguments into proper data types: strings into booleans and arrays.

	extract( shortcode_atts( array(
		'tax' 			=> 'category',
		'display_count'	=> 'false',
		'columns'		=> 5,

		'orderby'		=> 'name', 
		'order'			=> 'ASC',
		'hide_empty'	=> 'false', 
		'exclude'		=> array(), 
		'exclude_tree'	=> array(), 
		'include'		=> array(),
		'number'		=> '', 
		//'fields'		=> 'all', 
		'slug'			=> '', 
		'parent'		=> '',
		'hierarchical'	=> 'true', 
		'child_of'		=> 0, 
		'get'			=> '', 
		'name__like'	=> '',
		'pad_counts'	=> 'false', 
		'offset'		=> '', 
		'search'		=> '', 
		'cache_domain'	=> 'core'
	), $atts ) );

	$display_count = $display_count == 'true' ? true : false;
	$hide_empty = $hide_empty == 'true' ? true : false;
	$hierarchical = $hierarchical == 'false' ? false : true;
	$pad_counts = $pad_counts == 'true' ? true : false;

	if( strpos( $tax , ',' ) ) $tax = explode( ',' , $tax );
	if( !is_array( $exclude ) ) $exclude = explode( ',' , $exclude );
	if( !is_array( $exclude_tree ) ) $exclude_tree = explode( ',' , $exclude_tree );
	if( !is_array( $include ) ) $include = explode( ',' , $include );

The tax argument will define our target taxonomy and allow the plugin to work categories, tags, or any custom taxonomy

The display_count argument will allow us to display a count of the number of posts associated with a term, if we choose.

The columns argument will define the number of columns to evenly divide the terms between.

The rest of the arguments are specific to the get_terms function, and are all defined here. Since we can’t pass arrays or booleans via a shortcode, we’ll use comma-delimited strings and boolean text strings instead.

Get the Terms

Now that we have all of our arguments, we’ll compress them into an array and pass them to the get_terms function to get our list of $term objects.

	$term_args = compact( 
			'orderby' , 'order' , 'hide_empty' , 'exclude' , 
			'exclude_tree' , 'include' , 'number' , 'slug' , 
			'parent' , 'hierarchical' , 'child_of' , 'get' ,
			'name__like' ,  'pad_counts' , 'offset' , 
			'search' , 'cache_domain' );

	$terms = get_terms( $tax , $term_args );

Calculate Columns

Next, we figure out how many columns we need by dividing the number of total terms by the number of desired columns and rounding up.

$n = count( $terms );
$per_column = ceil( $n / $columns );

Now that we know how many terms per column we need, we just start a new list every $per_column items.

Output the terms

Finally, we loop through the terms, creating out lists and list items, and wrapping the term names in links to the term archive pages. We create an output string and return that, because shortcodes must always return their values and not print them directly.

$html = '<div class="menu-terms menu-terms-col-'.$columns.'">';

$html.= '<ul class="menu-terms-column">';

foreach( $terms as $i => $term ){
	$html.= '<li class="term-'.$term->term_id.' term-slug-'.$term->slug.' term-taxonomy-'.$term->taxonomy.'">';
	$html.= '<a href="'.get_term_link($term).'">';
	$html.= $term->name;
	if( $display_count ) $html.= ' ('.$term->count. ')';
	$html.= '</a></li>';

	if( ($i+1) % $per_column == 0 ){
		$html.= '</ul><ul class="menu-terms-column">';
	}
}

$html.= '</ul></div>';

return $html;

Our final shortcode definition looks like this:

function ss_menu_terms( $atts ){

	extract( shortcode_atts( array(
		'tax' 			=> 'category',
		'display_count'	=> 'false',
		'columns'		=> 5,

		'orderby'		=> 'name', 
		'order'			=> 'ASC',
		'hide_empty'	=> 'false', 
		'exclude'		=> array(), 
		'exclude_tree'	=> array(), 
		'include'		=> array(),
		'number'		=> '', 
		//'fields'		=> 'all', 
		'slug'			=> '', 
		'parent'		=> '',
		'hierarchical'	=> 'true', 
		'child_of'		=> 0, 
		'get'			=> '', 
		'name__like'	=> '',
		'pad_counts'	=> 'false', 
		'offset'		=> '', 
		'search'		=> '', 
		'cache_domain'	=> 'core'
	), $atts ) );

	$display_count = $display_count == 'true' ? true : false;
	$hide_empty = $hide_empty == 'true' ? true : false;
	$hierarchical = $hierarchical == 'false' ? false : true;
	$pad_counts = $pad_counts == 'true' ? true : false;

	if( strpos( $tax , ',' ) ) $tax = explode( ',' , $tax );
	if( !is_array( $exclude ) ) $exclude = explode( ',' , $exclude );
	if( !is_array( $exclude_tree ) ) $exclude_tree = explode( ',' , $exclude_tree );
	if( !is_array( $include ) ) $include = explode( ',' , $include );

	$term_args = compact( 
			'orderby' , 'order' , 'hide_empty' , 'exclude' , 
			'exclude_tree' , 'include' , 'number' , 'slug' , 
			'parent' , 'hierarchical' , 'child_of' , 'get' ,
			'name__like' ,  'pad_counts' , 'offset' , 
			'search' , 'cache_domain' );

	$terms = get_terms( $tax , $term_args );

	$n = count( $terms );
	$per_column = ceil( $n / $columns );

	$html = '<div class="menu-terms menu-terms-col-'.$columns.'">';

	$html.= '<ul class="menu-terms-column">';

	foreach( $terms as $i => $term ){
		$html.= '<li class="term-'.$term->term_id.' term-slug-'.$term->slug.' term-taxonomy-'.$term->taxonomy.'">';
		$html.= '<a href="'.get_term_link($term).'">';
		$html.= $term->name;
		if( $display_count ) $html.= ' ('.$term->count. ')';
		$html.= '</a></li>';

		if( ($i+1) % $per_column == 0 ){
			$html.= '</ul><ul class="menu-terms-column">';
		}
	}

	$html.= '</ul></div>';

	return $html;
}
add_shortcode( 'menu-terms' , 'ss_menu_terms' );

Part 2: The CSS

Now we have our markup – by default, 5 lists with the terms evenly distributed among them. But right now they’re just unstyled lists. Adding CSS will turn them into the columns we want.

First, we’re going to define a class, menu-terms-item which we will add to our menu item to ensure it takes up the whole with of the submenu; otherwise our percentage-based columns won’t spread out properly.

#megaMenu ul.megaMenu .menu-terms-item{
	width:100%;
	-webkit-box-sizing:border-box;
	-mox-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}

Next, we’ll define the layout of the columns themselves, as well as a simple grid to define the percentage widths of the columns from 1 to 8.

#megaMenu ul.megaMenu .menu-terms{
	margin-top:10px;
}
#megaMenu ul.megaMenu .menu-terms a{
	text-decoration: none;
}
#megaMenu ul.megaMenu .menu-terms ul.menu-terms-column{
	-webkit-box-sizing:border-box;
	-mox-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	float:left;
	margin:0;
	padding-right:20px;
	margin-bottom:20px;
	list-style:none;
}
#megaMenu ul.megaMenu .menu-terms.menu-terms-col-1 ul.menu-terms-column{ width: 100%; }
#megaMenu ul.megaMenu .menu-terms.menu-terms-col-2 ul.menu-terms-column{ width: 50%; }
#megaMenu ul.megaMenu .menu-terms.menu-terms-col-3 ul.menu-terms-column{ width: 33%; }
#megaMenu ul.megaMenu .menu-terms.menu-terms-col-4 ul.menu-terms-column{ width: 25%; }
#megaMenu ul.megaMenu .menu-terms.menu-terms-col-5 ul.menu-terms-column{ width: 20%; }
#megaMenu ul.megaMenu .menu-terms.menu-terms-col-6 ul.menu-terms-column{ width: 16%; }
#megaMenu ul.megaMenu .menu-terms.menu-terms-col-7 ul.menu-terms-column{ width: 14%; }
#megaMenu ul.megaMenu .menu-terms.menu-terms-col-8 ul.menu-terms-column{ width: 12%; }

Finally, below 768 pixels we will collapse the terms into two columns, and below 480px we will collapse them into a single column:

@media only screen and (max-width:767px) {
	#megaMenu ul.megaMenu .menu-terms-item{ width:100% !important; }
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-1 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-2 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-3 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-4 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-5 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-6 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-7 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-8 ul.menu-terms-column{ width: 50%; }
}
@media only screen and (max-width:479px) {
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-1 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-2 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-3 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-4 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-5 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-6 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-7 ul.menu-terms-column,
	#megaMenu ul.megaMenu .menu-terms.menu-terms-col-8 ul.menu-terms-column{ width: 100%; }
}

See also Adding Custom CSS

Part 3: Adding the Shortcode to the menu

Now that we have all our code in place, we’ll add it to our menu. The intention is to auto-populate a full row of leveled columns with a single menu item / shortcode.

First, make sure you have Content Overrides Enabled

Next, create a new second level menu item. I recommend using a “Link” menu item and setting the URL to # and checking the “Disable Link” option. However, you can use any type you like.

If you don’t want to display the link’s Navigation Title above the columns of categories, check the “Disable Text” option.

Next, add the menu-terms-item class to your menu item

Finally, insert the shortcode itself into the Custom Content box.

[menu-terms]

Here’s the result:

The categories are sorted alphabetically by default.

Part 4: Using the shortcode arguments

We can refine the terms returned and their layout by passing arguments to the shortcode. Here are some examples:

Columns

By default, 5 columns to be displayed. To display 6, we would use

[menu-terms columns="6"]

Sorting

By default, the terms will be ordered alphabetically. To order them by ID, you would use

[menu-terms orderby="id"]

Hierarchies

With no arguments passed, the shortcode will return all terms in the taxonomy (by default, this means all Categories). If we want to restrict the set to children of a specific menu item, we can do this:

[menu-terms child_of="5"]

Where 5 is the ID of the parent item.

Different taxonomies

If you have a custom taxonomy you want to display, you can pass the tax argument.

[menu-terms tax="product-categories"]

For example, maybe you have a product categories taxonomy for an e-commerce site, and you have subcategories under “Men’s”, “Women’s”, etc. If your “Men’s” term ID is 10 and your “Women’s” term ID is 20, you could display their subcategories in two different submenus using these two different instances of the shortcode:

[menu-terms tax="product-categories" child_of="10"]
[menu-terms tax="product-categories" child_of="20"]

The first would display only Men’s categories, and the second only Women’s

Exclude items

If you want to exclude specific items, you can do so by ID. List multiple IDs in a comma-separated string

[menu-terms exclude="15,20,76"]

The full set of get_terms parameters and what they do can be found in the WordPress Codex.

Full Code

Download the PHP & CSS