Download - Time - WordPress Theme Documentation
-
7/25/2019 Time - WordPress Theme Documentation
1/26
Time - WordPress theme documentationVersion: 3.8
Created: 29 November 2015
Website: http://themeforest.net/item/time-responsive-wordpress-theme/5736361/
Demo: http://themes.kubasto.com/time/
Table of contents
1. Introduction
2. Installation
2.1. Theme installation
2.2. Example content
3. Working with the theme
3.1. Updating theme
3.2. LayerSlider
3.3. Classic slider
3.4. Super Tabs
3.5. Portfolios
3.6. Shortcodes
3.6.1. hr
3.6.2. mark
3.6.3. dc
3.6.4. tooltip
3.6.5. font
3.6.6. icon
3.6.7. button
3.6.8. quote
3.6.9. list
3.6.10. message
3.6.11. rating
3.6.12. social_buttons
3.6.13. search
3.6.14. contact
3.6.15. columns & column
3.6.16. tabs & tab
3.6.17. toggles & toggle
3.6.18. posts
3.6.19. page
3.6.20. portfolio
3.6.21. media
3.6.22. bricks
3.6.23. slider
3.6.24. scroller
3.6.25. super_tabs
3.7. Custom page template shortcodes
3.7.1. content
3.7.2. section
3.7.3. section_posts
3.8. Custom pages
3.9. WooCommerce
3.10. WPML
3.11. Predefined colors for use in shortcodes
3.12. Image sizes for use in shortcodes
4. How to create a page like ...?
4.1. Frontpage 1
4.2. Frontpage 2
5. FAQ
5.1. Why I see blank page or/and error message after activating the theme?5.2. Is ... plugin supported?
5.3. How to add icon to a menu?
5.4. How to add my icons, so I could use them with the [icon] shortcode?
5.5. How to change settings (border, hover effect, FancyBox) of a specific image?
5.6. How to make images in a gallery link to pages I want?
5.7. How to add video to a slider?
5.8. How to change names of sidebars (Alpha, Beta, etc.)?
5.9. Comments are not displaying under my post/page/portfolio/gallery, why?
5.10. How to add breadcrumbs?
5.11. How to configure Twitter widget?
6. Advanced customization
6.1. Translating theme
6.2. Custom fonts
6.3. Child themes
6.3.1. Main stylesheet
6.3.2. Theme Options
6.3.3. Filters
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
1 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
2/26
6.3.4. Reseller mode
7. External resources
8. Changelog
9. Thank you
1. Introduction
Timeis a responsive WordPress theme, which means it adapts to the device on which it's presented. It's fluid - it stretches to fit user's display unless it reaches max width (which you
can specify yourself). There is also one threshold width, where mobile version is activated. Play with your browser's window width to see how it works.
The theme cares for your content so it looks great on all versions, but you can also decide to show part of a content on some versions only, and hide on others (read more in the
chapter about media shortcode).
Time has a lot of features, and most of them are intuitive to use, but i f you need a deeper insight, this is the documentation prepared for you. Thanks for buying and enjoy :)
2. Installation
2.1. Theme installation
Standard WordPress method:
Downloaded theme form your ThemeForest account ("Installable WordPress file only"), and upload it usingAppearance / Themes / Install Themesuploader. Accept suggestion
about installing LayerSlider Time Theme editionplugin if you want to use layered sliders feature on your site.
Done. Open the Theme Options page and start working with it.
FTP method:
Uploadjust the contents of the me folderto the wp-content/themes folder on your server.
Activate the theme through theAppearance / Themesmenu in WordPress. Accept suggestion about installing LayerSlider Time Theme editionplugin if you want to use layered
sliders feature on your site.
Done. Open the Theme Options page and start working with it.
Important note: Theme registers a few image sizes and supports Retina (high quality images for high-density displays). So if you already have images in Media Library, they
probably won't be suitable for the theme's needs. You can easily fix this by rebuilding images using Regenerate Thumbnailsplugin.
Enjoy your new theme!
2.2. Example content
If you wish to have the same content I've created for the theme's demo site, you can perform a few steps to achieve similar effect. Unfortunately, export/import process in WordPress
in not complete, so the package I provide is a full WordPress installer with implemented demo content. It guarantees almost 1:1 copy of the demo site (notice, images are replaced
with placeholders due to license limits). It's NOT a demo content which you can import to an existing WordPress installation, so make sure you install the package in a
different place then your production site, to not replace it.
1. Make sure you have at least version 5.3 of PHP on your server. If not, try to switch to PHP 5.3 in your hosting panel settings or ask your hosting provider to do it.
2. Unzip the wordpress_demo_setup.zip file from the demo folder and upload the unzipped content to your FTP server (notice, the package includes massive amount of
files (about 37 000), so it might take some time to upload to your FTP server. If your hosting panel has some kind of browser file manager, you can try to upload the zipped
archive and perform the unzipping directly on your server - it would reduce time of the operation significantly).
3. Perform a regular WordPress installation process.
4. Log in to your WordPress dashboard and visit Settings / Permalinks(to refresh rewrite rules).
Done - your demo site is ready.
Notice 1: You might notice some elements of the site (WordPress, plugins or even the theme) might not be up to date, but you can update them to recent versions with no worries.
Notice 2: After installing the demo site, you'll find a Time demoplugin installed. It's used to present some theme features which normally can't be used together on a site (for
example completely different headers on different pages). You can deactivate/remove the plugin. Also, there is some extra code pasted in Theme Options / Advanced, which is used
for some demo tweaks as well. You can also remove it.
3. Working with the theme
3.1. Updating theme
If you want to be noticed about theme updates, you need to paste your purchase code to the Theme Options / System / Purchase codefield (in the xxxxxxxx-xxxx-xxxx-
xxxx-xxxxxxxxxxxx format). You can find your purchase code in your ThemeForest.net account (Downloads tab, select Download / License certificate & purchase codenext to the
item). From now on, you'll be noticed about updates in the WordPress admin area, and you'll be able to perform seamless updates there.
If you want to perform theme update, the old method, you can do that by downloading theme files from ThemeForest.net and uploading all files to your server replacing the old ones.
No data or settings will be lost (unless you've made some custom changes to the files by yourself before).
3.2. LayerSlider
You can create sliders in the LayerSlidersection. It's quite intuitive, but time-consuming. You can import my demo slides, to learn from examples (import the layerslider.json
file from the sample_sliders folder).
If you want to have Retina-quality slides, you need to remember about one trick: use double size images, but divide their sizes by 2 in their width and height fileds.
3.3. Classic slider
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
2 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
3/26
Create a regular gallery of images, which you want to be slides. Optionally, specify Captionin each image properties. After creating the gallery, click on it in the visual editor and
select Custom galleries / Slidershortcode, so it wraps the gallery.
If you want images in the slider to link to custom URLs, place the links in Descriptionfields of each image of the gallery.
[slider]
--- WordPress gallery comes here ---
[/slider]
3.4. Super Tabs
Create a regular gallery of images, which you want to be tabs. In each image properties specify Title, Captionand paste a link you want the tab to direct to, to the Descriptionfield.
After creating the gallery, click on it in the visual editor and select Custom galleries / Super tabsshortcode, so it wraps the gallery.
3.5. Portfolios
Main thing to remember while creating portfolios is to specify parent of each portfolio item, so there is a hierarchy (parent portfolio and child portfolio items). Follow the video tutorial
below to learn how to create a portfolio:
If you want to create more portfolios, and you want to have different layout of each, you need to use the Portfolio / Advancedshortcode instead of Portfolio / Simple, and modify it's
parameters according to your needs. Full list of parameters is in the chapter about portfolio shortcode.
3.6. Shortcodes
If you are not familiar with shortcodes, they are extra magic spells to use in text which can for example add a special highlight, button or message box. You just start with the opening
shortcode, put some text or other stuff inside and write the closing shortcode at the end (some shortcodes dont need the closing tag - for example horizontal lines). For example:
[message]This is message box[/message]
will give this result on a page:
Most common shortcodes can be selected from the dropdown menu of the content editor like this:
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
3 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
4/26
Usually a default shortcode values are OK, but you can change its parameters if you need. For example:
[message closable="true"]This is message box[/message]
will give this result on a page:
So if you want to use their full potential, read the descriptions and all parameters below:
3.6.1. hr
Horizontal line. It's as wide as the area you place it in.
Example:
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.
[hr]
Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.
3.6.2. mark
Text highlight. By default, leading color is used for that, but there is also a yellowish to choose.
Parameters:
Parameter Description Allowed values Default value
color Background color of the highlight none, yellow none
Example:
Lorem ipsum [mark color="yellow"]dolor sit[/mark] amet enim.
3.6.3. dc
Drop cap. First letter of the word will be affected.
Example:
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
4 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
5/26
[dc]Here[/dc] we go. Let's start with images.
3.6.4. tooltip
Tooltip. You can specify direction of it, fade effect or not, and HTML tag for the content if you need.
Parameters:
Parameter Description Allowed values Default value
tag HTML tag around the text of the shortcode content. [HTML tag] span
title Text to display in the tooltip. [text] none
gravity Direction of the tooltip. nw , n , ne , w , e , sw , s , se s
fade Fade effect for appearing/disappearing of the tooltip. true , false false
Example:
[tooltip title="I'm a tooltip" fade="true"]Move your mouse here.[/tooltip] Sapien ...
3.6.5. font
Custom font. You can specify any number of custom fonts in Theme Options / Fonts, and then use them with a shortcode.
Parameters:
Parameter Description Allowed values Default value
id ID name of the custom font created in Theme Options / Fonts / Custom. [name] none
tag HTML tag around the text of the shortcode content. [HTML tag] span
class Class of the tag. [text] none
style Additional style of the tag. [text] none
Example:
[font id="my-custom-font" tag="p"]Lorem ipsum dolor sit amet enim.[/font]
3.6.6. icon
You can use vector icons ( list of available vector icons), which can have any size and color, or graphic icons, which are updated to the data/img/icons folder of the theme (by
default, there are 4 icon packs, each in a separate folder).
Parameters:
Parameter Description Allowed values Default
value
name Name of the icon. For vector icons, use name form this list. For graphic icons, browse
data/img/icons theme folder and use folder and file name as the icon name. For example:
essen/bestseller .
[icon_name] help
color Color of the icon. It can be leading color, predefined color, or any CSS stylesheet color. If none specified,
text color around the icon will be used. Matters only for vector i cons.
none, color ,
[predefined color] ,
[CSS color]
none
size Size of the icon in the CSS stylesheet format. Matters only for vector icons. [CSS size] 1.2em
class Class of the tag. [text] none
style Additional style of the tag. [text] none
Example:
Lorem ipsum dolor sit amet enim [icon name="essen/bestseller"].
3.6.7. button
There are 3 sizes to choose from, and each can have an icon on a left or right (or both) and a caption below.
Parameters:
Parameter Description Allowed values Default
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
5 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
6/26
value
size Size of the button normal , big , huge normal
left_icon Icon on the left side of button text. [icon_name] none
right_icon Icon on the right side of button text. [icon_name] none
color Color of the icon. none, color , [predefined color] ,
[CSS color]
none
href URL of the button. [url] none
target Target of the URL _blank , _self , _parent , _top _self
caption Caption below the button. If it's specified, button will be aligned to center
horizontally.
[text] none
Example:
[button size="big" href="http://themes.kubasto.com" left_icon="essen/bestseller"]Lorem ipsum[/button]
3.6.8. quote
By default, there is a vertical bar on the left of the quote. You can specify any width and aligning if you want, too.
Parameters:
Parameter Description Allowed values Default value
author Author of the quote [text] none
bar Horizontal bar on the left. true , false true
align Aligning none, left , right none
width Width of the quote in CSS stylesheet format. [CSS width] none
Example:
[quote author="John Doe"]Lorem ipsum dolor sit amet enim.[/quote]
3.6.9. list
List with icons.
Parameters:
Parameter Description Allowed values Default value
icon Icon by list items. [text] right-open
color Color of icons. none, color , [predefined color] , [CSS color] color
Example:
[list icon="check" color="green"]
Lorem ipsum dolor sit amet
Quisque sed.
Quisque urna. Nunc ipsum.
Quisque at mauris.
Curabitur magna iaculis.
Nunc ut diam. Curabitur.
Vestibulum.
Class aptent taciti.
[/list]
3.6.10. message
Box with a message. There are several colors to choose from (by default it's gray). Closable (with an X on the top right corner) or not. Looks nice with an icon.
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
6 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
7/26
Parameters:
Parameter Description Allowed values Default value
color Background color none, blue , green , orange , red none
closable Closing X in the top right corner. true , false false
Example:
[message color="orange" closable="false"]orange message[/message]
3.6.11. rating
Stars with a text and optionally an author.
Parameters:
Parameter Description Allowed values Default value
rate Number of stars. The second format (e.g.: 3/5 ) displays 3 colored and 2 grayed out stars. [number] , [number]/[number] 5
author Author of the opinion. [text] none
Example:
[rating rate="5" author="John Doe"]Lorem ipsum dolor sit amet enim.[/rating]
3.6.12. social_buttons
Facebook, Twitter, Google+, LinkedIn and Pinterest buttons. Small or big.
Parameters:
Parameter Description Allowed values Default value
style Style (size) of buttons. small , big big
media List of social media buttons separated with
commas.
facebook , twitter , googleplus , linkedin ,
pinterest
facebook, twitter, googleplus
Example:
[social_buttons media="facebook, twitter"]
3.6.13. search
Search input field. It's as wide as the place you put it in.
Example:
[search]
3.6.14. contact
Contact form. You can configure it in Theme Options / Contact form.
Example:
[contact]
3.6.15. columns & column
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
7 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
8/26
With this shortcode you can divide content into columns. Start with a [columns] and end with a [/columns] . In between, place any columns configuration you need with the
[column] shortcode, with width parameter. Remember to check if all width fractions sum up to a full number (Not necessarily 1 - for example you can have six columns, each 1/3
width, which sums up to 2. In such cases, I recommend using the separated="true" parameter, which will make columns look nicer.).
Parameters for [columns] :
Parameter Description Allowed values Default value
separated Style to separate columns vertically. true , false false
Parameters for [column] :
Parameter Description Allowed values Default value
width Width of the column as a fraction. 1/20 is the lowest value. [number]/[number] 1/2
Example:
[columns]
[column width="1/3"]
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.
[/column]
[column width="2/3"]
Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.
[/column]
[/columns]
3.6.16. tabs & tab
You can have any number of tabs with any content in each.
Parameters for [tab] :
Parameter Description Al lowed values Default value
title Title of the tab. [text] none
active Activates this tab true , false false
Example:
[tabs]
[tab title="Tab one"]
Aenean commodo ligule eget dolor. Aenean massa. Cum sociis ...
[/tab]
[tab title="Tab two"]
Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula...
[/tab]
[/tabs]
3.6.17. toggles & toggle
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
8 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
9/26
Great way for presenting FAQ or stuff like that. You can have auto-closing type (so only one toggle can be open at a time) or not. You can also decide which toggle should be opened
by default.
Parameters for [toggles] :
Parameter Description Allowed values Default value
singular Style of toggles - auto-closing or not. true , false false
Parameters for [toggle] :
Parameter Description Allowed values Default value
title Title / FAQ question. [text] none
active Open or closed toggle. true , false false
Example:
[toggles singular="true"]
[toggle title="Toggle section one"]
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis.
[/toggle]
[toggle title="Toggle this" active="true"]
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam...
[/toggle]
[/toggles]
3.6.18. posts
Displays one post. By default - recent post from a blog.
Parameters:
Parameter Description Allowed values Default
value
id ID of the post. If it's specified, the rest of filters doesn't matter. none, [number] none
type Post type. [text] post
category ID of post's category. Works only for blog posts. [number] 0
size Name of sizeof the image. auto , [text] auto
orderby Sorting method. title , date , modified , comment_count ,
rand , menu_order
date
order Sorting order. asc , desc desc
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
9 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
10/26
count Number of displayed posts. [number] 1
style Style of posts list. gallery , slider gallery
columns Number of columns for posts. If set to auto , number of columns will be equal to
number of posts (but no more than 4).
auto , [number] auto
title Display or not post title. true , false true
excerpt Display or not post excerpt. true , false false
excerpt_length Lenght of excerpt (in words) [number] 55
taxonomy Taxonomy type. none, category , tag tag
Example:
[posts taxonomy="category" count="3"]
3.6.19. page
Displays content of a specified page. You can specify the page by its ID or slug.
Parameters:
Parameter Description Allowed values Default value
id ID of the page. none, [number] none
slug Slug of the page. none, [text] none
3.6.20. portfolio
Displays child portfolios of the portfolio page you place the shortcode in (unless you specify other). The simplest way to use it, is to configure portfolio settings in Theme Options /
Portfolios, and just place a [portfolio] shortcode in a portfolio page, so all children items will list there.
Optional parameters:
Parameter Description Allowed values Default
value
id ID of the portfolio, which children portfolios you want to display. auto , [number] auto
size Name of sizeof the image. Default value is recommended ( auto ), which will use
accurate size depending on columns number.
auto , [text] auto
columns Number of columns. Default value ( inherit ) means setting form Theme
Options / Portfolio / Default layoutwill be used.
inherit , [number] inherit
filter Taxonomy used for filter buttons. inherit , category , tag inherit
orderby Method of sorting portfolio items. inherit , title , date , modified ,
comment_count , rand , menu_order
inherit
order Order of sorting portfolio items. inherit , asc , desc inherit
limit Maximum number of displayed portfolio items at once. inherit , -1 , [number] inherit
pagination Pagination buttons. inherit , true , false inherit
titles Portfolio titles. inherit , true , false inherit
excerpts Portfolio excerpts. inherit , true , false inherit
taxonomies Taxonomy type. inherit , none, category , tag inherit
Example:
[portfolio filter="category" excerpts="true" taxonomies="tag"]
3.6.21. media
You can decide to show some content just on mobile, or just on desktop version of a si te with this shortcode.
Parameters:
Parameter Description Allowed values Default value
device Type of device. desktop , mobile desktop
tag HTML tag around the text form the shortcode content. [HTML tag] span
Example:
Lorem ipsum dolor sit amet enim. [media]Suspendisse a pellentesque dui, non felis.[/media]
3.6.22. bricks
Converts gallery to a masonry style. Place [bricks] before, and [/bricks] after the WordPress gallery.
Parameters:
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
10 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
11/26
Parameter Description Allowed values Default
value
size Name of sizeof the image. Default value is recommended ( auto ), which will use accurate size depending
on columns number.
auto , [text] auto
captions Captions of images. true , false true
border Border style. Default value ( inherit ) means setting from Theme Options / Site / Imageswill be used. inherit , true , false inherit
hover Hover effect. inherit , none, zoom ,
grayscale
inherit
fancybox FancyBox on click. inherit , true , false inherit
Example:
[bricks]
--- Regular WordPress gallery comes here ---
[/bricks]
3.6.23. slider
Converts gallery to a slider. Place [slider] before, and [/slider] after the WordPress gallery.
Parameters:
Parameter Description Allowed values Default value
size Name of sizeof the image. Default value ( full-width ) is recommended. auto , [text] full-width
captions Captions of images. true , false true
border Border style. Default value ( inherit ) means setting from Theme Options / Site / Imageswill be
used.
inherit , true , false false
hover Hover effect. inherit , none, zoom ,
grayscale
none
fancybox FancyBox on click. inherit , true , false inherit
3.6.24. scroller
Converts gallery to a scroller. Place [scroller] before, and [/scroller] after the WordPress gallery.
Parameters:
Parameter Description Allowed values Default
value
size Name of sizeof the image. auto , [text] thumbnail
buttons Buttons to scroll content instead of mouse position sensitive movement. Doesn't affect touch devices, where
these buttons are always visible.
true , false false
border Border style. Default value ( inherit ) means setting from Theme Options / Site / Imageswill be used. inherit , true , false inherit
hover Hover effect. inherit , none, zoom ,
grayscale
inherit
fancybox FancyBox on click. inherit , true , false inherit
3.6.25. super_tabs
Converts gallery to Super Tabs. Place [super_tabs] before, and [/super_tabs] after the WordPress gallery.
Title of an image will be used as a tab title, caption of the image as a tab caption, and if you want an image to link somewhere, place the link in the description field of the image.
Parameters:
Parameter Description Allowed values Default value
size Name of sizeof the image. Default value ( full-width ) is recommended. auto , [text] full-width
ordered Numbering of tabs. true , false true
descriptions Captions of tabs. true , false true
3.7. Custom page template shortcodes
These shortcodes ( content , section , section_posts ) can be used only in Custom page template. Read more about building custom pages in the Custom pageschapter.
3.7.1. content
Use it if you need to change sidebars layout to other than in the Layoutoption box of the page. You can place sectionsinside of it.
Parameters:
Parameter Description Allowed values Default
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
11 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
12/26
value
sidebars Order of sidebars (names) and main section (the # sign - mandatory), For example: gamma, #, beta means
content with two sidebars - one on the left and one on the right. As a separator, you can use , , - or | .
inherit ,
[text]
inherit
author_bio Informations about author of the page at the end of the section. inherit , true ,
false
inherit
meta Meta data of the page at the end of the section. inherit , true ,
false
inherit
social_buttons Social media buttons of the page at the end of the section. inherit , true ,
false
inherit
comments Comments at the end of the section. inherit , true ,
false
inherit
Example:
[content sidebars="# ,alpha, beta"]
...
[/content]
[content sidebars="gamma, #"]
[section]
...
[/section]
[section]
3.7.2. section
Separated section with any content.
Parameters:
Parameter Description Allowed values Default value
background Background of the section. none, [predefined color] , [CSS color] none
Example:
[section]
...
[/section]
[section background="#f0f0f0"]
...
[/section]
3.7.3. section_posts
Section with posts listed. By default it presents blog posts as set in WordPress Settings / Readingsetting.
If you need other list, play with parameters of the shortcode. It has the same parameters as WP_Query. So you can freely modify it's content. For example:
[section_posts cat="8" posts_per_page="3"]
3.8. Custom pages
Custom page is a template, which allows you to built pages with many sections.
You have 3 shortcodes made specailly for custom pages: content , section and section_posts . You can read about each of them in the Custom page template shortcodes
above.
The structure of a custom page is: [content] s filled with [section] s. But if you don't need complex sidebars layouts, you can skip [content] and use just [section] s.
Also, if you have just one section in a [content] , you can skip [section] shortcode.
The image below explains how a simple custom page is built. In that case page contains 4 sections:
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
12 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
13/26
Code of this page look like this:
[section]
...Super Tabs comes here...
[/section]
[section]
...section with columns comes here...
[/section]
[section]
...headline and scroller comes here...
Below is example with sidebar, which is not for the whole page, so I've used [content] shortcodes around sections and specified sidebars in parameters on the second
[content] sidebar.
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
13 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
14/26
The code is:
[content sidebars="#"]
[section]
...Super Tabs comes here...
[/section]
[section]
...section with columns comes here...
[/section]
[/content]
If you need more examples, have a look at the How to create page like ...?chapter.
3.9. WooCommerce
Time theme supports WooCommerceplugin. For best possible experience, I recommend the following configuration of it:
Uncheck Enable Lightbox for product imagesin WooCommerce / Settings / Products / Display(don't worry, images will display in FancyBox - according to theme settings).
Set the following images widthsin WooCommerce / Settings / Products / Display:
Catalog Images: 364px,
Single Product Image: 748px,
Product Thumbnails: 364px.
Set heightsaccording to your needs.
3.10. WPML
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
14 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
15/26
WPMLis a WordPress plugin, which allows you to create a multi-language site.
If you need help with the plugin, there is a Getting started guideand a detailed documentationof the plugin.
You can enable nice language switcher in Theme Options / Header / Language menu.
3.11. Predefined colors for use in shortcodes
If one of shortcode parameters is color, you can use on of the predefined colors, which I've prepared for the theme:
For example:
[icon name="cloud" color="sky"]
3.12. Image sizes for use in shortcodes
Besides default WordPress images sizes ("thumbnail", "medium", "large"), which you can set in Settings / Media, Time theme registers many additional sizes, which you can use in
parameters for some shortcodes:
Name Size (width x height) Crop Default
post-thumbnail (Theme Options / Posts / Featured image / Size) Yes 135px x 135px
post-thumbnail-mini 48px x 48px Yes -
logo 9999px x 60px No -
banner (Theme Options / General / Maximum width)px x 9999px No 980px x 9999px
full-hd 1920px x 1080px No -
ls-thumbnail 100px x 63px Yes -
full-width (1 column width)px x 9999px No 940px x 9999px
medium-width (2 columns width)px x 9999px No 748px x 9999px
small-width (4 columns width)px x 9999px No 364px x 9999px
All these image sizes have also Retina display version (twice as big), but it works automatically, and you don't have to worry about that. If you care about Retina quality, just
remember to upload big enough images.
4. How to create a page like ...?
As the demo site is very complex, it's sometimes hard to use example demo contentto find out how each page is built. Mainly, because Theme Options are not imported with the
content. That's why I've prepared a list of pages which you might want to replicate.
4.1. Frontpage 1
Online demo
Create a page and select Custom pageas a template.
In Layoutsection of the page:
for Bannerselect LayerSliderand specify one (more about LayerSliders). If you want to have identical slider as on the demo site, you can import it in LayerSlidersection from
the file, you can find in the demo_content folder.
for Secondary menuselect one of custom menus (you can create one in Appearance / Menus).
for Sidebarsselect Customand set Nonefor each sidebar slot.
Use Custom page templateshortcodes to built the layout. For this page, you just need 4 x [section] . Now fill each section with desired content (using regular shortcodes):
First sectionwith 4 columns - each with different content:
Headline and text
[posts] shortcode with parameters to display a post from blog.
[posts] shortcode with parameters to display a gallery teaser.
[posts] shortcode with parameters to display a portfolio teaser.
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
15 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
16/26
Remember to set Featured imagesof the post, gallery and portfolio pages you plan to use this way, so the image appear (Edit page / Set Featured image).
The columns code should look like this:
[columns]
[column width="1/4"]
This is WordPress theme
If you like this demo site...
[/column]
[column width="1/4"]
[post type="post" id="512" taxonomy="category"]
[/column]
Second section- with 2 columns (4/5 + 1/5 wide):
[quote] with author
[button] with caption
These columns code should look like this:
[columns]
[column width="4/5"]
[quote author="aatvos"]I'm happy to see...[/quote]
[/column]
[column width="1/5"]
[button href="http://kubasto.com/" size="big" icon="heart" color="#ee0000" caption="(+ its caption)"]Big button[/button]
[/column]
[/columns]
Third sectionis filled with Super Tabs. Create a gallery of images, which you want to be tabs. In each image properties specify Title, Captionand paste a link to the Description.
After creating the gallery, click on it in the visual editor and select Custom galleries / Super tabs shortcode, so it wraps the gallery.:
Fourth sectionis filled with another special gallery - [scroller] . So again - create a gallery, specify links of the images (if you need them to direct somewhere) by pasting the
URL to the Descriptionfield of each image. After creating the gallery, click on it in the visual editor and select Custom galleries / Scrollershortcode, so it wraps the gallery. Add
parameters to the shortcode to specify size of images, grayscale effect and force < > buttons to display. The code inside this section should look like this:
[scroller size="logo" hover="grayscale" buttons="true"]
--- WordPress gallery comes here ---
[/scroller]
Header and footer are commnon for whole site.
To configure header:
Create menu inAppearance / Menus, and select it as a Header Menuin Manage locationssection.
Make sure Search formis enabled in Theme Options / Header.
For languages menu, activate WPML plugin, and select Shortlanguages menu in Theme Options / Header(this option is available only if you have less than 4 languages
specified in the plugin).
To set footer:
Make sure 4 columnsis specified in Theme Options / Footer. Go toAppearance / Widgets.
Footer column 1:
Create page with image and text.
Drag and drop Time | Pagewidget to the Footer column 1area.
Select the created page in that widget.
Footer column 2:
Drag and drop Time | Social Mediawidget to the Footer column 2area. Add icons and links to it.
Create page with address.
Drag and drop Time | Pagewidget to the Footer column 2area below the first widget.
Select the created page in that widget.
Footer column 3:
Drag and drop Time | Flickrwidget to the Footer column 3area and configure it.
Select the created page in that widget.
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
16 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
17/26
Footer column 4:
Drag and drop Time | Contact Formwidget to the Footer column 4. Configure Contact Form in Theme Options / Contact Form.
Done. The full page content should look like that (if you copy&paste it, do it in the Textediting mode):
[section]
[columns]
[column width="1/4"]
This is WordPress theme
If you like this demo site...
[/column]
[column width="1/4"]
[post type="post" id="512" taxonomy="category"]
4.2. Frontpage 2
Online demo
Create a page and select Custom pageas a template.
In Layoutsection of the page:
for Headlineselect Hide
for Sidebarsselect Customand set Nonefor each sidebar slot.
Use Custom page templateshortcodes to built the layout. For this page, you just need 4 x [section] . Now fill each section with desired content (using regular shortcodes):
First sectionwith Super Tabs:
Create a gallery of images, which you want to be tabs. In each image properties specify Title, Captionand paste a link to the Description. After creating the gallery, click on it in the
visual editor and select Custom galleries / Super tabs shortcode, so it wraps the gallery.
Second sectionwith 4 columns (each 1/2 wide). Fill each column with a quote starting with an icon. For example:
[quote author="briannaewilliams" bar="false"]
[icon name="megaphone" size="1em" color="gold"] This man is completely AWESOME! Quickest and most reliable technical support
[/quote]
Third sectionis filled with centered headline and scroller gallery.
Before and after headline is an icon, so create [icon] , write text, another `[icon] and set it all a Heading 2and align center using visual editor buttons. It will look like this (I've also
adjusted icon sizes in that case using sizeparameter):
[icon name="left-dir" size="1em"] Example templates (click to see an online example) [icon name="right-dir" size="1em"]
In new paragraph, create a gallery of images, which you want to be scrolled. In each image properties paste a link to the Descriptionfiled (if you want to link somewhare instead of
open big version in FancyBox). After creating the gallery, click on it in the visual editor and select Custom galleries / Scroller shortcode, so it wraps the gallery.
Fourth section- with 2 columns (4/5 + 1/5 wide):
[quote] with author
[button] with caption
These columns code should look like this:
[columns]
[column width="4/5"]
[quote author="aatvos"]I'm happy to see...[/quote]
[/column]
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
17 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
18/26
[column width="1/5"]
[button href="http://kubasto.com/" size="big" icon="heart" color="#ee0000" caption="(+ its caption)"]Big button[/button]
[/column]
[/columns]
Header and footer are commnon for whole site.
To configure header:
Create menu inAppearance / Menus, and select it as a Header Menuin Manage locationssection.
Make sure Search formis enabled in Theme Options / Header.
For languages menu, activate WPML plugin, and select Shortlanguages menu in Theme Options / Header(this option is available only if you have less than 4 languages
specified in the plugin).
To set footer:
Make sure 6 columnsis specified in Theme Options / Footer. Go toAppearance / Widgetsand drag and drop Custom menuwidget to each Footer widget area. Specify which menu
you want to use in each widget settings.
Done. The full page content should look like that (if you copy&paste it, do it in the Textediting mode):
[section]
[super_tabs]
--- WordPress gallery comes here ---
[/super_tabs]
[/section]
[section]
[columns]
[column width="1/2"][quote author="briannaewilliams" bar="false"][icon name="megaphone" size="1em" color="gold"] This ma
5. FAQ
5.1. Why I see blank page or/and error message after activating the theme?
Timetheme requires at least version 5.3 of PHP on server. Make sure your hosting server has at least PHP v5.3. If not, check if you can change it in your hosting dashboard panel.
In most cases there is such option, but i f not, ask your hosting provider to switch/update PHP on your server to at least 5.3 version. If your hosting provider uses older version and
refuses to update it, I would change hosting provider at that point, because it means you are stuck with 8-years-old, not updated and not supported software.
Rescue solution: to get access to WordPress dashboard back (with no PHP 5.3), you have to access server files by FTP, and remove (or change name) of the theme folder -
wp-content/themes/time .
If you can't switch PHP on your server, you can use older version of the theme, which is included to the package in the old_version folder - this version doesn't require PHP 5.3.
But I would use this only as a temporary solution.
5.2. Is ... plugin supported?
Most WordPress plugins works fine with Time Theme. Some require a tweak or two, and some need serious theme adjustments. This is a list of plugins, I've tested:
Name Plugin site Free Comment
bbPress http://bbpress.org/ Yes
Breadcrumb NavXT http://wordpress.org/extend/plugins/breadcrumb-navxt/ Yes
Breadcrumb Trail http://wordpress.org/extend/plugins/breadcrumb-trail/ Yes
Captcha http://wordpress.org/plugins/captcha/ Yes
Contact Form 7 http://wordpress.org/plugins/contact-form-7/ Yes
Disqus Comment System http://wordpress.org/plugins/disqus-comment-system/ Yes
Floating Social Bar http://wordpress.org/plugins/floating-social-bar/ Yes
MailChimp Widget http://wordpress.org/plugins/mailchimp-widget/ Yes
Polylang http://wordpress.org/plugins/polylang/ Yes
WooCommerce http://www.woothemes.com/woocommerce/ Yes
WooCommerce Brands http://docs.woothemes.com/document/wc-brands/ No
WPML http://wpml.org No
5.3. How to add icon to a menu?VisitAppearance / Menus. Make sure you've selected CSS Classesoption in Screen options. Expand selected menu item and write something like icon-FOLDER_FILE in the
CSS Classes (optional)field. Available icons are in the data/img/icons folder of the theme (you can upload your icons there). For example: icon-essen_lightbulb .
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
18 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
19/26
5.4. How to add my icons, so I could use them with the [icon] shortcode?
Create new folder in the data/img/icons folder of the theme, and upload your icons images there. Now you can use them as other icons using shortcode. For example:
[icon name="your-folder/your-icon"]
5.5. How to change settings (border, hover effect, FancyBox) of a specific image?
Edit image in WordPress editor and add the following class or classes to the CSS Classfield at theAdvanced / Settingstab:
for changing border: border-false or border-true
for changing hover effect: hover-none , hover-zoom or hover-grayscale
for changing FancyBox setting: fancybox-false or fancybox-true
By default (if no class is defined in that field), settings from Theme Options / Site / Imagesare used.
5.6. How to make images in a gallery link to pages I want?
Add the link you want an image link to, to the Descriptionfield of the specific image.
5.7. How to add video to a slider?
Add any imageto a gallery, which you plan to use as a slider, and in the Descriptionfield of the dummy image, paste the embedding code of the video.
5.8. How to change names of sidebars (Alpha, Beta, etc.)?
Translate theme from your language version back to your language version. Have a look at Translating themechapter. Find the names you want to change in the language file and
translate them to your names. Save file as translation of the language you currently use.
Alternative method is creating child theme, and modifying sidebars names by time_sidebars filter.
5.9. Comments are not displaying under my post/page/portfolio/gallery, why?
check if theAllow commentsoption in Theme Options / Posts / Commentsis enabled.check if theAllow commentsoption in the Discussionbox of the specific post/page... is also enabled.
5.10. How to add breadcrumbs?
Use one of the following plugins:
Breadcrumb NavXT
Yoast Breadcrumbs
After activating any of them, you can configure which places of the theme you want to display breadcrumbs in Theme Options / Navigation / Page headline / Content.
5.11. How to configure Twitter widget?
Because of Twitter API 1.1 new rules, you need to create a Twitter app for the Twitter widget to work correctly. You can read how to do that in Twitter FAQ.
6. Advanced customization
6.1. Translating theme
If you install or set your WordPress in your language, also the theme will use this language if it's supported. If you want to add another translation of the theme, below is a short
instruction:
For translations I recommend Poedittool.
Create a copy of the xx_XX.po file (from languages ) and rename it respectively to your language (check proper name here. For example Swiss German would be de_CH.po ).
Open that file in Poedit,
select Catalog / Updatefrom sources,
translate,
select language and country in Catalog / Settings,
save.
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
19 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
20/26
It seems a little harsh, but this is the proper way. If you need more details, check here.
6.2. Custom fonts
If you want to use a font, which is not listed in Theme Options, upload it in 4 formats ( svg , ttf , eot , woff ) to the fonts folder inside the theme main folder. All files must
have the same name, just different extension. You can use this generatorto prepare such a set.
6.3. Child themes
Time fully supports child themes built upon it. If you want to know more about creating child themes, I recommend WordPress documentation section about child themes.
6.3.1. Main stylesheet
Timestyles are kept in several files located in the data/css folder. Styles are divided into several files to keep it clear and, if needed, to make disabling some features easier (for
example responsiveness). Main styles file - style.css is empty, so if you create a child them, there's no need to import it as usually. All necessary styles (depending on settings
from Theme Options) are already attached in header of a page, so you don't have to worry about it.
6.3.2. Theme OptionsTo get value o f an option from Timeuse the following code in your child theme or plugin:
$value = Time::to('group/name');
where group/name string defines path to the option. E.g.: portfolio/default/columns .
Of course, you can always get all Theme Options the standard way, using WordPress built-in mechanism:
$options = get_option('time');
although, I recommend using the first method, instead of getting all options every time you need one.
If you want to change Theme Options (not permanently, just for the call), us the following code:
Time::to_('group/name')->value = 'new_value';
6.3.3. Filters
Timehas many filters in the code, so you can easily affect theme's advanced issues. The table below lists all theme filters. For better understanding, I recommend searching a filter
usage in the code. Especially for the complicated ones.
Name Parameters Returning type, description.
time_register_post_type_gallery_args (array)$args (array) Arguments passed while registering gallery post type.
time_register_post_type_portfolio_args (array)$args (array) Arguments passed while registering portfolio post type.
time_register_taxonomy_portfolio_category_args (array)$args (array) Arguments passed while registering category taxonomy
of portfolio post type.
time_register_taxonomy_portfolio_tag_args (array)$args (array) Arguments passed while registering tag taxonomy of
portfolio post type.
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
20 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
21/26
time_sliders (array)$sliders (array) List of sliders.
time_sidebars (array)$sidebars (array) List of sidebars.
time_post_formats_icons (array)$icons (array) List of format posts icons.
time_social_media_icons (array)$icons (array) List of social media icons.
time_layout (array)$layout (array) Layout of a section/page.
time_menu (null)$menu ,
(string)$theme_location
(int) Which menu to use in a location.
time_sidebar (string)$sidebar ,
(string)$location
(string) Display name of the sidebar.
time_content_width (int)$content_width (int) Width of the page content. This filtr doesn't affect width of
tha page, but allows to get / modify value of the $content_width
global WordPress variable.
time_nav_secondary_upper_display (bool)$show (bool) To display or not upper secondary menu.
time_nav_secondary_lower_display (bool)$show (bool) To display or not lower secondary menu.
time_headline_display (bool)$show (bool) To display or not headline.
time_headline_content (string)$content (string) Content of navigation section of headline (allowed
values: breadcrumbs , navigation or empty string for none).
time_post_thumbnail_display (bool)$show (bool) To display or not post featured image.
time_author_bio_display (bool)$show (bool) To display or not author details.
time_meta_display (bool)$show (bool) To display or not meta section.
time_social_buttons_display (bool)$show (bool) To display or not social buttons section.
time_pagination_display (bool)$show , (string)$type (bool) To display or not paginate links.
time_enable_update (bool)true (bool) Sets theme's update mechanism on or off.
time_reseller_mode (bool)false (bool) Sets resseler mode on or off.
If you have a request for other filters, please let me know.
6.3.4. Reseller mode
Reseller mode alows you to completely hide parent theme and prepares it for sale without revealing origins of the theme. It's activated in the child theme, and the modifications
which it doees are:
hides parent theme in WordPress (only child theme with a name set by you is displayed)
removes the Theme Options / Systempanel
disables theme updates
To activate reseller mode, use the time_reseller_mode filter with the true value.
Example of use in the functions.php file in the child theme:
add_action('after_setup_theme', function() {
add_filter('time_reseller_mode', '__return_true');
});
7. External resources
JSColor
jQuery Easing Plugin
MediaElement.js
Fancybox
FlexSlider
LayerSlider
masonry
tipsy
imagesLoaded
Selectivizr
minify
oauth
Entypo pictograms by Daniel Bruce
Brandicoicons
Font Awesome by Dave Gandy
Modern Pictogramsfont
Koloria Icons Packby Andy Gongea
pc.de Essen Icon Pack
PC 100 Icon Pack
pc.de Berlin icon pack
Flag Iconsby GoSquared
8. Changelog
Time 3.8(29 Nov 2015)
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
21 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
22/26
added support for media links in Twitter widget
language menu items order is now the same as in WPML plugin settings
removed users who are not Authors from the "Customize on" conditions list
improved updates mechanism
fixed rare background image bug
other minor changes and improvements
Time 3.7.1(18 Nov 2015)
fixed slider related bug
Time 3.7(10 Nov 2015)
added option to the Posts List widget to filter posts by format
WordPress 4.4 ready
WooCommerce 2.4.10 ready
minor visual fix of a secondary menu at open layout
fixed distorted slider on FireFox 42.0 browser
fixed Theme Options import related bug
other minor changes
Time 3.6.1(16 Sep 2015)
fixed Dashboard bug for servers with PHP version older than 5.4
Time 3.6(11 Sep 2015)
added Reseller mode
added option to select "Current category" in the Posts list widget
improved updates mechanism
improved Twitter widget
improved Flickr widget
YouTube and Vimeo videos now use correct protocol (http/https) according to site protocol
updated TGM Plugin Activation to version 2.5.2 (updating bundled plugins is much easier now)
removed doubled "Product" condition from the "Customize on" list
fixed wrong execution order of the "Checkout" and "Order received" conditions on the "Customize on" list
fixed weird empty banner bug on Chrome/Edge
other minor changes and improvements
Time 3.5.1(18 Aug 2015)
fixed PHP bug on some rare configurations
Time 3.5(11 Aug 2015)
WooCommerce 2.4 ready
improved support for the Breadcrumb Trail plugin
other minor changes
Time 3.4(19 Jul 2015)
added Facebook Page widget (instead of obsolete Facebook like box)
tracking code is now ignored for administrator page visits
WordPress 4.3 ready
fixed missing caption of images opened with a FancyBox
other minor changes
Time 3.3.5(26 Jun 2015)
added option to the Posts list widget to exclude already displayed posts
other minor fixes
Time 3.3.4(14 May 2015)
fixed JavaScript error in dashboard
Time 3.3.3(13 May 2015)
added floating "Save Changes" button in Theme Options
fixed blog menu item set as active on gallery and portfolio pages
other minor fixes
Time 3.3.2(28 Apr 2015)
WooCommerce 2.3.8 ready
Time 3.3.1(24 Apr 2015)
important security fix
improved translations
fixed support for 1x1px "dummy" images
Time 3.3(15 Mar 2015)
rebuilt and extended options to manage banners, sidebars and navigation
Time - WordPress theme documentation file:///G:/ADDONS-Camtasia/ThemeForest_Handy_v3_3_Handmade_S...
22 de 26 26-01-2016 20:21
-
7/25/2019 Time - WordPress Theme Documentation
23/26
-
7/25/2019 Time - WordPress Theme Documentation
24/26
-
7/25/2019 Time - WordPress Theme Documentation
25/26
-
7/25/2019 Time - WordPress Theme Documentation
26/26