“Spiration Magazine WordPress Theme”

Getting Started

Welcome

Created: 16/06/2017
Latest Update: 28/08/2017
By: templatescraze
ThemeForest: themeforest.net/user/templatescraze
Email: templatecraze@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this documentation, please feel free to email via my user page contact form here. Thanks so much!

Note

No Images that are used for demo purpose are not available in this item.

What's Included

When you purchase our theme from Themeforest. You can download Spiration Magazine WordPress Theme files from Themeforest > Your Account > Downloads. Navigate through your purchased items and find Spiration Magazine WordPress Theme. Click download button to download the Main files. It contain everything that this package have. Check list of what's included when you download the main file option.

themeforest-files.png

Please Note: You can download 2 archives from ThemeForest:

  • First is a product archive with documentation links and some additional files
  • Second is the archive Spiration.zip with the theme itself — this file you need to install
  1. WordPress Theme File (.zip)
  2. Documentation - Contain theme documentation file.
  3. Licensing Folder - Contain all licensing info files.
  4. Changelog (.txt) - Included all theme versions changelog info

Item Support

All of our themes come with free support and currently we handle all support questions through Themeforest Item Discussion Board. Go to Spiration Magazine WordPress Theme Page on Themeforest and click Comments tab. Please make sure you logged in with your purchased account.

Support includes
  • Responding to questions or problems regarding the item and its features
  • Fixing bugs and reported issues
  • Providing updates to ensure compatibility with all major browser versions.
Item support does not include
  • Customization and installation services

Installation

FIRST, Spiration is a WordPress theme and it needs to be installed into a WordPress Framework, so make sure you have already installed WordPress 4.7 or higher. If you haven't already done this, go to WordPress.org for a free download and follow their installation instructions.

Installing via WordPress Admin

  1. Log into your WordPress website and browse to Appearance > Themes
  2. Then click on the option to upload theme.
  3. Next browse for the zipped theme file you downloaded from ThemeForest (make sure you have downloaded the "Installable zip" as this is what you would upload to WordPress. Make sure to extract it and locate the theme which is inside the "Installable Theme" folder and is called spiration.zip).
  4. Once WordPress has unpacked and installed the theme, just click to activate it.

Installing via FTP

Your second installation option is to upload the theme via FTP. For this method first log into your site via FTP and browse to your folder located at wp-content/themes. Unzip the theme file you downloaded from ThemeForest and upload only the extracted Total folder to your server.

Next log into your WordPress site and navigate to Appearance > Themes to activate Total.

Requirements and Compatibility

Ensure that your web host has the minimum requirements to run WordPress:

  • PHP version 5.3 and later
  • MySQL version 5.0 and later
  • The mod_rewrite Apache module

Spiration is fully compatible with WordPress 4.7 and later.

Browsers compatibility

  • Chrome
  • Safari (version 10 or later)
  • Firefox
  • Internet Explorer 11
  • Edge
  • UC Browser
  • Opera Mini

Demo Content

You can easily import the demo data via special theme page, just navigate to Spiration > Demo Import in your admin dashboard. Note that you'll be able to use demo import only if your theme is activated.

You can import Content, Theme Options and WooCommerce Products separately at any time, just check only needed checkboxes.

Please Note: Your previous content won't be overwritten.

demo-import.jpg

Theme Addons

Addon is a WordPress plugin which greatly increases possibilities of Spiration Magazine WordPress Theme. All addons are available for free including its future updates, if you are using them with Spiration. At the moment Spiration comes with the following premium plugins:

We plan to implement new addons to improve the theme much more. To view current available addons, please go to Spiration > Addons page in your admin dashboard.

addons.jpg

Click on the Install Plugin button to get activate the plugin.

Widgets

Spiration features 4 predefined widgets.

  • Advertisement Widget: used to display the ads codes (this can be adsense or external image).
  • Feedburner Subscribe: used to display the feedburner subscribe area.
  • Popular Categories: used to display the popular categories order by number or posts.
  • Post by Type: have two layouts (small thumbnail and title overlay) and can used to display posts from categories, tags, recent, random, and post liked sections.

Responsive Images

Here is the information that helps you to understand the mechanism of showing images on site.

First thing you should to know — every image that you upload in your Media Library will automatically create several thumbnails with smaller dimensions. Quantity of such copies depends on original image dimensions and your settings, check the information below to understand the mechanism.

Dimensions System name Used by default in
400 x 400
(cropped)
tcfw-square-400 — Used in WordPress Gallery
600 x 600
(cropped)
tcfw-square-600 — Used in Projects
700 x 700
(cropped)
tcfw-square-700 — Used in Projects
800 x 800
(cropped)
tcfw-square-800 — Used in Projects
570 x 321
(cropped)
tcfw-featured-thumbnail — Used in Post by Type Widget (Large Views)
— Used in Post List (Large Views)
570 x 370
(cropped)
tcfw-featured-thumbnail-2 — Used in Top News Carousel (Homepage)
— Used in Videos and Gallerys
— Used in Post by Type Widget
— Used in Post List
390 x 530
(cropped)
tcfw-vertical-image — Used in Carousel Slider (Visual Composer)
— Used in Carousel Slider (Homepage)
870 x 490
(cropped)
tcfw-gallery-big — Used in WordPress Gallery (Big Thumbnail)
166 x 93
(cropped)
tcfw-gallery-thumbnail — Used in WordPress Gallery (Small Thumbnail)
320 x 439
(cropped)
tcfw-team — Used in Team Carousel (Visual Composer)

Please note: All images that are discribed above are setup in functions.php.

Use Visual Composer

You can build a complete page using Visual Composer with the same look and feel of theme. To do this, please make sure that you have installed Visual Composer Addon. If you want to build a page using Visual Composer, then follow these steps:

  1. Go to Pages > Add New
  2. From the Pages Attributes Panel, Select Visual Composer under Template dropdown.
  3. Click on Backend Editor Button (Appears on the top of the Editor) and Click on Add Element.
  4. Choose the element you want to use and configure them.
  5. Click the Publish or Update button and view the output.

Theme Visual

Spiration comes with 23 Theme Defined Visual Composer Elements. Here are the list of elements:

General Settings

Here is the information that helps you to understand the mechanism.

general-settings.jpg

Header Settings

Here is the information that helps you to understand the mechanism.

header-settings.jpg

Homepage Settings

Here is the information that helps you to understand the mechanism.

homepage-settings.jpg

Blog Settings

Here is the information that helps you to understand the mechanism.

blog-home-settings.jpg

single-post-page.jpg

archive-pages.jpg

pages.jpg

Style Settings

Here is the information that helps you to understand the mechanism.

style-settings.jpg

Projects Settings

Here is the information that helps you to understand the mechanism.

project-settings.jpg

404 Page Settings

Here is the information that helps you to understand the mechanism.

404page-1.jpg

404page-2.jpg

404page-3.jpg

Typography

Here is the information that helps you to understand the mechanism.

body-typography.jpg

heading-typography.jpg

Social Media

Here is the information that helps you to understand the mechanism.

social-profile.jpg

How to Modify CSS/Javascript?

In Spiration, we are using NodeJs with Gulp to make compiled version for Sass Based CSS. Here is the instruction how to install Gulp and use it.

What Can Gulp Do?

  • Live reloads browser with BrowserSync
  • CSS: Sass to CSS conversion, error catching, Autoprefixing, Sourcemaps, CSS minification, and Merging Media Queries
  • JS: Concatenates & uglifies Vendor and Custom JS files
  • Watches files for changes in CSS or JS
  • Watches files for changes in PHP
  • Corrects the line endings
  • InjectCSS instead of browser page reload

STEP #1: Installing NodeJS, NPM and Gulp

You need to have NodeJS & NPM installed. If it is installed, skip to installing Gulp. Otherwise download NodeJS and install it. After installing NodeJS you can verify the install of both NodeJS and Node Package Manager by typing the following commands. This step needs to be followed only once, if you don't have NodeJS installed. No need to repeat it ever again.

node -v
# Results into v4.2.6

npm -v
# Results into 3.9.0
        

NodeJS and NPM are installed, now we need to install Gulp globally. To do that, run the following command

# For MAC OS X; run the following command with supper user
sudo npm install --global gulp

# For Linux; run the following command
npm install --global gulp

STEP #2: Installing Node Dependencies

We are in the root folder of our HTML Template at the moment, let's install the Node Dependencies. In the terminal run this command and wait for it to download all the NodeJS dependencies. It's a one time process and can take about 5 mins depending upon the internet speed of your connection.

# For MAC OS X run the following command with supper user
sudo npm install

# For Linux run the following command
npm install

STEP #3: Just run Gulp

Once the NodeJS dependencies are downloaded just run the following command to get up and running with Gulp

# To start gulp
gulp

# To stop gulp press CTRL (^) + C

STEP #4: How to Customize CSS and Javascript?

In the vendors folder you will see three directories that contain your css (*.scss) files, and javascript files. Just up open these files and update them,

vendors
├───css
│   │   bootstrap.scss
│   │   style.scss
│   │   _bootstrap-compass.scss
│   │   _bootstrap-mincer.scss
│   │   _bootstrap-sprockets.scss
│   │
│   ├───blueimp
│   │       _gallery-indicator.css
│   │       _gallery-video.css
│   │       _gallery.css
│   │
│   ├───bootstrap
│   │   │   _alerts.scss
│   │   │   _badges.scss
│   │   │   _breadcrumbs.scss
│   │   │   _button-groups.scss
│   │   │   _buttons.scss
│   │   │   _carousel.scss
│   │   │   _close.scss
│   │   │   _code.scss
│   │   │   _component-animations.scss
│   │   │   _dropdowns.scss
│   │   │   _forms.scss
│   │   │   _glyphicons.scss
│   │   │   _grid.scss
│   │   │   _input-groups.scss
│   │   │   _jumbotron.scss
│   │   │   _labels.scss
│   │   │   _list-group.scss
│   │   │   _media.scss
│   │   │   _mixins.scss
│   │   │   _modals.scss
│   │   │   _navbar.scss
│   │   │   _navs.scss
│   │   │   _normalize.scss
│   │   │   _pager.scss
│   │   │   _pagination.scss
│   │   │   _panels.scss
│   │   │   _popovers.scss
│   │   │   _print.scss
│   │   │   _progress-bars.scss
│   │   │   _responsive-embed.scss
│   │   │   _responsive-utilities.scss
│   │   │   _scaffolding.scss
│   │   │   _tables.scss
│   │   │   _theme.scss
│   │   │   _thumbnails.scss
│   │   │   _tooltip.scss
│   │   │   _type.scss
│   │   │   _utilities.scss
│   │   │   _variables.scss
│   │   │   _wells.scss
│   │   │
│   │   └───mixins
│   │           _alerts.scss
│   │           _background-variant.scss
│   │           _border-radius.scss
│   │           _buttons.scss
│   │           _center-block.scss
│   │           _clearfix.scss
│   │           _forms.scss
│   │           _gradients.scss
│   │           _grid-framework.scss
│   │           _grid.scss
│   │           _hide-text.scss
│   │           _image.scss
│   │           _labels.scss
│   │           _list-group.scss
│   │           _nav-divider.scss
│   │           _nav-vertical-align.scss
│   │           _opacity.scss
│   │           _pagination.scss
│   │           _panels.scss
│   │           _progress-bar.scss
│   │           _reset-filter.scss
│   │           _reset-text.scss
│   │           _resize.scss
│   │           _responsive-visibility.scss
│   │           _size.scss
│   │           _tab-focus.scss
│   │           _table-row.scss
│   │           _text-emphasis.scss
│   │           _text-overflow.scss
│   │           _vendor-prefixes.scss
│   │
│   └───styles
│           _animate.scss
│           _camera.scss
│           _dlmenu.scss
│           _flexslider.scss
│           _owlcarousel.scss
│           _responsive.scss
│           _responsive320.scss
│           _responsive768.scss
│           _responsive992.scss
│           _timeline.scss
│
├───customjs
│       custom.js
│
└───js
    │   bootstrap.js
    │   browser.js
    │   camera.js
    │   dksnap.svg.js
    │   dlmenu.js
    │   imagesloaded.pkgd.js
    │   jquery.easing.js
    │   jquery.flexslider.js
    │   jquery.waypoints.js
    │   nice-scroller.js
    │   owl.carousel.js
    │   parallax.js
    │   scrollMonitor.js
    │   slick.js
    │   svgxuse.js
    │   unveil.js
    │
    └───bootstrap
            affix.js
            alert.js
            button.js
            carousel.js
            collapse.js
            dropdown.js
            modal.js
            popover.js
            scrollspy.js
            tab.js
            tooltip.js
            transition.js

D) File Structure

In Spiration we have used several CSS and JQuery Framework/Libraries to add Some Animations, Effects and Controls. Here are the list of the libraries and css that we've used.

CSS Frameworks/Libraries

jQuery Frameworks/Libraries

Version 1.0 — June 17, 2017

  • Initial release

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. Enjoy! :)