As usual, I prepared video and text version. I believe it’s better to watch videos and read text version for best results. If you have any questions, please post in WordPress help forum.
Here is video version:
In part 1 of this tutorial we installed WordPress into the root folder of our domain. If you were to start a new website from scratch this would be enough. However, we are converting already existing static website to WordPress, so we cannot settle for WordPress default settings. We need to make a few tweaks to make our WordPress installation work much like a static website (not without amazing dynamic features of WordPress though.) This part is especially important – ignoring it might lead to lower search engine rankings. The good news, the fix is not hard. If you already watched my deliberately slow video above, you know it took me only about 5 minutes. Let’s get started!
You can access your WordPress dahboard by typing in your browser
Use your username and password you created in part 1 of Static to WordPress tutorial to sign in. This is your WordPress dashboard:
Adding www. before domain name in WordPress
If you always had www. prefix before your domain name, you need to fix this now. If you didn’t – ignore this part. To add www. simply go to Settings, then choose General and type in www. before your domain name under WordPress Address (URL) and Site Address (URL) and hit Save Changes, as shown in the video. WordPress will get you signed out automatically. Simply use your username and password to sign back in. Refresh your homepage. It displays with www. now.
Adding .html at the end of WordPress URLs (same for .php or anything else)
If your pages were indexed and ranked with .html extension (or any other particular extension, such as .php, .htm, .asp, .aspx etc.) and you have links to your website all over the web that link to these pages, you definitely want to have exactly same URLs. There is no need to do any redirects. There is a number of plugins that helps you fix that.
In my example I am using plugin called “.html on Pages”, however there are other plugins you could use. There is a plugin called “WP Page Extension”. It allows you to set any extension you want. I personally didn’t test it, but reviews are good. There are separate plugins for .html, .php and other. It’s up to you what you will use. I would suggest to use plugins with good reviews, like 4-5 stars. You almost always have a choice of plugins that do the same thing, so you have many options to choose from.
Go to Plugins, Add New and type the name of plugin (or keyword) into search box. Choose the plugin you need, install and activate it, as shown in the video. When I am not sure which plugin to use, I like to make Google search first, find the plugin I need via Google and then type the precise name of the plugin in Plugin search box in WordPress. Here is WordPress plugin installation page:
It’s really simple to install plugins in WordPress. You can see how I did that in my video. The wizard guides you through the process. WordPress is very intuitive.
Setting custom URLs in WordPress
SBI! (Site Build It!) concentrates on teaching you to make keyword research and then give pages URLs that contain keywords + .html. Keyword research is an excellent idea of course, however in my opinion you don’t want to let your competitors know your keywords. If I know your website is successful due to keyword research you’ve done and I know you have a habit of naming your URLs with keywords phrases, technically I can take an advantage of all hard work you have done and build my own website using same keywords. You saved me tons of time and money. I will compete with you now. To make matters worse, Site Build It! uses the keyword meta tag. If you add extra words to your keyword phrases in URLs I can always see your page source and know your precise keywords.
However, if your website was online for some time, you have no choice but to keep these URLs and that’s what we are going to do (you can get rid of keyword meta tags though).
Go to Settings, choose Permalinks and check the radio button next to “Post Name” and hit Save Changes. With these settings, WordPress will give your pages and posts URLs that are basically your titles, like:
There will be an Edit button where you can change this to anything you like, including pure keyphrases or something totally different (you can see that in video).
.html at the end doesn’t give you any additional benefit, but in our case we HAVE to keep it, because our website was already spidered and ranked with .html (or .php or any other extension you might have).
Creating a Static Homepage
It’s time to fix our homepage. Right now our homepage displays latest blog posts (which is WordPress default), but you can set any page you like as your homepage and I will show you how to do that. First of all let’s create a page. Go to Pages, Add New, give your page exactly same title as it had in the static version of your website.
For homepage URL, if your homepage was previously available at, let’s say, www.domain.com/index.html, edit URL to be “index” now. If you are using .html on Pages plugin, the .html extension will be added automatically. This way if you had any old links pointing to your homepage as “www.domain.com/index.html” they will be redirected to your homepage at “www.domain.com”. I talked more about it here.
Go to the your homepage content backup, copy the contents of your homepage and paste it right here. The cool thing about WordPress editor is that it pastes links too. So, it’s really fast and simple. If you want HTML editor there is a switch between Visual and HTML at the top of the editor.
Regarding images, you can copy them same way you copy text and links without uploading them to WordPress. This will save tons of time but in the future when, let’s say, you are moving to a new host or another server you should remember you did this and take image folder from your File Manager with you.
This only works in our particular situation when you have a static site hosted by a certain host and you convert it within the same host. If images need to be realigned you can use Text button where you can edit html for your image. Here is basic html you could use:
‹img src="http://www.domain.com/image-files/image1.jpg" class="alignleft" alt="image description"›
‹img src="http://www.domain.com/image-files/image1.jpg" class="alignright" alt="image description"›
‹img src="http://www.domain.com/image-files/image1.jpg" class="aligncenter" alt="image description"›
If are an ex-SBIers who was using block builder you might have “images” instead of “image-files” but whatever it was WordPress will copy it. You only might need to realign your images to make your page look more professional and attractive.
Otherwise you can use Add Media button or bulk upload feature. In the future when you add new images you should definitely use Add Media button.
I don’t think I have to explain much here. It’s a very intuitive experience. You can preview your page and if everything is ok, hit Publish.
WordPress default themes don’t look particularly good, but you can customize them. You can also go to Appearance, Themes, Install Themes and search thousands of free themes. Many look good, but always pay attention to ratings. I personally never use these free themes and prefer to buy professionally designed themes from ThemeForest or Genesis compatible themes by StudioPress. It might be not your priority at the moment and you can use something free for now and switch to another theme later. WordPress makes it easy.
If you are going to use ThemeForest you need some experience with WordPress. Some of their themes are hard to configure or are not properly SEO-optimized titles-wise. Your best bet is to stay on twenty twelve for a while, which allows you to upload your own header and change background color. The theme is blank so can be adjusted for any type of site. When you get a little better at WordPress you will find something you really like and switch in one click.
I decided to keep the default theme for now as I don’t want people to get confused by all details involved. So never mind, my website doesn’t look good but my setup is correct. URL is what I want it to be. I will simply hit publish. Here is what I got:
In part 1 I backed up my homepage under index-2.html. I don’t want duplicate content issues so I will go to my cPanel at Hostgator and delete index-2.html.
How to Make WordPress Display a Static Page as Homepage
Right now WordPress displays my latest posts instead of homepage. To be precise, it displays its sample post Hello World!, because I didn’t write any posts yet. I want my homepage to display index.html instead of latest posts, so I will go to Settings, Reading and check Front Page Displays a Static page radio button. I will then find my homepage title in dropdown menu and hit Save.
If I refresh my homepage now I will find it displays my homepage contents correctly and the blog is gone. I could play with design right now using Appearance, Themes, Theme Options or even install new themes.