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


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


2 de 26 26-01-2016 20:21


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:


3 de 26 26-01-2016 20:21


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:


4 de 26 26-01-2016 20:21


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:


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:


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:



5 de 26 26-01-2016 20:21


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:


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:


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.


6 de 26 26-01-2016 20:21


7/26

Parameters:


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:


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:


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


7 de 26 26-01-2016 20:21


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] :


separated Style to separate columns vertically. true , false false

Parameters for [column] :


width Width of the column as a fraction. 1/20 is the lowest value. [number]/[number] 1/2

Example:

[columns]

[column width="1/3"]


[/column]


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


8 de 26 26-01-2016 20:21


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] :


singular Style of toggles - auto-closing or not. true , false false

Parameters for [toggle] :


title Title / FAQ question. [text] none

active Open or closed toggle. true , false false

Example:

[toggles singular="true"]

[toggle title="Toggle section one"]


[/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:


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


9 de 26 26-01-2016 20:21


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:


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:


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:


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:


10 de 26 26-01-2016 20:21


11/26


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:


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


grayscale

none


3.6.24. scroller

Converts gallery to a scroller. Place [scroller] before, and [/scroller] after the WordPress gallery.

Parameters:


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


grayscale

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:


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:



11 de 26 26-01-2016 20:21


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:


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:


12 de 26 26-01-2016 20:21


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.


13 de 26 26-01-2016 20:21


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


14 de 26 26-01-2016 20:21


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.


15 de 26 26-01-2016 20:21


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]


This is WordPress theme

If you like this demo site...

[/column]


[post type="post" id="512" taxonomy="category"]

[/column]

Second sectionwith 2 columns (4/5 + 1/5 wide):

[quote] with author

[button] with caption

These columns code should look like this:

[columns]


[quote author="aatvos"]I'm happy to see...[/quote]

[/column]


[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"]


[/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.


Footer column 3:

Drag and drop Time | Flickrwidget to the Footer column 3area and configure it.



16 de 26 26-01-2016 20:21


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]


This is WordPress theme

If you like this demo site...

[/column]


[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 sectionwith 2 columns (4/5 + 1/5 wide):

[quote] with author

[button] with caption

These columns code should look like this:

[columns]


[quote author="aatvos"]I'm happy to see...[/quote]

[/column]


17 de 26 26-01-2016 20:21


18/26


[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]


[/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 .


18 de 26 26-01-2016 20:21


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.


19 de 26 26-01-2016 20:21


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.


20 de 26 26-01-2016 20:21


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)


21 de 26 26-01-2016 20:21


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


22 de 26 26-01-2016 20:21


23/26


24/26


25/26


26/26

Time - WordPress Theme Documentation

Documents

Transcript of Time - WordPress Theme Documentation