Dynamically Populate Gravity Forms Drop Down Fields

Gravity Forms is one of the best form plugins for WordPress powered websites. It allows you to quickly and easily create a form by dragging and dropping form elements into the editor, change their names, properties and settings. One of many elements available to use is the drop down field. You can either add the values manually using the form editor or populate all items dynamically via filters in your code.

For this example we will be covering dynamic drop down population via filters. We’ll end up with a drop down field populated with a list of movies, which is set up as a custom post type in our WordPress installation.

The first thing we’re going to do is add a new drop down field to our form. Here is what it looks like when you expand the edit options:

Drop down field

In order to keep it organized, and since we’re going to dynamically populate the items, we can delete all the default items (First Choice, Second Choice, Third Choice) that Gravity Forms adds when you add the field to the form.

If you check the official Gravity Forms documentation, you will see that it suggests you to write down the Field Id (in this example, id = 5) so you can use it in your code to target the correct element to be populated.

Even though this will work, I would prefer to add a class to the element and check for this class when targeting the element in the code. This way there’s no need to worry about ids, which sometimes can be a problem if you work with different environments or servers where the ids can be different on each installation.

For this field, we’re going to use the class name ‘movies-dropdown’, set under Appearance > Custom CSS Class on our drop down.

Drop down settings

With our drop down set up in the form editor, it’s time to created the logic behind it. The filter we’ll be using is the ‘gform_pre_render’ filter, which is executed before the form is displayed and can be used to manipulate the Form Object prior to rendering the form.

Here is the code:

 

Gravity Forms is an great plugin and it allows you to build pretty much any custom functionality using its Hooks and Filters, and there are many others you can use. For more information and details about all of the Gravity Forms features, you can always refer to their official API Functions documentation.

Hope this helps and see you next time!

Include Private/Draft Pages In Parent Dropdowns

Screen Shot 2014-09-02 at 3.52.08 PMBy default, WordPress only includes published pages in the dropdown select menu that allows you to choose a parent for a particular page. This is a pretty well documented problem that is yet to be addressed in core. Not a huge issue, however it can cause some pretty pesky problems.

For example, say you have a parent page and a child page that aren’t quite ready to share with the world, so you want to make them private. So you edit the parent page and set it to private. Then you go to the child page to set it to private. Alas, the parent page will no longer appear in the dropdown “parent” menu, and thus if you save the child page at all, it becomes parentless. No fun, right?

So this snippet fixes that problem by adding private and pending (awaiting review) pages to the parent dropdown menu – and it works for bulk editing, quick editing, and editing in a single page view. If you want to tweak the post_status types that are included, just edit the array listed in the code, using values from the WP_Query codex page.

How to Properly Move the Entire Site Footer in Genesis

How to properly move the Genesis site footerWe recently had the need to move the entire .site-footer div in Genesis. There are various tutorials out there that suggest using the following code to relocate your footer content:

However this won’t actually move the entire .site-footer div. On the contrary, it will only relocate the contents of the div, which means you’ll end up with:

  1. An empty .siter-footer div
  2. Your site-footer content orphaned somewhere on your page with no good semantic classes or IDs

Not good, right?

So if you want to properly move the entire site footer, use the following code (making sure to substitute the desired hook in place of new_hook below):

How to Synchronize Social Media Shares, Counts, and Comments Across HTTP and HTTPS

Social Media

The Issue

I use a social media, sharing, or commenting plugin and it shows different data on HTTP and HTTPS versions of the same page/post.

Viewed via HTTP

Viewed via HTTP

Viewed via HTTPS

Viewed via HTTPS

Why Does This Happen?

We build a lot of sites that use social media sharing and commenting plugins, such as:

And if you really want to boil it down to the basics, each of these plugins essentially does the same thing: associate data (comments, share counts, likes, etc) with a specific URL. Pretty simple, right?

The issue described at the very beginning of this article arises because HTTP and HTTPS versions of the same page look like two separate URLs to most of these plugins.For all intents and purposes, these two URLs are treated as separate pages by most plugins, even though they point to the exact same content. That little ‘s’ makes all the difference.

I imagine there are times when this separation is desirable, however we typically want HTTP and HTTPS versions of a page to be treated the same, so that all comments, likes, shares, etc. appear the same, regardless of which protocol is being used in the URL. If that’s what you’re looking to do, then read on. . .

The Solution

To solve this problem, we essentially have to do two things:

  1. Get the HTTP version of the current page/post URL.
  2. Pass this URL to the plugin.

1. Get the HTTP URL

This is the easy part. We generally use the following bit of code (which can be placed in functions.php):

In this snippet, we’re doing two things:

  1. Defining a function, get_http_url( $url ), which converts any URL to HTTP.
  2. Creating a shortcode, [http-url], which outputs the HTTP version of the current post/page URL.

Note: We could have combined these into one simple shortcode, however I prefer separating each bit of functionality out into it’s own function, so that we can use them later if so desired.

2. Pass the HTTP URL to the plugin

Now that we can generate the HTTP version of a post/page URL, we need to basically tell our plugin to use this URL (always HTTP) instead of the auto-generated URL (HTTP or HTTPS). How we accomplish this varies from plugin to plugin, so we’ll outline the basic steps and then give two examples below.

The Steps

  1. Figure out how to inject your HTTP URL in place of the auto-generated URL used by your plugin. Good plugins will have a well-documented way to do this. Decent plugins will have a way to do this. Bad plugins will have neither a way to do this, nor documentation (if this is the case, time to switch plugins).
  2. Use the shortcode you created above to insert your HTTP URL.

Examples

We’ll look at two examples: Share Buttons by AddThis and Facebook Comments Box.

Example 1: Share Buttons by AddThis

Share Buttons by AddThis
By default, this plugin will automatically use the current post URL to send and retrieve associated share counts. Fortunately, this plugin falls into the “good” category, as it provides a simple method and clear documentation for overriding the default URL using the addthis:url attribute.

So, say we’ve created a text widget that displays our share buttons. Out of the box, the HTML looks like this:

If we want to ensure that our sharing buttons will always reference the HTTP version of a page’s URL, and likewise ensure that our share counts are the same regardless of which protocol we’re using to view the page, then we can easily use the addthis:url attribute along with our [http-url] shortcode like so:

NOTE: you’ll need to make sure shortcodes are enabled inside widgets, which you can do by adding add_filter('widget_text', 'do_shortcode'); to functions.php.

Presto! Our share counts are now the same whether we’re viewing HTTP or HTTPS.

Example 2: Facebook Comments Box

Facebook
This plugin is a little trickier, and falls somewhere between “good” and “decent”. The plugin does provide us with a handy filter, facebook_rel_canonical, however the documentation is pretty tough to track down. According to the plugin’s readme.txt file, the facebook_rel_canonical filter “affects Open Graph protocol URL definitions, URL references sent in Open Graph actions, and more.” Kind of obscure, but sounds like we’re in the right place.

So, whereas before we we’re simply outputting some custom HTML, this time we have to use WordPress’ native filters API to substitute our HTTP URL for the plugins default URL:

Just include this snippet in functions.php and you’re ready to go! Comments will now all be associated with the HTTP URL of any given post/page.

In Conclusion

While the details may vary depending on what plugin you’re using, the essential principals remain the same:

  1. Get the HTTP version of the current URL.
  2. Pass this URL to your plugin.

I find that sleuthing around different plugins to figure out how to pass in my custom URL is actually a pretty enjoyable (though sometimes time-consuming) task. I inevitably learn more about how the plugin works, and usually discover a handy trick or two along the way.

And if you run into a brick wall and just can’t figure it out, always feel free to file a support request or email the plugin author.

And if that fails, you can always contact us – we love a good challenge.

And if that fails. . . well. . . time to switch plugins 🙂

New Mm Theme: Trestle

[box type=”download”]

Trestle

A handy boilerplate child theme for serious Genesis developers.

Trestle takes a lot of the grunt work out of building sites using the Genesis Framework, providing quick and easy-to-implement solutions to common problems and repetitive tasks. We’ve taken Genesis’ rock-solid foundation, integrated mobile-first CSS, responsive navigation, a full-featured settings panel, and much more. Download. Install. Enjoy.

View Demo » Download »[/box]

Features

Trestle: A handy boilerplate theme for serious Genesis developersTrestle includes tons of helpful features such as:

  • Centralized control panel (Genesis → Theme Settings)
  • Responsive navigation menu
  • Mobile first CSS
  • Custom control over post info and meta
  • Multiple page layouts
  • Auto-generating primary navigation
  • Ability to auto-install your favorite plugins
  • Helpful theme jQuery
  • Compatibility with Genesis Extender plugin
  • Optional link icons
  • Built-in shortcodes (columns, buttons, Font Awesome, etc)
  • Front-end styles appear in editor as well
  • And more!

Still to come. . .

There are some features still on the horizon as well (feel free to add a pull request if you’re interested in contributing):

  • SASS support
  • Direct logo implementation (non-CSS)

WordPress Captions – How to Remove Default 10px Padding

One of the things WordPress does right out of the box that we don’t always like is automatically add an extra 10px of width to all images with captions. This is great if you want to preserve the default .wp-caption styling with a nice 5px of padded gray around the image, but if you change your CSS then you can end up with something not so great, like this:

Why the extra padding!

Well here’s a quick workaround using the newish img_caption_shortcode_width filter:

 

How to Get URLs for WordPress Admin Menu Items

Get WordPress admin menu item URL'sRecently, we were working on a project in which we needed a reliable way to get URL’s for WordPress admin menu items (Dashboard, Posts, Plugins, Tools, etc). Despite our best searching efforts, we simply could not find an answer – seemingly no existing function to accomplish this task. So we ended up digging into menu-header.php, the file that generates WordPress admin menu, and creating a function of our own.

get_admin_menu_item_url() retrieves a URL based on an admin menu item’s associated “file”:

 Usage

To use get_admin_menu_item_url(), you first need to figure out the “file” that corresponds to the menu item you’re interested in. This file name can be found by accessing items in the global $menu and $submenu arrays – which hold the top- and sub-level admin menu items. Each of these items is an array with the following key/value pairs:

0 – name
1 – capability
2 – file
3 – class
4 – id
5 – icon source

What we’re interested in is the file, which is the unique identifier that will allow us to retrieve the menu item’s URL. So when all is said and done, your code might look like this:

 

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)

Post Navigation for Use with Types & Views and URL Parameters

This code is an example of post navigation for use specifically with Types & Views. The post navigation works well in tandem with View’s parametric search forms, and can output next/previous post links based on URL parameters that indicate custom taxonomies and fields.… Read More »