[dc]I[/dc] 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.
Searching for a theme
I could have gone with a freebie, like the existing one, but decided I should get a little serious and purchase a premium theme. I figured a paid-for premium theme would be more likely to have on-going development and updates. (The one I selected, in fact, was originally created in 2012 and the last update was just last month.)
I started to look at themes but found it was too overwhelming of a task; there were thousands to choose from! What I needed was some criteria to use in evaluating the themes. After some thinking, I came up with the following must-haves:
- Responsive design
- Ability to showcase my photos
- Not downplay my blogging
- Ability to also highlight my music and downloadable apps pages
Once I defined my criteria, it was much quicker to evaluate themes. I began my search looking at photography themes, but soon found that they were just too image heavy and didn’t allow anything else to be brought up to the top, like blog posts. When I found a theme that might be acceptable, I saved it’s URL and wrote some notes on it. (I used Evernote to take my notes, but any text editor or word processor would have sufficed.) After looking at several hundreds I had about six candidates. I went thru a live preview of each and ranked them for suitability.
In the end, one was head and shoulders better and it had the most generic of all names: Website. It was the only one that truly met all of my criteria. I put a lot of thought in how I would migrate elements of my old theme into the new one. I also thought about how I could expand and embellish things that just weren’t possible before. The new theme was so much more flexible and powerful. It was exciting…and a little terrifying.
Preparing for the change
Before I did anything, I backed up my site using UpdraftPlus. I like it because it will copy the back files to Dropbox. (I also have their Automatic Backup add-on which automatically backs up things before you, say, update a plug-in. Highly recommended.)
Before switching to the new theme, I went through my old one and wrote down all of the elements of the site. I started at the top of the home page and worked my way down. I broke it down into a couple basic groups: the header, body, sidebar and footer.
Sidebar widgets
Sidebar widgets were where I had most of the customization, so I listed each and noted if it used a plug-in. If there was custom code, I pasted that into my notes. Now, generally, widgets carry over when you change themes, but that is not always the case, particularly if they are custom ones which themes often have.
I also saved the code for Google Adsense and Google Analytics in my notes. These were all over my site. It was hard-coded into the header, in a sidebar widget and the analytics was in the footer using a plug-in. I had to get new code for the banner ad, since the new theme had a different sized area.
Plug-ins
I went through all of my plug-ins and deactivated them if I didn’t use them. Some of them are rarely used utilities, so I left them installed, but not active. I deleted anything I’d never use. I’m not certain, but I believe that the only downside of leaving them installed, but not active, is that they take up drive space. Just doing this really sped up the site! It’s probably something I should do regularly.
Maintenance mode
Since my site was going to be down while I worked on setting up the new theme, I installed a plug-in that gave visitors a landing page that let them know the site was temporarily down. There are a ton of freebies and I used Coming Soon Page & Maintenance Mode by SeedProd. It has a nice feature that lets you–assuming you are logged on–see the actual site, but others get the “Coming Soon” page.
Installing the new theme
You never really know what you are getting in a new theme until you install it and try to set things up. While the documentation was ok, it didn’t really tell me everything I wanted to know. I jotted down notes of shortcoming and issues I found as I set up the new theme. I sent these onto the developer when I was done.
Thumbnails
Every theme is different and will probably utilize their own set of thumbnail sizes. If you don’t know, typically, when you upload images, WordPress will actually create different sizes of the images for different uses. For speed reasons, it is much faster to load pre-scaled image files than to scale images on the fly. What this means is you will likely have to regenerate all of these versions for all of your images in the Media Library. Fortunately, there is a plug-in for this and it’s called Regenerate Thumbnails. I had about a thousand images and it took a couple hours. I should note that you can’t really do much else while this is going on, so be prepared for this necessary exercise.
Featured images
My old theme didn’t really use featured images for anything, but the new one did and I suspect most do now days. The only reason I started adding them to posts was that Facebook used it when I shared one of my posts. My new theme shows the featured image to the left of each post and since I also used to insert the same image at the beginning of my post, the image looked duplicated and stupid. I ended up going through my recent posts and deleting the image from the post itself. I also added featured images to a few. I had my blog open using the new theme in one window and when I found a post that looked weird, I edited it in another window. You don’t really have to go thorough all of your posts if you don’t want to, just a reasonable number of the most recent.
Keeping to basics
A lot of themes and plug-ins for that matter implement their own version of photo galleries. A lot of the added functionality is pretty cool, but I avoid them like the plague and here’s why. If it’s built into the theme, what are you going to do when you later change to a new theme? If it’s plug-in based, what if the developer stops supporting it? What if a new release has a huge bug? The latter happened to me and totally messed up my site for a week until a new version was released! Ever since then, I only stick to the built-in native Jetpack photo galleries. I know I’m giving up a lot, but I’d rather be safe than sorry.
Basically, each of my photo galleries is a separate page. I link to them from a main “albums” page using conventional hyperlinks. I just use some custom CSS code to get the thumbnails to look right. I had to tweak the code a little for the new theme, but it was pretty easy.
One thing I did want, however, was a nice way to set up a portfolio of y best photographs. There are a lot plug-ins for that, but most set things up in a proprietary way and you know I’m opposed to that. Then I stumbled onto the Smart Photo Gallery plug-in from Topdevs. With this plug-in you wrap the native gallery shortcode with another shortcode. This means you add/edit the galleries using the native gallery tools. I’ll admit, it’s a little funky in the way it loads in that you see briefly the building of the native stuff before it takes over, but once the page is fully loaded it looks quite nice. (NOTE: I subsequently found out that this plug-in didn’t work too well on my iPhone browser. I changed gears and went with native WordPress galleries on separate pages with conventional hyperlinks. I would have liked to have used my theme’s tab feature and have everything on one page but loading all of the images was too sluggish. Too bad.) Here’s my portfolio page.
The front page
I’m not sure if all themes work like this, but Website uses a WordPress page as the main Home page (which it called the Front Page). With respect to blog posts, you have the ability to select certain ones to “feature” on the Home page. Generally, I won’t use this since maintaining it would be a pain. Effectively, this is like making a post “sticky” and always show at the top even if it’s old. I will, however, probably use this for the announcement of the new look (i.e., this post ;-)
Another option for this theme is to just show a specified number of posts from my blog. (This differs from the featured posts, explained above, where you have to actually select specific posts.) At the end of the posts, you can have a link to the full blog. The problem this creates is that the posts shown on the Home page will be duplicated on the blog and visitors might get confused since it would look similar, if not identical.
As I thought about it, not all of my posts are “front page worthy.” Sometimes I share a good YouTube video or something frivolous and don’t really want that taking up valuable Home page real estate. I’d rather save the Home page for my more seriously trivial posts. So, I created a special category called “Front page”. Any post that is worthy of the Home page gets this category in addition to the category I would normally use. The theme has a feature to only choose posts from designated categories for the Home page and I set that to my Front page category. Sure, there will be duplicates on the full blog, but I’ll live with that.
Never Done
Websites are never really done, but I’ve got most of what I want into the new theme. I’m quite pleased with it. If you are thinking about switching to a new WordPress theme, I hope this post helps to make the process a little easier and less scary. Good luck!