“Story WordPress Theme” Documentation by “Pexeto” v.1.0.1


Created: 22 May 2014
By: Pexeto
http://pexetothemes.com/

Thank you for purchasing Story theme. If you have any questions that are beyond the scope of this help file, please refer to the Support section. Thanks so much!


If you like this theme, please don't forget to rate it on the ThemeForest site. Thank you!



Table of Contents


  1. Getting Started
  2. Installing and activating the theme
  3. Useful instructions
    1. Options page
    2. Page Settings Section
    3. Setting a featured image to a post/page
  4. The header
    1. Changing the logo
    2. Setting the menu
    3. Setting the social network icons
    4. Header Title Section
    5. Changing the default background color and image
    6. Setting a sticky header
  5. The footer
  6. The sidebars
  7. Sliders
    1. Fullscreen slider
    2. Content Slider
    3. Fade Slider
  8. Template pages
    1. The Default Page
    2. Home Page - Full-width custom page template
    3. Home Page - Fullscreen slider page template
    4. Blog Page
    5. Portfolio Gallery Page
    6. Quick/Easy Gallery Page
    7. Contact Form Page
    8. Archive Page
  9. Elements
    1. Services Boxes
    2. Portfolio Carousel
    3. Recent Blog Posts Element
    4. Testimonial slider
    5. Call to action section
    6. Fade slider in page/post content
    7. Pricing Tables
    8. Social Sharing Buttons
    9. Accordion
    10. Tabs
    11. Sidebar Contact Form
    12. Other editor Formatting Buttons
  10. Changing the theme style
  11. Fonts
  12. Translation
    1. Creating a mo file with the translated strings
    2. Configuring your language locale
  13. WooCommerce Support
  14. Plugins included
  15. CSS files
  16. JavaScript files
  17. Image resources
  18. PHP files
  19. Troubleshooting
  20. Support
  21. Updates
    1. Version 1.0.1

Note: If you have any questions that are beyond the scope of this help file, please refer to the Support section.


1. Getting Started


If you are new to WordPress

Although building a website with WordPress is significantly much easier than coding it by yourself, if you are a beginner, even working with WordPress may be difficult to you. That's why, in this section we will provide some useful links and also will explain how to get oriented in the documentation and what pattern to follow when building your website with our theme.
Please note that this documentation covers all the main settings for the theme, but it doesn't cover instructions about working with WordPress, as this is a very extensive topic. If you are new to WordPress, we would recommend to first get familiar with the WordPress system, so you can have at least basic knowledge about how it works and then proceed with setting the theme.


Working with WordPress - Useful Links

Working with the theme

Once you have some basic WordPress knowledge, you are ready to go with setting the theme. Here are some example steps about how you can do this:

  1. Install and activate the theme - read about how to do this in the Installing and activating the theme section.
    Having problems with installing the theme?
    » Refer to the "Fail to install the theme" subsection of the Troubleshooting section.
  2. Change your logo - learn how to do this in the Changing the logo section
  3. Create your basic menu - during the process of setting your theme, you will be changing your menu links all the time. However, it is good to start with having the main menu set. Learn how to set your menu in the Setting the menu section.
  4. Start with creating your content

    You can create all the content by creating your pages one by one. Here are some examples of what steps to follow when creating different pages:

    If you need a full-width custom home page:
    1. Go to Template pages » Home Page - Full-width custom page template section to learn how to create the page and how to add elements to it.
    2. You need to set a slider for that page? » Go to the Sliders section to read how to create a slider. After you have your slider created and populated with images, you have to select the slider you have created for the page (how to set the slider is explained in both the slider's section and the full-width custom page template section)
    If you need a Blog page:
    1. Go to Template pages » Blog page section to learn how to create a blog page, how to create posts to it and all the settings you can do for this page
    2. You need to set a slider for the blog? » Go to the Sliders section to read how to create a slider. After you have your slider created and populated with images, you have to select the slider you have created for the page (how to set the slider is explained in both the slider's section and the blog page section)
    3. You need a separate blog sidebar? » Go to the The sidebars section to learn how to create additional sidebars and how to add widgets to them. After you have created your sidebar, go back to the Blog page section to learn how to set the sidebar you have created to your blog page.

    Basically, these are the steps you have to follow - when you need to create a page, just go to its corresponding subsection of the Template pages section and read about how to create it and what settings you can do for the page. The main key about understanding how the theme works is to read the documentation we have provided carefully, as we have explained everything you need to know about the theme in here.

  5. Once you follow all these steps and have the basic theme setup, you can also check the rest of the sections of this documentation to read more about the other features that our theme provides.

We hope you will enjoy working with the theme!



2. Installing and activating the theme


There are 2 main ways to upload the theme:

  1. Via the built in WordPress theme uploader

    You can read the instructions about installing a theme via the WordPress uploader below, but you can also watch the "Installing a Pexeto Theme via WordPress Uploader" video here

    First you have to unzip the download file and find the zip file called thestory.zip. After this you have to go in the admin panel » Appearance » Themes, click on the Install Themes tab and then click on the "Upload" tab (located in the top section of the page). After you click the "Upload" tab, a new page will be opened where you will be asked to find the .zip file on your local file system.

    Note: Some servers have limited folder access settings applied and wouldn't allow uploading the theme trough the admin - in these case you have to upload the theme via FTP.
  2. Via FTP client

    You can read the instructions about installing a theme via FTP below, but you can also watch the "Installing a Pexeto Theme via FTP" video here

    If you know the FTP login details of the server where your site is hosted and you have a FTP client installed (such as FileZilla), you might consider using this way of uploading your theme. First you have to unzip the download file, find the zip file called thestory.zip, unzip it and upload the folder to the main WordPress installation folder » wp-content » themes. Please note that if you prefer this way of installation, you have to make sure that the main files of the theme are contained just within one folder of the themes folder. The right way to locate your root theme files is for example themes/thestory but not themes/thestory/thestory.

You can activate the theme after it is uploaded on the server. In order to activate this theme you have to go to the admin panel » Appearance » Themes. In this section you should see the theme with a title Story by Pexeto. Just click on the Activate button and your theme should get activated.

Minimal Theme Requirements:
-WordPress v.3.9 or greater
-PHP v.5.2.4 or greater


3. Useful instructions  back to top


a. Options page


When you activate this theme, an options page that contains global theme settings is created. This page is located in the admin panel » Story » Story Options.





b. Page Settings section


We have also added a custom settings section for the pages/posts where you can apply custom settings for each single page and post and these settings won't be applied globally to the theme. This settings section is located below the main content editor of the page/post opened it edit mode. For example, in the pages this section is called "STORY PAGE SETTINGS".



c. Setting a featured image to a post/page


In order to set a thumbnail (featured image) to a post/page, when creating/editing your post/page in the bottom of the right sidebar you will see a link "Set a Featured Image":

If you click on this link, a window will be opened where you can choose the image. When you select the desired image, you have to click on the "Set featured image" link.



4. The header  back to top


The header consists of four main elements:



a. Changing the logo



To change the logo image, you can either use your own existing logo image or edit the included logo PSD file - it is called logo.psd and is located within the PSD folder.

After you have your logo image, go to the Story Options » Header Settings » Logo section and select the logo image in the Logo Image section. If you would like to have a sharp logo image on retina displays, the image uploaded should be twice bigger than its display size - for example if the standard logo image size is 30x70 pixels, the image size of the uploaded image should be 60x140 pixels.
The default logo image width is 100 pixels and the height depends on the original image ratio. If you would like to apply custom width or height to the logo image, you can do this in the "Custom logo image width" and "Custom logo image height" fields.



b. Setting the menu



When you fisrt install the theme, the menu will contain all the pages created and it sets drop-downs when there is a parent/child hierarchy created within the pages. However, we would recommend building your custom menu by using the WordPress Custom Menus functionality, as it is more flexible and very easy to work with. To learn how to create a WordPress Custom Menu, you can follow the instructions below.

Here are the steps you have to follow in order to set the menu:

  1. Go to Appearance » Menus. To create the menu click on the "Create a new menu" link.
  2. After you create the menu, you can add Page, Category and custom links from the left sidebar. You can watch this video to tutorial to learn more about working with the WordPress Menus functionality.
  3. Then click on the "Manage Locations" tab section and select the menu that you have created in the "Story Theme Main Menu" field.
Setting a Mega Drop-down Menu

Here is an example of a mega menu:

By default all of the submenu items will be displayes as a standard drop-down menu. You can select which parent menu items will contain a mega menu in the Story Options » Header Settings » Mega Menu section:

If you don't see any menu items in this section, please make sure that you have assigned a custom menu in the Appearance » Menus » Theme Locations » Story Theme Main Menu (as explained above) and that you have added menu items to that custom menu.



The Mega Menu Structure

Once you enable a mega menu for a specific menu item, every direct submenu item of this menu item will form a column in the mega menu and the second level of submenu items will be the links displayed in the corresponding column. For example, the hierarchy of the mega menu on the screenshot above looks like this:




c. Setting the social network icons


To set the icons, you have to go to Story Options » Header Settings » Social Icons » section.

You can add the icons you like into the "Add a social icon" field:
1. Select the icon
2. Insert the link of the icon in the "Social Link" field
3. Insert a hover title (optional) - this title will be displayed when you hover the icon with the mouse
4. Click on the "Add Icon" field to add the icon

Note: Don't forget to click on the "Save Changes" button after you finish setting the Social Icons section.


d. Header title section


The title in the header section is displayed by default on all the pages (created from the Pages » Add New section). By default the title contains the default page title, if you would like to set a custom title you can do this in the Title Options » Custom Page Title section and you can set the header subtitle in the Title Options » Page Subtitle field of the page settings section.



Showing/hiding the page title

The page title is always displayed by default, there are two ways to set whether to show it or not:


e. Changing the default background color and image


You can set a custom background image and background color to the header section:

There are two ways to apply these settings:

You can also apply an overlay background to the header section to improve the readability and visibility of the menu links and the other elements, especially when using light images.

You can enable this overlay background in the Story Options » Header Settings » General » Set a dark transparent background to the top header field.


f. Setting a sticky header


The sticky header is enabled by default, you can enable/disable it in the Story Options » Header Settings » General » "Sticky Header" field. When enabled the header will be always displayed in the top section of the window, even after the user scrolls down the page.



5. The footer  back to top


The footer consists of three main sections:


Call to action section

The "Call to action" section looks like this:

All the settings for this section can be applied in the Story Options » Footer Settings » Call to action section:


Widgetized area

The widgetized area looks like this:

In the Story Options » Footer Settings » Footer Layout field you can select the layout for the widgetized area. You can either select the number of columns that this area will contain or you can disable the widgetized area by selecting the "No widgetized footer" option.

If you select to display a widgetized area, you can then go to "Appearance" -> "Widgets" to add widgets to the footer. If, for example you have selected a "Three columns" layout, in the Widgets section you will see three widget areas called "Footer Column One", "Footer Column Two" and "Footer Column Three". After this you can drag and drop widgets from the left to any of these three boxes.

You can learn more about working with WordPress widgets in this video tutorial.


Copyright and footer menu section

The copyright and footer menu section looks like this:


The copyright text section by default displays your blog name.

Setting the footer menu

Here are the steps you have to follow in order to set the footer menu:

  1. Go to Appearance » Menus and create a new menu. After you create the menu, you can add Page, Category and custom links from the left. You can watch this video to tutorial to learn more about working with the WordPress Menus functionality.
  2. To set the menu, click on the "Manage Locations" tab section and select the menu that you have created in the "Story Theme Footer Menu" field.



6. The sidebars  back to top


This theme supports multiple sidebars and they are all dynamic. This means that you can insert whatever widgets you like on them.

There is one default sidebar that goes to each of the pages. If you would like to have more sidebars than the default one, then you can create your new sidebars in Story Options » General » Sidebars section:

To customize your sidebars you have to go in the admin panel » Appearance » Widgets. In this section you will see your sidebars on the right part of the page. Now you can drag and drop widgets from the left into your sidebars. You can learn more about working with WordPress widgets in this video tutorial.
Here is an example of a sidebar:

You can assign a custom sidebar to each page in the "Page sidebar" field of the Page Settings section.


7. Sliders  back to top


a. Fullscreen Slider





In the following video you can see how to create a fullscreen slider and add it to a page. We have also included more detailed instructions below.





Adding slides

In order to add slides to this slider go to the Story » Fullscreen Slider section. For each slide there are different options that you can apply.





Slide Types

There are three slide layouts available: Text only, Text + Image and Image Slider. You can select the type in the Slide Type field



Changing the slide order

Once you add the images, you can change their order by dragging and dropping the image container to the desired place. After you change their order, in order the new order to be saved, you have to click on the "Save Order" button that would appear right above the images:




Adding the slider to a page

In order to add the slider to a page:

  1. Create a new page from the Page » Add New section or open an existing page in edit more.
  2. Set the "Fullscreen slider page" template to the page (In the Page Attributes » Template section)
  3. Select the fullscreen slider that you would like to show (the "default" slider will be set by default) in the "Select fullscreen slider" field of the page.


Creating additional sliders

You can create additional fullscreen sliders in the Story » Fullscreen Slider section by clicking on the "Add New Fullscreen Slider" button:


After you create a new slider you can select its name in the "Select fullscreen slider" field of the page.




b. Content Slider


The Content Slider looks like this:




In the following video you can see how to create a content slider and add it to a page. We have also included more detailed instructions below.





Adding slides

In order to add slides to this slider go to the Story » Content Slider section. For each slide there are different options that you can apply.


When you set all the slide data, just click on the "Add Item" button to add the slide.


Changing the slide order

Once you add the images, you can change their order by dragging and dropping the image container to the desired place. After you change their order, in order the new order to be saved, you have to click on the "Save Order" button that would appear right above the images:



Creating additional Content Sliders

If you would like to add a new slider with a different image set, you have to click on the "Add new Content slider" button located in the top section of the page and insert its name in the dialog box that will be displayed. After that a section for the additional slider images will be created so that you can set the new images to it.



Changing the slider options

You can change the default slider options such as setting automatic image resizing and changing slider speed in the Story Options » Sliders » Content Slider section.

Default/optimal image sizes:
- Main (side) image: 569px × 320px . The image height can be changed in the slider options section.
- Background image: There is no specific default/optimal size for the background image - by default the background image is always centered in the visible slider area and how it is displayed depends on the user's browser window size and the default image ratio. It is recommended to use images that are around 1000 pixels and not bigger than 1500 pixels in size, so that the page loads faster.


Adding a slider to a page

You can select the name and type of the slider that you would like to display in a page in the "Page Slider/Header" field of the page settings section (located below the main content editor)



c. Fade Slider


The Fade Slider looks like this:


Adding images

In order to add images to this slider you have to go to the Story » Fade Slider section. All you have to do is to upload the selected image (or add its URL), fill the fields with the data you would like to display in the slider and press the "ADD" button. After that the image is automatically saved for the slider.

Changing the image order

Once you add the images, you can change their order by dragging and dropping the image container to the desired place. After you change their order, in order the new order to be saved, you have to click on the "Save Order" button that would appear right above the images:



Creating additional Fade Sliders

If you would like to add a new slider with a different image set, you have to click on the "Add new Fade slider" button located in the top section of the page and insert its name in the dialog box that will be displayed. After that a section for the additional slider images will be created so that you can set the new images to it.



Changing the slider options

You can change the default slider options such as setting automatic image resizing and changing slider speed in the Story Options » Sliders » Fade Slider section.

Default crop image size: 1500px × 550px . The image height can be changed in the slider options section. Please note that although the images are set in static crop sizes, their display size depends on the browser window size, as the slider is always as wide as the window.


Adding a slider to a page

You can select the name and type of the slider that you would like to display in a page in the "Page Slider/Header" field of the page settings section (located below the main content editor)




8. Template Pages  back to top



a. The Default Page


When you create a new page from the Pages » Add New section, the "Default Template" is assigned to the page by default. The default page template is a standard page template that can be with a sidebar or full-width layout and can contain custom content.

Setting the page layout

For this page you can select the layout to be Right Sidebar, Left Sidebar or Full Width. You can do this by setting the custom field Page Layout of the page:


Selecting a sidebar

By default this page template uses the Default Sidebar. If you would like to use another sidebar, you can create one in the Story Options » General » Sidebars section and after that you can set the custom field Sidebar and select the sidebar that you have just created. To customize it you have to go to the Appearance » Widgets and find the selected sidebar. You can drag and drop widgets from the left into it.

Setting a slider to the page:

You can select the type of header on the page in the Page Slider/Header custom field of the page. In this field you can select between Fade slider, Content slider and None.

- If you select a slider, you can read about how to create and setup the slider in the Sliders section.
Applying a custom background color and background image to the page header

You can read about how to apply a custom background color and background image to the page header in the Changing the default background color and image section.


b. Home Page - Full-width custom page template


A page with full-width custom page template can look like this:


You can add many sections with different backgrounds and add different elements to all of them.

Creating The Page:
  1. Create a new page (Page » Add New)
  2. In the "Template" field (located in the right sidebar of the edit page section) select "Full-width custom page" template.
  3. If you would like to make this page a front page (to be opened by default when the site is visited) go to Settings » Reading » Front page displays » Select "A static page" and select the page that you have just created in the Front Page list:


Once you create the page, you will have a blank full-width page:

Creating a background full-width section

In order to add a background full-width section to the Home page, you can use the "Background Section" button:

When you click the button a dialog with various options will be displayed:

Here are examples of all the default style options for the background section:

Light Background Style
Light Background Style 2
Light Background Style 3
Dark Background
Dark Background Style 2

Additionally you can set a background image to the section in the "Background Image" field and select its opacity in the "Background Image Opacity" field:



In the following video you can see how a background section is added to the full-width page. The video also shows how to edit the background section, change the colors and add a services boxes set to the background section element.



Adding elements to the page content and the background sections

In addition to the standard content, there are also many different predefined elements that you can add, such as:

You can check the full list of elements and how to add them in the Elements section.



Setting a slider to the page:

You can select the type of header on the page in the Page Slider/Header custom field of the page. In this field you can select between Fade slider, Content slider and None.

- If you select a slider, you can read about how to create and setup the slider in the Sliders section.
Applying a custom background color and background image to the page header

You can read about how to apply a custom background color and background image to the page header in the Changing the default background color and image section.


c. Home page - Fullscreen slider page


Creating The Page:
  1. Create a new page (Page » Add New)
  2. Select the "Fullscreen Slider Page" option in the "Template" field (located in the right sidebar of the edit page section
Creating the slides

You can create the slides of the fullscreen slider in the Story » Fullscreen Slider section. You can read more about the slider options in the Fullscreen Slider section above.





d.Blog page


Creating The Page:
  1. Create a new page (Page » Add New)
  2. Select the "Blog Page" option in the "Template" field (located in the right sidebar of the edit page section
  3. If you would like to make this page a front page (to be opened by default when the site is visited) go to Settings » Reading » Front page displays » Select "A static page" and select the page that you have just created in the Front Page list:


Selecting a layout for the page

You can set the page layout in the "Page Layout" field of the page settings section:

You can choose between the following options:



Selecting a sidebar

By default this page template uses the Default Sidebar. If you would like to use another sidebar, you can create one in the Story Options » General » Sidebars section and after that you can set the custom field Sidebar and select the sidebar that you have just created. To customize it you have to go to the Appearance » Widgets and find the selected sidebar. You can drag and drop widgets from the left into it.



Excluding categories from the blog

You can exclude categories in the "Exclude posts from categories" field.

The categories that you uncheck will be excluded from the blog page.




Defining the number of posts on the blog

In the "Number of posts per page" field of the blog page settings section you can set the number of posts to display on that page.



Setting a slider to the page:

You can select the type of header on the page in the Page Slider/Header custom field of the page. In this field you can select between Fade slider, Content slider and None.

- If you select a slider, you can read about how to create and setup the slider in the Sliders section.
Applying a custom background color and background image to the page header

You can read about how to apply a custom background color and background image to the page header in the Changing the default background color and image section.



Setting advanced blog pagination

In order to have advanced pagination enabled on your blog page (as on the screenshot above) you have to install the WP-Pagenavi plugin. You can read more about how to do it the section Plugins included.



The blog posts

Selecting a format for the post

The posts support the following formats: Standard, Gallery, Video, Aside and Quote. The format can be selected in the "Format" section of the post:

Here is an explanation about each of the supported formats:

Hiding part of the content of the post with the "Read More" link:

Just before the text that you want to be hidden you have to click on the "Insert more tag" button (Alt+Shift+T):


Enabling threaded comments (with reply functionality):

In order to enable threaded comments, you have to go to Settings » Discussion and check the field "Enable threaded (nested) comments x levels deep"


Post Options

There is a blog posts option included in the Story Options » Post and Page settings » Blog Posts section. In this section you can set some options such as selecting the default single post layout, single post sidebar what info to display for the post (e.g. date, category, etc.).




e. Portfolio Gallery Page


The Gallery page looks like this

Main setup instructions

In this section are included the main steps you would have to follow in order to set this page, more options and settings are described in the "Other Gallery Page Options" section below.

Creating The Page:
  1. Create a new page (Page » Add New)
  2. Select "Portfolio Gallery" in the "Template" field (located in the right sidebar of the edit page section
  3. If you would like to make this page a front page (to be opened by default when the site is visited) go to Settings » Reading » Front page displays » Select "A static page" and select the page that you have just created in the Front Page list:


Creating the portfolio/gallery items (adding images to the gallery)

Each of the images in the gallery represents a single Portfolio Item. For each of the portfolio items:
  1. Creating new items
    You can create a new item in "Portfolio" » Add New section. You can set the title in the "Title" field of the item.
  2. Add Images to the item
    1. Click on the "Add Media" button above the main content area of the portfolio item:
    2. Open the "Create Gallery" section. If you would like to upload new images click on the "Upload Files" tab and upload the images. If you would like to add existing Media Library images, click on the "Media Library" tab and select the images you like. After you select the images, click on the "Create a new gallery" button.
    3. After this when you click on each image in the gallery, in its Caption field you can set a description to it. You can also change the default image order by dragging and dropping the images on different positions.
    4. When you finish editing the images Click on the "Insert Gallery" button. This will insert a gallery object into the content section of the portfolio item.
    5. Later if you would like to edit the images, click on the gallery object and click on its "Edit Gallery" button:
  3. Setting the thumbnail of the item

    By default the first image of the images you have added will be used as the item's thumbnail. If you would like to set another image as thumbnail, you have to set it as featured image to the item. You can read about how to set a featured image here.

    As the images uploaded would be bigger, the thumbnail image will be resized automatically to the size in which it should be displayed. However, if you prefer to use your custom thumbnail image, you can set it in the "Custom Thumbnail URL" field of the item.

  4. Selecting the type of the item

    Each portfolio item supports different formats in which it can be displayed. You can select the type of the item in the "Item Type" field:

    Here is an explanation for each of the item type options:

    • Slider with side description / Full-width slider
      These two options display the same type of content, but in a different layout. The slider with side description displays a slider of images and a description on the side and the full-width slider displays a full-width slider with a description located below it:
      Slider with side description
      Full-width slider

      You can read about how to add the images to the slider in the "Add images" section above.

      The slider description is the actual post content - the content that you insert in the portfolio post content editor area will be displayed as a description to the item.

      Slider options

      You can change the default slider options in the Story Options » Slider Settings » Portfolio Slider section. In this section you can select whether the images to be automatically resized or not and select whether to display a related projects carousel below the slider and you can also customize the default carousel options.

    • Lightbox

      If you select this option the images of the item in the Grid Gallery will be displayed lightbox:


      With this type selected, the single portfolio item page will automatically include a Quick gallery with option to open the images in lightbox. Setting a single preview image per item

      By default the lightbox items are designed to display albums of images - each items displays a set of images in the lightbox. However if you would like to have only one preview image per item and have all the lightbox images in the gallery page related in a group, so that when you click on the first item's image and then click on the "Next" arrow of the lightbox, the second item's image will be displayed, you can enable the "Make lightbox items preview images related to each other" option in the gallery page settings section.

    • Standard Page

      The item will be displayed in a standard page format. In the Story Options » Post and Page Settings » Portfolio Posts section you can select the layout and sidebar for the page.

    • Video with side description / Full-width video

      Displays a video either in a full-width layout or with a side description. You can set the video URL in the "Video URL" custom field of the portfolio item. The theme uses the WordPress [embed] shortcode to insert the video, you can see the supported formats on the WordPress Embeds page. We have also included support for Flash videos (with .swf extension).

    • Custom Link

      The item will be linking to a custom link that you have set in the custom field "Custom Link URL" of the item


Ordering the items in the gallery

You can select how the items will be ordered in the "Order items by" and "Order" fields of the gallery page settings section:

The default options are set to order the items by date in a descending order. This means that the newest items will be displayed first. You can also select the items to be ordered by "Custom order". In this case, you can set an order number to the portfolio item in its "Order" field. We have also created a Portfolio » Custom Order page where you can easily drag and drop the portfolio items to reorder them:



Other Gallery Page Options

The gallery page includes some customization options in its settings section which is located below the main content editor of the page.




f. Quick/Easy Gallery page


This is the default WordPress image gallery - the purpose of this gallery is to insert multiple images at once - you can very quickly create multiple galleries just for several minutes. Here is how the gallery looks like:


In order to create a quick gallery you have to:

  1. Create a new page (you don't have to set a page template to it)
  2. Click on the "Add Media" button above the main content area:
  3. Open the "Create Gallery" section. If you would like to upload new images click on the "Upload Files" tab and upload the images. If you would like to add existing Media Library images, click on the "Media Library" tab and select the images you like. After you select the images, click on the "Create a new gallery" button.
  4. After this when you click on each image in the gallery, you can set a caption that will be displayed below the image thumbnail in the "Caption" field and also you can set a description that will be displayed in the lightbox preview in the "Description" field of the image.
  5. Use the "Gallery Settings" section to change the gallery settings:

    In the "Link to" select "Media File" and in the "Gallery Columns" field select the number of columns you would like to display.
    Click on the "Insert Gallery" button.
Gallery Options

The quick gallery options section can be found in Story Options » Media Settings » Quick Gallery section. For the different post types (post / page / portfolio) you can enable/disable the masonry layout and if the masonry layout is disabled you can set a default static height to the thumbnail images.


g. Contact Form page


The contact form page looks like this:



This page contains an AJAX contact form which visitors of your website can use to contact you.

To make one page contain a contact form you have to do some settings. When you create (or edit) your page, you should find the field Template and in it to choose the Contact form page option. After that immediately your page will contain a contact form.

Setting your e-mail address

You can set the e-mail address to which to send the messages in the Story Options » General Settings » Contact Form section.

Setting CAPTCHA

Having CAPTCHA enabled for your form will prevent sending spam emails by robots, just by printing an image with text and asking the user to fill the text from the image.


We have used the reCAPTCHA service. In order to enable reCAPTCHA for the theme you have to do the following settings:

Setting the page layout

For this page you can select the layout to be Right Sidebar, Left Sidebar or Full Width. You can do this by setting the custom field Page Layout of the page:


Selecting a sidebar

By default this page template uses the Default Sidebar. If you would like to use another sidebar, you can create one in the Story Options » General » Sidebars section and after that you can set the custom field Sidebar and select the sidebar that you have just created. To customize it you have to go to the Appearance » Widgets and find the selected sidebar. You can drag and drop widgets from the left into it.

Setting a slider to the page:

You can select the type of header on the page in the Page Slider/Header custom field of the page. In this field you can select between Fade slider, Content slider and None.

- If you select a slider, you can read about how to create and setup the slider in the Sliders section.
Applying a custom background color and background image to the page header

You can read about how to apply a custom background color and background image to the page header in the Changing the default background color and image section.


h. Archive page


The archive page displays an archive of the blog posts by category, month and a list with the posts.

To create an archive page you have to create a new page (Page » Add New) and select the "Archive" option in the "Template" field of the page (located in the right sidebar of the edit page screen)

Setting the page layout

For this page you can select the layout to be Right Sidebar, Left Sidebar or Full Width. You can do this by setting the custom field Page Layout of the page:


Selecting a sidebar

By default this page template uses the Default Sidebar. If you would like to use another sidebar, you can create one in the Story Options » General » Sidebars section and after that you can set the custom field Sidebar and select the sidebar that you have just created. To customize it you have to go to the Appearance » Widgets and find the selected sidebar. You can drag and drop widgets from the left into it.


Applying a custom background color and background image to the page header

You can read about how to apply a custom background color and background image to the page header in the Changing the default background color and image section.



9. Elements  back to top


a. Services boxes


There are 4 styles of services boxes included. Here are some examples:

Default style
Thumbnail style
Boxed Photo style
Icon style


In the following video you can see how to create a services boxes set and add it to the page. We have also included more detailed instructions below.





Creating Services Boxes

You can create the services boxes in the Story » Services Boxes section.

By default there is a "Default" services boxes set created where you can add the boxes. For each box you can add a Title, Image, Link and Description:

You can create many different services box sets and include them in different sections of the pages and posts. To create a new Services boxes set just click on the "Add New Services Box Set" button in the top right section of the window.




Adding the Services Boxes to the page

In order to add a services boxes set to a page/post, just click on the "Insert Services Boxes" button from the editor buttons:

Then a dialog will be displayed where you can set the options for the services boxes set:

In this dialog you can set:

b. Portfolio Carousel


The portfolio carousel displays a set of portfolio items. You can read about how to create portfolio items and all the options that you can set to them in the "Creating the portfolio/gallery items" section of the Portfolio Gallery template section.

You can insert a carousel anywhere in the content of your pages or posts by using the "Insert Portfolio Carousel" button of the editor buttons:

In the dialog that will be opened you can choose the portfolio category to display, set a title and setup the ordering options. The carousel will be added as a shortcode in the content of the post/page.




c. Recent Blog Posts Element


The recent blog posts element supports two main layouts:

Column layout - 2, 3 or 4 columns:


List layout:

You can insert the blog posts element anywhere within the content of the pages or posts, by using the "Recent Blog Posts" button of the editor buttons:


Creating a Featured Posts section

You can create a Featured Posts section by following these steps:



d. Testimonial Slider


Creating the testimonials

You can create the testimonials in the Story » Testimonials section.

By default there is a "Default" testimonials set created where you can add the your testimonials.

You can create many different testimonial sets and include them in different sections of the pages and posts. To create a new testimonials set just click on the "Add New Testimonials Set" button in the top right section of the window.




Adding the testimonial slider to the page

You can insert a testimonial anywhere within a page/post by using the "Testimonial Slider" button of the content editor buttons



In the "Select testimonials set" field you can select a specific set of testimonials to show on the testimonial slider.





e. Call to action section


You can insert a call to action section anywhere within a page/post by using the "Circle call to action section" button of the content editor buttons



Please note that this circle is with a static size and it is designed to fit short titles only.




f. Fade Slider in page/post content


You can insert a Fade slider anywhere within a page/post by using the "Insert Fade slider" button of the content editor buttons



If you insert a Fade slider into the content of a Full-width custom page template, the slider will be displayed in a full-width size, for the rest of the pages and posts, the slider will be set to fit the width of the content container element of the page/post.

You can create different sliders within the Story Options -> Fade Slider section. You can learn more about creating sliders in the Fade Slider section.

You can also apply different options such as image cropping, animation settings, etc. in the Story Options -> Slider Settings -> "Fade Slider" section.




g. Pricing Tables


Creating the Pricing Tables

You can create pricing tables in the Story » Pricing Tables section.

By default there is a "Default" Pricing Table set created where you can add your Pricing Table items.

When adding a pricing table item you can make it highlighted by checking the "Highlight" option.

You can create many different pricing tables and include them in different sections of the pages and posts. To create a new Pricing Table just click on the "Add New Pricing Table" button in the top right section of the window.




Adding the pricing table to the page

You can insert a pricing table anywhere within a page/post by using the "Pricing Table" button of the content editor buttons



In the "Select a pricing table" field you can select a specific Pricing Table to show.

In the pricing table dialog you can also select the number of columns to set to the pricing tables and a custom highlight color.




h. Social Sharing Buttons


The theme includes sharing buttons for the main social network sites: Facebook, Twitter, Google+ and Pinterest . These buttons can be enabled on posts, pages, portfolio posts and portfolio post sliders.

You can configure the how and where the buttons will be displayed in the Story Options » General Settings » Social Sharing section.




i. Accordion


The Accordion looks like this:

You can add an accordion by using the Accordion shortcode:

		[accordion][apane title="First Pane"]Pane One Content[/apane] [apane title="Second Pane"]Pane Two Content[/apane] [apane title="Third Pane"]Pane Three Content[/apane][/accordion]
		
Note: Please make sure that all the shortcode tags are on the same line, but separated with at least a space, for example:

		... [apane]Tab One Content[/apane] [apane]Tab Two Content[/apane] ...
		




j. Tabs


You can add a tabs element by using the tabs shortcode:

		[tabs titles="Title One, Tab Two, Tab Three"][pane]Tab One Content[/pane] [pane]Tab Two Content[/pane] [pane]Tab Three Content[/pane][/tabs]
		
Note:Please make sure that all the shortcode tags are on the same line, but separated with at least a space, for example:

		... [pane]Tab One Content[/pane] [pane]Tab Two Content[/pane] ...
		




k. Sidebar Contact Form


The sidebar contact form looks like this:

You can insert this contact form in the sidebar or footer section just by using the WordPress Text widget and inserting the following shortcode into it:

		[contactform]
		
You can set the email to which to send the messages in the Story Options » Page Settings » Contact section.


l. Other editor buttons


In addition to the elements mentioned above, there is also a set of other editor element buttons, such as:




10. Changing the theme style


Changing the theme colors

You can change all the theme colors in the Appearance » Customize section.

In this section you can change all the main elements colors and you can preview the changes while selecting your colors:

Changing the accent color:

The accent color is the primary theme elements color, which is applied as background or text color to different elements, such as buttons color, elements hover color (e.g. arrows), pagination elements color, etc. You can change the default Accent Color in the General Color Settings » Accent Color section of the Theme Customizer panel:


Other style options

The rest of the Theme Customizer sections contain some general style settings, such as colors for the main header, content and footer areas.


Additional CSS Styles Section

If you would like to make CSS modifications to the theme's style, you can insert the additional CSS changes into the the Story Options » Typography & Styles » Additional Styles. It is recommended not to edit the style.css file, as this file will be reset to default once you update the theme and you will loose your CSS modifications. Another option to safely make CSS modifications is by creating a WordPress child theme. You can read more about creating child themes here.




11. Fonts  back to top


By default the theme uses the "Open Sans" (for the body text) and "Montserrat" (for the headings) Google fonts.

All the fonts settings can be applied in the Story Options » Typography & Styles » Fonts section.

This section provides an option to change the fonts for the main body font, headings and menu:

By default you can select between the standard web-safe fonts in the font options. However, you can also add custom Google fonts.

Adding Google fonts

You can browse the Google Fonts library here

In order to use Google Fonts, the field "Enable Google Fonts" should be set to "ON". You can add additional fonts in the "Add Google Font" section.

In the Font Name / Font Family you have to either insert the font name of the font or a font family.

In the Font URL field you have to insert the URL of the font file.


EXAMPLE

If you would like to use the Nobile font, click on the "Quick Use" button.

In the Font Name / Font Family field you have to insert the font family that Google Provides, in this case:
'Nobile', sans-serif

In the Font URL you have to insert the font file URL only (not the entire embed link), in this case:
http://fonts.googleapis.com/css?family=Nobile

After you click on the "Add Font" option, this font will be automatically added to the default theme font list where you can choose what fonts to apply to the elements




12. Translation  back to top


This theme is ready for translation - it comes with a .po file that contains all the embedded into the theme strings. The translation process consists of two main steps:




a. Creating a mo file with the translated strings


There is a file called default.po located in the lang folder within the main theme folder. You have to open this file with a program that can generate .mo files, such as PoEdit. Once you open it, you can insert the words in the additional language. Here is an example, with the file opened with PoEdit and the meanings of the words inserted into English:


In the same way you can insert the translations in the additional language. Once you save the document, a .mo file will be generated in the directory you specify. You have to rename this .mo file to the locale of the language used. For example, if this language is French, the name of the file should be fr_FR.mo. You can check a list with more language locales here: http://codex.wordpress.org/WordPress_in_Your_Language
After that, you have to insert this .mo file in the lang folder of the theme. Please note that if you save the .mo file within the lang folder of the theme, the lang folder will be reset when you install a theme update and that's why it is recommended to set the .mo files within a child theme:

Setting the .mo files within a child theme
If you have a child theme activated for the theme, it is recommended to save the .mo files within the child theme, as they will remain saved even after a theme update which replaces all the theme files. To do this you have to:

  1. Create a "lang" folder in your child theme folder and save the .mo files in that folder
  2. Go to Story Options » General Settings » Main and select the "Child Theme Folder" option in the "Load translation files from" field.

You can read more about child themes here

If you would like to change some of the theme strings, but still your default language to be U.S. English, you have to follow the steps above and name the generated .mo file en_US.mo




b. Configuring your language locale





13. WooCommerce Support  back to top


Story includes support for the e-commerce plugin WooCommerce. It registers a dedicated page template for the WooCommerce elements and applies custom styles to them.

Once you install WooCommerce you can change some of the default WooCommerce settings, such as number of products per page and set the single product page layout in the Story Options » WooCommerce section.

Additionally, for each page that the plugin generates (such as "Shop" page and "Cart" page), you can edit the corresponding page and apply the theme's settings to change the default layout, sidebars and header settings.



Product page recommended sizes

You can change the default image sizes in the WooCommerce » Settings » Products » "Product Image Sizes" section. We recommend the following sizes:

As instructed in the "Product Image Sizes" section, please make sure to regenerate the thumnails of the existing products after changing the default settings.




Please keep in mind that the theme doesn't change the way WooCommerce works, it only applies custom styles and layouts to its content. If you have any questions related with the WooCommerce functionality, please make sure to check the WooCommerce documentation and support forums.




14. Plugins included  back to top


The theme goes with some additional plugins included:

All the plugins are bundled with the theme zip file by default. When you activate the theme a message saying that the theme recommends these plugins will be displayed in the top section of the admin pages. You can either install the plugins you need or dismiss the message by clicking on the "Dismiss this notice" link.

If you decide to install any of the plugins later, you can access the recommended plugins page in the Appearance » Install Plugins section.

Note: The Contact Form widget that you see on the demo in sidebar section is not added via plugin, but with a shortcode. It is explained how to add a contact form in the Sidebar Contact Form section above.



15. CSS Files  back to top


The theme contains the following CSS files:

LESS file included

We have also included a style.less file which is the one that we have used to generate the style.css file, so if you would like to apply major modifications to the style of the theme, you may consider using this file to generate the style.css where all the main colors and sizes are declared as variables. The style.less file is located in the root folder of the theme.

The style.css file consists of the following main sections:

  1. CSS Reset
  2. Basic Typography
  3. Basic Document Structure and Styling
  4. Theme Colors & Stylings
  5. Widgets and Page Templates
  6. Elements
  7. Others
  8. Responsive And Media Queries
  9. Updates

You can check the full list with sections in the beginning of the file.

For each of the main parts of the website there are comments. For example, for the footer the comments look like this:
 
/*-------------------- MEDIA QUERIES --------------------*/ 
--media queries styles here--
 
Note: If you need to do some CSS changes, it is recommended to add the new styles into the Story Options » Styles Settings » Additional Styles section, rather than editing the style.css file itself, as these changes will be saved trough the updates of the theme.


16. Javascript files  back to top


The theme contains the following JavaScript files:


17. Image resources  back to top



Special thanks to all the great graphic resources to:
Images used on the demo:

18. PHP files  back to top


Apart of the main files needed for this theme to run, here are the other external PHP files used:

19. Troubleshooting  back to top


In this section you can check the most common issues and the solutions for them

  1. Fail to install the theme

    If you experience any problems with installing the theme, please check the following:

    • Please make sure you have installed the theme as described in the Activating the theme section
    • If you have used the WordPress uploader and can't upload the theme: as the theme is versatile and provides lots of options, its zip file is bigger than standard themes and some servers can't handle an upload with that file size. In this case you have to use an FTP client to upload the theme.
    • If you have used an FTP client to upload the theme:
      * make sure the theme main files (such as style.css and index.php) file are located just within one directory apart the wp-themes directory. The right way to locate your root theme files is for example themes/thestory but not themes/thestory/thestory
      * the problem you are experiencing may be related with the FTP client used - in this case you can try with another one- we recommend FileZilla FTP client.
    • Make sure you have WordPress 3.5 or higher installed
    • Make sure your server is running PHP version 5 or higher. Although when developing the theme, we have followed the main rules for cross-version compatibility, we have the possibility to test the theme on servers running versions higher than 5.0. If your server runs an old PHP version and you get any errors when installing the theme, you can contact the hosting support and ask them update PHP to a newer version.

  2. Contact form not sending emails

    Please refer to the Contact form not sending emails article

More troubleshooting articles

You may also consdier checking our Knowledgebase to search for frequently asked questions.


20. Support  back to top


We will do our best to assist with questions directly related to the theme set up, however please note that theme support is completely voluntary for ThemeForest authors. Therefore before you contact us, please consider finding an answer to your question in:

Note: If you have already explored all the sources of information stated above, and you are still experiencing problems with the theme set up, you can open a ticket with your question on the Pexeto Support Site.
'

21. Updates  back to top


You can install an update of the theme either automatically by using the built in the theme automatic update functionality or manually.

Installing the update automatically
Important: Please note that with the automatic theme update any code modifications done in the theme's code will be lost, so please make sure you have a backup copy of the theme files before you update the theme.
Important: The folder that contains the theme files must be called "Story" in order to automatically update the theme.

In order to use the automatic update functionality of the theme, first you have to go to Story Options -> General -> Theme Update section and insert your Envato Marketplace Username and Envato Marketplace API Key. The Envato Marketplace Username field should contain the username of the account you have used to purchase the theme on ThemeForest.
To obtain your API Key, you have to visit your "My Settings" page on any of the Envato Marketplaces (ThemeForest). You can get the API Key in the "API Keys" section of the "My Settings" page.

When a new update is released you should see a new menu item in Dashboard called "Story - New Updates". Please note that it may take several hours after the update is released to have it displayed, as the cache is refreshed periodically on several hours. When you open the "Story - New Updates" page you have to click on the "Automatically Update Theme" button and the theme will be automatically updated for you.

Installing an update manually

There are two main ways of installing an update manually:



a. Version 1.0.1


This update includes:




Once again, thank you so much for purchasing this theme! If you like it, please don't forget to rate it on the ThemeForest site.

Pexeto

Go To Table of Contents