Ivory WordPress Template Documentation & User Guide

  1. Contents
  2. Introduction
  3. Terminology
  4. Installation
  5. Import demo
  6. Site identity
  7. Colors
  8. Typography
  9. Menu bars
  10. Widget areas
  11. Footer
  12. Image distortion effect
  13. Cookies notice
  14. Tracking codes
  15. Additional CSS
  16. Gutenberg blocks
  17. Page
  18. Post
  19. Video popup
  20. Buttons
  21. Icons
  22. Lazyload
  23. Changelog
  24. Credit

Introduction

Thanks for purchasing Ivory WordPress template by Pixudio. This documentation will give you an overview of the template's main features and how they can be customised to suit your requirements. This guide assumes basic knowledge of WordPress.

We have endeavoured to make this documentation as comprehensive as possible but understand that at times, you many need to contact us for additional support. You can reach out for this support by opening a ticket at our dedicated forum on Ticksy. You will need your purchase code in order to signup, you can find this here.

Quick links
  1. Installation
  2. Gutenberg Blocks
  3. Video tutorials

Using an WordPress template

Ivory is an WordPress template - this means that all domain and hosting should be organised by you.

F.A.Q

Terminology

For you to get the most out of reading this document, we'll introduce some of the terminology used throughout so you'll be able to follow exactly what is meant.

Conventions used in this documentation

Installation

You'll need unzip the downloaded package from ThemeForest. Then only upload and install the theme-installable.zip file.

Note: One of the most common reasons people have issues is because they try uploading the full zip that includes demo content, theme, documentation… etc which displays the “The package could not be installed. The theme is missing the style.css stylesheet.” error.
Ensure that you only upload the theme files.

Install theme with WordPress

Install the theme by following these 3 steps:

  1. Log into your WordPress website and go to Appearance > Themes and click Add New.
  2. Click Upload Theme and choose the theme-installable.zip file and click Install Now.
  3. Click on activate when the theme is installed successfully.

Note: If you get an upload file maximum size limit error. You'll need install the theme via FTP, or contact your hosting provider to increase the limit.

Install theme with FTP client
  1. Connect to your server through FTP, by using an FTP client like FileZilla.
  2. Find the WordPress installation folder.
  3. Browse to the /wp-content/themes/ folder.
  4. Upload the theme files there.
    Note: Theme should already be extracted from the zip file before uploading.
  5. Go to Appearance > Themes and activate the Ivory theme.
Install plugins

After activating the theme a notification will pops up at the top of the admin pages that says the theme requires following plugins:

Required plugins:

Recommended plugins:

By clicking on 'Begin installing plugins', you'll be redirected to a page where you can bulk install all the plugins at once. This message will also popup anytime an update for a plugin is needed.

Import demo

Installing demos with one click is fairly simple. However, from time to time the process can fail; Due to many variables that come into play. For that reason Ivory offers native Wordpress import demo data process which gives you control over your content.

This guide assumes you already installed recommended plugins:

  1. WordPress Importer
  2. Widget Importer
  3. Customizer Importer
Import content
  1. Login into your admin dashboard panel go to Tools > Import.
  2. Find WordPress at the very bottom of the list and click on Run Importer.
  3. Choose content.xml file from /demo/ folder in the themeforest package.
  4. Hit Upload file and import button.
  5. Check "Download and import file attachments" from Import Attachments.

    NOTE: You may want to reassign the author of the imported item to an existing user of this site by assign posts to an existing user from drop down menu.

  6. Submit & have fun!
Import widgets
  1. Go to Tools > Widget Importer & Exporter.
  2. Choose widgets.wie file from /demo/ folder in the themeforest package.
  3. Hit Import Widgets button.
Import customizer
  1. Go to Appearance > Customize > Export/Import.
  2. Choose customizer.dat file from /demo/ folder in the themeforest package.
  3. Hit Import button.
Final touch

After you import the data, lunch site customizer.

  1. Go to Appearance > Customize > Menus > View All Locations. Set Top Menu and Social Links Menu menus.
  2. Go to Appearance > Customize > Widgets. On each navigation menu widget select relevant menu to the title.
  3. Go to Appearance > Customize > Homepage Settings. From the drop down menus select your home and blog pages.

Site identity

Settings of this group are responsible for managing site identity features. This is the initial place where you upload your logo. Simply go to to Appearance > Customize > Site Identity.

Logo

Use select logo button to add your site's logo image. Suggested image dimensions is 232 by 114 pixels.

Site Title

Site title identities your site name and appears on search engines results, this field will be prefixed onto site title tag and site's logo alt attribute.

Tagline

Tagline describes your site activity and appears on search engines results, this field will be suffixed onto site title on the home page.

Site Icon (favicon)

Site Icons are what you see in browser tabs and bookmark bars. Site Icons should be square and at least 512 by 512 pixels.

Colors

Ivory colors palettes are designed and developed to serve your ideas and purposes, they bring eye catching and nice contrast to your website. You can select one from many existing ready to use color palettes or you can create your very own custom color palette. To do so, Simply go to Appearance > Customize > Colors.

Class Modifiers
Markup usage
<!-- Template’s primary color -->
<p class="color--primary">...</p>

<!-- Template’s primary background color -->
<div class="background-color--primary">...</div>

Typography

Font sizes and styles were developed to balance content density and reading comfort under typical usage conditions. To select your desire font family and it’s weight from all Google fonts, simply go to Appearance > Customize > Typography.

Body fonts

This font is used as your site's main font in all pages and posts. It is better to select a san-serif font which are matched better with overall look of theme's design.

Headline fonts

This font is used as your site's headlines in all pages and posts. For making a better contrast you might select heavier font weights like Bold or Black.

Class Modifiers
Markup usage
<!-- Template’s subheading -->
<span class="sub-head">...</span>

<!-- Template’s third body font -->
<p class="text-body-3">...</p>

Widget areas

You have a list of widgets you can choose from when it comes to making the pulled-in sidebar or footer widget area functional.

Side widget area

To adding widgets go to Customize > Widget > Side Widgets and add widgets that are suitable for pulled-in side widget area.

To adding widgets go to Customize > Widget > Footer Widgets and add widgets that are suitable for the site footer.

Example of adding useful links into the footer:

  1. Go to Customize > Widgets > Footer Widgets > Add widgets > choose Navigation Menu from list of all widgets.
  2. Add a title for the widget but make sure to choose a menu from select menu and then publish your changes.

Widget — Mailchimp

Ivory offers the use of Mailchimp as a marketing email service. While Mailchimp API require an account in order to create an email listing please make sure you have already created a Mailchimp account.

Add widget

Go to Appearance > widgets and add Ivory — Mailchimp to the Footer Widgets area.

Create a new list

Follow Mailchimp's instructions here on how to create a new list. When you have your list ready, proceed to the next section to learn how to set up your subscribe form.

General forms

After you have created a list, Make sure you are in the list page that you just created, by clicking on lists from main navigation then choosing your list.

Embedded forms

Now you are ready to fetch your form information and insert them into your website’s subscribe form.

<!-- Form action URL -->
<form action="//pixudio.us15.list-manage.com/subscribe/post?u=4f175e7a78cd5c1fce7ef555a&id=8f06b51a52" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	<div class="sr-only" aria-hidden="true">
	<!-- Hashed key -->
	<input type="text" name="b_4f175e7a78cd5c1fce7ef555a_8f06b51a52" tabindex="-1" value="">
	</div>
	...
</form>
Inserting your form keys

Image distortion effect

To turn on/off image distortion effect on the site, navigate to Appearance > Customize > Image Distortion and check the Turn Off Image Distortion Effect for deactivating the effect and keep it unchecked to let the effect will be applied.

Cookies notice

The General Data Protection Regulation (GDPR) is a European Union (EU) law taking effect on May 25, 2018. The goal of GDPR is to give EU citizens control over their personal data and change the data privacy approach of organizations across the world.

For that reason Ivory offers an easy to setup popup that improve your user awareness about the site cookies, among form's acceptance checkboxes.

Disclaimer: Cookie notice and acceptance checkboxes are a couple of items on GDPR compliance checklist. To ensure that your site is fully GDPR compliance, you should look up GDPR requirements guides or better consult a lawyer.

Enable modal

Go to Appearance > Customize > Cookies Notice and check “Display cookies notice”.

Note: Cookie notice modal will only pop up if user is not logged-in or did not dismiss the pop-up within cookie expiry.

Set modal expiry

Go to Appearance > Customize > Cookies Notice, enter number of days in “Cookies notice expiry day(s)” field. e.g. 7 for one week.

Modify modal content

Add a copy of ivory/template-parts/cookies-notice/popup.php file into child theme ivory-child/template-parts/cookies-notice/popup.php and start modify the child theme popup.php file.

Note: As you are editing a PHP file, ensure you have right access and permissions to your server files and can undo the changes in case anything goes wrong, also make sure you already activated the debugging mode.

Modal is not showing?
  1. Ensure “Appearance > Customize > Cookies Notice > Display cookies notice” is checked.
  2. Ensure you browse the site on incognito mode.
  3. Ensure you are logged-out from Wordpress admin dashboard.

Tracking codes

Simply go to Appearance > Customize > Tracking Codes and add your tracking codes such as <script>, <iframe> and etc; to the Custom Codes field. You might add multiple tracking codes once and they would print in the bottom of your document as they are, for that reason make sure your tracking codes are valid and reliable.

Additional CSS

Add your own CSS code to style.css file inside the child theme. This will make it much easier to update the template later - you'll only need to preserve your custom style file.

You also can add your custom CSS code to "Additional CSS" setting at site customizer, to do so, simply go to Appearance > Customize > Additional CSS.

Gutenberg blocks

Ivory offers +40 modern blocks among all of Gutenberg blocks that let you write rich posts and create beautiful and eye catching layouts.

Have a quick glance at how blocks work.

Here is some of Ivory's blocks we hope you could enjoy.

  1. Accordion   demo   video tutorial
  2. Accordion — Background   demo   video tutorial
  3. Alerts   demo
  4. Announcement   video tutorial
  5. Banner — Form   demo   video tutorial
  6. Banner — Slider   demo   video tutorial
  7. Banner — Text Rotation   demo   video tutorial
  8. Call to Action   demo   video tutorial
  9. Call to Action — Metro   demo   video tutorial
  10. Carousel   demo
  11. Columns   demo
  12. Contact Form   demo   video tutorial
  13. Countdown   demo   video tutorial
  14. Heading   demo
  15. Icon List   demo
  16. Image Distrotion Effect   demo   video tutorial
  17. Image Gallery   demo
  18. Map   demo
  19. Map — Info   demo   video tutorial
  20. Portfolio — Slider   demo   video tutorial
  21. Portfolio — Details (left/right)   demo   video tutorial
  22. Portfolio — Grid   demo   video tutorial
  23. Posts — Call to Action   demo   video tutorial
  24. Posts — Grid   demo   video tutorial
  25. Pricing   demo   video tutorial
  26. Progress — Horizontal   demo
  27. Progress — Vertical   demo   video tutorial
  28. Services — Expanded   demo   video tutorial
  29. Services — Icon 2 Columns   demo   video tutorial
  30. Services — Icon 3 Columns   demo   video tutorial
  31. Services — Image 2 Columns   demo
  32. Services — Image 3 Columns   demo   video tutorial
  33. Services — List 3 Columns   demo   video tutorial
  34. Services — Text 3 Columns   demo   video tutorial
  35. Sponsors (companies)   demo   video tutorial
  36. Statistics   demo
  37. Tabs   demo
  38. Team — 2 Columns   demo   video tutorial
  39. Team — 3 Columns   demo
  40. Testimonials   demo   video tutorial
  41. Video Button   demo   video tutorial

Page

Creating a page
  1. To get started adding a new page to your site, in the Dashboard Navigation simply go to Pages > Add new.

    NOTE: The WordPress page editor looks nearly identical to the post editor, except for a few different boxes located on the right side of the screen.

  2. Add the title of the page, like "About".

    NOTE: If you have pretty permalinks set up, the title of your page will also be the page URL slug.

  3. Next, add some blocks.

  4. When you're ready to publish, you can either publish immediately, save this or a draft, or schedule the page to be published later.

  5. The Page Attributes section applies a parent page and template to your new page. For the Parent section, you can arrange your pages into hierarchies. For example, you could create this new page with additional pages under it. There are no limits to how many levels you can nest pages.

  6. The Order box allows you to order your page numerically. Pages are usually ordered alphabetically, but you can choose your own order by entering a number in this field.

Extended settings — Page settigns
Creating a Static Front Page
  1. Create a front page

    • Create a new page and title your it "Home".
    • Add blocks & content you would like to see within the content area of the static front page.
    • Publish the page.
  2. Create a blog page

    • Create a new page and title your it "Blog", "News", "Articles", or an appropriate name.
    • Do not add content. Leave it blank. Any content here will be ignored.
    • Publish the page.
  3. Go to Appearance > Customize > Homepage Settings

    • In the drop down menu for Homepage select "Home".
    • In the drop down menu for Posts page select "Blog" or the name you created, or leave it blank if you will not feature posts on the site.
    • Publish your homepage settings.

Post

Creating a post
  1. To get started adding a new post to your site, in the Dashboard Navigation simply go to Posts > Add new.

    NOTE: The WordPress post editor looks nearly identical to the page editor, except for a few different boxes located on the right side of the screen.

  2. Add the title of the post, like "My first post".

    NOTE: If you have pretty permalinks set up, the title of your post will also be the post URL slug.

  3. Next, add some contents.

  4. As needed, select post format from drop down.

    Find post format drop down under Status & Visibility > Post Format

    NOTE: Gallery post format, will grab images from Gallery block attached into the content area and displays them in archive pages, such as blog instead if feature image in form of a carousel automatically.

  5. As needed, select a category and add some tags.

  6. Set a feature image.

    Suggested feature image dimensions for standard post format is 660 by 440 pixels and for all other standard formats (video, audio, quote, …) is 660 by 1040 pixels.

  7. When you're ready to publish, you can either publish immediately, save this or a draft, or schedule the post to be published later.

Video popup

Video popup is a essential way to offering embedded youtube and vimeo videos to users, You can simply include it to any link, and lets users to decide what video they are attempt to watch.

Markup

A video popup can be attached to any <a> tag, simply by adding .video-popup class and link to a Youtube or Vimeo video.

<a class="video-popup" href="https://www.youtube.com/watch?v=kHJQ9gG26HQ">Watch video</a>

Buttons

Buttons are used in various places throughout the template to implore the user to continue exploring other parts of the site, or to call them to perform an action such as sign up, book now, become a member etc.

Markup

Buttons are housed in a basic <a> element.

<a class="btn" href="#">Sign up</a>
Class Modifiers

Icons

Icons serve different purposes depending on where they are used - often they are used as decoration, to illustrate a particular service for example. In other cases icons are used to help users navigate a site (a downward arrow denoting a drop down menu for example).

Markup

Icons use the i.icon element and require another icon class name depending on which icon set is in use.

<i class="icon i-apple"></i>

Lazyload

Lazyloads images or iframes loads only when the users need them to display. In this way, user won’t have to wait for all the elements in the page to be loaded and therefore, can start using the web page sooner. The user will be seeing only the images above the fold. The rest will come as soon as user scrolls.

Markup

A lazyload element uses the class lazyload in conjunction with a data-src and/or data-srcset attribute. Optionally you can also add a src attribute with a low quality image.

<img
class="lazyload lazyload--el"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="image.jpg"
data-srcset="image.jpg 1800w, image-1600x900.jpg 1600w, image-1280x720.jpg 1280w, image-768x432.jpg 768w"
width="1920"
height="1080"
alt="">
ls.unveilhooks

ls.unveilhooks plugin extends lazyLoad to background images, video’s posters and scripts.

Background-Image:
For background images, use data-bg attribute:
<figure class="lazyload lazyload--el" data-bg="image.jpg"><figure>

Video’s poster:
For video tag use data-poster and preload="none":
<video class="lazyload lazyload--el" data-poster="image.jpg" preload="none">
  <!-- sources -->
</video>

Scripts:
For scripts use data-script:
<div class="lazyload" data-script="module-name.js"></div>

Script modules using require:
For modules using require use data-require:
<div class="lazyload" data-require="module-name"></div>

Changelog

Version 1.0.9
Version 1.0.8
Version 1.0.7
Version 1.0.6
Version 1.0.5
Version 1.0.4
Version 1.0.3
Version 1.0.2
Version 1.0.1
Version 1.0.0

Credit