“Purity” Documentation by “Veented” v3.0
Purity WordPress Theme
Updated: 2 July 2019
By: Veented
Email: prafgon@gmail.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please use our Support Board: https://veented.ticksy.com. If you like the theme, please take a moment to rate it on the ThemeForest website here. Thanks so much!
Table of Contents
- Installation
- Theme Options
- Theme Structure
- Page Templates
- Creating Portfolio
- Portfolio Posts
- Shortcodes
- Sidebars
- Custom Widgets
- Changing the Heading Font
- Plugins
- PSD Files
- Sources and Credits
1. Installation - top
First of all, the theme is built for use with WordPress 4.5+ and we recommend an upgrade to at least that version before the installation.
To get started with the Purity Theme just keep reading the documentation.
1.1. Uploading and Activating the Theme - top
There are two ways to install the Purity Theme:
Uploading the theme files through a FTP client (recommended)
- Using a FTP client (like FileZilla), connect to a server with your WordPress installation
- Navigate to /wp-content/themes/ folder and upload the Purity folder there
- Log in to your WP dashboard and open the 'Appearance -> Themes' menu
- You will now see Purity listed among the other themes. Activate it
Using the WordPress built-in uploader
- Go to the 'Appearance -> Themes' menu in your WordPress Dashboard
- Open the 'Install Themes' tab located on top
- Click the 'Upload' link under the tabs menu
- Choose a purity.zip file and press 'Install Now'
- When the uploader is finished, click 'Activate Theme'
1.2. Installing Required Plugins - top
Right after you activate the theme, a new notice is going to appear that informs about required and recommended plugins:
One plugin is required: Purity Core. However, we highly recommend installing the Classic Editor plugin. It brings back the old Classic Editor (pre-Gutenberg).
To begin installing required and recommended plugins, just click the "Begin installing plugins" button.
Note: You can always install/update/activate theme related plugins via "Appearance / Install Plugins" menu.
For more information about Plugins, visit the Plugins section of this documentation.
1.2. Importing a Demo Content - top
This is an optional step but I recommend you to follow it so you can see a structure of the live preview pages and all shortcodes in action.
Importing the demo content:
- Go to the 'Tools -> Import' menu in your WordPress Dashboard
- Choose WordPress and install the plugin if you don't have it installed already
- Choose the 'purity-demo-content.xml' and press 'Upload file and import'
- When it's finished, you will see new posts, pages, portfolio items and menus on your website
NOTE: Depending on your server, images may be or may not be uploaded during the import process.
1.3. Setup Settings - top
After you have the theme installed on your WordPress, you will need to configure few settings:
- Go to the 'Settings -> Reading' menu and select a 'static page' at the 'Front page displays' setting. Choose your Homepage and Blog page there.
- (Optional if you imported the demo content) Go to the 'Appearance -> Menus' menu, enter a 'Menu Name' and press 'Create Menu'. From now, this is a place to control your main website navigation.
2. Theme Options - top
Theme Options located under the 'Purity' menu on your WordPress dashboard is a place to control every aspect of the theme.
Each available option there is well described so you shouldn't have any problems controlling your website.
To save Theme Options, please click the Save all Changes button.
To restore defaults, please click the Options Reset button.
3. Theme Structure - top
Purity theme comes with four predefined page types: Homepage, Blog, Portfolio and Contact.
3.1. Homepage - top
Homepage is a front page of the template with the Slider, Tagline and Recent Posts & Recent Work sections.
While creating a homepage page, choose the 'Homepage' template. You may also add a custom content like on any other page.
You may easily manage which homepage elements (listed above) should be shown and which should be hidden by visiting the 'Theme Options -> Homepage' setting tab.
The homepage custom content examples:
- Static image:
<img src="image_url" width="900x" height="300px" alt> - YouTube video:
<iframe width="900" height="380" src="http://www.youtube.com/embed/Xorau81YT20" frameborder="0" allowfullscreen></iframe> - Vimeo video:
<iframe width="900" height="380" src="http://player.vimeo.com/video/6686768?title=0&byline=0&portrait=0&color=ffffff" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
3.2. Blog - top
Blog is a page that displays posts. To create a blog page, choose the 'Default Template' template.
'Blog' tab of the 'Theme Options' is a place to control the blog settings.
'Blog Sidebar' is a sidebar assigned to the blog page.
3.3. Portfolio - top
Portfolio is a page that displays portfolio posts. Check the Creating Portfolio guide for more information.
'Portfolio' tab of the 'Theme Options' is a place where you may control the portfolio page settings. To change the title of the 'Show All' list item of the Filter Navigation, visit the 'Translate' tab of the Theme Options.
3.4. Contact - top
Contact is a page template with Google Maps. To create a Contact Page, choose the 'Contact' template.
To configure Google Maps, please visit the Theme Options / Contact & Google Maps tab..
For a contact form, you can use the Contact Form 7 or any other plugin.
'Contact Sidebar' is a sidebar assigned to the contact page.
3.5. Custom Page - top
Custom Page is simply a page with a custom content. To create one, pick one of these templates: Page Left Sidebar, Page Right Sidebar, Full width.
'Page Sidebar' is a sidebar assigned to the contact page.
3.6. Archives/Search - top
Archives and Search are pages that appears if you filter your blog posts by a tag, month or author or simply to display the search results.
3.7. Footer - top
'Footer' tab of the 'Theme Options' is a place to control all the footer settings.
'Footer Widget Area' is a place to put all the footer widgets.
4. Page Templates - top
Since the 3.0 version of the Theme, you may modify a template for each of your page or post. You can do that in the "Page Layout" metabox:
4.1. Global Template - top
Global Template is a template for: Archives, Search and 404 error pages.
Available templates:
- Right Sidebar
- Left Sidebar
- Fullwidth
'General' tab of the Purity Theme Options panel is a place where you can change the Global Template.
4.2. Blog Templates - top
Blog Templates are templates for the blog page.
Available templates:
- Big Thumbnail
- Medium Thumbnail
- Small Thumbnail
'Blog' tab of the Purity Theme Options panel is a place where you can change the Blog Template.
4.3. Portfolio Template - top
Portfolio Templates are templates for the portfolio page.
Available templates:
- One Column 1
- One Column 2
- One Column 3
- Two Columns 1
- Two Columns 2
- Two Columns 3
- Three Columns 1
- Three Columns 2
- Three Columns 3
- Four Columns 1
- Four Columns 2
- Four Columns 3
5. Creating Portfolio - top
Portfolio is a page that displays portfolio posts. Creating one is a truly easy process, just follow few steps described below:
5.1. Adding Portfolio Posts - top
You may find an extensive tutorial of creating Portfolio Posts here: 6. Portfolio Posts.
5.2. Portfolio Page - top
After we've got some portfolio posts and categories created, we will need a portfolio page that will display them for us.
To create one, simply create a New Page and select one of the Portfolio Templates from the Page Attributes field:
Next, select some Portfolio Categories:
Just hit the 'Publish' button and we are done.
NOTE: You may create as many portfolio pages as you want.
6. Portfolio Posts - top
To create a new Portfolio Post, simply open the 'Portfolio -> Add New' menu option in your WordPress Dashboard.
You will see various of settings there but don't worry, everything is nicely described below.
General information:
- Featured Image is required
- Checking the Direct Lightbox option will cause a lightbox to open by clicking a thumbnail image on the Portfolio page
- Project Types are required for a sortable portfolio effect to work
- Project Description is a short description of your project that will be displayed in or under (depending on a template) a thumbnail on the Portfolio page
- The Content Area is a content that will is shown on a single portfolio post page. Here is an example description template I used on a preview version:
(...)Some text content here(...) [h5]Client:[/h5] Big Company [h5]Type:[/h5] Website [h5]Link:[/h5] http://www.google.com - Video Height option of the 'Video' panel on the right is a height of the video frame on the portfolio single post page.
6.1. Adding Gallery Images - top
Since the 3.0 version of the theme, Purity comes with a brand new post gallery management system. Adding multiple images is now truly simple:
- While creating/editing a portfolio (or blog) post, click on the "Create Gallery" button in the "Post Gallery" metabox:
- In the popup window, click on the "Add to Gallery" button:
- Here you may either select existing images from your Media library or just upload new. After you are done selecting images, simply press the red "Add to Gallery" button in the bottom right section of the popup window:
- Here you may reorder or delete specific images of your post gallery. After you are done, press the red "Update gallery" button:
- If everything went well, you should see small thumbnail in the "Post gallery" metabox. All you need to do now is save your portfolio/blog post!
6.2. Static Image - top
This is the simplest type of a portfolio post with one image on the portfolio post page. Simply add some content, description, set a Project Type and upload the first Image. You are done.
6.3. Lightbox Gallery - top
This is a post type with a lightbox gallery on the portfolio post page. Simply add some content, description, set a Project Type and upload as many images as you want. You are done.
6.4. Slider - top
This is a post type with a slider on the portfolio post page. Simply add some content, description, set a Project Type and upload as many images as you want. You are done.
6.5. Images List - top
This is a post type with images listed one under another. Simply add some content, description, set a Project Type and upload as many images as you want. You are done.
6.6. Direct Lightbox Gallery - top
This is a post type with a lightbox gallery opening directly by clicking on a thumbnail on the Portfolio Page. Simply add some content, description, set a Project Type, upload as many images as you want and check the 'Direct Lightbox' option. You are done.
6.7. Video - top
This is a post type with a video (YouTube or Vimeo) on the portfolio post page. Simply add some content, description, set a Project Type, upload the first image (thumbnail) and enter a Video ID on the 'Video' Panel on the right. You may also set the height of the video frame.
6.8. Direct Video - top
This is a post type with a video (YouTube or Vimeo) opening directly by clicking on a thumbnail on the Portfolio Page. Simply add some content, description, set a Project Type, upload the first image (thumbnail), enter a Video ID on the 'Video' Panel on the right and check the 'Direct Lightbox' option.
7. Shortcodes - top
All of the shortcodes are available with a one click from the WordPress editor menu "S":
Clicking the button will open a Shortcodes Panel where you choose a shortcode that you want to insert.
All of them are automatically filled with an example content and settings to make it as simple as possible.
7.1. Font Awesome Icons
Since the 3.0 theme update, Purity brings a new shortcode type "Font Awesome Icons" that offer over 360 icons that look good on all type of devices!
How can you use them? Here is the basic shortcode template:
[icon name="fa-twitter"]
Where fa-twitter is a name of your desired icon. You can find a full list of icons that may be used here: http://fortawesome.github.io/Font-Awesome/icons/
If you are a more advanced user a need to add extra classes to your icon, the shortcode supports the "class" attribute aswell:
[icon name="fa-twitter" class="fa-3x"]
8. Sidebars - top
Purity theme supports Sidebars and comes with an easy sidebar managemant system.
8.1. Default Sidebar
Purity comes with 4 custom sidebars for 4 different pages:
- Blog Sidebar - Blog Index Page and Blog Post Page
- Page Sidebar - Any custom page built with a Page Right Sidebar or Page Left Sidebar template
- Contact Sidebar - Contact Page
- Archives/Search - Archives and Search results page
8.2. Sidebar Manager
Sidebar Manager lets you create as many new sidebars as you only wish and then assign them to any page or post.
To create a new sidebar simply visit the "Theme Options / Sidebars" tab, type in the sidebar name and hit "Add New Sidebar". After you are done creating sidebars, don't forget to save Theme Options panel!
9. Widgets - top
Purity comes with custom widgets. To meet the new ThemeForest requirements, they are now included in the Purity Core plugin. All of them come filled with an example content and settings and are described below.
To all of the widgets: Title is a title of the widget. You may leave it blank.
9.1. Recent Posts - top
A widget that displays the most recent posts on your site with an image.
- Number of posts to show - as it's written.
9.2. Recent Portfolio - top
A widget that displays the most recent portfolio posts on your site with an image.
- Number of posts to show - as it's written.
9.3. YouTube - top
A widget that displays a YouTube video.
- Video ID - http://www.youtube.com/watch?v=YW8p8JO2hQw
9.4. Vimeo - top
A widget that displays a Vimeo video.
- Video ID - http://vimeo.com/22439234
9.5. Google Maps - top
A widget that displays a Google map.
9.6. Twitter - top
Displays latest tweets. Please visit this article to learn how to set up the Twitter widget.
10. Changing the Heading Font - top
The Heading Font is the BOLD one and is implemented using the @font-face. It is named League Gothic and you can find it Here.
10.1. Using the font switcher - top
One of the 2.0 theme update's new features is a Font Switcher that lets you easily change the font to one of the top most popular among the Google Font Repository just with a few clicks.
Just visit the Purity / Theme Options / Typography menu and select your favourite font from the "Heading Font" and "Body Font" fields.
You can preview all of the fonts here: http://www.google.com/fonts/
11. Plugins - top
To install, activate or update required and recommended plugins, visit the Appearance / Install Plugins menu:
Premium plugins (Revolution Slider and Layer Slider) can be found in the "Plugins" folder inside the main, downloadable theme package.
12. PSD Files - top
Purity isn't a very complex layout as it uses very few image elements. But in case you prefer to work on PSD files I've included few with this theme:
- Logo - logo.psd (font used: Bebas Neue)
- Small footer logo - logo_footer.psd
- Search icon - search.psd
- A slide template - slide.psd
- Image hover plus - over_plus.psd
- The slider navigation arrows - arrows.psd
- The slider navigation bullets - bullets.psd
- Static Home Page heading image - static_image.psd
- No-avatar image - avatar_unknown.psd
- Toggle element (Plus and Minus) - toggle.psd
- Buttons overlay background - button_over.psd
- Twitter quote element - twitter_quote.psd
- Icons 32x32 - icons.psd
- Icons 16x16 - icons-16x16
13. Sources and Credits - top
I've used the following images, icons or other files as listed.
- Icons by Yummygum - http://www.iconsweets2.com/
- Background images by Webtreats - http://webtreats.mysitemyway.com/
- Wooden background images by Elemis - http://elemisfreebies.com/
- Carbon background pattern by Orman Clark - http://premiumpixels.com
- jQuery - http://jquery.com/
- jQuery UI - http://jqueryui.com/
- Quicksand by razorjack - http://razorjack.net/quicksand/
- Twitter - Michael Strong micmania@hotmail.co.uk
- jQuery easing by Robert Penners - http://gsgd.co.uk/sandbox/jquery/easing/
- prettyPhoto by Caron Stephane - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
- Flex Slider by WooThemes - http://flexslider.woothemes.com/
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Veented