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

Create a Divi Theme Demo Site

Written by

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
    • Con
      • cant use divi global headers for each theme
      • cant use the inbuilt divi theme menu in div 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 project. 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 Demo 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

Configure WordPress and Extensions

These should be straight forward. I am using Divi as my Theme engine, but if you use another it should be fine.

  • Themes (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
    • Easy WP SMTP (Only needed if no mail() function)
      • configure/ 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
    • Velvet Blues 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
    • Set all plugins to auto update
  • WordPress 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 (might not do this) ??
    • WordPress --> Updates
      • Updates:
        • 'Switch to automatic updates for maintenance and security releases only.'
      • Updates all Plugins and Themes
    • Delete all Comments, Posts and Pages. Make sure you empty the trash afterwards.
  • Set Favicon

Create a Primary Menu and Homepage

We need to create a default menu and homepage for WordPress for all requests that do not have a proper page then at least we have a proper page that is displayed.

  • 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.
  • Create a homepage
    • Goto (Pages --> All Pages)
    • Add 'New Page' called 'QWThemes - Home'
  • Set the static homepage
    • (Settings --> Reading --> Your homepage displays -> Homepage) = 'Themes - Home'
  • Fill in content as require. You can leave this blank or add in some company information for example.

Notes

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

Adding Themes (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 by Elegant Themes

Each theme will require you to do the following (I will use example of Theme1). You can expand this to have more pages if you require.

  • Create Theme Homepage
    • Title: Theme1 - Home
    • Slug: theme1
    • Parent: Main Page (no parent)
    • Template = Blank Template
    • Use Divi
  • Create Theme Content pages
    • 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
    • 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
  • Change the internal links to now work on your website.
    • Run 'Velvet Blues Update URLs' as required.

Adding Menus

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.

  • Import my Theme Menu Module Layout into Divi Library
    • this only needs to be done once
    • You might not have a pre-built layout, but it is easy to make one. Just create a layout with a menu module in a section.
    • Import my pre-built Divi Menu module layout into the Divi library and call it Themes Header
    • Edit the layout and add a logo (optional)
    Create Theme's WordPress Menu
    • Create a menu called 'Theme1'
    • Select all of the pages for Theme1 and import into the menu
    • Put them in the correct order with drag and drop (Home, Services, Gallery, About, Contact, Alt1, Alt2, Alt3)
    • Edit menu item's navigation label to read (Home, Services, Gallery, About, Contact, Alt1, Alt2, Alt3)
  • Import the 'Themes Header' into each page of the theme
    • 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

Repeat this for 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.

Notes

Theme Content

Whether you have built you own layouts or used ones from Elegant themes I recommend reading the following about setting out the actual content.

The blog layouts in the Divi themes can be a good source of a standard clean page.

Use these Contact details

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

QuantumWarp House, London SW1A 1AA

QuantumWarp House
Easy Street
Westminster
London
SW1A 1AA
United Kingdom

Import a Divi Layout

  • Select the theme you are going to use
  • Select a layout for each page of your theme (usually the namesakes are good ones to use, 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 a Divi Theme to one you can use for your Clients

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:

  • 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>
  • 'Call Us' / 'Call (451) 350-3922' Buttons
    • Rename these all to Contact Us and add the link https://themes.qwdemos.com/theme1/contact/#contact-form
    • If you have a button with a phone number on it and the client whats this changing it can take time.
    • Phone numbers should stay in the header and footers', and the contact page only
  • Contact Form(s)
    • Remove all contact forms except the one on the contact page
    • This allows you to change the contact email address if every needed
    • Reduces the attack surface
    • Can apply page caching to more pages.
    • On the Contact 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.
    • Enable 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
    • Make all 'Contact Us' buttons point to https://themes.qwdemos.com/theme1/contact/#contact-form
    • 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.
    • 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
  • 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)

Control who can Embed your Demo site in 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 broweser 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.

My Code

The .htaccess code below uses the Header command to add the Content-Security-Policy.

Header add Content-Security-Policy "frame-ancestors 'self' *.sitea.com siteb.com;"
  • 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.
  • You can add these in Wordpress using the W3C Total Cache plugin, but you should not use the code above but the relevant options in the plugin shown below to get the same results:
    • 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

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.

My 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

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

 

Read 637 times Last modified on Sunday, 12 June 2022 13:30
Published in Wordpress
back to top