Speech Recognition with Chrome

There are loads of posts online about Speech Recognition* but we have been having so much fun with it we wanted to highlight how easy it is to use.

*Compatibility is a big issue for any client work as it only really works in Chrome…


// Setup browser Speech Recognition
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
var recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.lang = 'en';

// Event listener for Speech results
recognition.addEventListener('result', function(event) {

// Add Speech Recognition results to var
var transcript = event.results[0][0].transcript;

// Display results in DOM
document.querySelector('.content').textContent = transcript;

}, false);

// Start speech recognition
recognition.start();

// Event listener to restart speech recognition each time user has stopped talking
recognition.addEventListener('end', recognition.start);

For a full list of setting see: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

WooCommerce default email copy

WooCommerce (version 3.4.5) has several email templates for various actions. Each has unique copy that a client may want to change. I could not find a list in WooCommerce docs listing all the default copy so here it is:

https://docs.google.com/spreadsheets/d/1sjREMWY4_4l_i0MJ0iVSxrGVRAIhm5Hgrfh1t2pBsyU/edit?usp=sharing

 

Getting Google Maps API’s to work with Advanced Custom Fields

Google map embeds have recently become a massive pain in the butt. You need api keys to embed them, which is fine but the documentation is seriously disjointed and overly complicated.

We use them a lot within our WordPress builds. We use the ACF Google Map field most of the time. Below are the steps to get the bloody things working.

  1. Go to the Google API dashboard here.
  2. Create a project.
  3. Enable an APIs by clicking on the Enable API button (see below).
    screen-shot-2017-01-24-at-11-56-16
  4. Select the API you want to enable from the library (see below)
    screen-shot-2017-01-24-at-11-58-39
  5. You will need to enable all the following APIs. By following the previous two steps for each API.
    1. Google Places API Web Service
    2. Google Maps JavaScript API
  6. Then create Credentials for the project by clicking on the credentials tab and then the Create Credentials button. Select API key from the dropdown. You will be given an API key.
    screen-shot-2017-01-24-at-12-02-01
  7. You then need to use that key wherever you are calling the Google Maps API for embedding the map. Use this format:
    https://maps.googleapis.com/maps/api/js?key=your-key-here&v=3.exp&sensor=false
  8. If you are using Advanced Custom Fields you also need to include a function within your functions.php file to make the backend work You can see how here: https://www.advancedcustomfields.com/resources/google-map/
    We use the below function as we are using ACF Pro.

    function my_acf_init() {
	
	acf_update_setting('google_api_key', 'xxx');
}

add_action('acf/init', 'my_acf_init');

If this isn’t working then make sure you check the console logs. They should tell you what APIs are not working. I may have missed some on the list in step 5 and just not run into a use case scenario where I have seen the error.

I hope this stops you getting in a tantrum and throwing your computer out the window. I had a numerous battles with this before I decided to write this down.

Add a post counter to each post that works with pagination

I needed to add an incrementing number to each post on an archive page within WordPress. The issue I was having was with pagination, the counter would be reset on each page.

To resolve this I had to get the posts per page and total posts and work out a formula for correctly setting my counter on each page.

<?php
$posts_per_page = get_option( 'posts_per_page' );
$total_posts = $GLOBALS['wp_query']->found_posts;
$total_pages = $posts_per_page / $total_posts;
$current_page = (get_query_var('paged')) ? get_query_var('paged') : 1;

if ( $current_page === 1 ) {
// On page 1 start at 1
$counter = 1;
} elseif ( $current_page === 2 ) {
// On page 2 start on the post per page + 1
$counter = $posts_per_page + 1;
} else {
// On other pages.
// For example on page 2 with 5 posts per page we want the counter to start on 6
// So page * posts per page - posts on the last page + 1 to get to this page = 6
$counter = ( $current_page * $posts_per_page - $posts_per_page + 1 );
} ?>

Thanks to the doc4design.com article for pointing me in the right direction.

Display custom post types from WordPress RSS feed as HTML

I was working on a RSS driven newsletter for a client that need to have a web page displaying all the posts from a custom post type using the WordPress RSS feed.

First I needed to get the correct feed URL. The feed URL for custom post types can be located using a query string in the URL:

http://your-wordpress-site.com/feed/?post_type=yourcustomposttype

Replacing the your-wordpress-site.com with the url of the site you will be getting the feed from. And change yourcustomposttype with the name of your custom post type.

See: https://codex.wordpress.org/WordPress_Feeds

We can then use PHP to load the feed in to an array and loop through each elements tag name and pull the values we need and echo them to the page:

<?php 

$url = 'http://your-wordpress-site.com/feed/?post_type=yourcustomposttype'; $rss = new DOMDocument(); $rss->load($url);
$feed = array();

foreach ($rss->getElementsByTagName('item') as $node) {
  
  $image = $node->getElementsByTagName('image')->item(0)->nodeValue;
  $title = $node->getElementsByTagName('title')->item(0)->nodeValue;
  $link = $node->getElementsByTagName('link')->item(0)->nodeValue;

  echo '<h1><a href="' . $link . '">' . $title . '</a></h1>';

} ?>

Big thanks to this question on stack over flow and several of the answers http://stackoverflow.com/questions/3346628/retrieving-rss-feed-with-tag-contentencoded

Use Applescript to open a list of URL’s in Google Chrome

This Applescript can be used in Mac’s Automator application to receive a list of urls and open them all in new tabs in Google Chrome. I use it to open the billing pages of all our subscriptions (ie. Dropbox, Browserstack, Google Apps etc. ) so I can quickly download the latest invoices when doing the bookkeeping.

on run {input, parameters} 
  repeat with theURL in input 
    tell application "Google Chrome" to open location theURL 
  end repeat 
  return input 
end run

The code within my Automator application:

Screen Shot 2016-03-29 at 09.33.32

Setting up .htaccess URL Redirects in WordPress

The correct way to setup redirects within the WordPress .htaccess file is to put your redirects above the WordPress pretty permalinks code like so:

# BEGIN Redirects

Redirect 301 /from-here/ http://www.domain.com/to-here

# END Redirects

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress