SeriouslyTrivial.com has got a new home!

I’m getting a lot more traffic these days and my old hosting service was just not up to the task. It was finally time for me to move SeriouslyTrivial.com to a more robust host and that’s what I did today.

To me, the difference is dramatic. The site is so much more snappy and…fingers crossed…more reliable. I think I’ve got all the “knobs and dials” set properly; there are so many bright and shiny new ones! Let me know if ya see anything wonky. Enjoy!

Speeding up your WordPress site

Over time, I often noticed that my WordPress site gets slower and slower to load. With attention spans so short these days, the faster your site, the better. I like to review my site periodically to see if if there is anything I can do to make sure its running fast and efficently. I made a few tweaks and have managed to reduce the load time substantially without really changing how my site looks and functions. Without a doubt, plug-ins are the #1 cause of slow-loading sites and here are some steps you can take to reduce their impact: Read more

New website theme and Responsive Design

I was having some issues with a plugin for the site and the support guy told me:

“The issue here is that your site/theme is not responsive.”

I haven’t done serious web development in a long time and had no idea what we was talking about. So I did a little digging and found out that Google is pushing new design principles it calls Responsive Design. It’s all about developing a site that works on mobile, desktop or anything else with a screen. For me, this meant that if I wanted to be compliant, SeriouslyTrivial.com needed a new theme. This post goes through my process and highlights things you should consider and watch out for when switching to a new WordPress theme. Read more

Switching to the WordPress Media Library from NextGEN Gallery

I finally switched to the native WordPress Media Library (WML) from NextGEN Gallery for my photographs. I’ve been using NextGEN for a while, but have always been worried about depending on a plug-in for core things like images. This was never more apparent than when they released version 2.0 and that brought down my entire site. A recent upgrade did a similar thing although not as extensive. I will admit, the developers were quick to fixe the issues, but the risks were apparent. Read more

Fixing MP3-jPlayer’s annoying 40px bottom padding

Right now, my favorite WordPress plug-in for playing MP3s is MP3-jPlayer by Simon Ward. I use it on the sidebar to the right on this very site to play some of my original music.

The only issue I have is an annoying 40px bottom padding that is put on the playlist player. The CSS has gotta be hard-coded somewhere, but I found a simple fix that I’d like to share:

On your WordPress dashboard, go to Appearance > Edit CSS and add the following CSS code:

#wrapperMI_0 {
padding-bottom: 0 !important;
}

This will override the inline style code for the player object. I’ve set it to zero, but you can change to whatever works for you.

On a side note, this wonderful plug-in seems to have disappeared! I hope it returns with new revisions. Simon’s own site says you can download from WordPress but the link is broken and the plug-in seems to be missing even if you search for it :-(

Share self-hosted WordPress photo to Facebook

In the past I’ve either uploaded photos to Flickr or Picasa (now Google+) and had a Facebook app (RSS Graffiti) automatically post status updates to Facebook via RSS. (Of course I also posted some one-off photos directly to Facebook.) However, something went wonky recently and RSS Graffiti started posting old items to my timeline. Not good!

After researching alternatives, I finally decided to self-host my photos on SeriouslyTrival.com and write a blog post on new photo additions, which WordPress automatcally posts to Facebook.

NextGEN Gallery

I settled on NextGEN gallery, billed as “the world’s most popular WordPress gallery plugin.” Exporting from Google+ and reimporting to NextGEN was pretty easy. I had already had things grouped in albums, so I just mirrored that in NextGEN. (NOTE: If you do this, import oldest first or last least your latest photos last. This will pay dividends later since you can use that to automatically order things.)

Page and CSS mods

I modded the NextGEN compact album view a bit to shorten the photo number display. I also modded the CSS to tighten up the font and added some height to the DIVs so they flowed smoother. I hate doing that since it makes upgrading harder, but the stock result just bugged me too much.

Short Code Annoyances

I also found that NextGEN short codes don’t play well with each other. For example, if you use nggtags and nggalbum on the same page, and a visitor clicks on an image from the nggtags short code, the nggalbum short code will still be evaluated and executed. (Note: having multiple instances of the same short code does not exhibit the same problem for some reason.)

The only solution I found was to create a separate subpage for each short code used, so I have separate nggtags, nggalbum and tagcloud pages–the latter two being subpages. I added hyperlinks at the top of the pages for navigation. Not the most elegant solution, but it works for now.

Uploading and Posting from iPhone

To upload iPhone photos to the website, I use the NextGEN iOS app. It’s pretty bare-bones, but does the job. Generally, I upload to an existing gallery named after the current year. This gallery is already part of an album included on my site’s Photo pages. I like to keep miscellaneous one-off photos in this album. (Events that have many photos, like vacations or holidays, get their own gallery, and I leave to handling on a desktop PC.)

Sidebar and Slideshow

I added the NextGEN Widget to the sidebar using the Recently Added option. I also added the NextGEN slideshow widget to the sidebar for fun.

Editing Photo Tags

To edit tags, you have to use the WordPress app which is a bit cumbersome on an iPhone. This feature is blatantly missing from the NextGEN app for some unknown reason even though it says you can in the app description. It may be better to wait until you can get to a real computer and browser, or even an iPad to edit tags.

Adding Facebook Sharing using FooBox

I also purchased the FooBox WordPress plugin. FooBox mods the image display routines and does a better job at resizing. The UI is also much nicer and has a more obvious navigation UI.

The real reason I chose FooBox was it’s social site integration, specifically simple Facebook sharing from an iPhone. You will need to go through some tedious steps to generate a Facebook App ID, but its fairly well-documented. (Note: Use your site’s name for the “Display Name” and your site’s URL for the “Site URL” fields. Don’t use “GetFooBox” which is shown in the example steps.)

I popped for the $47 multi-site license since it had lifetime updates. The single site version is $27. I found a 20% discount coupon but noticed that there have been discounts as high as 45%, so it’s worth a Google search.

Process to Share an Image on Facebook

So here is my process to upload a picture to my site and then share on Facebook:

  1. Use NextGEN app to upload the photo to a gallery and edit the title
  2. Open your website in Safari browser
  3. Find the recently added photo in the sidebar and tap to open (or alternatively, find the photo by navigating through your site. Using the sidebar widget is the easiest way)
  4. Tap the Facebook share icon
  5. Add some descriptive text for your status update and post to Facebook. That’s it!

It’s actually pretty darn easy!

Conclusion

One of the added benefits is that I now have a kickass photo gallery system. Self-hosting my images also drives traffic to my site. I really hope that tag editing is added to the NextGEN iOS app soon. It’s not a showstopper, but it is annoying. I’m also looking at some way to add a comment system for photos, but FooBox may not play nice I fear.

I really like the FooBox image display, particularly on an iOS device and sharing on Facebook is drop-dead simple which was my goal.

Updates:
2013-05-19
Uploading a batch of images isn’t possible using the NextGEN app so had to resort to FTP. I found that Photogene would also scale the image prior to upload which is a real time-saver. What you have to do is create the gallery using the NextGEN app and then upload the images with Photogene. Remember that spaces in the gallery name are converted to dashes. Also, you’ll then have to go into the WordPress app and choose the Scan Folder for New Images option on the gallery. It’s a bit of a pain, but less so than uploading one by one.

2013-05-20
Make sure you enable the Activate permalinks in the NextGEN options. Otherwise, you won’t get a good thumbnail in any posts you share on Facebook. Also, if you use Featured Images, I would stop. They don’t work right with NextGEN. Supposedly, it will be fixed in version 2.0. If you want a specific image to represent the post, use a full path for the file in an IMAGE tag, which can even point to a NextGEN image (e.g., http://seriouslytrivial.com/wp-content/gallery/coolpics/IMG_0001.jpg).

Migrating blog from WordPress.com to WordPress.org tips

See also my Speeding up your WordPress site post

Well, I got tired of the limitations in the hosted version of WordPress (i.e., WordPress.com) and decided to host a WordPress blog myself. Since you can export a blog, it was pretty easy to migrate most of my blog, but there were a few gotchas.

First, your theme may not be available. For me, I was able to find the theme and upload to my new WordPress site, but it wasn’t exactly the same and I just gave up and switch to a different one.

The second issue was that when I imported the data file, I kept getting errors like the following:

Failed to import “John Smith – 2010-12-26 05:43:27”: Invalid post type feedback

I eventually determine it was because the WordPress.com site includes a contact form plug-in automatically. On the new site, you have to install it. Well, it turns out that it’s part of something called Jetpack which I believe is a bundle of basic plugins you can install. It comes from the WordPress folks so it is a standard of sorts. My new WordPress blog automatically suggested that it be installed. One of the things it does is add a Feedbacks item on the main settings page. That’s the tip off that you’ve got the right plugin.

Once I had Jetpack installed and activated, I re-imported the data and the errors went away. It is important to note that you can re-import and WordPress will ignore anything already imported. Nice!

If you added widgets to your old site’s theme, you may also find that they don’t exist in the new one. Again, this is due to plugins being already there in the WordPress.com site and not the new one. You’ll need to search for them, install and activate them.

I’m kinda glossing over the details of what I had to do, but this should give you a head start if you find issues migrating your site. All in all, it was pretty easy and I’m excited about the greater functionality of my new site. Also considering I was paying $30/yr to customize my site and $13 to redirect my domain name, the $4/mo I’m having to pay on HotpointDomains.com for my WordPress site isn’t that much more expensive.

UPDATE 2012-06-04:

One BIG bummer is that your stats will start all over :-( Seems to be no way to migrate those.

If you had a domain name redirected to the WP.com site, set Permalinks to Day and name (e.g., http://SeriouslyTrivial.com/2012/06/04/sample-post/). This is the way the WP.com sets up links to particular posts. This way search engines can still find the posts on the new site. It’s under Settings > Permalinks.

Using custom CNAME with WordPress.com and Google Apps

If you use a custom domain with WordPress.com and Google Apps email, getting a custom URL like webmail.mydomain.com set up to access your email is confusing. It’s actually pretty simple to do and here are the steps:

  1. Log into Google Apps
  2. Scroll down to the Service Settings section and click on Email
  3. Under Web address, click Change URL
  4. Enter the CNAME in the box for the custom URL. Click Continue. (If you are new to this type of thing, in an URL like webmail.mydomain.com, “webmail” is a CNAME.
  5. Then, in WordPress settings choose Domains.
  6. In the Email/DNS column, click Edit DNS3.
  7. In the Custom DNS Records box, enter the record using the format: CNAME <subdomain> <URL>. An example would be “CNAME webmail GHS.GOOGLE.COM” (no quotes).
  8. Click Save DNS records

That should do it!