Migrating to Digital Ocean

I’ve had a number of tiny WordPress sites on shared hosting (BlueHost) for over a decade. It’s been pretty great. Shared hosting has a lot of benefits: it’s cheap, it’s relatively easy to manage, e-mail is included, and there’s basic support.

The drawback is that servers aren’t generally optimized for WordPress performance, and once a site begins to scale in traffic you need to move it to a managed host or a VPS.

droplet-screen

I’ve been wanting to try DigitalOcean (one of the many cloud providers) because my hosting bills have been growing. I still have my basic shared hosting with BlueHost, but I also have large sites on WP Engine, and a VPS with WiredTree. They’ve all been great and have their own benefits, but the idea of consolidating into one provider and reducing my hosting bill significantly is a huge draw. Continue reading

How to Install a Purchased Theme

When you purchase a WordPress theme you’ll generally get a download link for the zip file. To upload this theme to your site involves a couple simple steps.

  1. Log into your WordPress site, and go to “Appearances > Themes” menu item
  2. Click the “Add New” button at the top of the screen
  3. Click the “Upload Theme” button at the top of the screen
  4. Now choose the .zip file that you have of the theme click “Install Now”

Add New

add-new

Upload Theme

upload-theme

Overwriting a Theme

If you are uploading a newer version of an existing theme, you will likely get this message:

“Destination folder already exists. Theme install failed.”

In that case, you will need to temporarily switch themes (perhaps to the default). Find the theme you want to replace, click “Theme Details” and then click “Delete”. Now you can upload the newer version.

Additional Notes

  • If you use WordPress.com, you cannot upload your own themes.
  • If your zip file contains multiple themes, you’ll need to unzip it, and then re-zip each theme individually.
  • Purchase themes only from trusted sources- otherwise you run the risk of getting a hacked version (no fun).

Social Menu Links

I (like most everyone) have number of social profiles spread across the web. Facebook, Twitter, Instagram, GitHub, etc. I tend to think of my website as my “home” on the web- it’s the only place I have complete control over the content, design and functionality. But I like to link to these other sites so folks can find me and engage there. For most brands and companies this is an essential requirement for their website.

icon-examples

There’s a number of ways for users to add social links. The simplest is to use the default WordPress menus and have text links. These can be added in a menu area or a widget. There’s also a few plugins that have purpose built widgets or absolute positioned icons that can work with most any theme.

But in most cases icon links in the menu are the best option for linking. Icons don’t take up much space and they’re immediately identifiable.

If a theme doesn’t support social icons by default, there are a couple plugins that allow you to use icon sets by adding classes to menu. Font Awesome 4 Menus is one. But since this is such an essential feature for most sites, I think it’s great when the theme itself handles it. This ensures that the icons used also match the rest of the theme design. Continue reading

Post Format Views with Categories and Tags

I think it makes a lot of sense to display certain post format archives differently than standard post archives. For instance, image post formats might look a lot better in a grid view with large images rather than a traditional blog format.

It’s easy enough to alter the post format archive template, but the taxonomy views (categories and tags) will still display in the standard layout- even if all the posts are the same format.

I thought it would be great to detect what type of posts were being displayed in the taxonomy before they rendered, and use a different layout if they were all in the same post format. This way I could continuity between the post format archives and taxonomy archives- assuming they all contained the same post format. Continue reading

IE Browser Testing on OSX

Browser testing in Internet Explorer can be a bit tricky since I do all my WordPress development work on a Mac- but I finally got a setup that works well.

virtualmachines

I’m using Virtual Box because it is free, rather easy to set up, and I could store all the disk images on an external drive (they take up too much space on my MacBook Air, 10GB a piece).

The disk images with Windows and Internet Explorer can be downloaded from Modern IE. I had to download some of the rar files multiple times because the zips were corrupted in the download (they’re large files)- but I eventually got a clean version. Disk images are available for IE6, IE7, IE8, IE9, IE10 and IE11. Continue reading

Template Hijacking and Useful Styling Tricks

Portfolio Press has always used custom post types to display portfolio content. When the theme was released in 2010 this was a novel way to do it (custom post types had just been released in WordPress 3.0).

Post types allowed the portfolio to be styled differently, use different templates, and keep portfolio content separate from standard content. In the dark ages before WordPress 3.0, developers had only achieved this by requiring users to post in a pre-defined category or tag.

screenshot

But since WordPress 3.4 we’ve had post formats like “gallery” and “image” which are now supported by most new themes. With the latest version of Portfolio Press, I wanted users to be able to choose which to use. Post formats are the new default, but users can install the Portfolio Post Type plugin and use post types instead if they choose.

To save a lot of duplication in template code and styling, I used a bit of template hijacking and a few other useful styling tricks. I doubt anyone is working on this exact same issue, but I think some of the ideas might be useful for other applications. Continue reading

Full Screen Background Images

Full screen background images are a nice feature for a number of WordPress themes. It’s also one of the few theme modifications that can be handled well through a plugin.

Full Screen Background

The implementations I’ve seen generally use the jQuery script backstretch.js- which handles responsive layouts and large images elegantly.

If you’re not a theme developer and just want to add a full screen background to your site, I’d suggest trying out one of these plugins:

If you are a developer and want learn how to add this feature to a theme, read on.
Continue reading

Instagram Photos in WordPress

Instagram

It’s quite easy to backup and display all your Instagram photos in WordPress thanks to the excellent DsgnWrks Instagram Importer plugin by Justin Sternberg.

I set it up with my theme Visual (free on WordPress.org) in just a few minutes. You can view it here.

The plugin can import all the photos you currently have and can also import new photos as they are published. There’s several options for how the images can be saved (post, page, post type), how tags/categories are applied, and whether they are published immediately or saved as drafts.

Straightforward Set Up

Instagram Plugin Screen

  • Install the DsgnWrks Instagram Importer plugin.
  • Go to the plugin page under “Tools” > “Instagram Importer”.
  • You’ll need to authenticate with Instagram before you can import photos. If you’re already logged in to Instragram, this will take just a second.
  • Most of the defaults work fine, but if you’re using the Visual theme, I would suggest a few changes:

    Images will show up twice if they are set as the featured image and also get inserted into the post content. So, you should disable one or the other if you’re using Visual. I updated the “Post Content” field to just show my image caption.

    I’d also update the “Imported posts status” field if you want to automatically publish each image. Just make sure you don’t have any other plugins activated that might send out an e-mail or tweet for each new published post when you do this.

  • If you have a lot of images, it will take a while to import them all. I’d recommend importing just a few at first to make sure everything is set up how like.

That’s it. Feels good to own your data, doesn’t it?

Lazy Loading Images

pixelated

Images are generally the heaviest assets on a webpage- so if you’re interested in fast load times for users, this is one of the best places to optimize.

Lazy Load Your Images

One popular technique for speeding up the initial load time is called “lazy loading”. It works by replacing the source of images (src=”/example.gif”) with a transparent placeholder image (src=”/pixel.gif”). This allows everything else on the page (text,fonts,scripts,etc) to render first. Continue reading