I feel WordPress themes has been slow to adopt infinite scroll- but after adding it to my site over the weekend I understand some of the complications.

(The Infinity Pool comes close, but it’s not as cool cousin, Infinite Scroll. CC Image. )

Unlike Tumblr or Cargo Collective, WordPress (.org) users can use plugins to add all sorts of javascript to posts. On my site Syntax Highlighting is the main culprit (which I use to display code snippets), but many others have social buttons or lightboxed images.

When infinite scroll pulls in additional posts via ajax, it doesn’t load the javascript code from the header or footer of the post that might be needed to display js content (e.g. social buttons, formatted code, etc) properly. That puts theme authors in a bind. Infinite scroll may be a better end user experience, but it’s going to lead to more support requests during theme set up.

However, if you don’t use much javascript in your post content, or if you display excerpts on your index pages rather than full posts, I’d suggest trying it out.

Ben Balter made a fork of the popular Infinite-Scroll plugin which is excellent. It’ll hopefully get merged into the .org plugin version soon (which I can’t recommend using in its current state). If you use Ben’s version of the plugin you should be able to set up infinite scroll for your theme in just a couple minutes. You can also see it in action on his site.

I’ll also posted a tutorial about how to add Infinite Scroll to a theme without a plugin.

Useful Links:

• Infinite Scrolling Best Practices (UX)
• Should You Use Infinite Scroll Instead of Pagination?
• https://github.com/paulirish/infinite-scroll

Page Speed

The home page of the site had a page speed score of 96% before the migration and roughly 81% after. No theme code changed and the only plugin removal was W3 Total Cache. However, load times improved significantly (as measured by Google):

You’ll notice average page speed is 1.47 seconds faster, which is a significant 25% improvement. I’d venture to guess the numbers might be even more impressive for someone who had not already worked to optimize load times.

Support

I’ve opened about six support tickets since migrating to WP Engine. All of them got an initial response within 24 hours, and sometimes within minutes. A few were for items I hope WP Engine automates in the future- such as enabling the CDN and the initial transfer of DNS. Others were for plugin issues, a broken menu link, and support for the staging environment. All were resolved fairly quick.

One major benefit of being with a WordPress dedicated host is that the support team can answer really specific WordPress questions. I’ve also met a several of them, and they’re all super helpful and knowledgeable folks.

WP Engine Drawbacks

Before you jump ship with your current shared host, there are a couple items to consider.

Cost: WP Engine hosting plans start at $29/mo compared to around $8/mo with a company like BlueHost or HostGator. If you have higher traffic levels, you might need the $99/mo plan, compared with around $45/mo for a VPS with a company like InMotion and MediaTemple.

Lots of Sites? If you have a large number of low traffic sites, you’ll likely want to keep them somewhere that doesn’t change on a per site basis. Even though I migrated wptheming.com, I kept my hosting package with BlueHost for other domains- including a multisite install that runs off a subdomain of wptheming.com.

E-mail: WP Engine does not provide email as part of the hosting package, so you’ll need to use something like Google Apps, which is another couple bucks a month if you don’t have it already.

WP Engine Benefits

Daily Backups: It’s amazing how many people don’t have any backup system for their sites, so it’s great that WP Engine built this in and made it automatic. You can and should set up backups on other hosts (of course), but it generally involves a little technical know-how or buying a plugin like Backup Buddy or service like VaultPress (comment if you’ve found a free and easy way to do it).

Staging Environment: Anyone who develops WordPress sites knows the pain of setting up a staging environment to test new code. WP Engine has made this fun. You simply press a button and an exact duplicate of your site is synced to a development environment.

Speed: Site speed can have a huge impact on user experience, pageviews, revenue- so you should be thinking about it. Google also uses speed as a ranking factor in search results.

Verdict

If you currently have several sites in the same account, it’s a lot cheaper to keep those all on a shared host or general VPS. If one takes off, you can always move it later- like I’ve done with WP Theming.

If you run a single install of WordPress with medium to high traffic, WP Engine would probably be a good fit- especially if earn revenue from the site and can afford to pay a bit more for hosting.

If you run a single install of WordPress with low traffic, WP Engine might still might be a good choice for the convenience of automatic backups, regular security scans, and a knowledgeable support staff. However, the extra cost won’t make it worth it for everyone.

If you have a super high traffic site, you might also want to read this review.

Disclosure: WP Engine sponsors quite a few WordCamps and WordPress events and they’ve been offering free hosting to attendees. My account is one of these complimentary hosting packages. WP Engine links are affiliate.

Read More: WP Engine Website

Related Reading

• Making a Fast Website
• Impatient Web Users Flee Slow-Loading Sites (NY Times)

The method suggested by Google involves manually applying code to each link. This is fine if you want to just track a few specific links, but jQuery is more useful if you want to track every external link on the page.

Custom Tracking Events

The meat of the custom event is this line (which should be fired when an external link is clicked) is:

_gat._getTrackerByName()._trackEvent("Outbound Links", e.currentTarget.host, url, 0);

• “Outbound Links” is the category of events to track
• “e.currentTarget.host” is the “action”, in this case, the domain the user is clicking to.
• “url” is the “label”, which I use to send the full url of the external link.

If you’re unfamiliar with custom events, here’s the docs page at Google.

Code for Detecting and Tracking Outbound Link Clicks

This code snippet is highly commented and peppered with console.logs so that you can verify it’s working correctly and see how it works. It should only be used in development environments- there’s a compressed version in the next section for use on live sites.

// Outbound Link Tracking with Google Analytics
// Requires jQuery 1.7 or higher (use .live if using a lower version)
// For more info see: http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=55527
$("a").on('click',function(e){
		var url = $(this).attr("href");
		// Console logs shows the domain name of the link being clicked and the current window
		console.log('e.currentTarget.host: ' + e.currentTarget.host);
		console.log('window.location.host: ' + window.location.host);
		// If the domains names are different, it assumes it is an external link
		// Be careful with this if you use subdomains
		if (e.currentTarget.host != window.location.host) {
			console.log('external link click');
			// Outbound link!  Fires the Google tracker code.
			_gat._getTrackerByName()._trackEvent("Outbound Links", e.currentTarget.host, url, 0);
  		// Checks to see if the ctrl or command key is held down
		// which could indicate the link is being opened in a new tab
		if (e.metaKey || e.ctrlKey) {
			console.log('ctrl or meta key pressed');
			var newtab = true;
		}
		// If it is not a new tab, we need to delay the loading
		// of the new link for a just a second in order to give the
		// Google track event time to fully fire
		if (!newtab) {
			console.log('default prevented');
			e.preventDefault();
                        console.log('loading link after brief timeout');
			//setTimeout('document.location = "' + url + '"', 100);
		}
	}
	else {
		console.log('internal link click');
	}
});

Compressed Version

This is the same code as above, but with comments and console.logs stripped out:

// Outbound Link Tracking with Google Analytics
// Requires jQuery 1.7 or higher (use .live if using a lower version)
$("a").on('click',function(e){
	var url = $(this).attr("href");
	if (e.currentTarget.host != window.location.host) {
		_gat._getTrackerByName('demand')._trackEvent("Outbound Links", e.currentTarget.host, url, 0);
		if (e.metaKey || e.ctrlKey) {
		     var newtab = true;
		}
		if (!newtab) {
		     e.preventDefault();
		     setTimeout('document.location = "' + url + '"', 100);
		}
	}
});

Viewing the Results

To see if your custom tracking events are firing correctly, check your Google Analytics dashboard under “Content > Events > Overview”. It may take a couple hours before you start to see the results. In this screenshot you can clearly see when the tracking began:

In WordPress

If you are using a plugin for Google Analytics, like Google Analyticator, there is a settings fields where you can add javascript to be included with the tracker. You can also just include it with your other scripts.

Another option to track links easily in WordPress is to use the stats from Jetpack, which give you outbound click data by default.

Instead, set up the tracking variables and just call the Google script once. Here’s what I’ve used:

<script>
var _gaq=[
	['_setAccount', 'UA-1111111-1'],['_trackPageview'],['_trackPageLoadTime'],
	['secondTracker._setAccount', 'UA-2222222-1'],['secondTracker._trackPageview'],['secondTracker._trackPageLoadTime']
];
(function(d, t) {
     var g = d.createElement(t),
         s = d.getElementsByTagName(t)[0];
    g.src = '//www.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g, s);
}(document, 'script'));
</script>

Notes:

• This is an optimized version of the GA script from Mathias Bynens.
• You can include more than two. Just copy the secondTracker code and repeat.
• The “secondTracker” label can be changed to anything you like.
• _trackPageLoadTime isn’t required, but _trackPageview is.
• The code should be placed right before the close of the body tag.

“There’s no file size or speed issue with using Typekit for body text (as there would be with, say, using SIFR or Cufon). That said, you should make sure to use a font that works well at small sizes and renders acceptably cross-browser. Be sure to take a look at the browser screenshots before deciding on a font.”

Oddly, Google failed me on this question, so I thought I’d post it here for anyone else who was curious.

Demand Media runs eHow.com, Trails.com, Livestrong.com (among others) and social widgets that are viewed on millions of pages per day. It’s a really exciting company and position. Couldn’t pass it up. I start today, which also just happens to be my 29th Birthday.

With Demand Media I’ll be using the skills I honed on WordPress themes. Clean HTML, optimized css, jquery, and subversion. I also think my involvement with the WordPress community was one of the main reasons I was hired- it shows that working with the web is much more than a job, it’s also a passion.

WP Theming was launched just over a year ago in its current form and I’ve been continually amazed at how much I’ve learned by simply by sharing my code snippets and ideas. Here’s my stats when I started in September 2009, and where it’s at now (about 100,000 total):

I plan to continue publishing to this site, but will change the focus from my freelance work to emphasize the content, tutorials and themes. It’s also been a year since the original launch, which means I need refresh the design and weed out some posts that are no longer relevant.

Portfolio Press has been my favorite project this year. I think everyone who does freelance theming for a living should release a free theme if they can. I love seeing how people are using it, especially when it’s been severely modded. A raft of updates are coming to it in the near future- including translations that people have sent over.

I stopped accepting new freelance work since I’ll be working a 40 hour week, but I’ve met a number of excellent developers at WordCamps over the years who I’ve been referring new work to. If you’re a WordPress developer who’s available, go ahead and post your website and skills in a comment here. It’s always nice to have more.

Also, a big thanks to everyone who has left comments on the site over the past year. That’s what makes it all worth writing about and sharing. It’s also a bit addictive- so I’m sure there will be many more articles to follow.

Browsers will generally be able to detect if the website has been updated and get a copy of the new files, but sometimes it fails. This is especially true if your web designer has been changing background images or xml files. To see those changes, you will need to refresh your browser.

Here’s a short video screencast explaining how to refresh the browser in Firefox, Safari, Google Chrome, and Internet Explorer 6.

Click here to view the embedded video.

If you want a more in-depth explanation of how to do this, check out the Wikipedia article.

1. Follow this link http://bluehost.com/track/erideorg (to get the $65 referral fee).
2. Click “Sign Up Now”.
3. If you a choosing a new domain, type the url under “I need a domain”. If you have an existing domain (e.g. with GoDaddy or a previous hosting company), type that url under “I have a domain”. Click “Next”.
4. Fill in the required credit card information.
5. Choose 12 or 24 months and set it on automatic renewal.
6. Send me (devin@wordpresstheming.com) the username and password you chose.
7. Send me all e-mails that BlueHost sends you after signup.

Also Helpful

• If we are moving an existing website, please send the ftp information for your previous host.
• If you had e-mails set up with a previous host, please send a list of every e-mail address.
• If you need new e-mail addresses set up, please send a list of those.
• If your domain name is hosted with someone else, please send the login information to manage that account.

In most cases we’ll be able to set up WordPress, configure your e-mail, and repoint any domains within an hour. Since the referral fee covers up to $65, this work is generally free to you.

Click here to view the embedded video.

On principle I won’t do it. I’ll politely refuse and give my reasons. And so far I’ve never had a client turn down a proposal down because I wanted their site to rank better in Google, or because I wanted their users to have a better experience . Here’s five reasons to drop the splash page and make the web a better place:

#1. Splash Pages are Bad for Search Engines

Search engines are looking for text content in order to index your site. The more relevant keywords you have, the better chances your site will rank for those terms. So why would you leave the most important page devoid of content? A large graphic may look nice, but without actual text on that page users will have trouble finding it.

There are several articles about this, including SEO Killed the Splash Screen and Splash Pages and Search Engines.

#2. Splash Pages are Bad for Usability

Splash pages generally consist of a large graphic or animation that takes several seconds to load. If you have a user with a slow connection, they may not wait that long. This is especially true with mobile users who often run on slower network connections.

Flash animation is especially bad. If your user doesn’t have flash installed on their browser or uses an iPhone, you’ve just wasted an opportunity to show them actual content. They will get a blank page that tells them the flash player is needed.

If you want your pages to be usable by the widest audience, you should make them as lean as possible and avoid using flash. SEO Moz wrote about this in their suggestions for how to convince a client not to use a splash page.

#3. Splash Pages Will Cause Your Users to Bounce

Newfangled wrote an interesting post about how their splash page caused 25% of users to leave immediately.

The number one reason for getting rid of our splash page was that it turned away at least 25% of our site visitors, sometimes more. This percentage has actually been researched and it turns out that at least 25% of site visitors will immediately leave a site as soon as they see a “loading” message for a Flash splash screen (even if there’s a “skip intro” link).

#4. Splash Pages are a Waste of Time

When was the last time you were stoked to see a large splash page? Right, never. I’d say 99% of users will simply click past to get to the actual content they were looking for (if they even wait for it to load), which means you’ve potentially lost some users and just slowed down the rest. You’ve also wasted the time of your web designer, who, if they had any grit, wouldn’t have accepted the job in the first place.

#5. You May Think it’s Cool, But It’s Not

I know, it’s like telling someone their baby is ugly, but you have to do it. Smashing Magazine, in their feature of beautiful splash screens even admitted there probably wasn’t a decent reason to have them.

Quality Themes

For most small WordPress projects, a free or low cost theme is the way to go.  I am developing a section of the site showcase my favorite themes, all of which have been tested and work well.  If you are a developer with a new theme, or are using one that I haven’t posted, please send me a note.

Plug-in Reviews

When adding new features to sites, be it a twitter feed or a photo gallery, my first stop is generally the plug-ins repository.  There’s not always a solution that works perfectly, but in most cases it works well enough and is a lot quicker than developing my own.  I’m planning to review all the plug-ins I use regularly here, and add new ones as they appear.

Tutorials and Time Savers

Here’s my tips and suggestions for developing with WordPress- a lot of which are posted here just so I don’t have to look up them up again.  If I run into a problem, I’ll post about it, and hopefully help someone out there with a similar problem.