Simple age shortcode for WordPress

As I was updating the about page on this blog today, I decided that I wanted to make my age in the following string dynamic: “I am a 31-year-old Texan”. After considering options, creating a shortcode seemed like a simple enough route. Here’s the code that I came up with:

 * A simple shortcode for displaying a person's age within WordPress content. This was
 * created with an "about" in mind, so that I wouldn't have to keep updating my age. :)
 * Usage: [simple_age birthday="January 1 2020"]
function simple_age_shortcode( $atts ) {
	if ( empty( $atts['birthday'] ) ) {
		return '';
	// If the birthday couldn't be parsed, then show some numeric output at least ¯\_(ツ)_/¯
	$birthday = strtotime( $atts['birthday'] );
	if ( ! $birthday ) {
		return 0;
	$time_diff  = time() - $birthday;
	$years_diff = floor( $time_diff / YEAR_IN_SECONDS );
	return intval( $years_diff );
add_shortcode( 'simple_age', 'simple_age_shortcode');

Then, in my about page, I modified the content to look like this:

I am a [simple_age birthday="January 1 2020"]-year-old Texan...

To add this code to your site, you can add it as a plugin, in the functions.php file of your theme, or you could use a plugin like Code Snippets (which is my favorite option for small bits of code like this).

If you land here, then hopefully you find this simple age shortcode for WordPress handy. 😄 If there’s some interest, I may consider adding the plugin to the core repo to make it easier for people to use the shortcode. Feel free to leave a comment below if you’d prefer that.

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:


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: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' ) ) {
  $shortcode = new Affiliate_WP_Shortcodes;
  echo $shortcode->affiliate_area( null );
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, 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