Need a WordPress website this weekend? Start here...

Leveraging Localhost WordPress for Learning Webmaster Skills

(Reading time: 10 – 16 minutes)

Long time readers know I run several testing installations of WordPress right on my own computer. This is colossally useful for a number of reasons:

  1. New versions of WordPress are easily installed and tested
  2. New plugins and themes can be developed and tested.
  3. Reduces risk of destroying production installations.
  4. And finally, I can learn new skills in a safe, no-risk environment.

If you have been following along in this series, you will have installed Apache, MySQL, PHP and WordPress independently from separate installer packages, and your configuration should be very close to mine. You should have a working WordPress installation, which means MySQL and PHP work essentially correctly.

As it turns out, your Apache configuration is going to be bare bones, and set to very strict default behavior. This is a good thing. Better to learn how to relax your web security incrementally, than to get your web security beat upside your head by malicious exploits. Of course, running from localhost, it’s not that big of deal… if you get hacked you can just get off the network and deal with it. Thus, in addition to WordPress, we’re going to learn some Apache magic as well.

Quick subdomain setup for Windows Apache Localhost

Suppose you want to move a WordPress installation from one subdomain to another. You will need to know something about setting up subdomains, which is the topic of this section.

Setting up a subdomain on your locally hosted Apache webserver is not difficult. There’s plenty of material on the web explaining exactly how to accomplish this task… for specific and different combinations of Apache and Windows versions. As usual, none of these explanations fit my situation exactly. Most likely, none of them will fit yours either.

So here’s mine, which you can use as yet another resource. I’ll add some links I used for reference at the end of this section.

What you need to know:

  • How to use a plain old ASCII text editor. I use XEmacs. You can use Notepad or whatever you want. Just make sure you stay in plain old text.
  • Where your Apache webserver is installed. Mine is installed in C:\Program Files (x86)\Apache Software Foundation\Apache2.2\. You may be using XAMPP, which is fine, these instructions will be adaptable to your situation.

    I’m going to refer to this location as APACHE_DIR for the rest of this article.

Here’s the steps for creating a subdomain:

  1. Create a subdirectory. For example, APACHE_DIR/htdocs/wptest. Creating a directory or folder should be easy for you. If this is confusing, leave a comment below.
  2. Edit Apache config to add the subdomain. This part can be a little tricky; you need to know something about how configuration in general works. We’ll take a detailed look at this in the next section.
  3. Edit the Windows /etc/hosts file. Again, could be a little tricky. There are a couple of ways to set this up, I’ll discuss in detail below.

Add subdomain to Apache httpd-vhosts.conf

As mentioned, everyone’s installation is going to be slightly different, so the best I can do is walk you through exactly what I did for my installation.

First, open APACHE_DIR/conf/httpd.conf. Find the lines that look like this:

460
461
# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

You want to uncomment line 461, such that you are including conf/extra/httpd-vhosts.conf.

Now open APACHE_DIR/conf/extras/httpd-vhosts.conf. Make sure you’re serving from the correct port, in my case 8080:

17
18
19
# Use name-based virtual hosting.
#
NameVirtualHost *:8080

I have a couple of virtual examples in my conf file, which I’m going to comment out. Below those commented out sections, I added the following (Note: your line numbers will likely be different):

44
45
46
47
48
49
50
51
52
53
54
55
56
<VirtualHost *:8080>
    ServerAdmin admin@localhost
    DocumentRoot "C:/Program Files (x86)/Apache Software Foundation/Apache2.2/htdocs/"
    ServerName localhost
    ErrorLog "logs/error.log"
 </VirtualHost>
 
<VirtualHost *:8080>
    ServerAdmin admin@localhost
    DocumentRoot "C:/Program Files (x86)/Apache Software Foundation/Apache2.2/htdocs/wptest"
    ServerName wptest.localhost
    ErrorLog "logs/wptest-error.log"
 </VirtualHost>

For my configuration, I need to have my root directory set up explicitly as a VirtualHost. Otherwise, only the wptest subdomain works. Note that I added a specific error log for wptest. This is for my convenience, the webserver doesn’t care.

Use your own email address for ServerAdmin of course.

Adding to Windows etc/hosts

This is an easy step. Your hosts file should be located in or very near C:\Windows\System32\drivers\etc. Open this file in Notepad and add a single line:

127.0.0.1  wptest.localhost

Restart Apache.

Now, if you used “wptest” as your example as I did, you should be able to click the link http://wptest.localhost:8080/ and it will take you to your new subdomain.

Related links for localhost subdomains

These are the articles I used for reference, you should use them too:

  • Team Offshoot on Setting up localhost subdomains
  • Here’s Jared Hocutt’s article setting up subdomains on localhost.
  • After you have read the previous two links, and after you have your subdomain working, go read the official Apache VirtualHost documentation. There is more there than you probably need to know… but you should get familiar with what you don’t know.
  • Zaib Kaleem has an outstanding little article on moving a blog from a subdomain to your main domain. He points out to remember fixing the author’s URLs as well as to update the uploads URLs. There’s another article on the WordPress Codex that covers the same process from a slightly different perspective. The reader will find it easily using Google.
  • RajeshPG.com shows how to move WordPress from root to a subdirectory. This is a pretty good article, which I saved as a pdf for future reference. NOTE: I haven’t checked this article for accuracy, but the information is good enough that I could fix any typos, blunders or small errors easily.

How to move a blog using .htaccess magic

Suppose you have (as I do) a directory you want to rename from “wp28″ to “wordpress28,” perhaps as illustrative example for your blog. Or whatever. Bradley Charbonneau provides a distinctly telegraphic procedure for moving WordPress between subdirectories, which works fine for me, but bears a bit more in-depth examination for some readers.

So you’re moving a bunch of stuff around, say, like a WordPress blog… using .htaccess. Lot’s of wonderful tutorials on the web on rewriting URLs. For our example, the following .htaccess file handles the move:

1
2
3
RewriteEngine On
RewriteBase /wp28/
RewriteRule ^(.*)$ http://localhost:8080/wordpress28/$1 [L,R=301]

But no matter what you try… NOTHING works. Not even a little bit. Are you going crazy? Maybe, but there may be a simpler answer. Open up your httpd.conf file. Does it look like this:

114
115
116
117
118
#LoadModule proxy_ftp_module modules/mod_proxy_ftp.so
#LoadModule proxy_http_module modules/mod_proxy_http.so
#LoadModule rewrite_module modules/mod_rewrite.so
LoadModule setenvif_module modules/mod_setenvif.so
#LoadModule speling_module modules/mod_speling.so

So, (my) line 116… you need to uncomment that if you want to use .htaccess for rewriting (which is what you want to do). Then make sure to restart Apache!

Did that do the trick? No? Ok, time to dig deeper.

Check the latest entries in logs/error.log. If you see an error similar to this:

[Mon Jul 20 12:38:19 2009] [error] [client 127.0.0.1] client denied by server configuration: C:/Program Files (x86)/Apache Software Foundation/Apache2.2/htdocs/wp28/.htaccess

you’re dead in the water.

But it’s easily fixable, if you know exactly what to do.

The operative phrases here are “client denied by server configuration” and “.htaccess.” Succinctly, you will need to allow Apache to use .htaccess to override default configuration that denies .htaccess usage. It’s not difficult, and there’s a couple of ways to do it. The first way is making the override global. That’s fast and easy, but not as secure. The second way is to override on a per-directory basis, which is what we’re going to do here:

1
2
3
4
5
6
<Directory "C:/Program Files (x86)/Apache Software Foundation/Apache2.2/htdocs/wp28">
    Options -Indexes FollowSymLinks
    AllowOverride AuthConfig FileInfo
    Order allow,deny
    Allow from all
</Directory>

Line 3 is the key, and the AuthConfig and FileInfo options will do what we want, namely, allow the redirect from wp28 to wordpress28. Add another one of these Directory modules for wordpress28 to enable permalinks for wordpress28 directory. Otherwise, you will be able to write the .htaccess file, but Apache won’t read it.

There’s even more…

If you’re run a cPanel-hosted site, you can change all the top-level redirects by doing a search and replace in the .htaccess for that site. Here’s the steps:

  1. Log in to cPanel, click on the “Redirects” link. You probably already know how to do this; if you’re changing redirects, you had to put them there in the first place right?
  2. Back up your current .htaccess file. I do it like this: .htaccess → .htaccess_todaysdate.
  3. Use your FTP program to download it for local editing, or edit it on the server if you feel brave. If you have a number of websites, you may already have flock of .htaccess files lurking, so editing on the server helps reduce the confusion.
  4. Do a search and replace to fix all the new URLs. Upload the new .htaccess and test everything out. Refresh your cPanel Redirects page to ensure everything works. That’s it, you’re done!

Giving WordPress it’s own subdirectory

Perhaps you would like to put all your files in a subdirectory, but have WordPress operate from the top level of the domain. For example, you want mycooldomain.com as your URL, but you want to keep all the files safely tucked away in mycooldomain.com/main1 (don’t ask).

This is so easy and common that the WordPress Codex has just the procedure for you: Giving WordPress Its Own Directory.

That’s great if you are just starting out.

But suppose you have a blog that’s been in operation at mycooldomain/main1 for a long time, with dozens of hundreds of posts and pages, and great search engine results. You need to do a little more work to capture all the results going from the old URL to the new. John Godley’s Redirection plugin is just the ticket.

The idea is to set up a new redirection using regular expressions. Using the directions on the Redirection home page, here’s what it looks like:

Setting up redirection regular expression

Setting up redirection regular expression

It’s not difficult, and using your localhost installation for testing is smart.

One last thing: If you already have a sitemap generator installed, such as Google XML Sitemap, make sure you update the location of the resulting sitemap. If you do not, it will attempt to write the sitemap into your old location, and may fail.

And, when you do this “for real” instead of on localhost…

Make sure you change your settings for Google Webmaster Tools!

You will want to ensure the new sitemap uploads and is valid, then you want to examine the details to ensure all the URLs are correct. If you have your redirections set up properly, you may want to leave the existing sitemap in place for a while, until the new one is indexed. Don’t forget about your RSS feeds, feedburner, and URLs you may have in any other places.

Themes, plugins and more!

Having a localhost installation makes it easy and safe to test new themes and plugins. Your new plugins can meddle with the database with impunity. If you crash it or corrupt the database, no problem, just reinstall or re-import a testing database.

With themes, you can go wild with CSS and formatting and nobody will ever see how terrible it looks.

Other advantages of running a localhost webserver:

  • It’s easy to dig into Apache configuration, and no-risk when you mess it up (and you will mess it up).
  • Learning to handle various HTTP issues such as 404 errors and 301 redirects gives you a lot of power on once you apply your newfound knowledge to your production server.
  • You can develop entire maintenance procedures and scripts locally, testing and debugging before deploying live.

So if you haven’t installed a local webserver, block out a couple of hours and jump in. It’s not difficult, and your knowledge will pay you back in the future. Even if you have no plans to be a “professional” web developer, the more knowledge you have the easier it will be to outsource exactly what you need… without getting ripped off by unscrupulous developers.

Creating Landing And Sales Pages Side-By-Side With WordPress

(Reading time: 6 – 10 minutes)

Did you know that you can use WordPress to manage search engine indexing for pages not on your blog? Yep. You can write those money-making sales and landing pages to exploit WordPress and plugins.

So cheer up your spirits, you lads and you lasses
There’s gold for the digging and lots of it, too
A health to the heart that has courage to ramble
Bad luck to the lad or the lass that would rue
— Cara Dillon “Emigrant’s Farewell”

When you’re serious about selling, you have to create a sales process. On the internet, this means having sales and landing pages.

But a sales page isn’t all that useful if you can’t measure it’s effectiveness, which depends on both copy and design. Unfortunately, WordPress has very few built-in facilities for designing effective sales and landing pages, so these pages often get built outside the WordPress installation.

The idea is to put your sales and landing pages outside your WordPress installation, and have that page as part of your Google sitemap.xml, included automatically using a WordPress plugin.

Sounds exciting doesn’t it?

Ok maybe not… but it’s important nonetheless.

What follows is a process that must be fairly common. Everyone selling on the internet needs a similar process, but I have NOT ever found a step-wise account breaking it down into easy-to-follow steps for WordPress.

Since we’re going to sit and write for a while, let’s put on some music. Something sweet and mellow while we plot how best to inspire people to become loyal customers by buying our stuff. I have just the thing: Cara Dillon, “Sweet Liberty.”

I first ran across Cara Dillon when I was visiting Glasgow (that’s in Scotland, not Kentucky) to collaborate on some computational mechanics (more on that later, much more). It was my last day there, and I was browsing through the ubiquitous Barnes and Noble bookstore with one my hosts… and I heard this utterly entrancing voice… Cara Dillon singing “Black is the Color” from her first album. I had to have it! I bought it immediately! Cara’s voice is unique. If “ethereal” wasn’t so over-used, that might be a good description. Sweet Liberty is her second album, just as good as the first.

Now that the important stuff is handled, let’s get back to work…

Custom sales and landing pages

The first step is to write the page. You could use Dreamweaver or similar. I used a CSS template from Layouts.IronMeyers.com and code everything up by hand. I’ve been doing this a long time, so I’m fast. Using the pre-coded CSS ensures cross-browser capability. This is important since I’ve been ignoring Internet Explorer pretty much since it came out, what, 10-12 years ago? But many of you use IE, and so will many of your readers. To be fair, I hear IE 8 is the best ever, so I may investigate. Later.

Here’s the procedure:

  1. Create the external landing page or sales page. You can do that locally, on your own computer, using the web page creation tool of your choice. Make sure you add in Google Analytics code as discussed below.
  2. Once you have the external page finished, you can FTP or (use your HTML editor if possible) to transfer it to your web site. Place it into the same directory where you have WordPress installed.

    This technique requires that the page is in the WordPress root directory to be handled by the sitemap.xml generated automatically by WordPress. Locating the page at a level above the WordPress directory would require generating a separate site map outside of WordPress. Big hassle!

  3. Links in and out: The primary link into this page can be a redirect from the appropriate domain, if possible. This allows you to refer to the page publicly in a manner that advertises itself.

Adding external page into WordPress XML Sitemap

Once your new page is uploaded, you want it available to Google for indexing. Now, Google will index the page automatically from a “plain old crawl,” but we can do something a lot better. We can add your new page to your sitemap, and have Google index it within minutes.

Adding to your sitemap is easy, provided you have XML Sitemaps installed (and you should as it’s one of the first plugins recommended by Website In A Weekend). Go to “Settings >> XML-Sitemap” on your administration menu. About half way down the page, there is a form for adding your external web page. It should be self-explanatory, but there are helpful explanations for each field, just in case.

Here’s what it looks like:

Add an external URL to XML sitemap for Google indexing

Add an external URL to XML sitemap for Google indexing

Once you have your external page URL entered and saved, scroll back up to the top of the XML-Sitemap administration page and resubmit your sitemap to Google, which is where we’re headed next.

Verify sitemap.xml with Google Webmaster Tools

Once you have your page installed and added to your site map, check to make sure Google is indexing it. This is easy. Log into Google Webmaster Tools, select the site hosting the sales page, and manually direct Google to update the sitemap.xml, as shown in the screenshot below. This will take a few minutes, usually no more than 10-15 minutes.

Submit new sitemap.xml after adding to WordPress sitemap

Submit new sitemap.xml after adding to WordPress sitemap

Go get a cup of coffee, or soup, or whatever. It should be done when you get back. You will know it’s correct with the green check mark at the right side.

This is some serious internet marketing juju, and it took me a bit of time to work out all the details. I’m making it available to you as a member of Website In A Weekend.

Instrument with Google Analytics

If you want this page tracked (and you should), paste in some Google Analytics code into the bottom of the page, right above the closing <body> element as recommended by Google.

Then set up a goal for tracking conversions. Watch for an article appearing shortly that will explain how to set up goals.

Don’t forget to test!

Once you have everything set up, don’t forget to test everything. If you have a landing page, test both the newsletter sign up and any download you offer as a “bribe” for email signups.

If you have a sales page, you definitely want to make sure the sales funnel is working end-to-end, and you want to make sure you are able to measure conversion at every step of the way. Here’s one way to do that. Create a discount code that puts your price very low for testing, like $1. Set the sales limit on the $1 price at 1 (if you can), then test a sale – refund – sale cycle. Make sure you see the traffic in your statistics.

While you’re at it, create a couple of discount codes for free stuff and pass ‘em along to close friends, or use them for promotions.

Summarizing stepwise

Here’s a quick recap, stepwise:

  1. Create the external sales or landing page.
  2. Instrument the page with Google Analytics.
  3. Add the page into your sitemap.xml file.
  4. Use Google Webmaster Tools to update and verify new sitemap.
  5. Create an Analytics goal for tracking conversions.
  6. Test everything repeatedly.

Nothing very difficult here at all, and it shows just how much of the grunt work that WordPress does for you!