Winston Theme Documentation

Version: 1.0 — by ThemeDsgn

First of all, thank you for choosing and purchasing our theme, Pixie. If you have any questions that are beyond the scope of this documentation, please feel free to contact us here

Theme Features

  • Support Latest WordPress
  • Responsive Design
  • Clean & Elegant
  • Easy to Install & Setup
  • WordPress Live Customizer
  • 2 Header Styles
  • 2 Navigation Styles
  • 6 Single Post / Article Layouts
  • 6 Blog Posts Layouts with 20+ Variants
    • Classic with Content
    • Classic with Excerpt
    • Grid
    • List
    • Classic then Grid
    • Classic then List
  • Post Formats: Standard, Image, Gallery, Audio, Video
  • 15 Predefined Accent Colors
  • Instagram Feed Images
  • Google Fonts
  • Widget Ready
  • Translation Ready
  • Posts Slider & Carousel
  • Social Sharing Buttons
  • Author Information Box
  • Child Theme & Demo Content (xml) Included
  • Built in Useful Custom Widgets
    • About Widget
    • Social Icons Widget
    • Posts Widget
    • Slider / Carousel Widget
  • Etc...

Installing Theme

Before installing the theme, you must have WordPress is installed on your server. To install WordPress to your server, please follow the instructions here: WPBeginner: How to Install WordPress

To install the theme:

  1. Please download the theme pack from ThemeForest
  2. Extract the file you've downloaded. On the extracted folder you will get:
    • Theme File (winston.zip)
    • Child Theme (winston-child.zip)
    • Documentation (docs)
    • Demo Content (demo-content.xml)
    • Widget Setting (widget-setting.wie)
  3. Log in to your WordPress
  4. From dashboard admin, navigate to Appearance → Themes → Add New → Upload Theme
  5. You will see upload form. Choose installable WordPress theme file (winston.zip) from the extracted folder and then click Install Now
  6. Please wait until theme file installed and you can activate it
  7. Done

Installing Plugins

After installing and activating Winston theme, you will see a nofitication to install plugins. The theme requires and recommends some plugins in order to provide all functionalities. The plugins are:

To install the plugins:

  1. After activating the theme, you will see notification like this screenshot:
  2. Please click Begin installing plugins
  3. You will redirected into Install Required Plugins page. Please tick all plugins, then on Bulk Actions dropdown, please select to Install, and then click Apply
  4. Then plugin will start installing, please wait until completed
  5. After all plugins installed, please click Return to Required Plugins Installer
  6. You will redirected into Install Required Plugins page. Please tick all plugins, then on Bulk Actions dropdown, please select to Activate and then click Apply
  7. Done

Importing Demo Content

Demo content (demo-content.xml) is included in theme download pack.

To import demo content:

  1. Log in to your WordPress website
  2. From dashboard admin, navigate to Tools → Import
  3. Choose WordPress and follow the installation instruction
  4. Wait until plugin installed and then click Activate Plugin & Run Importer
  5. You will redirected to Import WordPress page. Choose demo content file (demo-content.xml) from the extrated folder and click Upload file and import
  6. Tick Download and import file attachments
  7. Submit and wait until demo content imported
  8. Done

Creating Post/Article

Winston theme support 5 post formats:

  1. Standard
  2. Image
  3. Gallery
  4. Video
  5. Audio

To create a post:

  1. Log in to your WordPress website
  2. From dashboard admin, navigate to Posts → Add New
  3. You will redirected to Post Editor page. Fill the post title, write the content, choose post format, set featured image and other settings.
  4. There are six post layout options to display your content. You can choose one of them or use default by leaving this option
    • Layout 1: Left Sidebar
    • Layout 2: Right Sidebar
    • Layout 3: Fullwidth
    • Layout 4: Narrow
    • Layout 5: Alternative 1
    • Layout 6: Alternative 2
  5. Publish

Image Post Format

To create image post:

  1. Set post format to Image
  2. Set Featured Image

Gallery Post Format

To create gallery post format:

  1. Set post format to Gallery
  2. A new panel will appear: Image Gallery. You can add/upload images by clicking Add Media button

Video Post Format

To create video post format:

  1. Set post format to Video
  2. A new panel will appear: Video
  3. If your video is embedded from oEmbed sites support like YouTube and Vimeo, then copy and paste your video url to Video URL (oEmbed) field
  4. If your video is self hosted, then copy and paste your video file url to Self Hosted Video URL field

Audio Post Format

To create audio post format:

  1. Set post format to Audio
  2. A new panel will appear: Audio
  3. If your audio is embedded from oEmbed sites support like SoundCloud, then copy and paste your audio url to Audio URL (oEmbed) field
  4. If you audio is self hosted, then copy and paste your audio file url to Self Hosted Audio URL field

Setting Up Navigation Menu

This theme uses two menu locations: Main Menu & Mobile Menu.

To setup navigation menu:

  1. Log in to your WordPress website
  2. From dashboard admin, navigate to Appearance → Menus
  3. Enter Menu Name then click Create Menu
  4. Add menu item from the left panel (Pages, Posts, Custom Links, or Categories)
  5. After adding menu items, set Theme Locations from Menu Settings options
  6. Save Menu

Using Theme Customizer

This theme features WordPress Live Customizer for its customization panel. To access WordPress Customizer, please navigate to Appearance → Customize. There are some customizations can be done:

  • Site Identity
    setting up website title, tagline, upload logo, etc.
  • Colors
    setting up color/style, background color, etc.
  • Header
    setting up website header
  • General
    setting up general options like sidebar position, readmore text, archive layout, etc.
  • Post
    setting up post options like social sharing buttons, author info box, etc.
  • Footer
    setting up footer options like instagra, footer widgets, etc.
  • Typography
    setting up fonts
  • Social Profiles
    setting up social media profiles
  • Custom Scripts
    setting up custom styles & scripts
  • Background Image
    setting up background image

Site Identity

To customize site identity (title, logo, etc):

  1. From WordPress Customizer, please choose Site Identity
  2. To change website title, use Site Title
  3. To change website tagline, use Tagline
  4. To display tagline, tick Display Tagline?
  5. To change/upload your website logo, use Website Logo
  6. If you want to use text-based title and do not want to use website logo, tick Use website title? and you can change the font family, size, etc.

Colors

To customizer colors (color scheme, text color, background color, etc):

  1. From WordPress Customizer, please choose Colors
  2. To change style with predefined color, use Predefined Color
  3. If you want to use your own color style, tick Use my own colors then set colors from Text Color and Accent Color
  4. To change background color, use Background Color

Header

To customizer header:

  1. From WordPress Customizer, please choose Header
  2. To change header style, use Header Style
  3. To change header padding top and bottom, use Header Padding Top & Header Padding Bottom
  4. To change navigation menu style, use Nav Menu Style
  5. To change navigation menu color scheme, use Nav Menu Color
  6. To enable sticky (floating) navigation, use Enable sticky navigation
  7. To change menu anchor text (visible on mobile), use Menu Anchor Text
  8. To change follow anchor text (visible on mobile), use Follow Anchor Text

General Options

To customize general settings (sidebar positions, readmore text, etc):

  1. From WordPress Customizer, please choose General
  2. To set default sidebar position, use Default Sidebar Position
  3. To enable sticky (floating) sidebar, tick Enable sticky sidebar
  4. To exclude pages from search result, tick Exclude pages from search result
  5. To change Read More text, use Read More Text
  6. To change pre category text (it is something like "in...", "posted under...", "under...", etc), use Pre Category Text
  7. To change search form placeholder, use Search Placeholder Text
  8. To change sticky post status, use Sticky Post Status
  9. To change archive posts layout, use Archive Layout
  10. To change archive title you can use the following options:
    • Default Archive Title
    • Archive Title (Category Archive)
    • Archive Title (Tag Archive)
    • Archive Title (Author Archive)
    • Archive Title (Yearly Archive)
    • Archite Title (Monthly Archive)
    • Archive Title (Daily Archive)
    • Search Result Title

Post Options

To customize single post/article page:

  1. From WordPress Customizer, please choose Post
  2. To enable post navigation (next & previous post), tick Enable Previous & Next Post Pagination
  3. To enable social sharing buttons, tick Enable Social Share Buttons
  4. To enable author info page, tick Enable Author Info
  5. To enable related posts section, tick Enable Related Posts
  6. To change Previous Post text, use Previous Post Anchor
  7. To change Next Post text, use Next Post Anchor
  8. To change author info title, use Author Info Title
  9. To change related posts title, use Related Posts Title


Typography

To customize typograhy (font family, font size, etc):

  1. From WordPress Customizer, please choose Typography
  2. To change default font:
    • Font family: use Default Font
    • Font size: use Default Font Size
  3. To change nav menu font:
    • Font family: use Nav Menu Font
    • Font size: use Nav Menu Font Size
    • Letter spacing: use Nav Menu Letter Spacing
    • Text transform: use Nav Menu Text Transform
  4. To change heading (h1 - h6 including post title) font:
    • Font family: use Heading Font
    • Font weight: use Heading Font Weight

Social Media Profiles

To customize social media profiles (facebook, twitter, google+, etc):

  1. From WordPress Customizer, please choose Social Profiles
  2. There are some social media fields. Please fill each field with your social profile url, or simply leave it blank to disable.

Custom CSS & Javascripts

To add custom script (css or javascript):

  1. From WordPress Customizer, please choose Custom Scripts
  2. To add custom css code, use Custom CSS
  3. To add custom javascript code, use Custom Javascript

 

N O T E

If you are using WordPress 4.7, you can add your custom css under Additional CSS section from WordPress Customizer.


Background Image

To set background image:

  1. From WordPress Customizer, please choose Background Image
  2. To upload background image, use Background Image

Setting Up Posts Slider / Carousel

The theme features posts slider/carousel section. To setup posts slider/carousel:

  1. Log in to your WordPress
  2. From dashboard admin, navigate to Appearance → Widgets
  3. Add ThemeDsgn Posts Slider into Top Widgets Area (Homepage).
  4. There are some settings to adjust:
    • Set number of posts
    • Set category: if you want to query the posts from specific category
    • Set tag: if you want to query the posts from specific tags
    • Set posts order
    • Set slider style
    • Set slide transition
    • Set autoplay

Setting Up Homepage

The theme comes with 7 blog posts layouts and more than 20 variants:

  1. Classic with Content
  2. Classic with Excerpt
  3. Grid
  4. Grid 3 Columns
  5. List
  6. Classic then Grid
  7. Classic then List

By default, homeage is displayed in Classic with Content layout. To change homepage with other layout:

  1. Log in to your WordPress
  2. From dashboard admin, navigate to Pages → Add New
  3. Set page title and leave the content empty
  4. Set page layout. There are four layouts:
    1. Left Sidebar
    2. Right Sidebar
    3. Fullwidth (Wide)
    4. Fullwidth (Narrow)
  5. Set page templates
  6. Publish

Then, assign your published page as homepage:

  1. From your WordPress dashboard admin page, navigate to Settings → Reading
  2. On Front Page Displays set to A Static Page and set Front Page with your published page.
  3. Save changes

Setting Up Sidebar

This theme features six widget areas.

  • Default Sidebar: primary sidebar, visible on all pages
  • Top Widgets Area (Homepage): widget area that located before content section, visible on homepage
  • Bottom Widgets Area (Homepage): widget area that located after content section, visible on homepage
  • Footer Widgets Area 1: 1st column footer widget
  • Footer Widgets Area 2: 2nd column footer widget
  • Footer Widgets Area 3: 3rd column footer widget

This theme also features 4 useful custom widgets.

  • ThemeDsgn About: to display profile widget
  • ThemeDsgn Posts Section: to display posts with thumbnail
  • ThemeDsgn Posts Slider: to display posts slider/carousel
  • ThemeDsgn Social Icons: to display social media links with icon

To setup sidebar:

  1. Log in to your WordPress
  2. From your dashboard admin, navigate to Appearance → Widgets
  3. Add widgets to sidebar. Here are some screenshot of sidebar settings.

Importing Widget Sample Setting

We have include widget sample setting in theme download pack. It's called widget-setting.wie To import widget setting:

  1. Log in to your WordPress
  2. Make sure you have install Widget Importer & Exporter plugin
  3. From dashboard admin, navigate to Tools → Widgets Importer & Exporter
  4. Under Import Widgets section, choose demo widget setting (widget-setting.wie)
  5. Click Import Widgets
  6. Done

Setting Up Instagram

The theme uses Instagram Feed plugin to display Instagram feed images. To install the plugin, please follow instruction here: Installing Plugins.

To setup Instagram Feed plugin:

  1. Log in to your WordPress
  2. From dashboard admin, navigate to Instagram Feed
  3. Choose Configure tab
  4. Click Instagram - Log in and get my Access Token and User ID After authenticating to your Instagram, you will get information about your Access Token and User ID like above screenshot. Please copy and paste your access token and user id in the provided fields.
  5. Save Changes

Displaying Instagram Feed

To display instagram feed on sidebar:

  1. From dashboard admin, navigate to Appearance → Widgets
  2. Add Text Widget into Default Sidebar
  3. Add Instagram Feed shortcode in textarea. Here is an example of the shortcode used in demo website: [instagram-feed num=9 cols=3 showheader=true showbutton=false showfollow=true imagepadding=1 disablemobile=true]

    If you want to display image feed from another user id, then simply add id=YOUR_USER_ID something like this:

    [instagram-feed id=YOUR_USER_ID num=9 cols=3 showheader=true showbutton=false showfollow=true imagepadding=1 disablemobile=true]

Displaying Instagram Feed on Footer

To display Instagram feed images on footer, please follow the instruction here: Setting up Footer

Setting Up Contact Page

To setup contact page:

  1. Log in to your WordPress
  2. Make sure you have install and activate Contact Form 7 plugin. To install the plugin, please take a look the documentation here: Installing Plugins
  3. If Contact Form 7 plugin has activated, then navigate to Contact → Contact Forms
  4. There is default contact form, please copy the shortcode.
  5. Create a new page: Pages → Add New
  6. Set the page title and paste shortcode in the page editor.
  7. Publish

Updating Theme

To update the theme:

  1. Please download the latest theme update from ThemeForest and extract zipped file you've downloaded. You will find latest theme update inside extracted folder.
  2. Log in to your WordPress
  3. From dashboard admin, navigate to Plugins → Add New
  4. Search this plugin: Easy Theme and Plugin Upgrades
  5. Please install and activate this plugin
  6. Once you have activate Easy Theme and Plugin Upgrades, then navigate to Appearance → Themes to install the latest theme.
  7. Click Add New → Upload Theme
  8. Choose latest update theme you have downloaded from ThemeForest
  9. Click Install Now
  10. Please wait, you will get report that theme installed and information about your old version theme
  11. Finish