Jetpack 4.6: Google Analytics Integration, PHP 7.1 Compatibility, and Publicize Improvements

Jetpack 4.6 just dropped which includes:

  • Google Analytics integration
  • PHP 7.1 compatibility
  • Publicize improvements
  • Enhancements to shortcodes and widgets

Check out the release post for more details or head to your dashboard to update!

Google Analytics integration, PHP 7.1 compatibility, and improvements to Publicize.

Source: Jetpack 4.6: Google Analytics Integration, PHP 7.1 Compatibility, and Publicize Improvements — Jetpack for WordPress

Mapping my Instagram pictures

A few weeks ago, Beau Lebens updated the Keyring Social Importers plugin and also released a plugin called People & Places. I use these plugins to import all of my Instagram pictures and then to tag each Instagram picture.

Taking this foundation, I was able to easily create a plugin to map all of the places where I’ve taken Instagram pictures. You can see that code here:

https://github.com/ebinnion/Places-Map-Shortcode

Usage

Here are some rough steps to get this going.

Here’s an idea of what it’ll look like:

Continue reading “Mapping my Instagram pictures”

How to convert WooCommerce Storefront list view to grid view on mobile

This is an example of what the grid view looks like in Storefront on mobile
This is an example of what the grid view looks like in Storefront on mobile

By default, the desktop view of the Storefront theme shows a grid of products, where each row has 4 products in it.

The mobile view, on the other hand, is a list view where each row only has 1 product. The mobile view is a bit more airy as well, which looks great, but causes a lot of scrolling effort to view all of the products.

To make it quicker and easier for users to browse through products, you could consider changing the list view to a grid view on mobile.

Let’s look at the code

I was able to make this change with just a bit of CSS, and support back to IE10. Not too shabby. Especially considering my friend’s website has only had one IE9 order this entire year. 😱

The first selector (.products) says that we’re going to use flex to handle the layout. The second selector (ul.products:before, ul.products:after) is to address a flex-wrap bug in Safari. And the last selector (ul.products li.product) is what makes each product 50% of the width.

@media only screen and ( min-width: 320px ) and ( max-width: 767px ) {
    .products {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    ul.products:before,
    ul.products:after {
        width: 0 !important;
    }
    ul.products li.product {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        width: 50%;
        padding: 0 .5em;
    }
}

Adding Affiliate WP Dashboard to WooCommerce My Account Page

I was recently working on integrating Affiliate WP into one of my friend’s sites. And after I set it up, I was a bit disappointed that the affiliate users would have a separate account page from the WooCommerce users.

For example, users that were checking order history, saved payment details, and more would go to /my-account. But, users that wanted to check their affiliate details would need to go to /affiliates.

The ideal situation seemed to be to add the affiliate page within the WooCommerce “My Account” page. So, I set about on a journey to make that happen.

Some discovery

It’s always nice to find out if others have solved the problem already. And I was in luck, as there were a few tutorials out there that discussed how to add menu items to the WooCommerce “My Account” page 😄 :

Tom writes great stuff, but this article I found of his is simply to add a menu item to the WooCommerce “My Account” page. It does not discuss how to add content to the tab. So, I worked mainly off of Rodolfo Melogli’s article which does cover how to add content to the tab.

What I ended up with

With just a few tweaks, I was able to integrate Affiliate WP in to the WooCommerce “My Account” page. I’ve included some high-level comments that explain what each section is for.

// Add the rewrite endpoint so that we don't 404 on the new My Account tab
function moh_add_aff_wp_endpoint() {
  add_rewrite_endpoint( 'aff', EP_ROOT | EP_PAGES );
}
add_action( 'init', 'moh_add_aff_wp_endpoint' );

// Add the new affiliate area link to the "My Account" menu
// if Affiliate WP is enabled and the current user is an affiliate.
//
// Ensure that the logout link stays at the bottom of the menu ;)
function moh_add_aff_wp_link_my_account( $items ) {
  if ( function_exists( 'affwp_is_affiliate' ) && affwp_is_affiliate() ) {
    $logout = array_pop( $items );
    $items['aff'] = 'Affiliate Area';
    $items[] = $logout;
  }
  return $items;
}
add_filter( 'woocommerce_account_menu_items', 'moh_add_aff_wp_link_my_account' );

// Render the Affiliate WP Content within the new tab if Affiliate WP is enabled
function moh_aff_wp_content() {
  if ( ! class_exists( 'Affiliate_WP_Shortcodes' ) ) {
    return;
  }
  $shortcode = new Affiliate_WP_Shortcodes;
  echo $shortcode->affiliate_area();
}
add_action( 'woocommerce_account_aff_endpoint', 'moh_aff_wp_content' );

// Make sure that the Affiliate WP tabs properly work
function moh_filter_aff_tabs( $url, $page_id, $tab ) {
  return esc_url_raw( add_query_arg( 'tab', $tab ) );
}
add_filter( 'affwp_affiliate_area_page_url', 'moh_filter_aff_tabs', 10, 3 );

Final result

Here are a couple of screenshots demonstrating what this should look like when you’re done.

Closing thoughts

As you can see, just this little bit of code gives us a pretty good visual integration between Affiliate WP and WooCommerce. I found myself asking if Affiliate WP should do this within the plugin, but with how many integrations that they handle, I’m not sure if it would make sense for them.

In the future, and after more testing to make sure that nothing breaks if one of the plugins is not enabled, perhaps this could be factored in to a plugin. Until then, you should be able to get this working by copying the code in to a small plugin on your site or throwing it in the functions.php of your theme.

WordPress founder signs pledge not to build Muslim registry

Proud to work at Automattic.

I’m personally signing, and also speaking on behalf of the entire Automattic company, which makes WordPress.com, Jetpack, Simplenote, and WooCommerce.

Matt Mullenweg

Automattic, which owns WordPress and a number of other web development and publishing tools, has signed a pledge not to help build a Muslim registry. The company’s founder and CEO, entrepreneur Matt Mullenweg, signed the pledge on behalf of his entire company today.

— The Verge

Source: WordPress founder signs pledge not to build Muslim registry – The Verge

How to Use Jetpack Photon for WordPress Header Image

When doing some performance testing of the new site design, I realized that the header image wasn’t being processed by Photon.

Since there’s a filter for almost everything in WordPress, I look around a bit and found the theme_mod_$name filter.

/**
 * Filters the theme modification, or 'theme_mod', value.
 *
 * The dynamic portion of the hook name, $name, refers to
 * the key name of the modification array. For example,
 * 'header_textcolor', 'header_image', and so on depending
 * on the theme options.
 *
 * @since 2.2.0
 *
 * @param string $current_mod The value of the current theme modification.
 */
return apply_filters( "theme_mod_{$name}", $mods[$name] );

Using that filter, we can then modify the image source so that the image will be handled by Jetpack’s Photon.

add_filter( 'theme_mod_header_image', 'moh_photonize_header_image' );
function moh_photonize_header_image( $image ) {
    if ( $image && function_exists( 'jetpack_photon_url' ) ) {
        $image = jetpack_photon_url( $image );
    }
    return $image;
}

At this point, if you were to reload your home page and check the source for your header image, you’ll notice that the image has something like i1.wp.com in front of it. This means that our little snippet worked. 💪

What I haven’t yet figured out is how to properly set the width and height arguments for the image since we only have the URL and not an image attachment. ¯_(ツ)_/¯