How to add additional fields to Easy Digital Downloads’ register account form

The code snippet below shows you how to create 2 additional fields (company and title) on Easy Digital Download’s register account form, and saves them to the newly registered user’s profile.

Add the code to your child theme’s functions.php, or to a plugin.

Custom fields added to the register account form

custom-register-account-form

Custom fields added to user’s profile on account creation

custom-user-profile

A creative use of EDD Hide Download and EDD Cross-sell & Upsell

EDD Hide Download (free) and EDD Cross-sell & Upsell (commercial) are both plugins I’ve recently built for Easy Digital Downloads.

EDD Hide Download allows you to hide a download from the custom post type archive page and anywhere where the standard downloads shortcode is being used (if you are using a custom query to retrieve the downloads, it’s easy to hide them from the custom loop also).

EDD Cross-sell & Upsell allows you hand-pick cross-sell products to display at checkout when a customer adds a specific product to their cart, or on single product pages as upsells.

Combine these two plugins together and you can do something rather neat.

Say you run a WordPress plugin shop, selling commercial plugins. Wouldn’t it be nice to be able to cross-sell your customers a type of service such as plugin installation, or even priority support without having these services appear directly in your product listings? Such services sometimes need to be directly related to a particular product and wouldn’t sit nicely amongst your other products.

With EDD Hide Download combined with EDD Cross-Sell & Upsell, you can still add these services as downloads within Easy Digital Downloads, yet only have them appear at checkout when the plugin is added to the cart.

Can you think of any other clever uses?

Shop Front now available on WordPress.org

I’m pleased to announce that Shop Front is now hosted on WordPress.org.

Download now

A couple of important things to note:

Shop Front now requires Easy Digital Downloads 1.7 or greater

Easy Digital Downloads 1.7 was released this week (already at v1.7.1) and with it came some modifications to purchase buttons. Because of these changes, Shop Front now requires Easy Digital Downloads 1.7 or greater.

Automatic theme updates are now handled via WordPress.org

There’s no need anymore for a license key to receive automatic theme updates, as WordPress.org now handles the theme updates. Shop Front is still available to download from this website, and it will upgrade fine.

Not selling digital products just yet?

Shop Front also functions as a typical WordPress blog without Easy Digital Downloads, so if you’re just starting your website and not quite sure if you’ll be selling digital products in the future, there’s no harm in using Shop Front. When the time comes to sell your digital products, you’ll be all set!

How to filter shortcodes in WordPress 3.6

There’s a hidden gem available in WordPress 3.6 that I’m excited about, and that is the shortcode_atts_{$shortcode} filter. It will allow developers to filter a shortcode by passing in new shortcode parameters, and even override existing ones. You can read more about it in this post by Mark Jaquith.

Taking advantage of shortcode_atts_{$shortcode} in a plugin

EDD Featured Downloads is a plugin I wrote for Easy Digital Downloads that allows you to display your featured downloads via a [[edd_featured_downloads]] shortcode.

It’s always bugged me that I had to copy the entire [[downloads]] shortcode from the core Easy Digital Downloads plugin, just to do a simple query to retrieve the correct posts.

Each time EDD was updated, I’d have to check my plugin and make sure that it matched EDD’s plugin for consistency. I even left myself a comment in the code, reminding myself why I created the shortcode in the first place:

/**
* Featured Downloads Shortcode
* Created a new shortcode as filtering the shortcode atts is not possible yet
* https://core.trac.wordpress.org/ticket/15155
* @since 1.0
*/

Shortcodes must include the new parameter to be filterable

One thing to note is that the shortcode you are filtering must have the new parameter included as the 3rd parameter in the shortcode_atts array. This will be the {$shortcode} in the filter name. WordPress 3.6’s core shortcodes (gallery etc) will have this new parameter added when it is released.

In the spirit of ditching my plugin’s shortcode, I submitted a minor patch to Easy Digital Downloads that will appear in v1.7.2 (At the time of writing, EDD is still on v1.7.1).

Here’s what that 3rd parameter looks like in the shortcode_atts array:

extract( shortcode_atts( array(
// an array of the shortcode's default options
), $atts, 'downloads' ) // the new 'downloads' parameter which will allow filtering
);

How to use the shortcode_atts_{$shortcode} filter

Now that the shortcode is filterable, we can build our filter. Going by the example above, the filter’s name would be:

shortcode_atts_downloads

Filtering the shortcode

The following code adds a new “featured” parameter to the [[downloads]] shortcode in Easy Digital Downloads.

function edd_fd_filter_downloads_shortcode( $out, $pairs, $atts ) {
    $out['featured'] = '';
    return $out;
}
add_filter( 'shortcode_atts_downloads', 'edd_fd_filter_downloads_shortcode', 10, 3 );

My EDD Featured Downloads plugin can now use EDD’s default downloads shortcode like this:

[[downloads featured="yes"]]

Now that we’ve added the new shortcode parameter, we need to do something with it. I want my plugin to filter the download query to show only posts with the edd_feature_download meta key, but only if featured is set to yes. Here we’re relying on a filter already available in the EDD downloads shortcode called edd_downloads_query.

function edd_fd_filter_downloads_query( $query, $atts ) {
    if( isset( $atts['featured'] ) && 'yes' == $atts['featured'] ) {
        $query['meta_key'] = 'edd_feature_download';
    }

    return $query;
}
add_filter( 'edd_downloads_query', 'edd_fd_filter_downloads_query', 10, 2 );

The end result

The next version of my EDD Featured Downloads plugin will rely on both EDD 1.7.2+ and WP 3.6+ but I’ve managed to replace just over 160 lines of code with the two simple filters you see above.

This drastically reduces code, plugin maintenance as well as future-proofing it against future updates within the Easy Digital Downloads plugin.

How to add a new mime type to WordPress

I’ve just started using HTML5 video on my website but when I tried to upload a .webm file to WordPress’ Media Manager, it presented me with this error:

webm-file-upload-error

It turns out that WordPress doesn’t have .webm as part of it’s allowed mime types by default, so we need to add it ourselves.

A quick search on the WordPress core files leads us to the wp_get_mime_types() function in wp-includes/functions.php. Inside this function, on line 1887, WordPress has provided us with a filter called mime_types, perfect.

wp-get-mime-types

Now that we have a suitable filter, we just need to hook onto it and add our new mime type to the existing mime type array. I’ve added webm in this example, but if you needed to add another mime type, you would simply replace the values with your own. Add the following to your functions.php:

Note: Many tutorials on this subject suggest using the upload_mimes filter, but if you’re not careful, you’ll actually replace the entire mime type array, rather than adding to it. This means you won’t be able to upload any file type, but the one you added! not exactly what we want.

If you want to double-check everything went ok, simply dump the contents of the wp_get_mime_types() function directly to your page using a WordPress action hook like template_redirect:

function my_theme_output_upload_mimes() {
    var_dump( wp_get_mime_types() );
}
add_action( 'template_redirect', 'my_theme_output_upload_mimes' );

Refresh your website and you’ll see the mime type array (which is really long) with the new mime type added.

The new mime type array
Our new .webm mime type, added to the existing mime type array

And of course to really test that everything worked as expected, upload your file to the media manager which should now upload perfectly.

How to add any Lightbox script to the Easy Image Gallery plugin

Easy Image Gallery is a plugin I created for creating and managing galleries outside of the WordPress editor. It comes packaged with support for fancyBox and prettyPhoto but it’s really easy to add another Lightbox should you need to do so.

Easy Image Gallery is a plugin I created for creating and managing galleries outside of the WordPress editor. It comes packaged with support for fancyBox and prettyPhoto but it’s really easy to add another Lightbox should you need to do so.

This tutorial will show you how to add Colorbox to the plugin, but the same methods apply for any Lightbox script. Place the following code snippets in your theme’s functions.php or any other file you have included into your theme.

1. Add Colorbox to Easy Image Gallery’s plugin settings

Easy Image Gallery has an included filter called easy_image_gallery_lightbox which allows you to add a new option to the Lightbox select menu. It also properly saves the new option to the database.

The first instance of colorbox is the value saved to the database which we check for in later examples, and the second is merely the label that shows up in the select menu.

Using the code above should get you this:

easy-image-gallery-settings

2. Load the required scripts for Colorbox.

Next we use wp_enqueue_script and wp_enqueue_style to load the JS and CSS files. We load the scripts onto an action hook included with Easy Image Gallery called easy_image_gallery_scripts. This action hook is fired inside a wp_enqueue_scripts action which will load the scripts onto the page.

By using Easy Image Gallery’s action hook, we ensure the scripts are only loaded if there’s a gallery, and that the images within the gallery are linked to larger images.

In the example above, I’ve placed the JS and CSS file in a folder called colorbox which is sitting in the theme’s main folder. Note the use of get_stylesheet_directory_uri() which will first look in the child theme, and then the parent if the files do not exist there.

Some Lightbox scripts like Colorbox also have images so we don’t want to forget those. In this instance we can just copy the images folder from the Colorbox download and include it in our colorbox folder. You’ll need to check with the Lightbox you are trying to implement as to where the images need to reside.

3. Initialise the Colorbox

Finally, we need to initialise the Colorbox script in our footer. Easy Image Gallery provides another handy action hook for doing this called easy_image_gallery_js. Again, by firing on this hook we ensuring that the JS will only load if there’s a gallery and the images link to larger versions.

If you want to add any additional options to the Lightbox, you would add them to JS below. Such options might be the Lightbox opening/closing effect, speed at which it opens etc.

Disabling the custom post type archive page in Easy Digital Downloads

By default, an Easy Digital Downloads powered website has a page that displays all the downloads for you. If you append /downloads to the end of your website URL you will see this page. This is called the custom post type archive page.

By default, an Easy Digital Downloads powered website has a page that displays all the downloads for you. If you append /downloads to the end of your website URL you will see this page. This is called the custom post type archive page.

If you display your downloads on your website via the [[downloads]] shortcode, you may wish to disable this page entirely. I’ve noticed many people don’t even realise such a page exists on their website.

Simply add the following to your theme’s functions.php (or plugin)

Finally, you should visit the Permalinks admin page at Settings → Permalinks. By simply by visiting this page (you don’t need to save) it will flush WordPress’ rewrite rules. If you don’t flush the rewrite rules, chances are you will still see the custom post type archive page, even after you have entered the code above and refreshed the browser.

Shop Front updated to v1.0.4

Shop Front, a free theme for Easy Digital Downloads has been updated to v1.0.4. You can read the full release notes from the Shop Front theme page.

Shop Front, a free theme for Easy Digital Downloads has been updated to v1.0.4. You can read the full release notes from the Shop Front theme page. Here’s some important things to note:

Contact page template removed

The contact form page template has been removed to adhere to WordPress Theme Review guidelines. A contact form is deemed plugin territory so a free Shop Front Contact plugin has been created that will add the contact form back for you.

Simpler button hovers

In previous versions of Shop Front, buttons had a CSS3 box shadow applied to the button’s hover effect. This has now been removed in order to keep the theme cleaner and easier to override from your own styling.

If you preferred the old effect, a CSS file has been provided in the child theme’s “style” folder that will put this back to how it was. This file will show up in the Theme Customizer under “Styling” for you to use, or you can copy the CSS to your own stylesheet.

You can update Shop Front via:

  1. Automatic updates (if you’ve entered the license key)
  2. By logging in and downloading the files again from your download history
  3. By downloading Shop Front again, it’s free!

Enjoy

How to add a breadcrumb menu to the Shop Front theme

To add a breadcrumb menu to Shop Front, we’re going to use a plugin that most of you will be familiar with, WordPress SEO by Yoast. It’s a great plugin for SEO, but it also has built-in breadcrumb support.

Once you have the WordPress SEO plugin installed and activated, head over to the plugin’s internal links page at SEO → Internal Links and enable the checkbox labelled Enable Breadcrumbs (don’t forget to save the options page).

Finally, paste the code below into your child theme’s functions.php. This function simply hooks the breadcrumbs onto one of Shop Front’s action hooks. The breadcrumb menu will now be outputted to the start of the content area.

How to add more fonts to the Shop Front Typography plugin

Shop Front Typography is a free plugin for Shop Front that adds basic typography options to the theme’s customizer. These examples will show you how to add fonts to either the site title or body font list.

Shop Front Typography is a free plugin for Shop Front that adds basic typography options to the theme’s customizer. Paste the following examples into your child theme’s functions.php to add fonts to either the site title or body font list.