Stratum Theme Documentation

This documentation will guide you through the installation, usage, configuration and customization options of the Stratum WordPress theme.

How to Install Stratum

There are two ways to install the Stratum theme: directly from the Themes Directory from within your WordPress dashboard, or manually uploading the compressed (zip) theme file.

Install from the Theme Directory

1. Log in to your WordPress website
2. Go to Appearance > Themes and click Add New
3. In the Search themes box, type “Stratum” and locate the theme in the search results
4. Hover over the theme then Click Install
5. Once it is installed, click Activate

Manually upload the theme zip file

1. Download the theme zip file from WordPress.org
2. In your WordPress dashboard go to Appearance > Themes and click Add New
3. Click Upload Theme
4. Click Choose File and located the theme zip file you just downloaded, then click Install Now
5. Once it’s installed, click Activate

Get to Know WordPress

WordPress is a fantastic web publishing platform. However it can be a bit tricky to use at first. There’s a lot to learn. If you’re new to WordPress head over to the official Getting Started with WordPress guide – it’s a great resource for learning how to use WordPress.

Using the Stratum Theme

The information below will help you use the features included in the Stratum theme.

Setting up the Front Page

Stratum has the option for a fully widget based front page. This allows you to create a custom homepage design and add any content you wish all using the native WordPress widgets functionality.

The instructions below will show you how to setup a business style front page for your site like on the demo site.

1. Create a WordPress page.
   Go to Pages > Add New to create a new WordPress page. For example you could create a new page called “Frontpage” and leave the content area blank, OR you can use any existing page which has already been created.
2. Set newly created page in Step 1 as your site’s Front page.
   Go to Appearance > Customize > Homepage Settings to choose what to display on your site’s homepage. Choose option “A static page”. Now choose our newly created page from the dropdown to be selected as “Homepage”. Choose an another page from “Posts page” to display your latest posts.
3. Assign widgets to be displayed on your front page.
   Go to Appearance > Widgets and assign appropriate widgets to Front page widget areas (Front page 1 to Front page 6). For example, if you want to display a HTML call to action section and an image side by side on top of your front page, just assign an HTML widget and an image widget to Front Page1. You can write appropriate HTML to be displayed in your HTML widget (or Use our sample HTML codes and paste them to HTML widgets).
4. Assign different widgets to subsequent Front Page widgets as required.

You may notice that all widgets are sitting on top of each other on front end. This can be customized in the theme options as explained below.

Customize Your Front Page Widgets

Go to Appearance > Customize > Theme Options > Front Page. Here you will see options to customize Front Page widget layout and display.

General: Here you will find three options:

• Display Only Front Page Widgets – this option will hide all page content like page title, content, comment form etc, from front page (As you might only want to display Front Page widgets on this page)
• Extend Front Page 1 Background Over Site Header – this option will put background image of Front Page 1 widget area to extend over the Site Header (Normally Front page 1 will be below Site header).
• Site Title & Menu Text Color on Front Page – Since you have extended the background image of Front Page 1 to Site Header, now you might want to change color of text and links on header to contrast the background image. You can change color of text and links from this third option.

Fron Page 1 – Front Page 6
There are 6 Front Page options for each of the 6 Front Page widgets. They all provide the same options for their respective widgets.

• Background Image & Background Color: With these options you can set a background image or background color of your Front Page widget area respectively.
• Dim Background: If front page background image is too bright, you can dim it using this option. It is particularly helpful if you text and background both are bright and do not have enough contrast.
• Fixed Background Image. This will make your background image fixed and will give nice fixed image effect on page scroll.
• Full Screen Widget Height: This will force the widget’s height to be equal to device full screen height. However, use it only if content on this widget area can be displayed in full screen height without the need of scrolling (In other words, your content height shouldn’t not be greater than the height of the device screen).
• Widget Layout: Normally all widgets assigned to Front Page widget area are stacked on top of each other. You can change this behavior using this option. You can make 2,3 or 4 widgets side by side in single row. To better understand, lets say your have assigned four widgets to a Front Page area and selected to display 2 widgets in a row, then there will be two rows in that widget area, each will display two widgets in it.
• Widget Text & Link Color / Text Shadow: You can change widget text and link color and text shadow using these options. They are useful to make your text display better on chosen background image or color.
• Widget Text Alignment: Options to align widget text to left, right or center.
• Widget Area Content Width: You can change overall Front Page Widget area content width using this option. By default they are set to be full width
• Widgets Horizontal Alignment: When you change width of overall Front page Widget area content in previous option, that content will be center aligned by default. However you can align that content to left or right using this option.
• Widgets Vertical Alignment: this option allows you to align the content of widget to the top, bottom or middle.
• Widget Area Vertical Padding: you can adjust the height of the Overall Front Page widget area by increasing or decreasing vertical ( top and bottom ) padding of widget area.

WooCommerce Setup

Setting up a WooCommerce store is very straight forward with Stratum Theme. Stratum support WooCommerce out of the box. Stratum provide specific sidebars for WooCommerce Product archive and Product single pages. These widget areas will be visible on Appearance > Widgets once you activate WooCommerce plugin. Normal sidebar will not be visible on wooCommerce pages.

You can customize WooCommerce sidebar layout from Customizer > Theme Options > Layout. However, woocommerce layout customizer options will not be visible unless you first activate the WooCommerce plugin.

JetPack Portfolio

Stratum also supports the JetPack plugin portfolio functionality. Follow the steps below to implement JetPack portfolio properly.

1. Simply create your projects portfolio using JetPack.
2. Go to Pages > Add New to create a new WordPress page. OR you can use any existing page which has already been created.
3. On Single Page edit screen select “JetPack Portfolio Page Template” from template dropdown on Page Attributes tab.
4. Now this page will display grid of all your projects created with JetPack Portfolio feature.

Customizing Stratum

All of the options for Stratum are built right into the native WordPress Customizer. To start customizing the appearance and style of your site, navigate to Appearance -> Customize.

The Customizer options are shown side-by-side with a live preview of your website, allowing you can test the effect of changes in real time. To make changes, all you have to do is select each of the available options and edit their settings.

Once you’ve made the changes you want, you must click the Save & Publish button. Until you click Save and Publish, none of the changes are shown on the live website. This means you can experiment with making changes without your visitors seeing on the live website.

Colors

Stratum provides various options to customize the colors of several theme elements.

• Body Text Color: This option will change color of post content, header and footer menu items, site description, page navigation etc.
• Link Color: Change color of links except header & footer menus, site and post titles, pagination and navigation links.
• Link Hover Color: Change hover color of site links except site and post title links.
• Post Title Color: Change color of Post/Page titles (both linked and non linked)
• Post Title Hover Color: Change hover color of post titles.

Typography

Options to change theme typography.

• Body Font Family: Choose a Google font for the body text font (everything except HTML heading i.e., H1, H2 etc.)
• Heading Font Family: Change Google font family of HTML heading and site title (heading or not).
• Mobile Base Font Size: Base font size is the font size of the main content text of your site. Size of all other site elements will change proportionately. This option will change font sizes for mobile and tablet screen size only (when the screen size is less than or equals to 1024px).
• Desktop Base Font Size: This option will change font sizes for Desktop and Laptop screen size only (when the screen size is greater than 1024px).
• Base Line Height: Line height is a very important part in theme typography, it is an important factor in maintaining site’s vertical rhythm. You can change overall theme line height with this options. However, Line height of some of the components like, Blockquote etc. will remain unchanged with this option.

Layout

Options to change theme layout.

• Overall Site Layout: You can choose two different layout options – minimal or with a overall site background.
• Header Items Alignments: You can right, left or center align you header components like, Site branding (logo, title and description), Header menu and Header widgets. Center layout will vertically stack all items on one another. Default layout will be left aligned.
• Display Search Bar in Menu – this option adds a search icon at the end (right) of the menu items
• Footer Items Alignment : You can right, left or center align you footer components like, Footer menu, Copyright text and Theme credit. Default layout will be center aligned. Copyright text and theme credit will always stacked on one another irrespective of option selected.
• Make Main Menu Sticky On Scroll: You can choose to make main menu stick to the top of the screen as you scroll down the page (Main menu will stick on upper edge of browser content area on scroll). By default main menu will be sticky on scroll.
• Thumbnail Display Option: Various sites have different requirements for thumbnail layout display. With this option you can customize how featured images should be displayed on archive or index pages. You should use Regenerate Thumbnails WordPress plugin to properly resize all previously uploaded featured images(uploaded before Stratum theme was active). All image sizes and displays are self explanatory, however, smaller thumbnails will become full width large thumbnails on mobile/Tablet screen sizes, ensure using larger (minimum 640px wide) images for smaller thumbnails, so that they look good on all screen sizes
• Default Content Layout: Change overall content sidebar layout for your site.
  • Available layout options will be as per active sidebar widget areas.
  • If primary sidebar is not active(do not have any widget to display), only two options i.e., Overall Content(No Sidebar) and Overall content Full width will be visible.
  • If primary sidebar is active(have at least one widget assigned to it), Additional, Content-sidebar and Sidebar-Content option will become available.
• Different Layout for Posts / Pages:  You can choose to have separate layouts for (index/archive/search) and Single posts and Single pages. To do this, click on Different layout for posts/pages. Immediately you will see two additional options to choose separate layout options for single post and page. By default they will be same as Default layout.
  • You can choose to have different layouts for one individual post/page. On post edit screen, you will see layout options in right sidebar. Choose an appropriate layout. However, Different layout for posts/pages option must be checked. Otherwise global layout will be visible irrespective of option selected.

Dimensions

Change the overall site width, primary sidebar and secondary width.

• Overall Site Width: This option will change overall site width. Note: Overall site width will fallback to theme default site width if device screen size is less than chosen overall site width. Click on Reset icon to reset overall site width to theme default.
• Primary Sidebar Width: this will change the width of the primary sidebar. Main content width will be automatically adjusted to accommodate changed primary sidebar width. Obviously, this option will only work if primary sidebar is active.
• NOTE: Site widths are only applicable for desktop/laptop screen sizes (Screen size greater than 1024px)

Blog

Blog specific customization options,

• Excerpt or Full Content: You can switch between displaying post excerpt or full content on Home or Archive pages by choosing “Excerpt Or Full Content”. Note: if you have used More tag for individual post,
  • Only excerpt up to 40 (or up to customized excerpt length) will be visible. ‘Excerpt’ customizer option will supersede the more tag.
  • More tag will supersede ‘Full Content’ option. It means if ‘Full Content’ customizer option is selected and more tag is used for individual post, excerpt up to more tag will be shown.
  • If there is no more tag for a post, ‘Full Content’ or ‘Excerpt’ will be shown on home or archive page, based on customizer option selected.
• Excerpt Length: The “Excerpt Length” customizer option allows you to change the number of words to be shown as post excerpt on home, archive or search pages. Obviously, this option will not work if “Full Content” option is selected.
• Change Excerpt Read More Text: The options allows you to customize the read more text when displaying excerpts.
• Display Thumbnail Image on Single Posts: this option allows you to show or hide featured image on individual single posts and with “Full Content” display on home or archive pages.

Footer

Customize site specific Copyright text.

• You can change Copyright text using this option. This option will not take HTML characters. To write ‘©’ symbol just copy and paste this symbol in Copyright textbox.
• You can write multiple lines or paragraphs in this text box.