Date: August 2016
Type: wordpress development
I migrated thelightedones.com from a DIY website service to WordPress with new hosting and a major design overhaul.
Update, 7/22/17: The owner of this site contacted me about a year after the original project, wanting help with a rebranding. We moved his site to a new URL, andrewmartin.energy. He did all of the design updates himself. I directed the domain to his web host, cloned the old website to the new domain, and set up redirects for all URLs. If you go to the website now you’ll see that it looks a bit different than in the screenshots below.
I’m excited to write up this portfolio post because it will show an interesting example of how you can work with a web developer without handing over all control of your website to someone else. This is something I tried to illustrate in my very long article The Real Difference Between Hiring a Web Developer and Buying a WordPress Theme, which you might find interesting.
Since WordPress is easy to use, there are many people who have the technical skill to do much of the work in creating their own website, but they don’t have the skill to deal with things like domain transfers, installing WordPress itself, and work in HTML & CSS. When you’re in that situation, you can get a web developer to help and guide you through the process.
The situation was this: Andrew’s website was created with Webs.com. It was mid-July, and his account with Webs.com was expiring on August 1st, and he did not want to renew it. Webs.com is one of those website services that advertises an easy, visual way to build a website without needing coding knowledge. Website builders like that tend to be limited in design, function, and usability, which is unfortunate since that’s what they’re attempting to offer. Andrew had made the correct decision to leave them—he just didn’t know what to do instead.
So I came to the rescue! I told Andrew that I could help him move everything to WordPress. I knew WordPress would be the perfect CMS for him. He’s a professional service provider and his website isn’t too complicated. It mainly needed an updated design with a proper blog function and minimal ecommerce functionality. And since he had been able to build his old website on his own, I knew that he would be completely capable of working in WordPress once I gave him an introduction to it.
It was a tight deadline. We only had two weeks before the old account at Webs.com would expire. I told Andrew that our first goal should be to get the basics up and running so that he could still book clients, and after that we could add more to the website.
This is an outline of the process we went through to move the website to WordPress on a new web host. I will explain what I did and what Andrew did himself. This will also give you an idea of what’s involved when transferring a website from one platform to another.
Before we could do anything else, we needed a new web host. I recommended DreamHost, as I do for all my clients, because they’re a great web host that I’ve been using for at least 8 years.
The domain was registered with Webs.com, but we wanted to move everything away from there. We worked together to initiate a transfer of the domain to DreamHost. Webs,com has a 5-day waiting period, after which there was another standard 24-48 hour waiting time. Since we only had about two weeks to get the new site developed, we couldn’t lose one of those weeks to waiting on a domain transfer. I set up a new development environment on the new server that we could use in the meantime.
I had never before needed to install WordPress and start developing a website before the domain was in place. I only mention this to illustrate the fact that ITS NOT ALWAYS NECESSARY TO HAVE PRIOR EXPERIENCE IN SOMETHING IN ORDER TO DO IT. I’m shouting that at you in BOLD CAPS because it’s so frustrating when potential employers require specific experience in minor details before they will hire someone. If a person is FAMILIAR with the general concept, and CAPABLE OF LEARNING, that’s all they need.
All I had to do was send a quick email to DreamHost tech support to ask them what they recommend. They pointed me to an article in their knowledge base that explains the process: How do I install WordPress before my DNS is pointed to DreamHost?
Now, normally installing WordPress is quite simple. When you’ve got a domain name in place, you can use an installation package provided by your website host, which walks you through the process. That wasn’t possible since I had to follow the instructions in the article I linked above.
I won’t bore you with the details, but in a nutshell it involved:
Once that was accomplished, I was able to manually install WordPress on the server. To do that, you have to download the files from WordPress.org, upload them to the server via FTP, then follow the WordPress installation guide. Of course, I couldn’t follow the instructions completely step-by-step and word-for-word since I was working with a mirrored temporary domain and all that jazz. This is where having some experience does help, because you have to understand which parts of the instructions you need to mix and match. However, I stick by my original shouty statement up there because it’s all just a matter of trying things until you find what works. Ask any web developer, software engineer, or local IT guy, and they will tell you the same thing.
While I was doing all that, I sent Andrew off on a mission to find a theme. I figured he would enjoy shopping for a new look for his website, and that he would only be satisfied with something he chose himself, so I gave him some guidelines and set him free. We discussed the pros and cons of a few different themes, and in the end he chose the Zerif theme. We started with the Lite version but later upgraded to get more features.
I installed that theme, installed a few basic plugins, and make a few WordPress settings configurations.
Andrew was new to WordPress but I knew that he would learn it quickly and easily. Over Skype, I gave him a brief tutorial and showed him the basic concepts. I showed him how he could customize the theme, create pages, create blog posts, and where to look for important settings.
This is where Andrew did most of the work. He imported all of his old blog posts from the old website. Unfortunately Webs.com doesn’t provide an export function, so he had to do them all by hand. He set up the main pages of the website and configured the colors and fonts for the theme. I answered some questions throughout the process, but overall he did the huge majority of that work, and did a great job with it.
Andrew decided that he wanted to use Google Apps for Work for his email. This was another thing I’d never configured from the ground up, although I’d managed it for other clients in the past.
The domain transfer that we were still waiting on caused some trouble, but once that went through, it was easy to get this up and running. It basically only requires you to:
During this email setup process, the domain transfer suddenly went through. That was a relief because we were worried that it wouldn’t happen before our August 1st deadline. In preparation, I’d already installed the Coming Soon Page & Maintenance Mode by SeedProd plugin, which lets you create a splash page that viewers will see, while you can still edit your website like normal in the background. We put up that splash page while I moved all of the domain settings back to the correct domain name and finished development.
Soon enough, it was close to launch time. I made sure that the site had automatic backups running, did some configuration of Yoast for SEO basics, made sure the contact form was working properly, and got the site preparedfor Google Analytics and Webmaster Tools.
The Shop page needed some extra attention, so I created a nice grid-style layout for it. I used a variation of the Flexbox grid layout that I posted over on Zen Web Themes:
I’ve already used this layout a few times since I wrote that article. It’s quite useful, whether you’re using it with the WordPress Loop as outlined, or just on its own with static list items.
Here are a few “Before” screenshots of the website.
Here are a few “After” screenshots of the website, using the Zerif Pro theme.
(Sorry for the duplication issue at the bottom there. The page has a parallax effect which doesn’t translate into screenshots very well.)
We managed to hit the goal of launching the website on August 1st. It was a lot of technical configuration work for me, and a lot of content-importing work for Andrew. I am a big fan of Andrew’s work, and I’m really glad to have been able to help him with re-launching his website. It’s much more professional, it has a lot more potential, and it will continue to grow with him and his business. Go check out TheLightedOnes.com.