How to insert tracking codes for Google Analytics and Google Tag Manager in WordPress AMP page

For those of who are using AMP for WordPress plugin to enable AMP pages for WordPress post, inserting the tracking codes for Google Analytics and Google Tag Manager is relatively simple:

  1. Create a copy of “html-start.php” in the plugin’s template folder, to a sub-folder called “amp” in your theme folder (create one if there isn’t any)
  2. Insert your tracking codes in the appropriate html section (for GA code, they recommend putting in the head section, and for GTM code put it in the beginning of body tag)
 * HTML start template part - start-html.php
 * @package AMP

 * Context.
 * @var AMP_Post_Template $this
<!doctype html>
<html amp <?php echo AMP_HTML_Utils::build_attributes_string( $this->get( 'html_tag_attributes' ) ); // WPCS: XSS ok. ?>>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<!-- AMP Analytics --><script async custom-element="amp-analytics" src=""></script>
	<?php do_action( 'amp_post_template_head', $this ); ?>
	<style amp-custom>
		<?php $this->load_parts( array( 'style' ) ); ?>
		<?php do_action( 'amp_post_template_css', $this ); ?>

<body class="<?php echo esc_attr( $this->get( 'body_class' ) ); ?>">
<!-- Google Tag Manager -->
<amp-analytics config="" data-credentials="include"></amp-analytics>

This should overwrite the default AMP code.

How to extend Ubuntu file system after resizing AWS EBS Volume

Sometimes, imply increase the size of an EBS volume in EC2 Management console doesn’t expand the actual storage size in Ubuntu system. You need to further configure your OS to apply the size change.

Check if you need to resize the partition and the filesystem

xvda    202:0    0  21G  0 disk 
└─xvda1 202:1    0  20G  0 part /

Run lsblk command to list the attached devices if the partition size are not equal, you need to resize the partition

df -h
Filesystem      Size  Used Avail Use% Mounted on
udev            996M   12K  996M   1% /dev
tmpfs           201M  340K  200M   1% /run
/dev/xvda1       20G   11G  8.2G  57% /
none            4.0K     0  4.0K   0% /sys/fs/cgroup
none            5.0M     0  5.0M   0% /run/lock
none           1001M     0 1001M   0% /run/shm
none            100M     0  100M   0% /run/user

Use df -h command to see if the filesystem need the resizing

Resizing the partition

sudo growpart /dev/xvda 1
CHANGED: partition=1 start=16065 old: size=41913585 end=41929650 new: size=44018100,end=44034165

xvda    202:0    0  21G  0 disk 
└─xvda1 202:1    0  21G  0 part /

Use sudo growpart command to expand the partition. Verify the result by running lsblk command.

sudo resize2fs /dev/xvda1
resize2fs 1.42.9 (4-Feb-2014)
Filesystem at /dev/xvda1 is mounted on /; on-line resizing required
old_desc_blocks = 2, new_desc_blocks = 2
The filesystem on /dev/xvda1 is now 5502262 blocks long.

df -h
Filesystem      Size  Used Avail Use% Mounted on
udev            996M   12K  996M   1% /dev
tmpfs           201M  340K  200M   1% /run
/dev/xvda1       21G   11G  9.1G  54% /
none            4.0K     0  4.0K   0% /sys/fs/cgroup
none            5.0M     0  5.0M   0% /run/lock
none           1001M     0 1001M   0% /run/shm
none            100M     0  100M   0% /run/user

Use sudo resize2fs command to expand the filesystem. Verify the result by running df -h command.

Resources: Extending a Linux File System after Resizing the Volume

MySQL queries cheatsheet for WordPress

Changing from http to https in wp_posts.post_content and wp_posts.guid

UPDATE wordpress_db.wp_posts
SET post_content = REPLACE(post_content, '', '')
WHERE post_content LIKE '%';

UPDATE wordpress_db.wp_posts
SET guid = REPLACE(guid, '', '')
WHERE guid LIKE '%';

Installing Let’s Encrypt on Ubuntu 16.04 with Apache server

sudo apt-get install python-letsencrypt-apache

Resource: How To Secure Apache with Let’s Encrypt on Ubuntu 16.04
Resource: How to install and use Let’s Encrypt on a Ubuntu Server for SSL security

WooCommerce 3.1.2: How to restore “add to cart” button in product category page

I noticed “add to cart” (or “select option” for variable products) buttons are no longer there with the most recent version of WooCommerce.
I checked content-product.php to see if the button was removed…it was not according to their template comment:

 * The template for displaying product content within loops
 * This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 * @see
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 3.0.0

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly

global $product;

// Ensure visibility
if ( empty( $product ) || ! $product->is_visible() ) {
<li <?php post_class(); ?>>
	 * woocommerce_before_shop_loop_item hook.
	 * @hooked woocommerce_template_loop_product_link_open - 10
	do_action( 'woocommerce_before_shop_loop_item' );

	 * woocommerce_before_shop_loop_item_title hook.
	 * @hooked woocommerce_show_product_loop_sale_flash - 10
	 * @hooked woocommerce_template_loop_product_thumbnail - 10
	do_action( 'woocommerce_before_shop_loop_item_title' );

	 * woocommerce_shop_loop_item_title hook.
	 * @hooked woocommerce_template_loop_product_title - 10
	do_action( 'woocommerce_shop_loop_item_title' );

	 * woocommerce_after_shop_loop_item_title hook.
	 * @hooked woocommerce_template_loop_rating - 5
	 * @hooked woocommerce_template_loop_price - 10
	do_action( 'woocommerce_after_shop_loop_item_title' );

	 * woocommerce_after_shop_loop_item hook.
	 * @hooked woocommerce_template_loop_product_link_close - 5
	 * @hooked woocommerce_template_loop_add_to_cart - 10
   	do_action( 'woocommerce_after_shop_loop_item' );

Regardless, the button is still not there so I added the button again in the current theme’s functions.php (since I wasn’t making any other overwrite):

//woocommerce - restore "add to cart" button in product category page
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

And voila, it’s back.

The same disappearance behavior was observed in multiple themes…so I’m suspecting something happened in WooCommerce plugin (as opposed to a theme-related bug).

Include CSS the right way in a WordPress’ child theme

We really should be using wp_enqueue_style functions to include your theme’s stylesheets rather than using @import statements. The enqueue functions allows us to specify dependencies in much better way.

//enqueue style for child theme
function  custom_child_enqueue_styles(){
	// enqueue parent styles
	wp_enqueue_style('parent-theme', get_template_directory_uri() . '/style.css' );
	// enqueue child styles - style.css
	wp_enqueue_style('parent-theme-child', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
	// enqueue child styles - scss/child.css
	wp_enqueue_style('parent-theme-child-scss', get_stylesheet_directory_uri() .'/scss/child.css', array('parent-theme', 'parent-theme-child'));
add_action('wp_enqueue_scripts', 'custom_child_enqueue_styles');

CLI command cheatsheet – Git

I still can’t memorize these:

## To stage your whole working tree:
git commit -a

## to force commit
git push origin master --force

##clone to a specific folder
git clone destination-folder-name

CSS Trick – anchor position adjustment


  <li><a href="#link1"</li>
  <li><a href="#link2"</li>
<a name="link1" class="anchor"></a>
<p>Some content goes here.</p>
<a name="link2" class="anchor"></a>
<p>Some content goes here.</p>


.anchor {/*anchor link*/
	display: block; 
	position: relative; 
	top: -50px; 
	visibility: hidden;

How to change thumbnail size for Divi’s gallery module

post_thumbnails_divi.php is where Elegant Themes‘ Divi specifies the custom image sizes:

add_theme_support( 'post-thumbnails' );

global $et_theme_image_sizes;

$et_theme_image_sizes = array(
	'400x250'  => 'et-pb-post-main-image',
	'1080x675' => 'et-pb-post-main-image-fullwidth',
	'400x284'   => 'et-pb-portfolio-image',
	'510x382'   => 'et-pb-portfolio-module-image',
	'1080x9999' => 'et-pb-portfolio-image-single',
	'400x516'   => 'et-pb-gallery-module-image-portrait',
	'2880x1800' => 'et-pb-post-main-image-fullwidth-large',

$et_theme_image_sizes = apply_filters( 'et_theme_image_sizes', $et_theme_image_sizes );
$crop = apply_filters( 'et_post_thumbnails_crop', true );

if ( is_array( $et_theme_image_sizes ) ){
	foreach ( $et_theme_image_sizes as $image_size_dimensions => $image_size_name ){
		$dimensions = explode( 'x', $image_size_dimensions );

		if ( in_array( $image_size_name, array( 'et-pb-portfolio-image-single' ) ) )
			$crop = false;

		add_image_size( $image_size_name, $dimensions[0], $dimensions[1], $crop );

		$crop = apply_filters( 'et_post_thumbnails_crop', true );

I wanted to modify the “et-pb-gallery-module-image-portrait” thumbnail size to be 500×500. Since I was using a child theme, my thought was to copy the post_thumbnails_divi.php into the child theme and change the value there.

…Nope, that didn’t work.
Continue reading “How to change thumbnail size for Divi’s gallery module”

When to upgrade T2 instances on AWS – CPU usage

AWS currently offers five levels of T2, Burstable Performance, instances on EC2. T2 instances “provide a base level of CPU performance with the ability to burst above the baseline.”

What’s not obvious from the general documentation page is that what’s the easy indicator to determine if you need to upgrade your T2 instance to the next level.

T2 Instance CPU Baseline Performance

What I found to be the best/quickest way to figure out when to upgrade T2 instance is to look at CPU Utilization (Percent) chart on the monitoring section for the instance. You need to compare the average usage of the CPU and the baseline of the T2 instance (above the baseline means the server is in the “burst” mode which uses the extra CPU credits).

Here are the baseline of each T2 instances:

Instance TypeCPU Baseline Performance

CPU Credit Usage and CPU Credit Balance

CPU credit usage chart and CPU credit balance chart are also good indicators. However, when the credit usage is too rapid, you might not be able to catch the issue in time to resolve the performance issue. The decrease in the credit balance is recorded only AFTER the server is performing beyond baseline performance. In other words, it’s not a good PREVENTATIVE indicator.

But Beware…

This is a simple way to measure the performance of the server reflected on CPU usage. There are other resources that causing the issue on your server(s). The most common issue I experience is the depletion of available memory. This happens if I am running a multiple servers (such as LAMP) under one instance. While CPU usage is within a normal range, not too uncommon to run out of available memory and your application stop running properly. I find that t2.nano instance and t2.micro instance aren’t sufficient to run a LAMP in most cases.

Resources: New Low Cost EC2 Instances with Burstable Performance
Resources: EC2 Update – T2.Nano Instances Now Available
Resources: Burstable Performance Instances