Stratus Documentation

View on ThemeForest

*Important Note

This documentation serves as an overview and guide to getting started.

Videos, FAQ, and Support Articles are available here: https://themovation.ticksy.com/articles/

If you have any other questions, please don't hesitate to open a ticket on our our support system.

Thank you!

01 - Getting Started

To install this theme you must have a working version of WordPress. For instructions on how to install and setup WordPress please see the WordPress website. http://codex.wordpress.org/Installing_WordPress

  1. Installation

    To install the theme you must upload the theme file package and then activate it inside the WordPress Admin area. Sign in and download from ThemeForest. Choose 'Installable WordPress File Only'

    Themes can be uploaded in two ways:

    1. WordPress Upload: Once you are logged into your WordPress site navigate to Appearance > Themes > and click on the Install Themes tab. Next click on Upload and then Browse..., and select the zipped theme file. Click "Install Now" and the theme will be uploaded and installed.
    2. Manual FTP: Using an FTP program, upload only the unzipped theme folder (not the .zip file or all of the folders) into the /wp-content/themes/ folder on your website server.

    Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and click activate below your newly uploaded theme. Next, follow the setup instructions below.

    Having issues? Check out this help article from Envato.

  2. Setup

    Once activated, you will need to follow the on-screen instructions with regards to Required and Optional Plugins. It's highly recommended to install ALL required and optional plugins for the best user experience.

    1. If you missed the activation setup step, you can always check to see the current setup progress under Appearance > Theme Activation
  3. Demo Content

    Included in this theme package are sample data files that you can import to quickly and easily have your site look very similar to the demo site. We strongly recommend this option as it's the easiest way to get started. Importing these files will add various types of content to your site.

    Importing Content

    1. Locate the sample content file stratus-demo-content.xml, in the theme package. It's in a folder called demo content.
    2. From the WordPress dashboard, go to Tools > Import and click WordPress.
    3. If you have not installed the Import Plugin yet, you will be prompted to do so.
    4. After you activate the plugin, select the file from your theme package and follow the instructions.

    Importing Widgets

    1. Locate the sample content file stratus-demo-widget-content.wie, in the theme package. It's in a folder called demo content.
    2. From the WordPress dashboard, go to Tools > Widget Importer & Exporter and click Choose File, (find import .wie file) then click Import Widgets and follow the instructions.
    3. If you have not installed the Widget Importer & Exporter Plugin yet, you will need to do so. You can always go back to the setup process to install it under Appearance > Theme Activation. You can also find a direct link here.

    Importing Forms

    1. Locate the sample content file stratus-formidable-custom-forms.xml, in the theme package. It's in a folder called demo content.
    2. From the WordPress dashboard, go to Formidable > Import / Export and click Choose File, (find import .xml file) then click Upload file and import.
    3. If you have not installed the Widget Importer & Exporter Plugin yet, you will need to do so. You can always go back to the setup process to install it under Appearance > Theme Activation. You can also find a direct link here.

02 - Theme Options

  1. Theme Options Panel

    The Theme Options panel is the best place to start for all your site wide settings. You will find this via Appearance > Theme Options.

    1. General Tab | Logo with Retina Support, Navigation Margin Adjustment, Dark Header Style, Custom CSS, Smooth Scroll, Content Preloader
    2. Typography & Fonts | Body, Menu and Heading sizes, font family and colors. Add any Google Font here.
    3. Social | Add your social media accounts here. Facebook, Twitter, Instagram etc.
    4. Site Layout | Sticky Header, Transparent Header, Full Width or Boxed Layout, Site Background Options (Boxed Layout Only), and Automatic Retina Creation option.
    5. Footer | Copyright, Credit, Footer Widgets
    6. Slider | Various Slider Options and Settings
    7. Header & Sidebar | General Settings for Blog, Search, 404 etc
    8. Portfolio | Portfolio and Project Options (Portfolio Home, Custom Permalink / slug, AddThis, Icons, Navigation Control.
    9. Top Navigation | Show / Hide Top Navigation, add custom text message and top mini icon blocks.

    Accent Button

    • Create your navigation Menu under Appearance > Menus
    • On the left side, click Links, and add a new menu item.
    • Go to the top and click Screen Options. Ensure the box is checked for CSS Classes.
    • In the menu item you want to have the accent border, click the down arrow next to Custom and insert the class 'th-accent'

    Automatic Retina Creation

    • (Appearance > Theme Options > Site Layout) - This option is disabled by default to reduce server load. You can safely enable this before you start uploading images. Essentially you are telling the theme to automatically make a retina version of every image you upload, if it's at a high enough resolution. (The exception is the logo which is handled separately) When you initially upload images via WordPress Media Library, you may notice a lag in processing time for Retina, but your visitors will not notice any additional performance lag.

    One-Page Site Option

    • In Stratus, you have the option to setup your site as a traditional multi page site, or as a one-page site. In the one-page style, you can still include links to other sections as well, such as the blog.
    1. If you'd like your site to be One Page style, when building your site just add all of your meta boxes and content onto one page. In each meta box, on the Display tab you'll see a field in which to add an Anchor. You can put in any text you like, without spaces. For example: aboutus
    2. Once you have that in place, you can create your navigation Menu under Appearance > Menus
    3. On the left side, click Links, and input the URL to your page, including you anchor with a hashtag before it, ie: http://www.yourdomain.com/home/#aboutus
    4. The Link Text field is for the text you'd like to show up as the link, ie: About Us
    5. Once all your links are added, go to the top and click Screen Options. Ensure the box is checked for CSS Classes.
    6. In each of your one-page links, click the down arrow next to Custom and insert the class 'th-anchor'
    7. For the first link only (likely Home) insert a second class 'th-anchor-top' so the field should read 'th-anchor th-anchor-top'


03 - Content Blocks (aka Meta Boxes)

Content Blocks, also known as Meta Boxes are designed to help make adding and maintaining content very easy. There are many things you can do with Content blocks. You add, sort and edit them on the page edit screen.

  1. Meta Box Builder

    1. Every page has a Meta Box Builder Meta Box where you can do things like, adding, sorting and multiplying Meta Boxes.

    Sorting

    1. You can sort Content Blocks using the Sort Tab under the Meta Box Builder. Drag and Drop your order and update page to save changes.

    Quantity / Multiple Meta Boxes of the same type

    1. Use the Quantity tab under the Meta Box Builder to add multiple Meta Boxes of the same type.

    Show & Hide

    1. Check the display checkbox under the Display Tab on any Content Block to Show or Hide that Content from display. Content is saved but will be hidden from display.
    2. To permanently remove a Content Block from the Edit Screen, use the Page Template settings. Careful! Make sure to uncheck the display checkbox before permanently removing via Page Templates Settings.

    Other Options

    1. Most Content Blocks come with additional options to help you achieve the perfect look. Header, Background, Animation, Borders and Padding tabs are accessible below the display tab. Check em out.

    Where do I Add Content?

    The Short answer is under the Admin Menu > Add Content.

    Use "Groups" under Admin Menu > Add Content > Groups to group content you would like to display together.

    Also see: Adding Content to a Meta Box and Ordering Content for Display

    1. Accordions
      Admin Menu > Add Content > Accordions
    2. Brands
      Admin Menu > Add Content > Brands
    3. FAQs
      Admin Menu > Add Content > FAQs
    4. Featured
      Admin Menu > Add Content > Featured
    5. Pricing Plans
      Admin Menu > Add Content > Pricing Plans
    6. Sliders
      Admin Menu > Add Content > Sliders
    7. Teams
      Admin Menu > Add Content > Teams
    8. Testimonials
      Admin Menu > Add Content > Testimonials
    9. Thumbnail Sliders
      Admin Menu > Add Content > Thumbnail Sliders
    10. Tours
      Admin Menu > Add Content > Tours
    11. Service Blocks
      Admin Menu > Add Content > Service Blocks

    Adding Content to a Meta Box

    Reference your (custom post type) content inside any of the meta boxes. Some of the meta boxes don't require a custom post type, you can add content directly inside the meta box.

    Example: Adding content to a Service Block Meta Box. You can add content by selecting individually or by groups. You can also change the order by setting here.

    Ordering Content for Display

    Content inside a meta box can be set to be output by date or by drag and drop order.

    Drag and Drop - you must have the 'Simple Page Ordering' plugin installed and activated for this option to work.

    Example: Drag and Drop content order of Service Block Custom Post Types.

    #1 - Click on 'Sort by Order'

    #2 - Drag and Drop your content (it will auto save)

    By Date - Content will be output by published date.

    Types

    Content blocks provide an easy way to add and management content. Changing the sort order is a breeze. Virtually every content block supports, a header, background, parallax, animation, padding, and borders in addition to the specific content layouts below.

    1. Accordion aka collapse boxes - Build collapsible content blocks easily. Supports title, full HTML, icons and buttons.
    2. Brands - Create an in-line list of logos. Supports links.
    3. Call to Action - Add a call to action statement with button. You can use a standard, ghost style, or call to action button.
    4. Content Editor - Add this meta box to make it so that you can control the output of the WordPress content editor in the same way as the other meta boxes: change the order, hide it, or add anchor text to link to the section for a one-page site.


    5. Conversion Form - Add a Formidable form easily to convert more leads.
    6. FAQ - Build a list of Frequently Ask Questions. Supports full HTML
    7. Features - Ideal for featuring a product or service with an image. Supports image, title, text and link.
    8. HTML - Full HTML with TinyMCE
    9. Map - Easily create a Google Map with Marker. Option to replace page header or use in-line with content.
    10. Master Slider - Ideal for adding a Master Slider Shortcode to the top of a page.
    11. Pricing Plans - Service or product pricing tables. Supports title, price, price per, pricing details, button text, button link, most popular switch.
    12. Service Block - Highlight your services with an icon, title and text. Includes two main styles: vertical and horizontal alignment. Horizontal supports 1 column, 2 column, and 3 column with an image as the middle column.
    13. Service Block Split - Service Block 50/50 split with an HTML content block that can be set to either left or right.
    14. Showcase - Ideal for detailed showcase of a product or service. Main image can be aligned left, right, or center. Supports featured image, title, full HTML, unlimited bullets below which include icon, title, text and link.
    15. Slider - Flexslider that supports, title, subtitle, button text, button link, image, image link, background, and form shortcode.
    16. Team - Build your team with this content block. Supports name, title, bio, photo, social icons and links.
    17. Testimonials - Supports name, title, quote and photo.
    18. Thumbnail Slider - Thumbnail carousel. Includes two main styles: horizontal and vertical. Supports images, title, subtitle, and link.
    19. Tour - Great for displaying features of a product or service. Main image can be aligned left, right, or center. Supports title, full HTML, button text, button link, and image.
    20. Portfolio - To display a collection of projects on a page.

04 - Portfolio

Portfolio is a collection of projects. Each project should be organized into a Project Type (or tag). First you add a project and then you display them as part of a portfoio, using the portfolio template or portfolio meta box. Organizing projects into projects types makes it easier for you to add them to a portfolio.

  1. Adding Portfolio Projects

    Add new projects via Admin Menu > Portfolio > Add New.

    1. Title
    2. Description (content editor / wysiwyg)
    3. Excerpt - If used, this will override what is displayed on the portfolio hover
    4. Featured Image - Displayed on the Project Single and also as the thumbnail on the Portfolio.
    5. Project Options Meta Box
    6. Show button
    7. Show Project Type Icon
    8. Alternative Thunbmail Image
    9. Enable Lightbox on Portfolio
  2. Creating a Portfolio page

    A great and quick option to display a portfolio on a page.

    1. Add a new Page and choose 'Portfolio - Standard' from the Template Dropdown inside the Page Attributes Meta Box.
    2. Configure Settings inside the 'Portfolio Options' meta box.
    3. Show Projects Filter Bar - if you want to allow visitors to sort by project type.
    4. Filter by Project Type - Will display projects that belong to one or more Project Types that you choose.
    5. Projets Per page
    6. Number of Columns to Show
    7. Order By - Date or Drag and Drop. (see how drag and drops works here)
    8. Save Changes
  3. Adding a Portfolio meta box

    A great option if you want to display a few projects in with other content on a page.

    1. This is part of the Meta Box Builder System. Use this link to find out about general meta box settings such as padding, boders etc.
    2. Show Projects Filter Bar - if you want to allow visitors to sort by project type.
    3. Select individually - Choose specific projects you wish to display.
    4. Select by Project Type (Group). - If you have organized your projects in project types, then this option is very handy.
    5. Order By - Date or Drag and Drop. (see how drag and drops works here)
    6. Number of Columns to Show
    7. Save Changes
  4. Portfolio General Settings

    Find general settings via Apperance > Theme Options > Portfolio Tab.

    1. Portfolio Home - Each Project Pae and a home button. This setting allows you to specify where that buttons goes.
    2. Anchor Link - If you would like to anchor down using the portfolio home linke above, specicy your anchor here.
    3. Custom Slug - Set your custom permalink / slug here. Default is 'portfolio'
    4. AddThis Enable
    5. Project Icons - Disable the icon from displaying on hover (portfolio page and meta box)
    6. Navigation Control - Disable project prev / next buttons.

05 - Forms

Stratus makes use of the Formidable plugin to handle all forms in the theme with a nice drag-and-drop interface. When setting up the theme you'll be prompted to install the plugin.

  1. Getting Setup

    1. We strongly recommend importing the forms shown in the theme demo if you'd like to include a similar form on your website, as it's the simplest way to get started.
    2. You can view this section of the documentation covering the import of the demo forms.
    3. If you have questions about settings in the plugin, there's a lot of information in the Formidable Knowledge Base. If you can't find the answer you're looking for, we welcome you to post in our support forum.

06 - Theme Shortcodes

25 Bootstrap 3 shortcodes will beautify your website

  1. How to use

    Use the shortcode generator tool that is accessible on the TinyMCE editor. Look for the 'Add Shortcode button'.

    1. Click on Add Shortcode
    2. Select a shortcode from the dropdown list
    3. Add your content and use the in-line help for support
    4. Click the Insert button to add the shortcode into your content
  2. List

    25 shortcodes based off of Bootstrap 3

    1. Accordion
    2. Alert
    3. Blockquote
    4. Button - Single
    5. Button Group
    6. Button Dropdown
    7. Carousel / Slider
    8. Code
    9. Column
    10. Drop Cap
    11. Glyphicons
    12. Google Map
    13. Highlighted Text
    14. Horizontal Description
    15. Image Shapes
    16. Jumbotron
    17. Label
    18. Lead Text
    19. Modals
    20. Page Header
    21. Panels
    22. Popovers
    23. Progress Bars
    24. Togglable Tabs
    25. Tooltips

Stratus comes with a primary sidebar, and up to 4 footer widget areas.

  1. Organizing

    Use Widget Logic (a free plugin) to control where sidebars & widgets appear. Widget logic is lightweight, easy to use, and Free. All you need is one sidebar and you define where each widget shows up.

    1. Example: You have two widgets, a form widget and a simple text widget. You want the text widget to show on all sidebars, but you want the form widget to only show on the contact page.
    2. Solution: Add the text & form widgets to the primary sidebar and save. Make sure you have installed Widget Logic. Open up the Form Widget in the Primary Sidebar, under 'Widget logic:' enter in the following: is_page('contact'), where contact is the name or your contact page slug. Save.
    3. Widget logic has many filters using WP conditional logic. It's awesome. Here are some helpful links:
    4. Plugin Homepage
    5. Condition Tags (aka filters)
  2. Footer

    The Footer supports up to 4 widget columns. You can set the number under Appearance > Theme Options > Footer

  3. Show, Hide and Align

    You control if a sidebar diplsays on any page or on posts or the blog homepage.

    1. Pages: All pages have a 'Page Layout' meta box on the edit screen. This allows you to choose a Right, Left or No Sidebar setting.
    2. Blogs, Search, 404 and Archives Sidebar Settings are managed under Appearance > Theme Options > Header & Sidebar. Each group has it's own tab.

08 - Page Headers

  1. Pages

    All pages come with a Page Header Meta Box. You can add a title, subtext, button, background, parallax, animation and padding.

  2. Google Map

    Replacing the Page Header with a Google Map is done via the Map Meta Box (Common on the Contact Page). There is an option under the Map tab of the Map Meta Box, 'Replace Header with Map'.

  3. Blogs, Search, 404 and Archives

    Page Header settings for Blogs, Search, 404 and Archives are managed under Appearance > Theme Options > Header & Sidebar. Each group has it's own tab.


09 - The Blog

  1. Getting Started

    The easiest way to get started with a blog is to import the demo content. This will create a blog page and display your most recent posts. You can manage page header, sidebar or standard / masonry options for the blog here, Appearance > Theme Options > Header & Sidebar

  2. Setup a blog without demo content

    1. Create a page for your blog.
    2. Under Settings > Reading and set 'posts page' to the page you created for your blog.
    3. To managed page header, sidebar or standard / masonry options, go to Appearance > Theme Options > Header & Sidebar.
  3. Custom page headers for blog

    To use the Full Page Header options, like background, animation, padding, use the 'Standard' or 'Masonry Page Template' from the edit screen of your Blog Page, under the 'Page Attributes' Meta Box.


10 - Child Themes

We highly recommend using our Theme Features to get the customized look your are seeking, however as a developer or designer you may want to create a child theme to satisfy your apetite for complete control. In this case, we recommend using our sample Child Theme.

  1. Creating a Child Theme

    1. Go to Appearance > Themes > and click on 'Activate' under Stratus Child Theme.
    2. Now you can add and fully customize your own PHP, CSS, JS, and other files you add under the themes/stratus-child/ folder.
    3. To learn more about using a Child Theme please visit the WordPress.org Codex site.

11 - Multi Language Support

Stratus can be easily translated in to your own language.

  1. Language Translation using Poedit (Free) by creating a .po file

    1. Download and install Poedit if you haven't done so already.
    2. Find Stratus.po file under Stratus theme folder /language (e.g. /wp-content/themes/stratus/language/stratus.po)
    3. Open the .pot file in Poedit.
    4. (See Image on the right) The box labeled (1) is the original message (in English) from the .pot file. The box labeled (2) is where you add your translation. Boxes labeled (3) and (4) are used for adding comments about the messages. These come in handy if you are working with a team of translators and would like to pass around ideas through the .po file.
    5. Go to File / Save as... to save your translations in a .po file. If you do not know how to name it, take a look at this page: Translating WordPress With Poedit. The name you should use is the combination of the project’s text domain (locate it inside codes) and a short string in parentheses next to a language’s name (e.g. French – Français (fr_FR)). For example, if the text domain is stratus and the translation is French, just name the .po file stratus-fr_FR.
    6. When you have finished translating, go to File → Save as… again to generate the .mo file. Or you can set your Poedit to always compile a .mo file when saving changes by clicking File / Preferences and on the Editor tab check the Automatically compile .mo file on save box.
    7. Open your wp-config.php file in a text editor and search for: define ('WPLANG', '');
    8. Edit this line according to the .mo file you've just created, e.g. define ('WPLANG', 'stratus-fr_FR');
    9. Ref: Translating WordPress With Poedit
  2. Language Translation using WPML (Premium)

    1. Download and install WPML if you haven't done so already.
    2. Follow the steps outlined on the WPML site. Getting Started Guide

12 - Additional Help


This documentation was designed as an overview and guide to getting started.

Additionally, there are Videos, FAQ, and Support Articles available here: https://themovation.ticksy.com/articles/

If you have any other questions, please don't hesitate to open a ticket on our our support system.



Themovation
Last update: April 6, 2016