You are here:Home»KB»Web Design»CMS»Wordpress»Create a WordPress Divi Theme Demo Site
Thursday, 16 December 2021 11:11

Create a WordPress Divi Theme Demo Site

Written by

I will be using Divi for building the themes, but these rules will work for other WordPress themes.

Different Site Configurations

There are a couple of ways that I know of to create a theme demo site and I will outline them below.

Single WordPress Website (Multiple Themes)

  • Pro
    • Probably only works for themes with builders
    • less files and WordPress installs
    • all theme templates are available in 1 dashboard
    • only 1 set of plugin to configure
    • don't have the hassle of setting up multisite
    • can add iframe-x header 1 and configure as needed
    • less server overheads
    • easy to manage
    • 1 set of credentials to log in with
    • uploaded files are easier to manage
    • You can copy and paste assets between pages.
  • Con
    • Can't use Divi global headers for each theme
    • Can't use the inbuilt Divi theme menu in the Divi Theme customizer

Multiple WordPress Websites (1 Theme per Website)

  • Pro
    • Each theme can be fully controlled
  • Con
    • A lot more inodes and server space is required
    • more of a security risk because of the greater attack surface
    • harder to manage with all of the updates needed to be applied to every site
    • More CPU power needed
    • Takes much longer to setup a theme
    • many different credentials and databases to manage

WordPress Multisite (same as Multiple Wordpress Sites, but one WordPress instance)

  • Pro
    • Should work for all WordPress themes
    • can use divi global headers for each theme
    • only the pages for the defined theme will be in the database
    • Can configure plugins on a per-theme basis (i think)
    • Can use the inbuilt Divi theme menu in the Divi Theme customizer
  • Con
    • extra configuration required to enable multi-site
    • all themes are separate and makes them harder to manage
    • loads of credentials
    • many theme will start to be cumbersome to manage


So after outlining the options above I figured out the best way of setting out my themes was to use the Single WordPress Website option. This allows for ease of management and a great base to keep your templates for export when you need them to build client sites.

I will not only use this as my demo site, but i will use this to store my templates which i directly export and use to build my client sites reducing the time it takes to make a site.

You can also add and make modifications to these pages as you go to fix errors, add extra features and general improvements for future projects. I find when i use a template for a client, I sometimes design or use a layout I really like so i can then add this back into my theme for future use.

Build the Site (Single WordPress Website)

If you follow these easy instructions below you can quickly build your demo site which allows for easy expansion and management.

Install WordPress

This is straight forward and does not need notes except

  • When creating the Database use:
    • Use utf8mb4_unicode_ci for database collation
    • InnoDB for DB engine
  • Extract WordPress into the public_html
  • Run the WordPress Wizard
  • Setup WordPress using the following details:
    • Site Title: WordPress Themes

Divi Theme (Install and Configure)

  • Divi
    • Manually add API key: xxxxxxxxxxxxxx
    • Import Theme options
    • Import 'Theme Customizer'
    • In options, enable the Divi Gallery (should be done as part of the options import)
    • Set Divi to auto update
  • Delete widgets
  • Delete unwanted themes (i.e. Theme 21)

Plugins (Install and Configure)

  • Delete unwanted plugins
    • (i.e. Hello Dolly)
  • Wordfence
    • (no-reply@qwdemos.com) or what email address you use
    • configure/ import settings (via long hash)
    • Wordfence --> Login Security --> Settings --> Disable XML-RPC authentication: ticked
    • Change file hash scanning because of high I/O (change 'Basic Scan Type Options' to 'Limited Scan' , 'Standard Scan' is normal
    • Enable Automatic updates
  • FluentSMTP
    • configure for use with your own SMTP server
    • or import settings
  • Manage Notification E-mails
    • import settings or configure as:
      • Turn off - Automatic WordPress core update e-mail
      • Turn off - Automatic WordPress plugin update e-mail
      • Turn off - Automatic WordPress theme update e-mail
      • Leave the rest same
  • W3 Total Cache
    • Either the PHP configuration, web server configuration or a script in the WordPress installation has zlib.output_compression enabled.
    • configure/Import settings
      • Load options (General Settings --> Import / Export Settings)
    • Enable Page Cache (contact forms might fail to work but are not needed on the Demo Sites)
    • Save settings and purge
    • Now deactivate until you have finished building
  • Update URLs
    • This is optional but if you are importing layouts from different URLs you might want this installed so you can change the links.
    • You can leave this deactivated when not in use.
  • Disable all auto updates

You might need to add plugins later on for specific themes, but that is ok.

General Settings

  • WordPress --> Settings
    • General:
      • remove tagline
    • Reading:
      • Set home page
    • Discussion:
      • 'Attempt to notify any blogs linked to from the post' = off
      • 'Allow link notifications from other blogs (pingbacks and trackbacks) on new posts' = off
      • 'Allow people to submit comments on new posts' = off
      • 'Users must be registered and logged in to comment' = on
      • 'Comment must be manually approved' = on
  • Delete test comments and posts
  • WordPress --> Updates
    • Updates:
      • 'Switch to automatic updates for maintenance and security releases only.'
  • Set all Plugins and Themes to auto update
    • This makes sense from a security point of view and also that this site is not really active so your regular backups will be more than enought.
  • Delete all Comments, Posts and Pages. Make sure you empty the trash afterwards.

Favicon

Create a Homepage 

  • Create a homepage
    • Goto (Pages --> All Pages)
    • Add 'New Page' called 'QWThemes - Home'
    • You can leave this page blank or add in some company information for example: "This is the demo page for QuantumWarp Themes".
  • Set the homepage
    • (Settings --> Reading --> Your homepage displays -> Homepage) = 'QWThemes - Home'

Create a Primary Menu

We need to create a default menu and homepage for the WordPress site. This will handle all requests that do not point to a theme page and allow us to show a nice homepage with some branding if you want.

  • Create a new menu call 'Primary'
    • This should have at least one 'Custom Link' pointing to the 'homepage' of the site https://themes.mydomain.com/ called 'Themes Home'
    • Display Location = Primary Menu
    • This is so that all default Divi pages have a menu that does not have every page listed.

Notes

  • You could later on, create a menu with items pointing to:
    1. the homepage of each theme (if you don't have a theme toolbar, this could be a good option).
    2. every themes page (not recommended).

Add a Theme (Pages)

  • When I refer to a Theme, I actual mean a group of pages that have the same styling such as found on Divi Layouts | Elegant Themes
  • WordPress does not like numbers
    • I have to use 'Theme4' instead of 'Theme 4' because WordPress cannot search by just the number '4'.
    • I have to use 'theme4' as the home slug because i cannot use just '4', WordPress just changes it to '1-2'.
    • The WordPress filter ignores the 's' on the end words so treats 'theme' and 'themes' as the same word

Each theme will require you to make the pages as follows (I am using example of Theme1). You can expand the Alt to have more pages if you require.

Create a Home Page

This will be used as an anchor for the theme.

  • Home
    • Title: Theme1 - Home
    • Slug: theme1
    • Parent: Main Page (no parent)
    • Template = Blank Template
    • Use Divi

Create a Theme Pages

All of these pages are children of the theme's home page.

  • Services
    • Title: Theme1 - Services
    • Slug: services
    • Parent: Main Page (Theme1 - Home)
    • Template = Blank Template
    • Use Divi
  • Gallery
    • Title: Theme1 - Gallery
    • Slug: gallery
    • Parent: Main Page (Theme1 - Home)
    • Template = Blank Template
    • Use Divi
  • About
    • Title: Theme1 - About
    • Slug: about
    • Parent: Main Page (Theme1 - Home)
    • Template = Blank Template
    • Use Divi
  • Contact
    • Title: Theme1 - Contact
    • Slug: contact
    • Parent: Main Page (Theme1 - Home)
    • Template = Blank Template
    • Use Divi

Alternative pages can be used when you have many variations or additional pages allowing you themes to stay uniform. These are optional for each theme.

  • Alt1 (optional)
    • Title: Theme1 - Alt1
    • Slug: alt1
    • Parent: Main Page (Theme1 - Home)
    • Template = Blank Template
    • Use Divi
  • Alt2 (optional)
    • Title: Theme1 - Alt2
    • Slug: alt2
    • Parent: Main Page (Theme1 - Home)
    • Template = Blank Template
    • Use Divi
  • Alt3 (optional)
    • Title: Theme1 - Alt3
    • Slug: alt3
    • Parent: Main Page (Theme1 - Home)
    • Template = Blank Template
    • Use Divi

Create a Theme Menu

Each theme needs its own custom menu and the instructions below show you how this should be done. Again I will use Theme1 as an example.

  • Create a WordPress menu called 'Theme1'
    • NB: There is no space between `Theme` and `1` on purpose. WordPress search does not like spaces.
  • Select all of the pages for `Theme1` and add them into the menu
  • Arrange them in to the correct order using drag and drop
    • Theme1 - Home
    • Theme1 - Services
    • Theme1 - Gallery
    • Theme1 - About
    • Theme1 - Contact
    • Theme1 - Alt1
    • Theme1 - Alt2
    • Theme1 - Alt3
    • ...
  • Edit menu Each item's navigation label to read
    • Home
    • Services
    • Gallery
    • About
    • Contact
    • Alt1
    • Alt2
    • Alt3
    • ...

Build Page Content

You need to do these changes on each page you want in your theme.

Add a Menu Module

  • I have made a generic header which contains a menu module styled exactly like the default menu with some added some socials icons.
  • If you do not have one, build yourself one. The main thing is that you add a menu module to allow you to navigate the theme demo.
  • This really only needs doing on one page and then you can copy and paste it to the others.
  • Edit the page
  • Click on the add section button and select Themes Header
  • Edit the 'Menu Module' and select the 'Theme1' menu as the menu source
  • Move the menu section it to the top as this will be needed there as this is the primary menu.
  • Now save the page

Import a Divi Layout

  • Select the theme your want to use for your theme from: Divi Layouts | Elegant Themes
  • Select a specific layout for each page of your theme usually the namesakes are good ones to use eg:
    • About --> About
    • Contact --> Contact
    • ...
  • Import Layout
    • You can import via the (Load from Library --> Premade Layouts) or a layout file you have locally.
    • Either, 'Do Not Replace Content' as you want to keep the menu in place that you have just added.

Convert the Divi Theme Contents ready for Client Sites

Whether you have built you own layouts or used ones from Elegant themes, you will need to make changes to them to match your requirements but the following changes are specific to the layouts from Elegant Themes as they are premade with their own settings and content which we need to correct and sanitise.

Not all clients send enough information and I have found that a lot of Divi Themes look nice but can be a bit impractical to use for my clients so I need to make alterations to them first before I can even use them.

Follow the steps below for each of the Pages/Layouts to make them ready to use for your clients:

Change the Contact Details

Use these contact details on your website theme. You can use your company details if you prefer but using these as an example keeps the theme demos generic.

020 7123 456
07747 123456
no-reply@qwdemos.com

QuantumWarp House, London SW1A 1AA

QuantumWarp House
Easy Street
Westminster
London
SW1A 1AA
United Kingdom

Contact Forms

  • Only 1 Contact Form
    • Remove all contact forms except the one on the contact page.
    • Why should I only have one contact form?
      • This allows you to control the contact email address easily instead of having to change multiple contact forms.
      • Reduces the attack surface
      • Can apply page caching to more pages.
  • Set the CSS ID (for Anchor)
    • You need to set the anchor point for all of your contact buttons to use, so they are clicked the user is navigated to the correct place on the page.
    • On the contact form add the CSS ID contact-form to the contact form row.
      • The row is used to allow it to appear on screen better.
      • You can also add the CSS ID to the section or the contact form module itself to get a good position for the anchor.
    • Set as follows: (Module|Row|Section) --> Advanced --> CSS ID & Classes --> CSS ID: contact-form
  • Always add a Captcha
    • Enable Standard Captcha
    • Style Standard Captcha 
      • Contact Form --> Advanced --> Custom CSS --> Captcha Field --> margin-left: 5px;
      • Contact Form --> Advanced --> Custom CSS --> Captcha Text --> color: #ffffff
        • Only if styling is required.
        • You don't have to use white
  • Add a success message
    • This is the default Divi one: 'Thanks for contacting us'
    • No need to add one unless you want to change the default message.
  • Remove any configured email address to prevent the forms from being activated.
    • Add the email address no-reply@qwdemos.com otherwise emails will get sent to the default email account and you will get a lot of SPAM.
    • The destination email can be a dead or unmonitored email account.
    • If you are clever you could use the contact forms as a Honeypot.

Contact Us / Call Us Buttons

Alter all of these buttons as follows:

  • Rename these buttons to Contact Us
  • Add the link 
    https://themes.quantumwarp.com/theme1/contact/#contact-form
    • This will load the contact page and navigate to the #contact-form anchor.

Google Maps (if present)

  • The Google map is usually just on the contact page.
  • I prefer just to have the map present on the contact page
  • Hide the Google Map module for later use. This is just incase you client has specific needs.
  • Where the 'Google Map Module' add a 'Code Module' as we are going to add an iframe version which does not require a credit card.
  • Add the following Demo iframe code: 
    <iframe 
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.64596804941!2d-0.1440786842302416!3d51.501363979634085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48760520cd5b5eb5%3A0xa26abf514d902a7!2sBuckingham%20Palace!5e0!3m2!1sen!2suk!4v1639323812962!5m2!1sen!2suk" 
width="100%" 
height="450" 
style="border:0;display:block;" 
allowfullscreen="" 
loading="lazy"
></iframe>

Gallery Page

  • If there is not already a Gallery page on your chosen theme, create one using the following basic layout:
    • Grid
    • 6-8 images
    • No captions or pagination
  • Upload logo for the menu (if needed)
  • Make sure all of the text is in Lorem Ipsum.
  • Remove all non-free assets
    • If you have imported layouts from client websites it is important to remove all of their images and asets
  • Examine each page and remove/hide sections that cannot be altered for a generic website. i.e.
    • Highly specific graphics
    • Cartoons
    • Replace images where needed with generic ones (not for copyright reasons though)

Change the internal links to the new theme location.

Use one of these plugins to change any unwanted links to local links.

  • Update URLs - Quick and Easy way to search all urls, content and replace them with new links and content in WordPress website.
  • Easy-Update-Urls - Easy Search and Replace in WP database. Perfect for Migrations. Updates links to pages and references to images.Search and Replace Content in DB.

An example is as follows

https://www.elegantthemes.com/layouts/business/car-rental-landing-page/live-demo

-->

https://themes.quantumwarp.com/theme1/services

Repeat

Repeat this for process each theme you want to add. You can create the layouts on the fly in the demo site but will have to use a plugin (How To Clean Up Your WordPress Media Library | WP Engine / Media Cleaner – Clean & Optimize Space – WordPress plugin | WordPress.org ) to cleanup unwanted images after you finish or you have a separate development site.

Control who can Embed your Demo Site using an iframe

Now you have done all of this hard work you don't want other people stealing your bandwidth so you need to control who can put your site in an iframe and this can be done by several options, some old, some new, but extensively the hosting server tells the client if it can use the website in an iframe. This behaviour all works on the browser or software at the other end respecting these directives.

The options I outline below can usually be managed by decent software such as W3C Total Cache, but there is no harm in doing it manually.

Content Security Policy (CSP)

CSP allows you to control how the browser behaves with your code remotely, and locally. You can tell the browser not to execute scripts on a page or not to embed the content in and iframe. Not allowing your content to be embedded in an iframe is quite obvious, but why would you want to stop your own scripts from running? This feature prevents scripts that have been maliciously implanted from running by only allowing scripts that you want to be run. The rules can be specified a lot more precisely, but this is just a simple example.

Enable restrictions via .htaccess

These are some examples of the .htaccess rules. You only need to specify one.

<IfModule mod_headers.c>
    ## Allow embedding from sitea.com or siteb.com including sub-domains using any protocol
    Header set Content-Security-Policy "frame-ancestors 'self' *.sitea.com *.siteb.com"
    
    ## Allow embedding from sitea.com or siteb.com including sub-domains using only HTTPS protocol
    Header set Content-Security-Policy "frame-ancestors 'self' https://*.sitea.com https://*.siteb.com"
    
    ## Allow embedding from example.org, example.com, store.example.com using only HTTPS protocol
    Header set Content-Security-Policy "frame-ancestors 'self' https://example.org https://example.com https://store.example.com;"    
</IfModule>
  • You can use wildcards
  • Using frame-ancestors 'self' is similar to using X-Frame-Options: sameorigin
    • If you do not need this option, you can just remove 'self'
  • When you add multiple Policies, they can be on separate lines to make it easier to read.
  • You do not need to add any wrapping conditions like you do when using X-Frame-Options because the conditions are in the statement.

Enable restrictions via W3 Total Cache

  • You can add these in WordPress using the W3C Total Cache plugin:
    • WP Admin --> Performance --> Browser Cache --> Security Headers --> Content Security Policy: ticked
    • WP Admin --> Performance --> Browser Cache --> Security Headers --> frame-ancestors: 'self' *.sitea.com siteb.com;
    • WP Admin --> Performance --> Browser Cache --> Security Headers --> X-Frame-Options: unticked

Notes

X-Frame-Options Header (rules based without using ALLOW-FROM)

You can control the X-Frame-Options headers in either .htaccess or PHP but I will use .htaccess code here because it is easier to implement and is not script dependent.

The Code

The .htaccess code below uses the X-Frame-Options and gives the same effect as using ALLOW-FROM but without using this obsolete command.

# Conditional X-Frame-Options for iframe Embedding Control
<If "%{HTTP_REFERER} == 'https://www.content-site.com/' || %{HTTP_REFERER} == 'https://www.sitea.com/' || %{HTTP_REFERER} == 'https://www.siteb.com/'">
    <IfModule mod_headers.c>
        Header always unset X-Frame-Options
    </IfModule>
</If>
<Else>
    <IfModule mod_headers.c>
        Header always append X-Frame-Options SAMEORIGIN
    </IfModule>
</Else>

Notes

Combined .htaccess Example

No matter if you use a plugin or manually create the rules in your .htaccess they should look something like this:

<IfModule mod_headers.c>
    Header always set Strict-Transport-Security "max-age=31536000"
    Header set X-XSS-Protection "1; mode=block"
    Header set X-Content-Type-Options "nosniff"
    Header set Referrer-Policy "no-referrer-when-downgrade"
    Header set Content-Security-Policy "frame-ancestors 'self' *.sitea.com *.siteb.com"
    #Header set Content-Security-Policy "frame-ancestors 'self' https://*.sitea.com https://*.siteb.com"
    #Header set Content-Security-Policy "frame-ancestors 'self' https://example.org https://example.com https://store.example.com;"
</IfModule>

Notes

  • There are some commented out Content-Security-Policy examples for reference.
  • HSTS is on.
  • The live Content-Security-Policy does not define the protocol of connections allowed. This means that both HTTP and HTTPS are allowed but because HSTS is on, all incoming HTTP connections must be upgraded to HTTPS.

Final Tasks

These are somes task that might need doing after you have built all of your Theme pages.

  • Remove all un-needed images and assets
  • Activate W3C Total Cache
    • It might aswell run quick

Your Theme Demo Site is now finished

You have built all of your Theme Demos, the last thing you have to do is:

  • Update QWDemobar (only if you have this plugin on your main business site)
    • You need to add the new Theme Pages to be able to show you clients

Useful Assets

 

Read 2452 times Last modified on Wednesday, 01 October 2025 16:14
Published in Wordpress
back to top