Constructent

Welcome! First of all, we want to thank you for purchasing our Constructent WordPress Theme.

In the following sections, we will show you how to set up and use Constructent theme the easiest way possible. Although there’re a lot of things written in this documentation, the theme itself is not very hard to use. You can go to the Theme Options page and discover everything yourself. This file is more of a reference if you do not know what to do, or if you are not familiar with WordPress.

#FILE INCLUDED

The download package (.zip) that you get from ThemeForest contains the following files and folder:

• Constructent.zip: main theme file that needs to be uploaded to host to install the Constructent theme
• demo-content.xml: demo content file, which contains all pages and posts from live preview website. It will help you to have a first look at how we use Constructent theme
• docs.html: theme documentation (this file)
• theme-options.txt: theme option backup file. You’ll need this to restore the default theme options that setup for demo website.
• Plugins:
  – codecanyon-2751380-slider-revolution-responsive-wordpress-plugin.zip: Slider Revolution Responsive WordPress Plugin. Completed download package from Codecanyon.net. It’s FREE for you to use with Constructent theme
  – constructent-demo-import.zip: a plugin which helps you to import the demo content by just 1 click.
  – home-page-slider.zip: Demo slider that exported from our demo, but with placeholder images

#INSTALLATION

#Install Theme

We have written a very detailed guide on how to download and install a WordPress theme from ThemeForest, please follow the instruction in that article.

Also, please follow the guide to import the demo content if you want to have the site looks exactly like our demos.

In order to build the homepage the same as in the demo, you need to follow the instruction to create a static front page.

#Setup the top bar

The top bar has 2 parts: left and right. Each part is a widget area. In our theme, we support (and recommend) adding text, links or social links to the top bar only.

To setup the top bar, please go to Appearance → Widgets, and drag and drop a widget to Topbar Left or Topbar Right sidebar. In our demo, we use a text widget for the top bar left and [FitWP] Social Links for the top bar right. Here is the content for top bar left (contact info with social icon):

<div class="contact-font-icon">
<span class="contact-info phone-info"><i class="fa fa-phone"></i>+ 1 123 456 789</span>
<span class="contact-info email-info"><i class="fa fa-envelope-o"></i>info@fitwp.com</span>
<span class="contact-info time-info"><i class="fa fa-clock-o"></i>Sun - Sat ( 9 am - 5pm )</span>
</div>

You can use any HTML here. In order to add icons, please add the code from Font Awesome.

For other elements on the website such as Menu, Widgets, please just go to the corresponding section in the Appearance menu.

#THEME OPTION

The Constructent theme comes with unique, creative and easy-to-use Theme Options page. You can change all theme options in one place!

With Constructent’s advanced theme options panel, you can customize just about any part of your site quickly and easily. Every element on the site can have the color changed to your liking. Choose a color scheme for website, select fonts for all headings and body copy, change sizes, colors and line-heights of all fonts, select different footer column layouts, enable or disable several options, upload your own custom favicon, select from various site/page layouts, input custom CSS, set hundreds of other options to easily customize your site!

All options have the full description so you can know what you are doing. Just click and save!

Let’s go through each section.

#General

This sections contains:

• (1): favicon upload, allows you to upload favicon for you website
• (2): touch icon, allows you to upload icon for mobile devices and tablets
• (3): show comment on page
• (4): backup – restore, allows you to backup Constructent options and restore them later, or transfer the saved options between different installs.

Note: From WordPress version 4.3, you can setup favicon and touch icon in Appearance > Customize. The options (1) and (2) in theme is used if your website is running on older version of WordPress.

Here are the explanations of some options that can help you understand and use them better:

Favicon Upload

Favicon (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar (sometimes in the history as well) and next to the page’s name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab, and site-specific browsers use the favicon as a desktop icon.
This is how favicon appears

Constructent lets you upload favicon or enter favicon URL in the input box:

• If you have a favicon uploaded, or you store the favicon somewhere out of the Media Library, you can just put the URL of the favicon into the input box, or
• If you want to upload favicon for your website, click the upload button (the green one near input box) and upload it to Media Library as a normal image, then click Select.

The favicon should be in one of the following formats:.ico, .png, .gif Usually, we should use .ico.

When you’re done, you can click Save Changes button to save your data.

Touch Icon

Touch icons are the favicons of mobile devices and tablets. Each mobile devices and tablets have its own standards for displaying the touch icon (read this article to have a better understanding about touch icon and supported devices) and require various icon sizes. But for best compatibility and simplicity, an image with size 152×152 is enough.

To specify a touch icon for your website, just do the same as for favicon: you can either put the URL of the touch icon into the input box or upload the icon to Media Library.
The icon must be PNG image

When you’re done, you can click Save Changes button to save your data.

Show comments on page

This option allows you to show/hide comments and comment form on pages. By default, Constructent doesn’t display comments and comment form on pages.

Important: In case this option is set to “ON”, to display comments on pages, you still have to allow comments for pages when you edit pages.

By default, this checkbox is checked (meaning comments are allowed on pages). But in case you want to show comments on all pages, except some specific pages, you can use this checkbox to hide comments for those pages only.

Backup – Restore

Constructent allows you to backup theme options and restore them later. You can also transfer the saved options data between different installs.

To backup theme options, just copy the text inside the text box and save it into a file on your computer. To import data, replace the data in the text box with the one from the saved file and click Import Options button.

After clicking Import Options, Constructent will automatically setup all options and refresh the current theme options page, so you can see the options immediately.

#Design

This sections contains:

• Color Scheme: allows you to change color scheme of the whole website
• Layout: allows you to change layout style and layout for the whole website, for blog posts and pages
• Typography: allows you to change font family, styles, size, line height, color for body text and headings
• Custom CSS: allows you to add your custom CSS

#Color Schemes

Constructent theme has 5 predefined color schemes to choose from: yellow (default), red, orange, green and blue. When you change the color scheme of the theme, all links, button background and other elements will change their color or background accordingly.

The default color scheme is yellow, but you can select any from 5 colors here. After selecting, click Save Changes button to save your data. Now go to the frontend and check the colors of links, buttons, etc.

When you select Color Scheme section, you’ll see the following options:

(1): select built-in color scheme. These are 5 predefined color schemes. When you select one of them, your website elements will change color accordingly.

(2): enable/disable custom color scheme. This option allows you create a custom color scheme, and you can build unlimited color schemes here! Just enable this and you’ll see options below.

(3): primary color. This is primary color for your custom color scheme, used for links, overlay, button background on hover, badges, etc.

#Background

This section allows you to setup background for the whole site. But please remember, background only works with Boxed layout. (We will talk about layouts in next section)

When you select Background section, you’ll see the following options:

(1): background patterns. We have 5 predefined background patterns. They are repeatable images. You just need to select on of theme. If you don’t like any, you can use option (3).

(2): Background color. Pick any color you want to be the background color of the whole site.

(3): Background image. Upload any image you want to use, or you can pick it from the list of uploaded images.

(4): Background position in horizontal. You can leave it as the default of select either left, center or right.

(5): Background position in vertical. You can leave it as the default of select either top, center or bottom.

(6): Background repeat. You can leave it as default (repeat) or select either no repeat, repeat horizontally or repeat vertically.

(7): Background attachment. You can select either scroll or fixed. The default is the scroll.

#Layout

This section helps you to select which layout will be used in the whole website.

(1): select layout style for your website. You can select a boxed or wide layout.

(2): sidebar layout for the blog, single posts, and other archive pages. You can select sidebar position here: left, right or none (don’t display sidebar).

(3): sidebar layout for pages. Same meaning as for blog above.

(4): sidebar layout for WooCommerce pages. Same meaning as for blog above but only applied for WooCommerce pages: shop page, single products, product tag archive, product category archive.

Examples: sidebar left – sidebar right

These options is site-wide, meaning for whole website. But you still
can set custom layout for single post and page when edit (We’ll
explore it later).

By default: Constructent uses wide layout style with a right sidebar for both blog and pages.

#Typography

This section helps you to customize fonts for body text and headings on your website. For each element, you can customize:

(1): font family. Just select from the drop-down font family you like. Constructent supports 3 normal fonts (Arial, Verdana and Times).

(2): font size. Adjust font size for better look here. Just remember the unit for font size is px.

(3): line height. Adjust line height for better look here. The unit for line height is also px.

(4): font styles. You can choose bold, italic, underline or any combination of them.

(5): font color. Click on the button, a color picker will appear and you can now select any color.

Important: before customizing fonts, remember the default values for fonts. You should customize fonts around these values.

Element	Font Family	Font Size	Line Height	Styles	Color
Body Text	Ubuntu	14px	22px	None	999999
Heading 1	Ubuntu	45px	72px	None	261e4c
Heading 2	Ubuntu	36px	58px	None	261e4c
Heading 3	Ubuntu	30px	48px	None	261e4c
Heading 4	Ubuntu	24px	38px	None	261e4c

#Custom CSS

This section allows entering custom CSS that will be output in the “. This will overwrite CSS of theme, so please be careful!

Custom CSS is useful when you want to adjust small things for your website. If you have to adjust a lot of things in the website, please use Child Themes.

#Header

This sections contains:

(1): show or hide top bar. Turn on this option to show topbar.

(2): logo upload, allows you to upload the logo for your website. You can either put the URL of the logo into the input box or upload the logo to Media Library. The live preview of the logo will appear below the inputs.

(3): logo size. Specify logo size in px here. It will help you resize the logo to correct dimensions.

(4): logo margin. Specify logo margin in px here. This is useful when you upload the logo with a different size than recommended. You can move logo a little, adjust space to make it look good.

You should resize the logo to correct size in Photoshop or any image editor before upload. It will keep your logo not resized and small size.

(5): This option allow you to select the type of header. Available options:

• Normal: header displays normally.
• Absolute: header will display over the right bellow section.
• Sticky: header will always stays on the top of the screen when scrolling.

(6): If you select Absolute header style, this option will be appear. It allows you to upload an alternative logo image. This option will be useful when you have a light version of the logo. Because when header layout is set as absolute, its background will be a dark color.

(7): If you select Absolute header style, this option will appear. It allows you to set the background of the header to be transparent.

(8): Menu hover. Easily select hover effect for menu items.

(9): Turn it on if you want to show shop cart icon on your header, at the end of the menu. Remember your site have to install WooCommere plugin if you want to make it work.

(10): Turn it on if you want to show search icon at the end of the menu.

(11): header scripts. Enter scripts or code you would like the output to <head>. It can be:

• <link> tag for the custom font (from Google Fonts maybe)
• Any meta tag: to show the designer, copyright, etc. in meta tag
• Google Analytics code
• Any Javascript code that needs to be executed in <head>

If you want to put custom CSS here, you’re doing wrong. There’s a section for Custom CSS under Design, use it instead.

#Title Area

This section contains:

(1): Hide breadcrumb. Turn on this option if you don’t want to show breadcrumbs in the title area.

(2): Turn off parallax. By default, title area has parallax effect when you scroll website. Turn on this option if you don’t want that effect.

(3): Custom background. Upload background image for title area here. Title area only displays when has a background image.

#Blog

This section contains options which help you to change something about displaying posts archive pages (blog, category, tag, date)

(1): what type of post content will be displayed. Available options are Post excerpt, Post content or Post content before more tag.

To understand what those values mean, take a look at the screenshot bellow:

Where:

• (A): Whole post content, this is what you enter in the editor.
• (B): Post excerpt, which is optional hand-crafted summaries of your content. If you don’t enter anything in the excerpt box, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
• (C): The post content before more tag
• (D): The more tagReturn to blog option: if you choose
• Post excerpt: Constructent will get post excerpt and display it. Remember: if you don’t enter excerpts for the post, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
• Post content: Constructent will get whole post content and display it. This is the default value.
• Post content before more tag: Constructent will get only the post content before more tag and display it.

(2): post content limit. Sometimes you enter a very long text for post excerpt or post content, display such long text in blog and archive pages is not good and harm your website beauty. So we need a way to truncate text to make it shorter. This option is created for that purpose.

Simply specify the number of words will be displayed here. Post content or excerpt will be truncated to an exact number of words. You should try changing this value and preview your blog to see what is best for you.

The default value is 55 words.

Important: this option affects only when you NOT choose Post Content from the Display option above

(3): read more text. The default value is Continue reading.

#Footer

This section gives you options to customize footer area on your website.

(1): enable or disable footer widgets area.

(2): number of columns in the footer. It also is the number of footer sidebars (widget areas). The default is 3.

(2): copyright text. You can enter text, HTML, and shortcodes here. To make you easier to display copyright text, Constructent has default shortcodes that you can enter here:
– [year]: display current year
– [site_link]: display link to your website with text is the website title. For example, if you have a website at http://example.com and title Example, this will display a link like this:

html
<a href="http://example.com">Example</a>

– [bloginfo]: display blog information. This is the wrapper of bloginfo() function. Default it will display blog name (e.g. website title), but you can use it with parameter name to display more information, for example:
+ [bloginfo name="name"]: display blog name (default)
+ [bloginfo name="description"]: display blog description (tagline)
+ [bloginfo name="version"]: display WordPress version
+ [bloginfo name="rss2_url"]: display RSS2 feed link
+ [bloginfo name="home"]: display home link
+ For more value of name, please see bloginfo() function

(4): footer scripts. Enter scripts or code you would like output before </body>. It can be Google Analytics code or any Javascript code.

#Post/Page Display Settings

We’ve seen how to change featured title area, sidebar layout for the whole website. Constructent also supports customizing these things for specific pages.

When you edit a page, you’ll see this meta box below the content editor:

• (1): hide the title area. Select this box if you want to hide the title area on this page.
• (2): Custom Title. Sometimes you want to display different title instead of original page title, you can enter that title here.
• (3): enter subtitle here. Subtitle will be displayed bellow the page title in the title area.
• (4): change default title area’s background image.
• (5): select this box if you want to hide breadcrumbs on the current page.
• (6): whether to use custom page layout. If you check this box, you’re able to set custom layout style and sidebar layout below. If you don’t, the page will use default layout set in Theme Options.
• (7): custom sidebar layout. Choose custom sidebar layout for the page. If you don’t choose anything, Constructent will use default sidebar layout set in Theme Options.
• (8): you can enter custom CSS code here. It will be applied for current page only.

#Post Formats

Post Formats is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post.

In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.

Constructent theme supports the following post formats:

• gallery – A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider.
• link – A link to another site.
• image – A single image, which will be shown above post title.
• quote – A quotation.
• video – A single video, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed above post title.
• audio – An audio file, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed using a powerful HTML5 audio player – jPlayer.

Each post format will have an icon near post title which tells you what post format is. Using post format in Constructent lets you differentiate post from each other and make the blog page / single page looks more beautiful.

#Setup Post Formats

When you edit a post, select a format you want to apply to that post on the Format meta box on the right:

When you choose a format, a corresponding meta box will appear below the content editor, here’s the list of them:

All you need to do is just enter all information in fields in these meta boxes. This information will be used to decorate the post. For example, gallery post format will use uploaded images to show a slider above post title, a video post will display a video player above post title, etc.

#Page Templates

Constructent has some built-in page templates that can help you create special pages easier:

• Deals: template to display deal products.
• Homepage: template to display sections with normal products and deal products are inside.

When you edit a page, look at on the right, find Page Attributes meta box and select a template from the drop-down Template:

Width Homepage template, there’s no configurations at all. After select page template from the meta box on the right, you just need to save the page and see it in action in the frontend.

Width Contact template, after selecting it, you will see a new meta box appear. It contains options which allow you to enter contact information for the contact page.

#Widgets

Constructent plays nicely with default WordPress widgets. Besides that the theme has some additional widgets that might be useful for you:

#[FitWP] Flickr

This widget displays the list of photos which is got from a user or group on Flickr.

This widget has the following options:

• Title: widget title
• Flickr ID: this is ID (not username) of user or group on Flickr. You can go to http://idgettr.com to get the ID.
• Type: select type of above ID is User or Group
• Number of photos: how many photos you want to display
• Display: which photos you want to display, latest or random photos.
• Size: select size of photos

#[FitWP] Latest Tweets

Before you use this widget, you have to create a Twitter app. Following these steps:

• Go to https://apps.twitter.com/ and click Create New App button.

• Fill in all information needed for the app. The name and description can be anything, it does not have to be a certain name. You can leave the Callback URL field empty.
• After creating the app, go to API Keys tab then click Create My Access Token button at the bottom to generate the necessary codes. It usually take 10 – 15 seconds to generate these codes, you have to reload that page to see your code in Your Access Token section.

• Now you can copy the following fields for setting up Latest Tweets widget:
  • API key -> Consumer Key
  • API secret -> Consumer Secret
  • Access token -> Access token
  • Access token secret -> Access token secret

These fields will be used in the tweets widget.

Now go to your website admin area, then Appearance > Widgets, drag and drop [FitWP] Latest Tweets widget into a sidebar that you want it to show there. You’ll see these fields this:

(1): You also need to enter Cache time, which is the time your tweets will be temporarily stored in WordPress cache,

(2): Twitter username which you want to get from

(3): Number of tweets you want to get

After filling all information, just click Save.

#[FitWP] Recent Posts

This widget replaces default WordPress recent posts widget. It displays recent posts in the much more beautiful way and gives you more control to what will be shown.

The widget has the following options:

• Title: widget title
• Number Of Posts: how many posts you want to displayed
• Category: you can choose to display posts from all categories, or a specific category or multiple categories
• Show Comment Number: whether or not show comment number
• Show Thumbnail: whether or not show thumbnail
• Default Thumbnail: if post doesn’t have thumbnail, this default thumbnail will be used
• Show Date: whether or not show post date
• Date Format: date format. See this link for a full list of supported date formats
• Show Excerpt: whether or not show post excerpt
• Excerpt Length: the number of words of post content will be displayed
• Show Readmore Text: whether or not show read more text
• Readmore Text: Read more text

#[FitWP] Tabs

This widget displays popular posts, recent posts and recent comments in a tabbed widget. Each tab has its own options. For popular posts and recent posts, the options are similar to the Recent Posts widget above.

Note that popular posts are counted based on a number of comments.

#[FitWP] Social Links

This widget shows links (with icons) to your social network profiles. All you need to do is just enter URL to your social network profiles and optionally title for each link.

#[FitWP] Projects

This widget shows projects as thumbnails. All you need to do is enter a number of projects you want to show then select which projects you want to show. You can choose either All projects, completed projects or under construction projects.