Shop Front My Account updated to v1.0.1

The Shop Front My Account plugin has been updated to v1.0.1.

Since Easy Digital Downloads v1.6 phased out the need for the download_history shortcode, the download history section has also been removed from this plugin. If you are seeing what looks like duplicate information (purchase history and download history) then this update will fix that. All the download’s information can now be viewed by clicking on “View Details and Downloads”.

This update also introduces automatic updates to keep the plugin fit and healthy. To get a license key, simply download the free plugin again and activate it from Appearance → Theme License.

Shop Front v1.0.3 released

Shop Front has just been updated to v1.0.3 and included in the Shop section of the theme customizer are new options for changing the cart icon’s functionality. You can now:

  1. Choose between a cart icon or basket icon.
  2. Show no icon in the navigation at all. Depending on which option you chose above, it will just show the equivalent text, Cart (0) or Basket (0).
  3. Align the icon to the left or right of the text.

Depending on which option you choose, various other aspects of theme are also updated accordingly. For example, if you choose cart, the icon that appears when you hover over a download is changed. Also, when you add or remove items to the cart, the text will update to reflect your chosen option.

If you are using the child theme (which you should be) you will need to copy the fonts folder and override your existing one. This is because new icons have been added.

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

Add your own CSS classes to error messages in Easy Digital Downloads

In Easy Digital Downloads I needed to add my own CSS classes to various error messages such as the Error: Please enter your first name that displays at checkout.

This is very useful when you already have CSS classes setup for alert messages. I usually apply CSS classes of “alert” and “error” to an error message, “alert” and “success” for a success message, or “alert” and “notice” for a notice message. Not being able to add my own classes means creating a whole bunch of unnecessary styling.

Thankfully I made a request on the EDD GitHub account and this feature was introduced in EDD 1.4.1. To filter the edd_print_errors() function and add your own CSS classes, you can now do the following:

function sumobi_filter_edd_error_class() {

	$classes = array(
		'edd_errors', // required
		'error',
		'alert'
	);

	return $classes;
}
add_filter( 'edd_error_class', 'sumobi_filter_edd_error_class' );

Make sure you leave edd_errors in the array or when ajax is enabled, your error messages will start to repeat when the purchase button is clicked. This is because the edd-ajax.js file requires the edd_errors CSS class so it can remove the error messages each time the purchase button is clicked, and the form processes the validation.

Modify a child theme’s functionality using action hooks

When working with a WordPress child theme, you may need to change the functionality of the theme without touching any code in the parent theme. This could be as simple as removing functionality, moving a function to a different hook, or adding your own custom functionality.

In this tutorial we’re going to move a function to a different hook. One such example would be to move the navigation (assuming it’s added via a hook) from above the header to below the header, changing the overall appearance of our theme.

Most themes have custom hooks spread throughout the theme that were added with the do_action function. Having these custom hooks available to us in our themes make it very easy to make some fast customizations.

remove_action() & add_action()

We’ll use WordPress’ remove_action and add_action functions, first removing the parent theme’s navigation, and then adding it back into our child theme at the new location.

If you find the original action hook in the parent theme that added the functionality, it might look something like this:

add_action( 'my_theme_before_header', 'my_theme_do_nav' );

In the example above we can see there is a function called my_theme_do_nav. This function might include the code to retrieve the WordPress menu and some other custom code.

This function is then being loaded on a custom hook called my_theme_before_header. This custom hook would naturally appear in the parent theme, somewhere before the header.

Removing the navigation

By copying and pasting the same code into the child theme’s functions.php, replacing add_action with remove_action, we can remove the entire navigation. The first and second parameters must match exactly.

remove_action( 'my_theme_before_header', 'my_theme_do_nav' );

Adding the navigation back in

Now that the navigation has been removed, we’ll add it back in, but after the header. All we need to do is change the hook in the first parameter to reflect our new location. Let’s assume there’s a custom hook in the parent theme called my_theme_after_header.

add_action( 'my_theme_after_header', 'my_theme_do_nav' );

Child functions are loaded before the parent’s

Stopping there would likely yield no results. One important thing to note is that the child theme’s functions are loaded before the parent theme’s functions. We need to create a new function and load it on to a suitable action hook, so that our remove_action and add_action are executed properly.

The template_redirect() action hook is one such suitable hook. The WordPress Codex states that it is run before the determination of the template file to be used to display the requested page. By using template_redirect, we can be sure our actions will overwrite the parent theme’s actions:

function my_theme_shift_navigation() {

    remove_action( 'my_theme_before_header', 'my_theme_do_nav' );
    add_action( 'my_theme_after_header', 'my_theme_do_nav' );

}
add_action( 'template_redirect', 'my_theme_shift_navigation' );

And that’s it. The simple function above first removes the navigation from the parent theme, then adds it back in at a new location, all without touching the parent theme’s code.

How to add Tracking Code to a WordPress Theme

A common task that all WordPress users need to do is insert some form of tracking code into their WordPress theme to track their visitors. This is achieved by writing some very simple code and placing it in the theme’s functions.php file.

In this example we’re going to use Google Analytics’ tracking code but it really doesn’t matter what service you use, just as long as you use the correct code provided, and make sure you are inserting it into the correct place within your HTML markup.

Creating the function

Shown below is the absolute minimum we’ll need to create our function.

function my_theme_name_tracking_code() { ?>

// tracking code will be placed here

<?php }

All it needs is the actual tracking code as noted by the comment. Note how the function name has been prefixed with the name of the theme to lessen the chances of a conflicting function name.

Adding the tracking code

Your tracking code will vary, but generally it will look something like this:

function my_theme_name_tracking_code() { ?>

    <script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
	  _gaq.push(['_setDomainName', 'mydomain.com']);
	  _gaq.push(['_trackPageview']);

	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

    </script>

<?php }

Hooking the function to an action

Now that we have our function, we need to tell WordPress to actually load it somewhere. We do this by hooking the function to an action hook.

Because Google recommends placing their analytics tracking code just before the closing </head> tag, we’ll be using the wp_head action hook. As mentioned in the Codex, the wp_head action hook is triggered within the section of the user’s template by the wp_head() function.

Now that we know where to load it, we need to use the add_action() function, passing 3 parameters to it as seen in the example below.

add_action( 'wp_head', 'my_theme_name_tracking_code', 20 );

The first parameter is the wp_head action hook.

The second parameter is the name of our function that we created earlier. Double check that the function name matches exactly, or it won’t work.

And finally, the 3rd parameter is the priority. In our example we’re using a priority of 20 to make sure it’s loaded after other functions that may also be using the wp_head action hook. Don’t be afraid to increase this number if your tracking code isn’t quite loading before the closing </head> tag. You can check where it’s loading by viewing the HTML source in your browser.

Putting it all together

This is what the completed function should look like. Don’t forget to replace the tracking code with your own.

function my_theme_name_tracking_code() { ?>

    <script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
	  _gaq.push(['_setDomainName', 'mydomain.com']);
	  _gaq.push(['_trackPageview']);

	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

    </script>

<?php }
add_action( 'wp_head', 'my_theme_name_tracking_code', 20 );

Changing the slug in Easy Digital Downloads

When using Easy Digital Downloads to sell your digital products, each download has a URL that looks like this:

http://mywebsite.com/downloads/my-download/

Note the downloads in the URL above. This is the default slug that Easy Digital Downloads creates. Depending on what you are selling, you may wish to change this to better suit your needs. If you are selling music, it would be better to change it to something like music or albums.

Luckily this is very easy to do. Simply add the following to your theme’s functions.php:

if ( ! defined( 'EDD_SLUG' ) ) {
    define( 'EDD_SLUG', 'my-new-slug' );
}

Replace my-new-slug in the example above with your new slug. Finally, it’s a good idea to visit the Permalinks admin page so you don’t get the dreaded “page not found” when viewing downloads with your new slug. Go to Settings → Permalinks in the WordPress admin which will flush the rewrite rules.