Protecting Your WordPress Website with Let’s Encrypt SSL

I’ve been hearing about Let’s Encrypt for several months now as an up and coming replacement for standard SSL Certificates from vendors like Comodo, Thawte, GeoTrust and the like. To be honest, at first glance I was not impressed. Let’s Encrypt certificates only have a lifetime of 90 days, and a simple Comodo cert can be had at SSLs.com for $15 for 3 years. So why go through the hassle?

Then I Talked to LiquidWeb

I’m a huge fan of LiquidWeb. They are hands down the best web host I’ve worked with since I started developing websites in 1995. And, as usual, their tech support team came through with the right answers and a simple process for setting up Let’s Encrypt on my VPS.

Setting up AutoSSL in WHM

In just a couple of minutes, LiquidWeb support had AutoSSL set up in my VPS’s WHM. And they added a cron job so that the certs would autorenew every 90 days with zero work for me.

Running AutoSSL

AutoSSL

Once AutoSSL is set up, you have to do a few things to get Let’s Encrypt working on your server. See the screenshot above for the details.

Moving a WordPress Site to SSL

In most cases, moving a WordPress site to SSL is a pretty simple process. Following the steps below will be all you need to do in many cases.

1. Change the WordPress Site URL

settings

Go to Settings > General and change the WordPress Address and Site Address from http to https. You’re probably going to get logged out a couple of times during this process as the site goes into SSL. That’s totally normal.

2. Force the Site into SSL

The easiest way to do this is by installing and activating the WP Force SSL plugin. Other Plugins like iThemes Security Pro also offer a force SSL function. Or you can force SSL via your .htaccess file.

3. Search and Replace in your Database

search-replace

The last step in the process is to update all the instances of the http version of your domain in your database, which will be found in internal links, images, and other media. To do this, install and activate the Better Search Replace plugin and follow the instructions in the screenshot below.

4. Test your Content

Visit your home page and see whether or not you have a green padlock in the address area. If you don’t, that means that some of the content on the page is coming in via http rather than https. Here are some common cuplrits:

  • Google Font @import statements in your CSS file
  • Contents of text widgets
  • Raw HTML areas in page builders
  • Poorly coded social media plugins

You can often find the issue by right clicking, selecting View Source to view the HTML from the page, and searching for http://. Anything coming in via http rather than https will cause you not to get a green padlock. Each instance will need to be fixed.

You might also try the excellent Why No Padlock? tool.

5. Test your SSL Certificate

To make sure everything is working properly with your new SSL certificate, go to the SSL Server Test, enter your URL and wait while this free tool gives your SSL certificate a thorough check. If you get bad results, talk to your web host and ask for assistance.

Speed Up Your WordPress Site with .htaccess and GZIP

In a recent iThemes Training webinar, I explained the importance of adding several lines to the .htaccess file that will instruct your web server to deliver content that has been deflated by GZIP rather than sending it uncompressed by default.

Warning: making changes to the .htaccess file can create major problems for your website. You should know what you’re doing before you attempt these additions.

Here is the code that was mentioned:

[sourcecode language=”php”]
<IfModule deflate_module>
<IfModule filter_module>
AddOutputFilterByType DEFLATE text/plain text/html
AddOutputFilterByType DEFLATE text/xml application/xml application/xhtml+xml application/xml-dtd
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml image/svg+xml
AddOutputFilterByType DEFLATE text/css text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE font/otf font/opentype application/font-otf application/x-font-otf
AddOutputFilterByType DEFLATE font/ttf font/truetype application/font-ttf application/x-font-ttf
</IfModule>
</IfModule>
[/sourcecode]

In most cases, this simple addition should speed up your website. Also, if you host multiple sites on the same server, making this change once in the root directory should make the change apply to all subfolders/subsites as well.

When Facebook isn’t using the Featured Image for your WordPress Post

Annoying, Isn’t It?

I hate it when things beyond my control affect my clients’ web sites. Facebook is too-often one of those things. So when I received an email this morning from a client stating that Facebook wasn’t using his post’s featured image but was pulling other images from the site instead, I wasn’t surprised. But finding a solution to these issues is another matter.

The Featured Image Was Correct

My first suspicion was that the client hadn’t correctly set the featured image, or had forgotten to update the page after the image was set. Yet, upon inspection, the featured image existed and was displaying properly on the web site. Yet when I posted the URL to the post on the client’s Facebook page, only two image options were available. They happened to be from the front page and neither of them was the correct featured image.

So, on to Google… and the Diagnosis

After some time searching, I discovered the reason why this was occurring.  Apparently, my client had initially published the post without a featured image. We use the Social plugin from Mailchimp/Crowd Favorite to automatically post his blog articles to Facebook. So Facebook did what it was supposed to. It grabbed a couple of images from the front page and offered those as options for the post. However, when the featured image was added later, Facebook continued to insist that only those two image options could be used. Here’s why…

When a post or page is shared on Facebook, it stores the images from that URL in its own cache to use in the future. Facebook is not going to look at that URL again for different images until their cache expires. And nobody outside Facebook really knows how long that will be (hours? days? weeks? months?). But there is a way to fix it…

The Solution

There is a little-known tool provided by Facebook that allows you to force it to look at your page or post again and refresh the Facebook image cache for that URL. Here it is:

http://developers.facebook.com/tools/debug

Add your URL in the box at the top of the page and Facebook will scan it for the new image to share and give you a preview of what your post/share will look like at the bottom. In my experience, you sometimes must submit the page more than once to get the correct image to show up. But in the end, it will, and your featured image will shine.

Restricting WordPress Search to Titles Only

Yes, WordPress search leaves a lot to be desired. But with some tweaking, you can get the results you want.

Why would you want to do that?

In a recent project, the client requested that WordPress search return only hits from page titles and ignore page and post content. Why would they request this, you might ask? In a site that is heavily optimized for SEO, a popular keyword search might return dozens of hits that are not really what the user needs to see. By restricting search results to page or post title only, many extraneous matches can be filtered out.

Certainly opting to restrict searches to title only can hinder search capabilities as well. It should be used sparingly and only on sites that have been written with SEO keywords in mind.

The Code

Adding the following code to your active theme’s functions.php file will restrict WordPress search results to page and post titles only.

[sourcecode language=”php”]
//Limit Search to Post Titles Only

function ni_search_by_title_only( $search, &$wp_query )
{
global $wpdb;
if ( empty( $search ) )
return $search; // skip processing – no search term in query
$q = $wp_query->query_vars;
$n = ! empty( $q[‘exact’] ) ? ” : ‘%’;
$search =
$searchand = ”;
foreach ( (array) $q[‘search_terms’] as $term ) {
$term = esc_sql( like_escape( $term ) );
$search .= "{$searchand}($wpdb->posts.post_title LIKE ‘{$n}{$term}{$n}’)";
$searchand = ‘ AND ‘;
}
if ( ! empty( $search ) ) {
$search = " AND ({$search}) ";
if ( ! is_user_logged_in() )
$search .= " AND ($wpdb->posts.post_password = ”) ";
}
return $search;
}
add_filter( ‘posts_search’, ‘ni_search_by_title_only’, 500, 2 );[/sourcecode]

Excluding Certain Particular Pages from WordPress Search

If you want to further tweak your search results, you can manually exclude certain pages from being returned by WordPress search by using the code below. FYI, this code is not related to the code above and can be used independently of it. It should also be added to the functions.php file in your active child theme.

[sourcecode language=”php”]

function ni_search_filter( $query ) {
if ( $query->is_search && $query->is_main_query() ) {
$query->set( ‘post__not_in’, array( 80, 147, 13 ) );
}
}
add_filter( ‘pre_get_posts’, ‘ni_search_filter’ );[/sourcecode]

You will need to add the specific page or post IDs you want to eliminate from search on line 3 of the code above.

If you don’t know how to find the ID of a page or post, install the Simply Show IDs plugin which displays ID numbers on the page and post list screens. By the way, don’t let the fact that the plugin hasn’t been updated in a while dissuade you. If a plugin works, there’s not need for it to be updated.

How to Make the WordPress Editor Look Like Your Web Site

Why doesn’t the font match?

I can’t tell you how many times I’ve had clients ask that question when using the WordPress Visual Editor for the first time. They simply can’t understand why they have to enter text in the antiquated “Georgia” font and why it looks different when it actually appears on their site. Answering their question requires a lengthy explanation that delves into the principles of a content management system and why it’s important to separate the content of a web site from it’s style… blah, blah, blah. Then I get the deer in the headlights look and the answer gets simplified to the time-tested response of a frustrated parent to a petulant child: “Because I said so.”

Yeah, but why doesn’t the font match?

WordPress has for years made the decision that the default font for the Tiny MCE Visual Editor would be Georgia. I have no explanation why. It’s not exactly a modern font. After some digging, I found the font for the visual editor is controlled by a css file buried deep in the recesses of WordPress. To be precise: wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css. On line two of that file, you’ll find the font settings, which default to Georgia, for whatever reason.

Getting Georgia out of your Visual Editor

The key to liberating your visual editor from the travesty of Georgia is to create a file that defines the styling that’s used. This file is called editor-style.css and it’s not part of the default WordPress installation. It’s theme-based. But just two quick steps will allow you to be rid of this problem once and for all.

Step One: Add Your Own editor-style.css File

What I usually do is create a file in my child theme folder called editor-style.css. Then I copy and paste the typography section of the existing style.css file in my theme into that file and save it. I’ll grab the styling for paragraphs, headings, blockquotes, buttons, etc… anything that would show up in the content area.

Step Two: Tell WordPress to look for the editor-style.css file

Just adding the editor-style.css file to your theme folder will not make the change on its own. You need to add the following code to your functions.php file to tell WordPress to look for changes you just added.

[sourcecode language=”php”]
// Styling the visual editor with editor-style.css to match the theme style.
add_editor_style();
[/sourcecode]

Save your changes and reload your editor and you’re done! In two easy steps, your Visual Editor should now be pulling in the styling form the front end of your web site.

Nifty, huh? And now truly WYSIWIG.

The best part? No more having to explain why the font doesn’t look the same!

How to Add Easy Social Icons in the WordPress Navigation Menu

Social Media Icons are a must-have for any web site these days. But adding them attractively to a theme can be a challenge. Here’s a very simple way to add clickable Facebook, Twitter, Linked-In and other social icons to the WordPress navigation menu using just your images and CSS.

Important Note: I’ve found that if your theme is already using background images on the menu, you might have issues with the code below.

Another Important Note: The many variations of themes and how they style menus means that you’ll need to take the concepts and CSS in this tutorial and implement them on your site. This will probably take a basic to intermediate understanding of CSS. As always, I’m happy to work with you to implement this concept on your site.

If your icons appear but are not clickable… it’s a theme issue. It can probably be solved, but it’s beyond the scope of this tutorial. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to li.menu-twitter and see if that works for you.)

If the icon disappears when you mouseover it… again, it’s a theme issue. Likely your theme is already using a background image for the menu. In the sample code below, try using “.menu-twitter a” instead. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to li.menu-twitter and see if that works for you.)

Edit 10/31/2012
There is a new plugin in the WordPress repository that has much of the functionality that I describe below. Have a look here at Nav Menu Images.

Here’s the Video:

Step One: Grab Your Icons

The first thing you’ll need to do is select the social icons you want to use. Iconfinder is my source for icons. Hint: find an icon you like, then click collections to discover coordinating icons for other social sites. Once you have your icons, save them in your theme’s images folder.

Step Two: Add a Custom Link to your Menu

Edit your main menu in the WordPress menu editor. In the Custom link metabox, add the link to your Twitter page and label the link Twitter. Then Add to Menu.

Step Three: Turn on CSS Classes for Menu Items

At the top right, click the Screen Options tab, and check on CSS Classes. This will enable a new field in the menu options called CSS Classes in which you can put a custom CSS class on each particular menu item.

Step Four: Assign a Custom Class to the Twitter Menu Item

Open the menu item for the Twitter link you just created, and add a custom class to that item. For this tutorial, I’ve called it menu-twitter. This will allow us to address that menu item directly in the CSS.

Note: You don’t have to assign a custom class. Each menu item in WordPress already has its own specific ID. But doing it this way allows the code you create to be portable from site to site. Read more on portability below.

Step Five: Adding the Icon to the Menu

At this point, you’ll have a new item on your menu with the text Twitter that is pointing to your Twitter account. What we’ll do now is remove the text and replace it with an icon using CSS.

Use the following code:

[sourcecode language=”css”]
.menu-twitter {
text-indent: -9999px;
background-image: url(images/twitter.png) !important;
background-repeat: no-repeat !important;
margin-left: 100px !important;
width: 50px;
}
[/sourcecode]

Here’s an explanation of the code:

  • The .menu-twitter class is what we added to the custom menu in step four.
  • Text-indent pushes the menu label off the screen to the left 9999 pixels so it doesn’t display over the top of the Twitter icon.
  • Background-Image puts the Twitter icon as the background of the menu item, which is still clickable.
  • Background-Repeat ensures that the icon only displays once.
  • Margin-left puts 100 pixels of space between the icon and the rest of the menu. You’ll probably only do this for the first social icon.
  • Width restricts the width of the menu item to 50px, which is plenty to display the icon and leave some space for the next one.

Here are the Results

Just repeat this process for each icon you want to add. Your theme might require a bit of tweaking to position the icon up and down, but the above should get you most of the way there. Enjoy!

Making it Portable

The real value of this code is bringing it from site to site with very little effort. Put all your social icons in any web accessible location (like http://yourdomain.com/social) then change the link in the css for the icon to this new location as below:

[sourcecode language=”css”]background-image: url(http://yourdomain.com/social/twitter.png) !important;[/sourcecode]

The result… You can now paste this code unchanged into the css of every site where you want social icons. Then all you have to do is add the custom menu items to make the icons live.

– – – – – – UPDATE 5/31/2012 – – – – – –

Opening Links in a New Window

To cause your menu icon links to open in a new tab or Window, just click on Screen Options and check on the Link Target option.

Doing this will add a new box to the menu item that will allow you to open the link in a new tab or window. See below:

Easy Random Background Images for WordPress

Here’s a fantastic little solution I found from Dan Benjamin that allows you to drop a simple php script in a folder of images to display them at random. This code is really light and works perfectly in all my tests.

I’m using it to randomize background images on the content module of an iThemes Builder site. You can also use it to display a random image from a folder in a post as well. Yes you can do this with something like NextGen Gallery, but a simple solution like this is better if you don’t need all the features of a full gallery plugin.

Here’s all you have to do…

  1. Save the code below or copy and paste it into your text editor of choice.
  2. Save it as rotate.php (or whatever you want to call it) into a folder of images on  your web site.
  3. Add the script like you would add an image.  <img src=”path-to-your-images/rotate.php”> or for a background in css, add this to the element background-image: url(path-to-your-images/rotate.php);

Here’s an Example:

The picture below is randomly generated from the images in an upload directory of this site. Hit refresh to see it randomize.

Now Here’s the Code…

Note: I’ve removed all the commenting to make the code shorter. If you want to see the comments, view Dan Benjamin’s original article here.

[sourcecode language=”php”]<?php

$folder = ‘.’;

$extList = array();
$extList[‘gif’] = ‘image/gif’;
$extList[‘jpg’] = ‘image/jpeg’;
$extList[‘jpeg’] = ‘image/jpeg’;
$extList[‘png’] = ‘image/png’;

$img = null;

if (substr($folder,-1) != ‘/’) {
$folder = $folder.’/’;
}

if (isset($_GET[‘img’])) {
$imageInfo = pathinfo($_GET[‘img’]);
if (
isset( $extList[ strtolower( $imageInfo[‘extension’] ) ] ) &&
file_exists( $folder.$imageInfo[‘basename’] )
) {
$img = $folder.$imageInfo[‘basename’];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info[‘extension’] ) ] )
) {
$fileList[] = $file;
}
}
closedir($handle);

if (count($fileList) > 0) {
$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];
}
}

if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = ‘Content-type: ‘.$extList[ $imageInfo[‘extension’] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists(‘imagecreate’) ) {
header ("Content-type: image/png");
$im = @imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);
imagedestroy($im);
}
}

?>[/sourcecode]

Supercharge WordPress with LoopBuddy + Custom Post Types

This is my first shot at a video tutorial. I’m brand new using ScreenFlow and the mic is just the one on my MacBook Pro. Hopefully, I’ll get better over time. Also, if you benefited from the video and do not own LoopBuddy or a WPMU membership, please use my affiliate links below if you plan to purchase. Thanks!

Resources used in the video:

Very Important Note:

When you create your Custom Post Type, be sure that you do not name the slug of your CPT the same as the slug of the page that it will be displayed on with LoopBuddy. If you do, all manner of badness will occur, including a potential breach of the space-time continuum. So, don’t cross the streams, Venkman.

Here is the CSS that was pasted:

[sourcecode language=”css”]
/*Book Grid */

.books-grid {
width: 125px;
height: 250px;
float: left !important;
display: inline !important;
padding-right: 15px;
text-align: center;
}

.hentry {
border-bottom: 0px !important;
margin-bottom: 0em !important;
}

.books-grid-image {
margin-left: 5px;
}
.books-grid-title {
line-height: 1;
font-size: .8em;
font-style: normal;
width: 125px;
}

/*Books Detail Page*/
.books-detail-title {
color: #A87F10;
font-size: 1.25em;
font-weight: bold;
line-height: 1.3em;
text-align: left;
}
.books-detail-author {
padding: 15px 0px;
}
.books-detail-image img {
margin: 0px 10px 15px 0px !important;
float: left;
}
.books-detail-return {
text-align: center;
background-color: #DAD8D9;
padding: 5px;
display: block;
margin: 75px auto;
width: 50%;
border: 1px #888 solid;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
[/sourcecode]

Grid Items Not Gridding?

If your posts are not displaying in a grid, try putting the float on the .hentry rather than the .books-grid. I’ll betcha that will work.

Using Custom Post Type UI instead of CustomPress

Custom Post Type UI will not allow you to create custom fields by itself, which makes doing what this video describes impossible. However, a nifty little plugin called More Fields will allow you to add custom fields to Custom Post Types and gives you the kind of control over what they look like (single line text, textarea, etc) that CustomPress does. One day I’ll make a video demonstrating this process. But it’s pretty straight forward:

  1. Create your custom post type using Custom Post Type UI
  2. Add custom fields to your custom post type using More Fields
  3. Put the custom field key you created in step 2 in LoopBuddy’s custom fields item.

Website Portfolio Gallery Screenshot Shortcode for WordPress

The basis for this code was presented by Benjamin Bradley in a WebDesign.com Member’s Only Chat. It will allow you to create quick and simple screenshots using WordPress.com’s screenshot script to add a screenshot to a single page or make a automatically updating portfolio. I tweaked the code a bit from what was presented in class to allow for hyperlinking, and the display of title and description.

First, the Functions.php Code

Add this to your functions.php before the last ?>.

[sourcecode language=”css”]
//Screenshot Snap Shortcode

function snap_my_web($atts, $content = null) {
extract(shortcode_atts(array(
"snap" => ‘http://s.wordpress.com/mshots/v1/’,
"url" => ‘https://nathaningram.com’,
"link" => ‘https://nathaningram.com’,
"w" => ‘400’,
"h" => ‘300’,
"title" => ‘Site Title’,
"descr" => ‘Site Descrition ‘
), $atts));
$img = ‘<div class="snap"><a href="’ . $link. ‘" target="_blank" rel="nofollow">
<img src="’ . $snap . ” . urlencode($url) . ‘?w=’ . $w . ‘&h=’ . $h . ‘"
alt="’ . $title . ‘" / class="snap-image"</a>
<div class="snap-title">’ . $title . ‘</div>
<div class="snap-descr">’ . $descr . ‘ </div></div>’;
return $img;
}
add_shortcode(‘snap’, ‘snap_my_web’);
[/sourcecode]

Now, let’s walk through the things you need to edit.

  • Do not edit the “snap” URL. This is the location of the WordPress script that will be doing the work for us.
  • “url” is the site for which you want to create a thumbnail. NOTE: if you find the image generated is something screwy, try putting index.php at the end… like http://wordpress.com/index.php. Redirects really mess with the screen capture code, and the index.php seems to help.
  • “link” is the web site where you want the screenshot to link to when clicked (different from the URL in case you want a screenshot of a specific URL or for affiliate sites that do forwarding).
  • “rel=nofollow” is code that will keep Google’s Penguin update from dinging you if you use the code for affiliate links.
  • “w” is the width of the thumbnail you want to create.
  • “h” is, you guessed it,  the height of the thumbnail you want to create.
  • “title” is the title you want to display under the site thumbnail… it also gets put in the image’s alt tag.
  • “descr” is a short description for the site that will appear under the title.

The Shortcode

The code above creates a shortcode called “snap.” Here’s an example of how to use it…

[snap url="http://wordpress.org" link="http://wordpress.org" alt="WordPress" w="400" h="300" title="WordPress" descr='WordPress is Awesome!']

 

The shortcode above automatically creates the image below:
[snap3 url=”http://wordpress.org” alt=”WordPress” w=”400″ h=”300″ title=”WordPress” descr=’WordPress is Awesome!’]

Now try editing a couple of the variables in the shortcode…

[snap url="http://wordpress.org" link="http://wordpress.com" alt="WordPress" w="200" h="150" title="WordPress" descr="WordPress is Awesome!"]

Notice the changes in height and width above easily resize your screenshot to half the previous size very easily:[snap3 url=”http://wordpress.org” alt=”WordPress” w=”200″ h=”150″ title=”WordPress” descr=”WordPress is Awesome!”]

Styling the Output

You may notice in the code you entered in the functions.php that there are classes placed on the image, title, description and on the entire entity. I added those to give you maximum control on what’s being displayed. Below are the styles I use in my styles.css for the snap images. You can, of course, edit these to your preferences.

[sourcecode language=”css”]
.snap {
text-align: center;
}
.snap-image {
border: 1px solid black;
}

.snap-title {
font-size: 1.1em;
font-weight: bold;
}

.snap-descr {
font-size: .9em;
font-style: italic;
}[/sourcecode]

To get the portfolio/gallery effect like I have on my web design and affiliate pages, just add a left float and 25px padding to the bottom and right of the snap class.

How to Set Up Google Apps on Your Web Server

Using Google Apps for your small business or nonprofit organization makes a lot of sense. In this post, I’ll explain step by step how to set up Google Apps, which includes Gmail for Business, on your web server.

Step One: Register for Google Apps

The first step involves registering your business or nonprofit’s domain name with Google. Click here to begin the process.

  • Enter your domain on the first page, then your information on the second.
  • Create an administrator account on the third page, and accept the Terms and Conditions.
  • Choose express setup.

Step Two: Verify Domain Ownership

Google needs to be sure that you actually own the domain that you’re registering. The easiest way to do this is to download the html file they will present to you after a couple of next clicks, and upload it to your web server.  Once the file is uploaded, verifying the domain will only take a moment.

Step Three: Set Up Your Users

Setting up users is a simple process. I recommend leaving the Gmail wizard at this point and adding users directly.

  • Click Organizations and Users in the top menu.
  • Click the Create a New User button.
  • Enter the user’s first name, last name and email address.
  • Click Set Password to enter and verify their password.
  • Click Create new user.
  • Repeat this process for each user you want to create.

Step Four: Set Up Forwarding Addresses

Gmail allows you to set up forwarding email addresses, but in a way that is not immediately apparent.

Forwarding to Multiple Recipients:

  • Click Groups in the top menu, and Create a New Group.
  • Give the group a name and email address.
  • Be sure “Allow anyone on the Internet to post messages” is checked and click Create new Group.
  • In the Add New Members box, type the email addresses to which this address will forward, separating each one by a comma.
  • You can forward to any email address, not just those from your domain.

Forwarding to a Single Recipient:

  • If you will ever want this email address to forward to more than one person, follow the instructions above.
  • If the address will only forward to one person, click Organizations and Users, and click the underlined Name of the user you want to forward to.
  • Beside Nicknames, click Add a Nickname.
  • Enter the address you want to forward to this user and press Enter.

Step Five: Changing the URL for GMail

Now we’ll change the web address for accessing your Gmail from the long default address to something shorter and more memorable.

  • Click Settings in the top menu.
  • Select email from the left menu.
  • Beside Web Address, click Change URL.
  • Click button for the second option, and click Save Changes. This will set your mail to be accessed at mail.yourdomain.com.
  • Repeat this for Calendar, Docs, and other Google Apps services if you want your clients to be able to access these easily as well. Make sure you have activated them in the Dashboard first.

Step Seven: Making MX Record Changes in CPanel

Now that your settings are complete on the Gmail side, it’s time to tell your web server to stop handling email itself and forward it instead to Gmail. The instructions below pertain to CPanel, a popular server management interface. If your server uses another interface, you’ll still be able to take the settings below, although the process of entering them will be different.

MX Records are lists of mail servers listed by priority where you will access your email.

Note: Entering the information precisely in this step and the next is critical. Incorrect information has the potential to break your web site and email.

  • Open the MX Entry in the Mail area of CPanel
  • Select the appropriate domain from the list
  • Delete any MX Records that are listed
  • Add the following Destinations and Priorities in the Add New Record section:

Priority: 1 Destination: ASPMX.L.GOOGLE.COM
Priority: 5 Destination: ALT1.ASPMX.L.GOOGLE.COM
Priority: 5 Destination: ALT2.ASPMX.L.GOOGLE.COM
Priority: 10 Destination: ASPMX2.GOOGLEMAIL.COM
Priority: 10 Destination: ASPMX3.GOOGLEMAIL.COM

Note, the above settings should work for most ISPs. Click here for Google’s MX Record settings for specific web hosts.

Step Eight: Making CNAME Changes in CPanel 

Now we’ll begin the process of making changes to the CNAMES for your domain. A CNAME is basically a forwarding address for subdomains of your web site.

  • Open the Advanced DNS Zone Editor in the Domains area of CPanel
  • Select the appropriate domain from the list
  • Under Zone File Records, find the entry for mail.yourdomain.com and click Edit.
  • Change the CNAME for this entry to ghs.google.com.

If you added Calendar, Docs, etc in the previous step, add CNAMES for them here as well in the Add a Record Section.

  • Enter the Name, such as docs.yourdomain.com.
  • TTL should be 14400.
  • Type is CNAME.
  • Address is ghs.google.com.
    (update 8/3/2012 – Google now wants the address here to be ghs.googlehosted.com – Note: you do NOT have to update this on CNAMES you created for earlier sites.)
  • Repeat for each required service (calendar, etc).

Conclusion – Wait a Bit

At this point you have made the necessary changes for Gmail and other Google Apps to work. However, due to the nature of the Internet, it might take anywhere from several minutes to overnight for the changes to begin to work.

If you’ve run into a problem, or need some assistance setting up Gmail for Business for your small business or nonprofit organization, I’m available to help at a reasonable hourly consulting rate.