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.

Advertisements

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

Developing a Shopify theme locally

Here at Multiple States we use Shopify as our recommended e-commerce platform. When we need to work on a theme locally we use the Shopify theme gem. It is a command line tool that lets you make live changes to themes in your Shopify account.

Within our clients Shopify account we have two installs of the theme, production and staging. The Shopify theme gem allows us to push changes to the staging theme and preview them in browser for testing before we push them to production.

Installing the Shopify theme gem

To install the Shopify theme gem on OS X El Capitan you will need to follw the following steps:

  1. Open Terminal
  2. First, we need to install Homebrew. Homebrew allows us to install and compile software packages easily from source. Homebrew comes with a very simple install script. When it asks you to install XCode CommandLine Tools, say yes. Open Terminal and run the following command:
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  3. Now that we have Homebrew installed, we can use it to install Ruby. We’re going to use rbenv to install and manage our Ruby versions. To do this, run the following commands in your Terminal:
    brew install rbenv ruby-build
    
    # Add rbenv to bash so that it loads every time you open a terminal
    echo 'if which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
    source ~/.bash_profile
    
    # Install Ruby
    rbenv install 2.2.3
    rbenv global 2.2.3
    ruby -v
  4. To install the shopify_theme gem use ‘gem install’ (you might have use ‘sudo gem install’)
    gem install shopify_theme
  5. To setup your config file you can follow the instruction outlined at http://shopify.github.io/shopify_theme/

Sources

https://gorails.com/setup/osx/10.11-el-capitan

http://shopify.github.io/shopify_theme/

 

Find the src of a particlular size of the WordPress post thumbnail

I used to add Featured Images to my wordpress templates using:

<?php the_post_thumbnail( 'large' ); ?>

However as I now often need to use srcset to provide a list of possible images for the browser to choose from I need to find the urls of various sizes of the Featured Image. For this I use:

<?php wp_get_attachment_image_src( $attachment_id, $size, $icon ); ?>

Where:

$attachment_id
(integer) (required) ID of the desired attachment.
Default: None

$size
(string/array) (optional) Size of the image shown for an image attachment: either a string keyword (thumbnail, medium, large, or full), or a 2-item array representing width and height in pixels, e.g., array(32,32).
Default: thumbnail

$icon
(bool) (optional) Use a media icon to represent the attachment.
Default: false

So to get the url of the large version of my Featured Image I use this:

<?php 
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large', false, '' ); 
echo $src[0]; 
?>

More information can be found here: https://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src

Adding just the Bootstrap grid using less

Sometimes we want to use only the Bootstrap grid in a project and not everything else. We then use Less and the Bootstrap Mixins to incorporate the grid throughout our project. If you would like to do the same then follow these steps:

1. Download Bootstrap using the “Download Source” link here .

2. Put the ‘bootstrap/less’ folder from the download into your project folder. Best to be in the same folder as your project Less files.

3. Include the following files from that bootstrap/less folder in the top of your main less file:

variables.less
mixins.less
normalize.less
scaffolding.less
grid.less

If you do not want to include the whole scaffolding file you can just pull out the necessary code (see below) and include that directly to your main Less file. Below is how our main Less file looks:

/* Core variables and mixins */
@import "bootstrap/less/variables.less";
@import "bootstrap/less/mixins.less";

/* Reset and dependencies */
@import "bootstrap/less/normalize.less";

// Pull out the necessary code from bootstrap/less/scaffolding.less
// Reset the box-sizing
* {
  .box-sizing(border-box);
}
*:before,
*:after {
  .box-sizing(border-box);
}

@import "bootstrap/less/grid.less";

4. You can now start using the Bootstrap grid mixins documented within the Bootstrap documentation in your project.

Below is an example of how we set our modules out. We wrap everything in the .l-strip but this is just a personal way of doing things and can be ignored:

HTML

<div class="l-strip">
  <div class="l-holder">
    <div class="l-inner">
      <div class="module">The module</div>
    </div>
  </div>
</div>

CSS

.l-strip {
  width: 100%;
  .clearfix;
}

.l-holder {
  .container;
}

.l-inner {
  .make-row();
}

.module {
  .make-xs-column( 8 );
  .make-xs-column-offset( 2 );
  .make-md-column( 6 );
  .make-md-column-offset( 3 );
}