F. Oliver's Map Thumbnail

Responsive Google Map Mashups and GIS (Part 1)

I was playing around with Responsive Google Map Mashups and learning about Geographic Information Systems (GIS) this morning. As an experiment, I mapped out the four store locations of my client, F. Oliver’s Oils and Vinegars in Google Maps.

The coolest part is, the data is pulled from your Google Drive account, so you can edit the map at any point and your embedded map will automatically be updated. This is great, because Penelope has this habit of opening up a new store every year or so. 🙂

You can click on the title header to reveal (and hide) more details, and each individual pin can contain it’s own unique title, description, driving directions, URL, and a photo. You can even add your own unique “pin” icon…I added an icon of one of her EVOO bottles. Super simple, and no access to Google API keys required.

How to Make a Google Map iFrame Mobile Responsive

Out of the box, Google’s embedded map snippet is non-responsive, but it’s easy enough just to wrap a DIV around it to fix that. I added the code inline right here within the WordPress editor, but best practice would be to add the following CSS rule to your website’s stylesheet. I did notice that the photos within each pin do not resize, so on my iPhone the photo entirely fills the screen and renders the map almost unusable. I did leave the photos in (above example) for illustration purposes, but in a production environment we would need to design something more useful for smaller mobile devices.

.map {
	height: 0;
	overflow: hidden;
	padding-bottom: 65%;
        margin-bottom: 1em;
	position: relative;
.map iframe {
	left: 0;
	height: 60% !important; /*pick your own height*/
	position: absolute;
	top: 0;
	width: 100% !important;

Next up….Advanced Map Mashups using Excel spreadsheets and Google Fusion Tables.

WordPress Icon

Migrating a WordPress Website From Your Local Server to a Hosted Server in 5 Simple Steps

If you’re a web developer, you probably work on your local machine for speed and convenient access to your WordPress files, then migrate the completed site to your client’s hosted server (sometimes in a private folder) for approval and final edits before going live.

I used to us WordPress’s “Import/Export” function and it sucks. It’s a total time sink and waste of your resources.

If you work locally and use WordPress’s import/export function, all of the images (among other things) will break because WordPress can’t access your local host through the Web. If you’re migrating a small site with only a few posts and pages, this isn’t a very big deal, you can just go in and manually fix the broken links. For large sites however, this could consume hours and hours of your valuable time. You’ll also notice that there are no images shown in the “media” section of WP when you approach a migration this way. This might not be a big deal for you, since you are already familiar with the absolute path to the uploads folder, but if you’re doing work for a client who isn’t so tech-savvy, this could be a problem since they are going to rely on the WordPress interface to place and manage media.

The better (and simpler) solution is to export an exact copy of your local WordPress SQL database, then import it (slightly modified) to the new hosted version via phpMyAdmin.

UPDATE: Although I still use the method described below as a ‘double-safe-contingency’ measure (and because I am paranoid about having multiple reliable backups), I have been testing and using the BackupBuddy – WP backup, restore, migration plugin for several months with great success. So far I’ve moved 5 websites from my localhost to a production environment using BackupBuddy and the entire process was seamless and worked perfectly with just a few clicks. Best of all, I have regularly scheduled automatic backups send to offsite locations in the cloud. Highly recommended.

Here are the 5 Simple Steps:

  1. Install a clean version of WordPress (WP) on your hosted site, making sure the release versions of WordPress are the same (e.g. Make sure both sites are running WordPress version 4.0).
  2. Upload the plugins, themes, and uploads folders from your local “wp-content” folder to the new hosted site via FTP.
  3. Export your local SQL database though phpMyAdmin.
  4. Fix the local database URLs in a text editor to reflect the new URLs of your new hosted site.
  5. Import your edited local database (from step 4) to your new hosted WP version through phpMyAdmin.

Exporting the Local WordPress Database

  • Open your local install of phpMyAdmin (I am on a Mac and using MAMP Pro so the URL is: http://localhost:8888/phpMyAdmin/. The URL is similar on PC-based LAMP stacks).
  • Click on the “Databases” tab and select your local WP database.
  • Click on the “Export” tab at the top.
  • Select the “Custom” radio button in the “Export Method” section.
  • Select the “Save output to a file” radio button (compression should be set to “None”).
  • Make sure the format is set to “SQL”.
  • In the “Object creation options” section, check the “Add DROP TABLE / VIEW…” and “Add IF NOT EXISTS” boxes. Uncheck “Add CREATE PROCEDURE…”.
  • In the “CREATE TABLE options” section, check the “IF NOT EXISTS” box.
  • Check “Save as file” (depending on your version of phpMyAdmin) checkbox and click the “Go” button.

Migrate WordPress phpMyAdmin Interface

This creates a carbon copy of your local database.

Editing the Local WordPress File

  • Open the exported .sql file in a text editor. I use Adobe’s Dreamweaver for coding but any text editor with search/replace capabilities will work.
  • Look for any entry in the SQL file that references “http://localhost” and use the search/replace function to replace it with the URL of your new WordPress install. e.g. replace “http://localhost/” with “http://YourNewURL.com”. If your site is located within a folder, you’ll need to do a search/replace on the folder name as well.

Search and Replace

Preparing the Hosted WordPress Database for Import

  • Log into phpMyAdmin on your hosted instance of WordPress and select the database you wish to import to.
  • Click “Check All” to select all of your tables.
  • In the “With selected:” drop down, select “Drop”, then click the “Yes” button”.

Drop Table

This will delete all of the data on the hosted version of your hosted WordPress install to prepare it for the import of your copy of your local database.

Importing Your New Database

  • Click the “Import” tab.
  • Browse your computer to find your edited SQL file.
  • Click the “Go” button. That’s it!

Important: Test Your New Site

Test all of your links and make sure everything is working properly. Occasionally, I have to go back and re-set my “Permalink” under “Settings” if I have set up a custom URL structure for my posts and archives (since the database import won’t edit your .htaccess file).

Also, although I no longer us the Import/Export function when migrating a WordPress website, I do always make an XML backup of the site using the export feature just as a safety net. You can’t have too many backups and it’s always a good idea to have a “Plan B” in case something goes wrong.

Savvy Girl Golf Web Design

WordPress/eCommerce Theme Design: Savvy Girl Golf

Savvy Girl Golf Web Design

The “Savvy Girls” are actually a couple of entrepreneurial sisters who just launched their own line of fashionable and functional golf purses and handbags after they discovered that almost all women seemed to share their own love/hate relationship with their current golf purse.

We just released this new customized WordPress design for my client, but this time with twist…it’s actually a hybrid Corporate/Blog/eCommerce website. We chose the Volusion eCommerce platform to handle the shopping cart section and WordPress for the more static corporate pages along with a dynamic blog.

The client is now able to update their marketing copy on the main site as well as keeping content fresh and SEO friendly with recurring blog posts. The seamless integration with Volusion on a sub-domain allows the Savvy Girls to maintain a consistent brand look-and-feel even though the eCommerce is being handled by a 3rd party. It’s the best of all worlds.