OutLook – Doc’s

Please find the documentation of our OutLook theme. You could use the quick links below to get the doc you want easily.

Quick Start Guide

Before starting, make sure that you have WordPress 4.5 or higher installed & PHP 5.3 or higher running on your hosting server to use OutLook theme.

1. Install Theme

1.1 Using WordPress Dashboard:

Dashboard > Appearance > Themes > Add New > Upload theme > Choose file (zip) > Install & activate.

1.2 Using FTP Client:

  1. Access & navigate your web server to wp-content > themes (this folder contains all your themes) using a FTP client like FileZilla or any other you like.
  2. Download & Unzip OutLook theme.
  3. Upload the entire folder to the wp-content > themes directory in your web server using the FTP client.
  4. Login to your WordPress dashboard > Appearance > Themes.
  5. Click Install > Activate.

2. Install Plugins

Install the required plugins. After theme activation, you will see a notification above of your dashboard about it. Follow the steps from there to install those plugins.

3. Import Demo Data (optional)

Follow these steps to upload the demo content.

Importing Demo Data

Importing demo content is totally optional step. You should do this only if you want to import all the demo content from our demo site in order to give your site exactly the same look as Outlook Pro has. Make sure to install all required/recommended plugins before importing demo content. No images are included in the demo, instead you will get placeholders. Please follow the steps below.

  1. Go to Jetpack > Settings > Writing > Scroll down & find Custom Content Types Module > Enable it (Assuming you already have Jetpack activated & connected with your WordPress.com acount, if not see portfolio setup to know how.)
  2. Install & activate the One Click Demo Import plugin.
  3. Go to Appearance > Import Demo Data > Click Import Demo Data & wait to complete.
  4. Go to Settings > Reading > Set Home (imported by the demo content) as your static front page & save.
  5. Go to Appearance > Menu > Assign Home Primary (imported by the demo content) to the Home Primary Menu. (see header setup for more details)

After importing completed, you can remove the plugin (One Click Demo Import) as you don’t need it anymore.

General Settings

In this panel you will find some useful setting options for OutLook theme. See those option details.

1. Go to Appearance > Customize > General Settings.

  • Box/Wide layout: Choose to have box or wide layout.
  • Site Color: Theme color scheme option.
  • Preloader: Enable/disable Preloader.
  • Scroll top: Enable/disable scroll top.
  • Homepage menu target links: Use these target links for homepage menu for smoothly scroll to each section.
  • Font-awesome: Enable/disable font-awesome styles.
  • RTL: Enable/disable RTL ( right to left text).

Front page setup

In order to setup the front page you need to create a page first.

1.   Go to Pages > Add New

2. Give it a name (ex: Home) > assign this page to the Front Page template (find the template in your editor right side Page Attributes box ).

front-page-creation3. Go to Settings > Reading > Choose the page you have just created as your static front page (see screenshot below).

Front page creation

Note: You could leave the Posts page as it is. Setting up the blog page is optional, you do this if you want to display your blog posts on a separate page (not in your site homepage).

Logo / Favicon Setup

WordPress provides logo , site title & site icon (favicon) uploaders by default & OutLook fully supports them. Follow the steps below.

1. Go to Appearance > Customize > Site Identity

2. Add your logo (suggested: 250px width, 90px height), site title, & site icon (favicon).

3. Save & publish.

Note: By default site title will appear as your logo text, if you want to use an image logo then upload your logo through the logo uploader.

Header Setup

OutLook offers 5 different modern header styles. For integrating all those headers OutLook comes with 4 menu locations so that you could use the headers seamlessly. Please follow the steps below for each header setup instruction.

Menu Locations:

  1. Home Primary Menu: this menu will appear only on the front page custom template.
  2. Home Secondary Menu: this menu will appear only on the front page custom template. (works for only split & double headers)
  3. Global Primary Menu: this menu will appear throughout your site except the front page custom template.
  4. Global Secondary Menu: this menu will appear throughout your site except the front page custom template. (works for only split & double headers)

Note: The front page custom template is the page which should be your site home page. See how to setup front page.

 

1. Standard Header Setup

standard headera. Go to Appearance > Menus > Create a new menu

b. Give it a name (ex: home primary) > add menu items (see the note below) > check the Home Primary Menu checkbox > Save Menu.

c. Go to Appearance > Customize > Header Styles > Select Standard Header. ( Off-canvas: To display widgets in the off-canvas area for this header go to Appearance > Widgets > Off Canvas & add your widgets here.)

This setup is only for front page template (see front page setup), in order to display menu on other pages (for example blog listing page) you have to create a new menu & assign it to the Global Primary Menu location (read menu location details under header setup).

Note: Find the home page menu link targets in Appearance > Customize > General Settings.

2. Split Header Setup

Split HeaderYou need to create two menus in order to setup Split header.

a. Go to Appearance > Menus > Create a new menu

b. Give it a name (ex: home primary) > add menu items (see the note below) > check the Home Primary Menu checkbox > Save Menu. It will appear in left side of the logo.

c. Create another menu > Give it a name (ex: home secondary) > add menu items (see the note below) > check the Home Secondary Menu checkbox > Save Menu. It will appear in right side of the logo.

d. Go to Appearance > Customize > Header Styles > Select Split Header.

This setup is only for front page template (see front page setup), in order to display menu on other pages (for example blog listing page) you have to create two new menu & assign those to the Global Primary MenuGlobal Secondary Menu locations (read menu location details under header setup).

Note: Find the home page menu link targets in Appearance > Customize > General Settings.

3. Centered Logo Header Setup

centered logoa. Go to Appearance > Menus > Create a new menu

b. Give it a name (ex: home primary) > add menu items (see the note below) > check the Home Primary Menu checkbox > Save Menu.

c. Go to Appearance > Customize > Header Styles > Select Centered Logo Header.

This setup is only for front page template (see front page setup), in order to display menu on other pages (for example blog listing page) you have to create a new menu & assign it to the Global Primary Menu location (read menu location details under header setup).

Note: Find the home page menu link targets in Appearance > Customize > General Settings.

4. Box Header Setup

box headera. Go to Appearance > Menus > Create a new menu

b. Give it a name (ex: home primary) > add menu items (see the note below) > check the Home Primary Menu checkbox > Save Menu.

c. Go to Appearance > Customize > Header Styles > Select Box Header.

This setup is only for front page template (see front page setup), in order to display menu on other pages (for example blog listing page) you have to create a new menu & assign it to the Global Primary Menu location (read menu location details under header setup).

Note: Find the home page menu link targets in Appearance > Customize > General Settings.

5. Double Header Setup

double headerYou need to create two menus in order to setup Double Header.

a. Go to Appearance > Menus > Create a new menu

b. Give it a name (ex: home primary) > add menu items (see the note below) > check the Home Primary Menu checkbox > Save Menu. It will appear in right bottom header bar.

c. Create another menu > Give it a name (ex: home secondary) > add menu items (see the note below) > check the Home Secondary Menu checkbox > Save Menu. It will appear in right top header bar.

d. Go to Appearance > Customize > Header Styles > Select Double Header & add phone, email id.

This setup is only for front page template (see front page setup), in order to display menu on other pages (for example blog listing page) you have to create two new menu & assign those to the Global Primary Menu & Global Secondary Menu locations (read menu location details under header setup).

Note: Find the home page menu link targets in Appearance > Customize > General Settings.

Slider Setup

OutLook offers a featured slider on the front page where you could add unlimited slides using the drag & drop slide panels. Follow the steps below.

  1. Go to Appearance > Customize > Front Page > Featured Slider
  2. Add Slides
  3. Change slide settings if needed.

Note: You should add same size images for each slide. (2x image uploader is optional & for retina devices support. But it could cause site performance issue as they should be 2x size from the normal image.)

Slider setup

About us Setup

  1. Go to Appearance > Customize > Front Page > About
  2. Upload image, title & description.

Note: 2x image uploader is optional & for retina devices support. It could cause site performance issue as they should be 2x size from the normal image.

Services Setup

  1. Go to Appearance > Customize > Front Page > Services
  2. Add title & services.

Counter Setup

  1. Go to Appearance > Customize > Front Page > Counter
  2. Add section title, counters, background image & other settings.

Portfolio Setup

Make sure to install all the required/recommended plugins first. Jetpack is one of them which is one of the most popular WordPress plugin that provides tons of useful features for WordPress sites & OutLook is fully integrated with it. Follow the steps to setup portfolios.

1. Go to Jetpack > Settings > Connect jetpack with your WordPress.com account (it’s free & needed to use most of amazing features of Jetpack). If you don’t have an account already then create one.

2. Scroll down to find the Custom Content Types section & enable the portfolio option.

3. Go to Dashboard > Settings > Writing > Check Enable Portfolio Projects for this site & save changes.

4. Now you should see a new menu item called Portfolio is appearing in the dashboard menu. Add your portfolios there. Use same size featured image (Recommended size: 1200×800) for each portfolio to display them correctly on the frontend.

5. To configure portfolio display in frontend go to Appearance > Customize > Front Page > Portfolio > setup title, display type, column.

Note: (It’s totally optional & not needed to work with OutLook themeIt is possible to display portfolio content in a separate portfolio single page using the Jetpack portfolio shortcode. OutLook included with the single template for the portfolio in case if you want to in any way. Find the setting options for this page by going to Dashboard > Appearance > Customize > Portfolio.

Team Members Setup

  1. Go to Appearance > Customize > Front Page > Team Members
  2. Add section title, team members & team slide configuration.

Note: 2x image uploader is optional in member panel & for retina devices support. It could cause site performance issue as they should be 2x size from the normal image.

Parallax Image Setup

  1. Go to Appearance > Customize > Front Page > Parallax Image
  2. Add section title, description, button, background image & other settings if needed.

Note: 2x image uploader is optional & for retina devices support. It could cause site performance issue as they should be 2x size from the normal image.

Pricing Table Setup

  1. Go to Appearance > Customize > Front Page > Pricing Tables
  2. Add section title, description, tables & table skin ( light, dark & colored)

Testimonial & Faq Setup

Testimonials

1. Go to Jetpack > Settings > Scroll down & find Custom Content Types & enable Testimonials option. (You need to install & active the Jetpack plugin)

2. Go to Settings > Writing > Check Enable Testimonials for this site.

3.  Now you should see a new menu item called Testimonials in your Dashboard menu. Add your testimonials from there (Recommended featured image size: 80×80).

4. To configure frontend display Go to Appearance > Customize > Front Page > Add section title, description & configure testimonial slider if needed.

Faqs

Faqs is only avialable for the OutLook Pro version. See the steps below to add them.

1.  Go to Appearance > Customize > Front Page > Testimonials & Faqs

2.  Add Faqs ( Max 10 ).

Subscribe form Setup

The most popular MailChimp email markting tool you could use with OutLook Pro. Make sure to install & activate all the required/recommended plugins first.

  1. Go to Dashboard > MailChimp for WP ( You need to install & activate the MailChimp for WordPress plugin to see this option ).
  2. Connect your MailChimp account using your MailChimp API key by following the instructions there.
  3. Go to Dashboard > MailChimp for WP > Forms & paste this code in the form editor > Save Changes.
  4. Go to Dashboard > Appearance > Customize > Front Page > Subscribe > Add section title, description, background image & subscribe form shortcode that you got from step 3.

Front Page Blog Setup

Follow the steps below to configure front page blog section. Not that, these settings are only for front page blog section not the blog post listing or archive page. See Blog setup instead for that.

  1. Go to Dashboard > Appearance > Customize > Front Page > Blog
  2. Configure the options according to your needs such as section title, show posts, enable/disable options.

Note: Your latest posts will be appearing here.

Contact & Google Map Setup

Contact Form

Make sure to install & activate all the required/recommended plugins first.

1. Go to Dashboard > Contact > Add New ( Contact form 7 plugin need to be installed & activated ).

2. Give this form a name (ex: contact) > Paste this code in the form editor > Save. ( To configure the form properly in case you didn’t use this plugin before see the plugin official documentation ).

3. You will get a shortcode after saving your form (see screenshot below), Go to Dashboard > Customize > Front Page > Contact & Google Map > Add title & the form shortcode that you have just generated using the Contact Form 7 plugin & save.


Google Map

Follow the steps below to configure Google Map.

1.  Go to Google Maps > Put your address > get your map embed code ( find the share icon & click, click on Embed map & copy the code.)

2. Go to Dashboard > Customize > Front Page > Contact & Google Map > Google map embed code > Put your map code in the code editor & save.

Contact Info Setup

Follow the steps below to configure the contact info section.

  1. Go to Dashboard > Appearance > Customize > Front Page > Contact Info.
  2. Add your contact infos, background image from here.

Callout Action Setup

Follow the steps below to configure the Call To Action section.

  1. Go to Dashboard > Appearance > Customize > Front Page > Call To Action.
  2. Add your callout texts & button.

Note: If you disable callout from here, it will disappear from your entire site. Though you have the options to disable it on other pages like Blog listing, Shop & other pages separately.

Blog Setup

In this section you could configure your blog listing page setting such as blog layout ( right sidebar, left sidebar, no sidebar & fullwidth ), enable/disable post meta options, social links & some others.

You can add a title bar on all blog listing pages including archive, search etc pages.

  1. Go to Appearance > Customize > Blog > setup the options according to your needs.

Note: Default featured image size is 640×418.

Post Formats Setup

OutLook supports six different post formats such as Standard, link, video, Audio, Gallery & Quote. Follow the instructions below to use different post formats.

Quote Post: 

  1. Go to Posts > Add New > Select Quote from the format box (right side of your editor).
  2. Add description in the editor (visual mood).
  3.  Add your other contents such as title, category, tags etc if needed.
  4. Publish

Audio Post:

  1. Go to Posts > Add New > Select Audio from the format box (right side of your editor).
  2. Copy & paste your audio file url or other hosted url like soundclound in the editor(visual mood).
  3. Add your other contents such as title, category, tags etc if needed.
  4. Publish

Video Post:

  1. Go to Posts > Add New > Select Video from the format box (right side of your editor).
  2. Copy & paste your video url in the editor (visual mood).
  3. Add your other contents such as title, category, tags etc if needed.
  4. Publish

Link Post:

  1. Go to Posts > Add New > Select Link from the format box (right side of your editor).
  2. Add title & put a link in the editor (visual mood).
  3. Publish

Gallery Post:

  1. Go to Jetpack > Settings > Appearance > Enable Tiled Galleries & Carousel Modules. (You need to have Jetpack plugin installed & activated)
  2. Go to Posts > Add New > Select Gallery from the format box (right side of your editor).
  3. Add gallery images in the post editor (Add Media > Create Gallery). Read More about jetpack gallery.

Standard Post:

By default when you start writing a post it will assign to the standard post format & no actions required for this format.

404 Page Setup

To setup 404 page please go to Appearance > Customize > 404 Page.

WooCommer Setup

OutLook is fully supported by the WooCommerce plugin & provides some options to configure it’s look. You need to install & activate WooCommerce plugin in order to see this options. Follow the steps

  1. Go to Appearance > Customize > WooCommerce
  2. Setup shop layout, title bar etc.

Note: To add widgets in shop sidebar go to Appearance > Widgets > Shop Sidebar

bbPress Setup

OutLook is fully supported by the bbPress plugin & provides some options to configure it’s look. You need to install & activate bbPress plugin in order to see this options. Follow the steps

  1. Go to Appearance > Customize > bbPress
  2. Setup forum layout, title bar etc.

Note: To add widgets in forum sidebar go to Appearance > widgets > bbPress Sidebar.

Post, Page, Portfolio & Testimonial Options Setup

Post Options

You could add a title bar for each post separately using the post title bar options which you should see in the post editor page. See the option details below.

1.  Title On/Off: Disable or enable post title text.

2.  Title bar On/Off: Disable or enable title bar.

3. Title Bar Text: Texts to display within the title bar.

4. Text Color: Color for the title bar texts.

5. On/Off breadcrumb: Disable/enable breadcrumb for the post ( See breadcrumb setup ).

6. Background Image: Upload background image for the title bar ( 2x background is optional & for high DPI retina screens ).

7. Background size: Choose background size. Default is cover.

8. Padding Top/Bottom: Top & Bottom padding for the title bar. Default is 70px.

Page Options

You could add a title bar for each page separately using the Page Options options which you should see in the page editor page. This options will only work for Default Template. See the option details below.

1. Layout: Page layouts option (right sidebar, left sidebar, no sidebar, fullwidth)

2.  Title On/Off: Disable or enable page title text.

3.  Title bar On/Off: Disable or enable title bar.

4. Title Bar Text: Texts to display within the title bar.

5. Text Color: Color for the title bar texts.

6. On/Off breadcrumb: Disable/enable breadcrumb for the page ( See breadcrumb setup ).

7. Background Image: Upload background image for the title bar ( 2x background is optional & for high DPI retina screens ).

8. Background size: Choose background size. Default is cover.

9. Padding Top/Bottom: Top & Bottom padding for the title bar. Default is 70px.

Portfolio Options

You could add your project details such as client name, project date & some other information’s along with a title bar in portfolio single page ( portfolio single page title bar is an extra feature & is totally optional, so you could skip the title bar to setup. See the Note in portfolio setup section ).

Project Information:

Add your project informations such as client name, project date, project link etc.

Project Title Bar:

1.  Title On/Off: Disable or enable page title text.

2.  Title bar On/Off: Disable or enable title bar.

3. Title Bar Text: Texts to display within the title bar.

4. Text Color: Color for the title bar texts.

5. On/Off breadcrumb: Disable/enable breadcrumb for the page ( See breadcrumb setup ).

6. Background Image: Upload background image for the title bar ( 2x background is optional & for high DPI retina screens ).

7. Background size: Choose background size. Default is cover.

8. Padding Top/Bottom: Top & Bottom padding for the title bar. Default is 70px.

Testimonials Options

Add title, description, featured image & customer info.

Customer Info: Add your client position or designation or whatever you want.

Image Sizes

Default image size: 640×418

Portfolio Image size: 1200×800

Testimonial Image size: 80×80

Reorder Front Page Sections

Each front page section has enable/disable option in the customizer which you could use to enable or disable your desire sections. But if you want to do something more & want to reorder sections then you could do that by using a child theme.

Why I use child theme? Good question, using a child theme is highly recommended if you want to change or modify theme files. This way you never lose your changes when we send you theme updates. Read more about child theme.

Downalod outlook-pro-child theme first & follow the steps below.

  1. Open the file home-page.php in your preferrable text editor.
  2. Re-order the lines there according to your liking & save file. For example see the screenshot below.
  3. Install the child theme in same way you did for the parent theme (See quick start guide).

Translation

OutLook packed with a language file called outlook-pro.pot in the languages folder for localization. Follow the steps below to translate OutLook.

  1. Go to Dashboard > Plugins > Add New
  2. Search for Loco Translate plugin in the search field
  3. Click Install Now > Activate
  4. Go to Loco Template > Themes > Click on your theme > New Language
  5. Choose a language > Start Translating
  6. Translate each line > Save Changes
  7. Go to Dashboard > Settings > General > Site Language
  8. Change your site language & save.