I am using the official AMP plugin created by WordPress’ company Automattic to make my site AMP usable so my pages will open in a mobile friendly format… and so Google will improve my site’s ranking – I hope!

I am also using a free Cloudflare account to improve speed and security. The problem is Cloudflare is not quite AMP friendly yet.

So far I have found 2 settings that I needed to change. There are other errors I still need to figure out, but I wanted to list the solutions I have found so far.

First change: Notice in the error above, it is showing the “src=//cdn.ampproject.org…” That really should be “src=http://cdn.ampproject.org…”. So where did the http go?

It was Cloudflare again. But this wasn’t caused by the plugin, but by the service itself, namely the Rocket Loader.

To fix it, I logged into Cloudflare.com, and created a rule for /amp/ pages.

My pattern looked like this:

*domain.com/*/amp/*

where “domain.com” is your website domain.

The only setting you need to change from default if Performance is on, is to turn Rocket Loader off.

Bonus non-Cloudflare change:

If the Google Webmaster Tools says “Required tags missing: amphtml engine v0.js script”, this means you are missing a link tag that references the original non-AMP URL. The browser inspect console will not show an error.

I don’t know why the WordPress AMP plugin is missing this, but this is fixed (for now) by editing the AMP plugin file located in /wp-content/plugins/amp/templates/single.php .

Anywhere between the opening and closing <head> tags, insert this code:

<link rel=”amphtml” href=”<?php the_permalink(); ?>”>

and that should take care of it.

Update: I don’t know if I missed or misunderstood it, but what I thought was missing is, in fact, supplied by the plug in, but it is

<link rel=”canonical” href=”<link to non-AMP page>”>

As I mentioned before, I’m still getting some validation errors. Hopefully I will remember to list them here… and not wait for over a year to post again. 🙂

You can install SumoMe by either by adding a script to your header (if you are not using WordPress) or by installing their WordPress plugin.

Once you install it and create an account, you have the option of adding two apps:

Twilighter is a slick app that takes the text that is selected on your page and sets up a Twitter tweet using the selected text and creating a short URL back to the page from which it was selected. Your visitor can then make adjustments and click the submit button to tweet it.

The other app is List Builder which opens a modal subscription form that only asks for an email address. You can export the collected addresses as a CSV file.

List Builder caused a problem with this site where the form was showing up behind my header graphic. The problem was the z-index for that DIV element was not high enough. Adding the following code to my style.css file fixed the problem by increasing the z-index value.

.sumome-popup {
z-index: 11111 !important;
}

Another issue I wanted to fix was the fact that the SumoMe has a control tab that appears in the upper right and visitors can see it. That control tab is of zero use to a visitor, so it is just clutter, yet I will need the tab to change settings. The best solution for now is to make it visible only if an administrator is logged into the site. Please note this code only works if your site is running on WordPress.A hat tip to koningdavid for posting the answer to a similar problem on StackOverflow.com.

The visitor_stylesheet function checks if the current visitor to the site is an administrator (if the user can “manage_options”, then the user is an administrator). If the user is not an admin, then the visitor.css file is loaded for the user. The CSS code in visitor.css tells the browser to hide the #sumotest-badge DIV element.

It is wise to keep backups of your blog’s database, and wiser to keep those backups somewhere other than your blog’s server.

How I keep my backups is not a perfect plan, but it works for me. I keep a month’s worth of my backups in my Google Mail account.

Here’s how:

Install a plugin (like WP-DBManager) that will automatically backs up your database and emails the backup file to your Google Mail account (Gmail.com or Google Apps for Domains) as an attachment. Go ahead and manually have the plugin send a backup to your email account – you need to test it anyway.

Check your email and open the email containing your backup file.

Copy the subject line.

Click the “More” button, then click “Filter messages like these”. The advanced search form will come up with the “From” field already filled out.

Paste the subject line into the Subject field.

Check the “Has attachment” box.

Click “Create filter with this search”

On the next screen, under “When a message arrives that matches this search:”, check the box “Delete it”.

Click “Create Filter” and you are done.

Why delete the backups as they come in? I am not permanently deleting them, just sending them to the Trash folder, and everything in the Trash folder that is older than 30 days is automatically permanently deleted. This saves me from needing to clean out the old backups myself.

One thing to remember is this does not back up the actual files on your site. A copy of the files on my sites is on my computer which is backed up using Crashplan.

So you are validating your WordPress blog feed and you get an invalid character error. The validator even shows you where the invalid character is located, but it looks fine in your browser!

Copy and paste the text into a text editor and you will see it. In Windows Notepad, you will see a small rectangle, and in Notepad++ you will see more – in my case, the letters “ETX” on a black background.

How did it get there? Probably because you copy and pasted your text from another source.

How do you get rid of it? There are a couple of ways:

One, find the offending post and rewrite the word before and the word the validator was pointing at and delete the original words to hopefully delete the invisible character. Then republish.

Two, create a filter in your functions.php file to filter it out of existing posts.

function wpc_rssContent($content) {
// Search for end-of-text character which is created by using // chr(3) and replace with blank string.
$content = str_replace(chr(3), '', $content);
return $content;
}
// Filter the Excerpt RSS feed
add_filter('the_excerpt_rss', 'wpc_rssContent');
// Filter the Content RSS feed
add_filter('the_content_feed', 'wpc_rssContent');
/* Filter the Editor content to keep the character out of your
posts before you publish. You will need to click Save Draft at
least once before publishing to ensure it is removed.
*/
add_filter('the_editor_content', 'wpc_rssContent');

There is probably a better solution out there, but this worked for me.

I dug deeper and found that the most used Google search phrase for that page was “adobe acrobat x pro won’t open”. I googled it, and my article was #2 right under Adobe.com’s!

If you are reading this on my site, you can see that I run ads on the sidebar. I got excited at the thought of getting some advertising revenue and looked at my advertising stats. There were no clicks registered and the viewed ads number was a lot lower than the page views.

I looked at the page itself and realized the problem. No sidebar was showing up.

So many lost opportunities!

So where did my sidebar go? I’m not sure it was ever there to begin with.

I am using a custom child theme of the Twenty Eleven theme, but I had not done anything to change the base single post template. I downloaded index.php and single.php to look for differences and found that “get_sidebar();” was not in single.php. I copied single.php to my custom child theme folder and copy and added “get_sidebar()” function to the same place it appeared in index.php. I uploaded my new version of single.php and saw the sidebar was there, but it was shoved below the content.

Element inspection time. The CSS for the divs #primary and #content was different for the single post template. I added the following code (which is a copy of the #primary and #content from the parent theme and I added “.singular”) to my child theme’s style.css to cancel the parent theme’s CSS and get my sidebar in the right place:

On a side note, if you have never worked with WordPress child themes before, I highly recommend reading the WordPress Codex on Child Themes. You should never change the code of a theme someone else has made because if they update the theme you will lose your changes if you update the theme on the Update admin page.