How to Make a WordPress Demo Site

WordPress is the world's most popular content management software solution, with more than 60 million users around the world. With a community that large, it's only logical that the development community is appropriately robust itself.

As adoption of WordPress continues to increase worldwide, more and more theme developers are bringing their private skills to the public marketplace.

They do this by offering custom WordPress themes either for free or for a small price, and they demonstrate each theme's appearance using a demo site.

This is far different from simply displaying an image of the theme in action. Instead, a theme demo site actually lets users peruse an entire, complete WordPress installation with the theme in action. This actually helps to sell users on a theme, as enabling them to use the theme itself proves its usefulness and high quality.

This can be done by any user of WordPress 3.0 (or higher) more than a single extra plugin. All it requires is enabling one of the new WordPress "sleeper" features that goes unnoticed, and unused, by all but the most advance WordPress customers. Here's how it's done.

WordPress networks: the key to a theme demo site with WordPress 3.x

Previous versions of WordPress before the 3.x line of releases were big on using plugins to make a theme demo site. And this process wasn't simplified by simply installing one plugin; instead, the vast array of features a user required often meant that they'd have to enable two, three, or even four plugins and widgets to get the job done. With WordPress Networks, this is essentially a deprecated way of creating a theme demo site.

Enabling WordPress Networks will require a bit of PHP knowledge, as well as some basic coding of server files like .htaccess. It will use the Dashboard to perform most of the setup, and then the user will simply modify a few files to complete the process. After that, new sites can be created to display the content of WordPress themes within one website.

Step 1: modifying WP-Config.php to enable multi-site installations

By default, the WordPress Networks feature is not enabled. Furthermore, it cannot be enabled simply by using the WordPress Dashboard alone. Instead, it must first be enabled by adding a line of code to "wp-config.php." From there, further customization is allowed in the Dashboard.

Using an FTP client, navigate to the root directory of a WordPress installation and download wp-config.php. Open this file in a text editor, and then add the following line of code before the end of the file:

define('WP_ALLOW_MULTISITE', true);

This simply instructs WordPress to enable the Networks administration panel and setup process. Save the file and upload it to the server; next, log in to the WordPress Dashboard.

Step 2: enabling and configuring WordPress networks

Once the Dashboard is open, click the "Tools" heading in the Dashboard sidebar and click on the new "Networks Setup" administration option that is listed here. This will open a page full of settings as they pertain to the new network. These must be carefully configured, as they directly relate to URL structure and site navigation.

The most important of all these choices is the one between subdomains and subfolders. Each theme will eventually have its own WordPress installation, so each theme's demo site will be accessed in one of these two ways. A subdomain will appear as "http://theme-name.domain.com" while a subfolder will appear as "http://domain.com/theme-name". Choose carefully and deliberately, as this cannot be changed after the form is submitted.

Next, fill out the remaining details on the page. These details include the following:

1. Server Address
2. Network Title
3. Administrator's E-mail Address

With all of the above details accurate, it's time to click "Install" and allow the process to complete. WordPress will turn a single-site installation into a network and it will then print out a set of instructions that must be manually performed by the administrator.

Step 3: completing the process manually

Unfortunately, the WordPress Dashboard has its limitations when drastically changing a site from a single-site operation to one that contains tens or hundreds of theme-based new sites. While it performs much of the work on its own, it will require the administrator to configure the site's .htaccess file, a well as the wp-config.php file. Further, administrators will have to setup a media directory that will contain uploads from all of the networked sites. In a theme installation, this is likely to go unused, but it must still be set.

The .htaccess changes will determine the permalink structure of the site as it relates to the subdomain or subfolders option chosen in the first part of the process. Because this code is based on WordPress' settings, present location, and user input, it is very hard to change and should be copied and pasted exactly.

Changes to the wp-config.php file must be added to that file right below where the "enable multi-site" code was placed in the first step of this process. It's important to keep all of the code relating to WordPress Networks grouped together in the same part of the configuration file.

Step 4: administration of the WordPress network

With these changes having been made, it's time to log back into the Dashboard interface and observe how the interface has changed along with the site's function. First and foremost, there is now a "Network Admin" link where there was previously a link to the WordPress site's index page. This will allow for adding new sites to the network and administration of those that have already been created.

There is a Dashboard-like interface solely for this purpose, and users should familiarize themselves with it before proceeding with creating the actual content of their WordPress theme demonstration site.

Using the WordPress networks feature to create a theme demo site

Now that WordPress Networks has been successfully installed and users are familiar with the Dashboard administration interface that configures sites within the network, it's time to get moving on creating the actual demonstration sites that users will see when they preview a theme on the site.

First and foremost, make sure that all of the themes demonstrated are uploaded with the main WordPress themes folder that was previously used to theme the sole site within the Dashboard. This folder, as a reminder, can be found here:

/public_html/wp-content/themes/

Every theme folder should be named in all-lowercase letters, with just one word or a hyphen between words. With this step completed, the work begins.

Step 1: create a new network site for every WordPress theme to be demonstrated

The process of creating a WordPress theme demonstration site is a little tedious from here on out, and this first step is perhaps the most tedious of them all. Using the WordPress Networks Dashboard, create a new site for every single theme that will be demonstrated to users. Make sure that the site's title is the same as the demonstrated theme's name, as this will make the demo site more functional and user-friendly.

Step 2: apply a theme to each new WordPress network site

Perhaps just as tedious as the first step is applying a unique theme to each of the new sites that was just created. This can also be done within the Networks Dashboard; navigate to the site that needs to be themed, click "Appearance" and then "Themes." Activate the theme and then move on to the next site within the network.

Step 3: make sure every theme links to every other theme

The usability of a theme demonstration site can be improved by making sure that each demo theme links to all of the other themes within a website. Thanks to the new WordPress Networks feature, this is actually ridiculously easy to do. It uses a WordPress widget that is designed for the Networks feature itself in order to link to all sites within a network.

In the main WordPress site's Dashboard, click the "Plugins" sidebar heading and go to "Add New." In this administration panel, search the WordPress plugins site for the Diamond MultiSite Widget. Download, install, and activate this widget. Then navigate to the Networks Dashboard and apply it to each site within that network. This can be done by clicking the "Appearance" sidebar heading and then navigating to "Widgets." Drag the new "Page Listing" widget into the sidebar (preferably near the top) of the theme. Repeat this process for every theme demo within the network.

Every theme should also contain a "Back" link which returns the user to the theme index page so that they might choose another option to preview. This can be placed in the theme's sidebar or wherever else the user prefers to have this link displayed to end users.

Almost done: bringing multi-site theme demo pages to the WordPress index

At this point, the truly hard work of creating a theme demonstration site is actually completed. The WordPress Networks feature has been installed and successfully setup, the sites have been created and themed, and they all link to each other using a drag-and-drop WordPress widget. In place of tedium is now a simple process of linking to each site on an index page which lists all of the themes to be downloaded or purchased.

This can be due however a user wishes to complete it; most prefer to pair a small screenshot with links to preview, download, or buy the theme itself.

Automating the site creation process with a plugin

Of course, even built-in WordPress features might need a little help from time to time. For users who prefer not to manually create a new WordPress Networks site instance for every theme they intend to show off, there is a plugin that will make the process virtually automatic and unattended.

That plugin is called "Replicator" and is, once again, installed via the main WordPress Dashboard instead of the Networks Dashboard. This plugin essentially allows a user to "clone" a created WordPress Site within the WordPress Networks feature. That means things like the MultiSite widget in the sidebar, a "back" link, and other site settings, will be automatically filled in and placed; customizations will need to be made, of course, but it's nice to be able to create 35 new sites with the click of one button, rather than clicking that one button 35 separate times.

Troubleshooting: common problems with WordPress networks installations

Despite being included as a standard WordPress feature instead of as a plugin, the WordPress Networks feature has been known to give some users a headache by not displaying their sites or placing them at unpredictable URLs. The largest problem that seems to arise is that a user will enable the "subdomain" setting during the WordPress Networks setup process, but they'll forget to create those subdomains (or enable them) in a site's actual administration area like cPanel or the Plesk Panel. Failure to enable subdomains, or create the subdomains for use by WordPress, can cause links within the newly-created network to return 404 errors, timeout errors, and other glitches that will send users away.

Before heading for the hills, tearing your hair out, or finding a developer community to offer assistance, make sure that a site's .htaccess file has been properly configured and that subdomains have been enabled within a site's root control panel. Furthermore, ensure that your web hosting package supports the large number of subdomains that you wish to use; otherwise, you may need to upgrade to a better hosting package (or web host altogether) or reconfigure the site to use subfolders instead. To avoid this look for a web hosting review for your provider before you buy that package.

Easy and straightforward way of selling themes

Thanks to the new, built-in WordPress Networks feature, displaying multiple themes in a fully-usable website interface has never been easier. With attention to detail and careful configuration of both a WordPress installation and the server settings for the website itself, users will find it exceedingly easy to promote and even sell their creative works.