webmaster's diary

This is part 3 of the tutorial. If you didn’t watch or read Part 1 and Part 2 you can do it here:

Part 1
Part 2

Here is video version of this tutorial. However, there is a few important points in text version below.

First of all, the default WordPress theme doesn’t look very good the way it is out of the box. You have several options:

• you can customize the default theme to something you can live with (not a very bad option, because WordPress default themes are supposed to be the safest themes out there);
• you can install one of thousands free themes available right from your dashboard or on the web (pay attention to users’ ratings in this case and always keep your theme updated);
• you can buy a professionally built theme.

I believe it’s best to use either one of three default WordPress themes (you must be able to customize it to something acceptable) or get a premium theme from places like ThemeForest. If you are just starting out and feel overwhelmed with the amount of information, stick to default themes for a while. Later you will know your way around WordPress and will enjoy playing with your design. For now all what matters is that things are done correctly. When it comes to default themes blank twenty twelve theme seems to work best for most precisely because it’s blank. Here is the demo. Once again, you can upload header which will appear over menu and you can change background color.

I am still going to show you how to change your theme using one of free options we have available right from the dashboard. Go to Appearance –> Themes –> Install Themes. You can search by keyword, color, background options and column number. The search system isn’t perfect but I am confident you’ll be able to find something suitable. Enter your criteria and hit “Find Themes” below. You will get something like this:

Many of these themes can look good, but click for Details to see users ratings. Never take something with less than four stars – you have too many options to settle for less than perfect theme. Once you found what you like click Install Now and then click Activate. Refresh your homepage and you will see your new theme. Usually it won’t look like in demo, because it needs customization. Go to Theme Options and see what customization options you have available.

Another thing you can do is to google something like “best free WordPress themes” or “best free minimalistic WordPress themes”, or “best free WordPress themes for…” and see what people are talking about. Some of these themes will not be available at appearance section and you will need to go to the designer’s site and download a zipped file and then upload it via Appearance ==> Themes ==> Add New ==> Upload Theme. Just be careful with free stuff.

Your theme choice is not a final decision. You will be able to change your theme later. Usually it’s a matter of one click. If your theme had non-standard options, however, minor issues are possible. For example,

[icon_list style=”crank”]

• this crank is not something every WordPress theme has.

[/icon_list]

If I ever change this theme all my cranks will be replaced with standard list bullets.

Update: as you see I switched to another theme and crank isn’t there anymore. That’s what I meant! 😉 And so that you know how it looked like here is an old screenshot of my crank:

Adding pages to RSS feed

By default WordPress comes with RSS feed and you don’t have to do anything to make it work. However, default RSS settings are to include only posts. If you are using pages, you probably want them to appear in your RSS feed too. If you are wondering what’s the difference between posts and pages and what you should use, here is the answer ».

To include your pages in RSS, go to Plugins–>Add New and type in search box “rss includes pages”. This is the name of plugin that will solve the problem for you. Simply install it and activate it.

More important RSS settings

Now go to Settings –> Reading. We’ve been here before when we were setting a static page as homepage in part 2. There is more important stuff here though. You can set the number of items you want your feed to display and choose between full text or summary RSS.

There is a lot of debate whether you should use full text or summary. I will only tell you my opinion, but you don’t have to agree and do the way I do it. If you choose full text you make it super easy to republish the contents of your entire website elsewhere. In addition, some of your ads such as PPC ads will not display in your RSS feed. People who subscribe to your feed can read it in their readers without ever visiting your website. Some other webmasters argue that setting it to summary makes you look cheap, although I don’t see how. In my experience, if your website is in a non-technical niche and/or your visitors are not bloggers themselves, your visitors have no idea what RSS is anyway.

I personally set my RSS to summary and don’t worry about looking cheap.

Improving your website’s SEO

In your plugins area find, install and activate WordPress SEO by Yoast. This is a fantastic plugin from a highly reputable source that allows you to do tons of SEO pro stuff. At the very minimum, it allows you to add custom descriptions to your pages and posts and allows to add noindex and/or nofollow tag to individual pages (Advanced area, see image below)

It also creates your .xml sitemap automatically and you can set it to submit it to Google Webmaster Tools and Bing Webmaster Tools automatically. It can change the way your titles appear in search engines and social media (doesn’t have to be the same), ping search engines, edit .htaccess without having to go to cPanel, add ads or custom text at the end of your RSS feed, and does a lot of other advanced stuff I simply can’t cover. These additional settings will be available under SEO link that will appear once you install the plugin. Plugin is constantly updated and like everything else, always keep it up to date.

Alternatively, you can use Google XML Sitemaps + Add Meta Tags plugin combo instead of SEO by Yoast.

Robots.txt for WordPress

There are different opinions about what should be in your robots.txt file if you are using WordPress, but at the bare minimum it should be this:

User-Agent: *
Disallow: /wp-content/plugins/

Open your robots.txt and add the second line under User-Agent: *

If you don’t have robots.txt, create it in your cPanel and paste these two lines.

You can use WordPress SEO by Yoast to block individual pages.

Same author (Joost de Valk) has Google Analytics plugin, so in case you use Analytics, maybe it’s a good idea to install that one too. You don’t have to use Joost’s plugins, but I suggest them because he has a great reputation and keeps everything up to date.

Converting the rest of your pages

Converting your inner pages is no different than converting your homepage – simple copy/paste job. You have visual and HTML editor, so you can choose what works best for you. You have to upload images via Add Media button. If your images are uploaded to your host, you can embed them with HTML code using HTML editor if you think it’s quicker. Don’t forget to ensure page URL is exactly same as it was in static version. If you are using description tags, add descriptions (below editor if you are using WordPress SEO by Yoast). Preview your work, if everything is OK hit Publish.

If you were adding a new page your page would go live immediately. However, because we are TRANSFERRING from static to WordPress we still have plain HTML version in our cPanel. This prevents your WordPress version of same page to go live. To fix this, go to your cPanel, find the file name of this page and delete it. Now refresh this page and you should see WordPress version of page you just created.

Repeat the process for all pages. You don’t have to do this all at once. You can take months to convert entire website – it’s not a problem. The only time you had to rush is when you were converting your homepage.

Fixing your sidebars and footer

Sidebars are managed from Appearance –> Widgets menu. You can drag text widget to your right sidebar and then paste any text or custom code here and click Save. The widget should appear on all pages of your website.

You will be able to manage footer area in similar fashion and the changes will take place on your entire website.

Some themes will give you more options for sidebars, such as left and right sidebar and additional widgets for header. Some other themes give you only one right sidebar. So it really depends. Depending on the theme you chose, you will see different options in your Widget area.

Different layouts for different pages

It’s possible to have different layouts on different pages. For example, you might want your homepage or your sales page look different from your regular pages. For example, you might want to have a special layout for homepage or no sidebars on sales pages. This depends on your theme you choose. Some themes offer many custom layout options, so you need to find something that satisfies all your needs. To change the layout of an individual page, find this page in your dashboard, click edit, then click on drop-down menu under Page Attributes. You will see what layout options you have available. Here are mine:

If I want to change layout of one of my pages I will simply choose the layout I need from menu to the right and hit Update. You might have less options there. Again, it depends on your theme.

Adding menus

By default WordPress will add your pages to main navigation bar, but most probably that’s not exactly the way you want it. To create your own menu go to Appearance –> Menus, enter menu name (whatever you want it to be, this won’t be visible on your website) and add URLs you want to appear and labels (that’s what will appear on the buttons) and click Add to Menu. You can drag and rearrange buttons to get the order you like. You can also do drop-down menus here. Once all URLs are added, make sure you choose the menu you just created as primary menu (top left) and hit save. Refresh your pages and make sure the menu looks right.

Contact forms

WordPress has a great plugin called Contact Form 7. Install, activate it and set it to deliver you messages to email address of your choice. I will not cover the setup, because it’s very intuitive. Basically it gives you a piece of code to paste into your blank Contact Us page and it will become a form when you publish. You only need to make sure that email specified for delivering messages is email where you expect to receive them.

Ads

You can ad ads to sidebars via Widgets function. If you want to add ad code inside the text you can either do it manually using Text editor (HTML editor instead of visual) or use one of may great plugins built especially for this purpose. I like to use Quick Adsense (you don’t have to use it for Adsense, you can use it for anything you want). You can set it to add ads automatically before, after and inside the content. You have complete control.

I also use Seo Smart Links+. It allows me to choose keywords and convert them to affiliate links (or any links) on my entire website. It’s easy to update them or change to another product this way.

Speeding up your website

Because WordPress is database driven, it is natural for it to be a little slower than static websites but you don’t have to put up with this. There is a number of cache plugins that will help you speed up your website and I think I tested most of them if not all of them. I could spot some kind of problem with each of them, but there was one that was just perfect Hyper Cache Extended. I highly recommend that you install and activate it once you are done with converting your website. After you activate it, you will see message in your dashboard telling you insert a line of code to one of your core files – do that. Just be careful not to mess up anything as you are editing. The best thing to go about this is to back up file before editing just in case. That way you will be safe. I described how to activate Hyper Cache Extended here.

More…

You can do nearly anything you want with your WordPress and there is really no reason for you to use something else. You can have forums, member areas, receive submissions from your users using Users functionality and much much more. I would recommend to add plugins slowly, stick only to well tested and widely used plugins and whenever you can manage without plugin, do so. Plugins are cool of course, but sometimes they might needlessly expose you to dangers and get your WordPress hacked or display ads you don’t approve or hide links. The same goes for free themes. I am not telling you not to use these fantastic free options, I am just advising you to be cautious.

You will also need a backup plugin. While most hosts provide free backup services you should never rely on it. I cannot advise you of any particular backup plugin at the moment as I am doing my research. See for yourself what backup plugins are available, read reviews and find what’s best for you. Make sure it backs up files and DATABASE. Store your backup somewhere safe, such as Dropbox.

I personally backup manually. I described manual backup process here.

I hope this was comprehensive enough and you found it helpful. If you have any questions, feel free to post in WordPress forum.

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

http://yourwebsite.com/wp-admin

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:

http://www.yoursite.com/5-things-you-need-to-know-about-wordpress.html

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:

Align left:

‹img src="http://www.domain.com/image-files/image1.jpg" class="alignleft" alt="image description"›

Align right:

‹img src="http://www.domain.com/image-files/image1.jpg" class="alignright" alt="image description"›

Align center:

‹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.

Here is part 3 »