WordPress How-To: Create A Showcase for WP Themes Demos

WordPress theme development has really taken off in recent years, as the WordPress software has reached more than 60 million users around the world. The company has also unveiled its WordPress.com remotely-hosted blogging solution, on par with services like Blogger and Tumblr, further increasing the demand for themes and the potential revenue that can be generated by developing these extensive PHP templates. Many authors are familiar with the software’s practice of requiring a small thumbnail image of the theme in action to display to prospective theme users. They’re able to see a snapshot of what the theme will look like when put into practice on their website, and that’s good enough for a large number of WordPress users and developers.

Creating a Showcase for WP Themes Using Live and Functional Demos

WordPress Demo Theme
* Screen captured from Elegant Themes – A topnotch WordPress Themes Club I’ve been using for years.

But there are more demanding users and WordPress theme developers out there, and a simple thumbnail screenshot image will not suffice when it comes to demonstrating a theme’s subtle details and intended effect. The dissatisfaction with these small theme images has led a large number of theme developers to launch full-website preview of their work. These previews are actual WordPress blogs which are using the fully-developed WordPress theme on a site that can be fully navigated and experienced by the theme downloader prior to their use of the theme on their own website, or prior to their purchase of the theme for their own purposes. It’s not only more attractive and informative than typical thumbnail screenshots, but it’s also a far more effective way to market and sell themes in this growing market.

Creating this kind of site is considered to be overly complex, however, and many people are simply unsure how to turn a simple WordPress website into a gallery of self-designed themes. Using built-in WordPress features, and some which are enabled via third-party plugins, creating a theme demo site is not only the smart thing to do for business, it’s also the easiest way show users all of the skills and talents a developer is working with.

Here’s how it’s done.

Step 1: Get Those WordPress Themes Online for Viewing

WordPress Demo Theme

In order to make this approach work, every theme a developer wishes to demonstrate to potential users or customers must be placed into the standard WordPress themes directory (/public_html/wp-content/themes/). Make sure all theme images are uploaded and the theme folders are all lower-case without any spaces or punctuation, as this will be essential in deploying and previewing these themes across multiple WordPress sites using one of the more advanced built-in features offered in WordPress 3.0 and higher.

When the themes have been completely uploaded, it’s time to back out of the themes directory to the standard WordPress root folder, which is most likely the “public_html” directory.

Step 2: Enabling WordPress Multisite for Theme Presentation

WordPress Demo Theme

The easiest way to enable a theme demonstration site is to use the existing WordPress multi site feature, now branded as WordPress Networks. This procedure involves using a single database to create a near-infinite number of WordPress blogs that can each be filled with unique content and styled using a completely different theme per blog. This essentially creates an entire WordPress demonstration site, full of entries, archives, pages, categories, and other information, for every theme a developer has created.

In the “wp-config.php” file which resides in the WordPress root folder, simply paste the line below, which will instruct the Dashboard to enable the WordPress Networks feature and provide a configuration control panel to configure its settings and proceed:

define(‘WP_ALLOW_MULTISITE’, true);

Save the file and navigate to the WordPress Dashboard, where a “Network Setup” link will appear in the sidebar beneath the “Tools” heading. Within this setup dialog, be sure to select whether blogs will be installed into a subdomain or subfolder, and set a directory for uploaded media. Proceed to the next portion of the setup, which will have the WordPress Dashboard print a few lines of code which must be pasted into the “wp-config.php” and “.htaccess” files in the server’s root directory.

Return to an FTP client to make these changes, ensuring that every line of code is properly copied and pasted and all parentheses and semicolons are present. Failure to ensure proper code in either file will result in all sorts of website and WordPress errors which can severely limit website functionality.

It should be noted that the “.htaccess” file is often hidden from view when using a traditional FTP client and, if this is case, users should navigate to their cPanel, Plesk Panel, or other server control panel software and edit the file using a web-based file manager. These web-based applications are able to view and edit hidden folders when traditional FTP clients are not.

Step 3: Create a Blog for Each WordPress Theme Demonstration

The advanced coding part of the process is now over, but the most tedious aspect of creating a WordPress theme demonstration site still needs to be completed. The way this method works is pretty simple: Every theme which will be demonstrated to users must be displayed on a completely new blog, accessible via subfolder or subdomain. That means a theme developer must return to the WordPress Dashboard and begin the process of creating as many blog as they have created themes; each blog can be setup and accessed by using a special WordPress Network Dashboard which is sort of a “sub-Dashboard” within the traditional WordPress control panel.

Within this Dashboard, select the blog which is to be themed with a new template and click on “Appearance” in the sidebar. Simply locate the theme which needs to be demonstrated and activate it on the blog .Be sure to write a few example entries so that users can see all of the theme’s functions in action, and then repeat the process on the next blog so that the next theme can be demonstrated.

Enterprising developers may be a bit relieved to learn of plugins which can help with this process.

The first plugin, known as Replicator, can be used to instantly create a large number of multisite instances without individually setting up each one over a long period of time. The plugin is installed and activated in the non-Network Dashboard for use with multisite blogs; when used, a developer can determine basic blog settings which will apply to number of blogs they’re about to create. Those settings will be universal, but they’ll still have to manually determine the theme used by each multisite iteration.

A second plugin is known as the Diamond Multisite Plugin, and this is used because it contains a helpful sidebar widget that will increase a site’s usability. This widget actually lists, in alphabetical order, every multisite blog created by the WordPress Dashboard. When placed into the theme demonstration sites’ sidebars, it allows users to easily navigate directly between themes, rather than returning to the site’s index page every time they wish to preview a different theme in action on the developer’s website. It’s certainly not required but enhancing usability can only help increase a website’s bottom line and help to promote the adoption of its WordPress theme designs.

An Alternative Approach: Installing Multiple WordPress Iterations

There’s really no reason to leave the WordPress Networks feature behind in favour of manually installing many WordPress installations to serve as previews.

However, a number of theme developers to prefer to keep things a bit more “old school” when crafting these sites, and they’ll be reassured to know that WordPress can be installed multiple times on one server. For those with multiple databases, it’s easy: Simply create a new database for each WordPress installation, install the WordPress PHP flies into a new subfolder each time, and proceed through the setup and theming process as per normal. Then link to that new installation from the site’s index page, and everything is taken care of.

For those who have only one database, however, the “wp-config.php” file will again need to be updated in order to accommodate multiple installations for the purpose of demonstrating themes. This requires just a simple change to the file which determines a new database prefix for each installation. This ensures that the theme demo sites won’t overwrite the data and users present in the site’s primary installation. It’s done by modifying the line below, which appears near the top of every “wp-config.php” file, as shipped with a WordPress software download:

$table_prefix = ‘wp_’;

For ease of use, simply rename the “wp_” prefix to the all lowercase name of the theme which will be demonstrated using that particular installation. This will promote clarity when navigating the tables or cells using database software like phpMyAdmin.

Because these sites will all be accessed by the same administrator, it’s worth noting that WordPress can actually access the user and password data of other installations using a simple hack placed into the “wp-config.php” file. This will allow a developer to log into every installation with the same username and password, and it will ensure that they’re kept logged in to every installation simultaneously. The two lines of code needed to accomplish this are:

define(‘CUSTOM_USER_TABLE’, $table_prefix.’wp_users’);
define(‘CUSTOM_USER_META_TABLE’, $table_prefix.’wp_usermeta’);

Remember that the “wp_” prefix here can be changed to anything, and should line up with the primary installation’s database information for the best results.

Another Alternative Approach: Using WordPress Plugins to Demonstrate Themes

WordPRess Plugin
The community of WordPress developers is appropriately broad and diverse, and some of them have figured out a way to demonstrate themes in action without installing multiple blogs, creating a WordPress Network, or hacking any database settings. Instead, they rely on custom functions designed in a WordPress plugin to display these demo websites to users, largely in the same way that the WordPress Dashboard can show a live preview of the site before finalizing the activation of a theme.

The most popular plugin is known as WordPress Theme Demo Plugin and, while its title is not necessarily creative, its approach is both creative an common sense. The plugin essentially brings the theme preview window out of the Dashboard and into real world use. The site’s users and shoppers can preview any of the site’s themes by navigating to a simple URL constructed as such:

http://your-domain.com/preview_theme?theme-name

This preview URL turns the theme’s all lowercase folder name into a preview destination; any theme folder name can be attached to the end of the link so that it can be previewed by a user. The system is ingenious, and it’s by far the most efficient way to preview themes. No database hacks are required, and users will not need to make any modifications to the WordPress “wp-config.php” file for this URL to be fully functional. Simply upload the plugin, activate it, and begin linking to theme previews using the above URL construction. A theme demonstration site can be deployed in mere hours using this method.

This plugin also allows a full list of all site themes to printed either in the sidebar or on a separate page (or post) entirely. This is much like the Diamond MultiSite Plugin widget, but is done using a simple variable. Wherever the list should appear, developers can simply insert the following bracketed WordPress variable:

[theme_list]

A full and alphabetized list of themes will be presented using a < ul > format; it’s important to remember that every theme uploaded to a site will be placed in this list, including the site’s default theme and any which are currently under development or revision. Be mindful of the themes which are uploaded, and remove any that are not for sale or preview by customers.

Easy to Do and Rewarding in the End

WordPress Demo Site

A WordPress theme demonstration site takes those small and useless thumbnails to the next level, allowing customers the ability to actually interact with design elements and judge whether or not the theme they’re about to download or buy is right for their needs. It means overall better customer satisfaction and a higher likelihood that themes will be used or bought by avid WordPress users and novice designers. The process is simple to complete, and it can be quite rewarding for enterprising and engaging theme designers.