New improdia Website using WordPress

In January 2015 I decided to switch to a WordPress website as a part of my change in focus away from creating custom built CMS based websites. This article describes the steps I took to go live.

Improdia.com is hosted on my 1and1.co.uk account which I have been using since 1999. When it was time to experiment with WordPress I chose their automatic WordPress setup from the 1and1.co.uk control panel. That was nice and easy and once setup it also included a simple getting started wizard and a selection of recommended themes.

Installing WordPress manually on a 1and1.co.uk hosting account

When it was ready to actually go live I decided to go the manual route for installing WordPress as in the future I will be doing this for other people on hosting platforms that may not provide a wizard-based setup like 1and1.co.uk provide.

Now, because I don’t want the new WordPress website to appear in place of my old website until it is all set up I will install it on a subdomain to begin with and then move it later when it is all ready. Note: There are a few things that you need to do if you move a WordPress installation from one place to another on your hosting. More of that later.

All of the following steps were performed in the 1and1.co.uk control panel.

  1. Create a new folder in the root of my web hosting called ./improdia-wp
  2. Create a new subdomain on improdia.com from the domain manager, call it www.improdia.com and point it to the new folder improdia-wp
  3. Download the latest WordPress installation zip file from www.wordpress.org and upload it to the improdia-wp folder and unzip it using the 1and1 webspace explorer
  4. Create a new MySQL database in the 1and1.co.uk
  5. Run the WordPress installer by pointing browser at the subdomain (www.improdia.com)

Choose a Theme

Responsive Mobile themeFrom my past experience of dabbling with WordPress I found choosing themes quite cumbersome. There are thousands of them! I often found a theme, installed it and it just didn’t do what I wanted and to get it to look like the examples required lots of additional work. I want a theme that makes the most of WordPress built in features and one that works well with generic plugins and widgets. For now, I decided to use Cyberchimps new Responsive II  (aka Responsive Mobile), as it was clean and simple and is mobile friendly out-of-the-box. It is not overflowing with their own plugins for fancy effects and galleries etc. it is designed to be used with other plugins for that. It was also pretty easy to get it up and running and tweak the colour scheme to my liking – even as a relative WordPress novice!

Create a Child Theme

One of the first things I discovered when tweaking a WordPress site is that occasionally you want to make modifications to the theme but you don’t want to modify the core theme files as they will get over-written when the theme gets updated. In particular if you need to do modifications that require you to add code to functions.php (which I had to do to remove the ‘#’ anchor from Read More links so the link did not got to the post and then scroll the browser window down to where the extra content begins).

Thankfully creating a child theme for the Responsive Mobile theme was simply a case of following the official WP documentation for this: codex.wordpress.org/Child_Themes and following the section How to Create a Child Theme.

Now I have created and activated my child theme any modifications I make to it will work fine and when the Cyberchimps Responsive Mobile theme receives updates everything will should still work fine.

Add some plugins

The nature of running a WordPress site is that as you develop it you will come across things you want to do for which there are plugins available so as time goes by you will build up your own little collection of plugins. To begin with I added the following:

  • FooBox Free Image Lightbox. This was recommended by the Cyberchimps theme and since every site needs a nice image zooming plugin I went with this. It is responsive so it works great on mobiles and it works out of the box with the Cyberchimps Responsive 2 theme.
  • Contact Form 7. Every site needs a contact form solution and judging by the number of downloads this one is very popular ones so I installed it. 5 minutes later I had a working contact form. Easy-peasy!
  • FooGalley. At the time of writing I don’t actually have a need for a gallery but I know I will in the future so it was a no-brainer to choose the companion gallery to FooBox.
  • Black Studio TinyMCE Widget. I wanted to be able to have a rich text editor with media (image) support for changing the home page widgets instead of a simple text widget (where you have to type HTML in directly for formatting of adding images). This plugin fits the bill perfectly and is also a very popular choice.

That was it to begin with. Everything I needed to get started.

Switching WordPress from subdomain to main site

After adding some content based on what I had previously on my old website – mainly examples of websites Improdia has created in the past – I was ready to go live so I had to switch my WordPress blog from www.improdia.com to www.improdia.com. Here are the steps taken to achieve that:

  1. In WordPress (on the subdomain) go to Settings -> General and change the WordPress Address (URL) and Site Address (URL) to https://www.improdia.com
    After doing this I can’t access the site until the next step is completed.
  2. In the 1and1.co.uk control panel go to domain settings and edit the destination for the main domain (improdia.com) and change it to your new folder that contains the WordPress installation. This will be the same folder as was set for the destination temporary subdomain site. In my case ./improdia-wp
  3. Wait for the changes to take effect, sometimes a few minutes, then do a forced refresh on the main domain home page and the new WordPress site should appear. Then you can login to the WordPress admin as usual.
  4. Delete the temporary subdomain in the 1and1.co.uk control panel

 

Comment on this