The package of the Seasons Theme contains everything that you need to customize the look and functionality of the theme

PSD folder contains graphics of your theme, THEME folder contains the seasons theme, PLUGINS folder contains the plugins that you may use with the theme, DOCUMENTATION folder contains this particular document, SAMPLEDATA contains the data that was used for the live demo of the theme located at http://seasons.transparentideas.com

Below is the package structure:

seasons_theme_package/
├── PSD/
│   ├── 1200
│   ├── 768
│   ├── 480
│   └── 320
├── THEME/
│   └── seasons.zip
├── PLUGINS/
│   ├── revslider.zip
│   ├── woocommerce.zip
│   ├── woocommerce-new-product-badge.zip
│   ├── contact-form-7.zip
│   ├── cloud-zoom-for-woocommerce.zip
│   ├── arconix-faq.zip
│   ├── latest-tweets-widget.zip
│   ├── wysija-newsletters.zip
│   └── related-posts-by-taxonomy.zip
├── DOCUMENTATION/
│   ├── readme.html
│   └── assets	 
└── SAMPLEDATA/
    ├── seasons.sql.zip
    ├── seasons-slider.zip
    └── seasons-theme-sample-data.xml

PSD Graphic Sources

The PSD folder contains four subfolders, each of them is a set of graphics for different screen resolutions, 1200, 768, 480, 320

Each folder contains every single layout designed and developed for the seasons theme, you may use the graphics as a starting point for theme customization

Theme Files

THEME folder contains seasons theme, these two folders have to be uploaded to wp-content/themes/ folder of your WordPress. The main CSS file of the theme is located in the seasons theme.

Plugins

The PLUGINS folder contains WordPress plugins that you may want to use with the seasons theme, there usage is optional, but recommended.

Documentation

The DOCUMENTATION folder contains this document that you are reading now.

Sample Data

The SAMPLEDATA contains everything you need to get the same looks of the seasons theme that is on the live demo of the theme at http://seasons.transparentideas.com

The Seasons Theme is a WordPress theme, therefore it is important to get to know WordPress CMS before you continue. If you are not familiar with WordPress please visit WordPress getting started guide

WordPress Codex

You may find a detailed documentation of WordPress functionality at WordPress Codex

Installing the Theme

Once downloaded, unzip the compressed folder to see the structure of package.

Go to THEME folder, there you will find a packages seasons.zip, upload the package to wp-content/themes/ folder of your WordPress and uncompress it. Once uncompressed the theme can be activated.

Activating the Theme

Go to backend section of your WordPress site (http://link_to_your_site/wp-admin/), then go to Appearance -> Themes and activate the Seasons theme).

Activate Theme

Installing Plugins

When you click on "Activate" button to activate Seasons Theme, you will see the a notice offering you to install required and recommended plugins. Click "Begin installing plugins", on the screen that appears next select the plugins you want to be installed, pick "Install" in Bulk Actions select box and click "Apply" button.

Installing Sample Data

If you wish to install sample data to make your site look the same way as the Live Demo of the Seasons Theme you may install Sample Data Installer plugin, that loads the data automatically upon activation. You will also have to download and unpack "uploads.zip" and upload the resulting "uploads" folder to "wp-content" folder of your WordPress installation. You will also have to assign menu locations, Main Menu has to be assigned to Primary Menu. After that reset permalink settings.

Watch a video tutorial below:

Rating the Theme

Spend a couple of minutes to rate the Season Theme, to do that please go to http://themeforest.net, click on your users profile -> Downloads. Aside the Seasons Theme icon you will see five star set, clicking the 5th star will give maximum rating to the Seasons Theme

Rate the Theme

The Seasons theme supports default WordPress functionality, such as post types and page templates. This allows you to build any kind of page, plus theme contains a lot of useful shortcodes and pre-built elements.

Layout Examples

It is strongly recommended to setup a separate copy of the WordPress instance with the demo content, this way you will be able to look up how to create this or that layout or add different elements.

Static Home Page

Before reading further it is strongly recommended to read WordPress Codex on How to Create a Static Home Page, General Information on Creating Static Pages and about WordPress Page Templates

Assuming you are familiar with the concepts of Creating a Static Page in WordPress, assigning page templates and setting a Static Page as a Home Page we will continue to learn how to create different layouts.

Page Templates

Seasons Theme comes with four page templates:

  • Default Template - default WordPress page template with comments section and sidebar
  • Full Width Page Template - the content of the page uses 100% of the browser width (use this template to build Front Page and Contact Us Page)
  • My Account Page Template - this template has to be used for "My Account" page and its subpages (this template is for WooCommerce pages, read further for more detailed info)
  • Page Template with Container - a page template without the sidebar or comments section but in a 12 columns container (See Page Grid section)

It is most likely that in 99% of cases you will need either Full Width Page Template or Page Template with Container, for instance to build a Home Page, Price Plans, About Our Company and Our Team pages you will have to use Full Width Page Template, for pages like FAQ, Company Portfolio and Gallery you will have to use Page Template with Container. So what is the difference between page templates? The Full Width Page Template displays the content using 100% of the browser's window width this is handy when you need to display items that have to occupy 100% of window's width like Revolution Slider or "categoryitems" shortcode in slider mode. The Page Template with Container template does not use 100% of the window's width, instead it displays the content in a container (12 columns see Bootstrap Grid System for more information). The My Account Page Template is a specific template for MyAccount page and it's subpages that are created by WooCommerce Plugin.

The Seasons Theme offers you a dynamic way of sidebar positioning. You can set both global and per page sidebar position. To set Global Sidebar Positions go to Backend of your WordPress site (http://link_to_your_site.com/wp-admin/), then go to "Seasons Theme" panel, open "Layout Settings" tab.

Layout

The "Layout Settings" panel lets you set global layout settings for each type of page. You can set sidebar position to left, right or with our the sidebar. Front Page Layout lets you set the sidebar position for the Home Page, "Global layout for Pages" setting will set global value for all static pages present on the site. The "Blog Page Layout" settings will set sidebar position for "Blog" pages (Page that has blog posts listed). "Single Post View" controls the position of a sidebar on single post page (the Single Post page). Taxonomy Pages Layout option lets you set sidebar position for the Taxonomy Pages (Posts Categories, Posts Archives etc). Store Layout Position option lets you set sidebar position on Store Pages (Product Listing Page, Single Product Page).

You also can set Sidebar Position for each created Page. Open a static page for editing in the backend of your site, there you will find a "Layout Settings Widget", set the sidebar position in that widget and the global value for the sidebar position will be overridden.

Single Layout

Setting Menu

WordPress Menus

Before reading further it is strongly recommended to read WordPress Codex on Menus

There are four menu locations available in the Seasons Theme, Content Menu, Primary Menu, Footer Menu and Hidden Menu.

It is recommended to assign Menus that you already have or will create in following order:
Menu Location

Seasons Theme offers you a convenient way of creating Main Menu of your site. We have enabled the menu with Mega Menu capabilities that you can switch on or off. You can switch a second level menu to a Mega Menu mode for specified menu items. Watch a video tutorial below to see how.

The Mega Menu option is available only for Primary Menu location.

Setting Header

Seasons Theme offers you several different ways of Header Layout. To change Header View go to "Seasons Theme" section in the backend of your site, select "Global & Header Settings" tab

You can upload Logo image via the backend of your site. In the "Global & Header Settings" tab click on "Upload" button, select the image to upload and then set it as your logo.

Upload Logo

You can set Logo position to Left, Center and Right once set the positions of the Main Menu will change accordingly to Right, Center or Left.

Logo Position

You can also set the color scheme for the Secondary Panel of the theme to either black or white.
Panel Style

WordPress Widgets

Before reading further it is strongly recommended to read WordPress Codex on Widgets

Header contains several sidebars and menu locations that you can use. The image below displays the positions of dynamic sidebars and menu locations.

Header Positions

Header Sidebars are meant to be used with specific widgets. To assign widgets to sidebars open Appearance -> Widgets and Drag and Drop widget to needed sidebar. To replicate the layout of the Seasons Demo place widgets into header sidebars in the order given in the table below.

Secondary Panel Sidebar LeftSecondary Panel Sidebar Right
Text Widget
You may write a welcome message.
WooCommerce Cart (PlumTree themed)
PT Search
Custom Menu*
*You may create a secondary menu, that contains links to WooCommerce pages like My Account and Checkout.

Assuming you know How to create WordPress Menus and you have created one or more menus, it is best to assign a menu that you consider the main one to Primary Menu position.

Please watch a video tutorial below that summarizes the information listed above.

Hidden Panel

Seasons Theme has a hidden panel that appears at the top of the page when a paged is scrolled down. The hidden panel contains a menu location and a sidebar.

Hidden Panel

The live demo of the Seasons Theme has Main Menu assigned to Hidden Panel Menu Location and WooCommerce Cart (PlumTree themed) in the hidden panel sidebar

Seasons Theme Footer contains one footer sidebar and footer menu location. Footer sidebar can be used for any widget that is available, except specific ones that have to be used in header, like Shopping Cart (PlumTree themed). The live demo of the theme has two text widgets in the footer sidebar.

footer

Setting Colors

Seasons Theme allows you to change main theme color, text color, menu color and headings color. To change colors go to "Seasons Theme" in the backend of your site, open "Global & Header Settings" tab, there you will find color options and predefined color schemes.
Colors

A Video tutorial below shows how to change colors of the theme and load default values in case you want to get back to original settings.

Setting Fonts

Seasons Theme comes with a set of the best fitting font set. You can set a Logo font, Menu font and Text font. To change fonts go to "Seasons Theme" panel in the backend of your site, select "Global & Heading Settings", on the left side of the panel you will find font settings.

Fonts

Boxed Version

Seasons Theme offers you two ways of displaying your site, boxed and wide. Boxed version displays the site in a container. To switch to boxed version go to "Seasons Panel" in the backend of your site and select "Boxed" (See image below).

Site Background

If you choose to switch to boxed version consider setting site background, to do that go to "Appearance" -> "Background" and set background image and properties.

Page Grid

Seasons Theme uses Bootstrap grid system, more about grid system here

Grid Systems

All you need to know about grid systems can be found here

Grid System gives you a comfortable way to build any kind of responsive layout, every page on the live demo was built using grid system. Seasons Theme comes with pre-built plugin for WYSIWYG WordPress text editor that allows you to easily create grid based layouts. Watch video tutorial on how to use grid system plugin below:

The plugin allows you to select number of columns per row and change the size of each column, the dialog window that opens to add a grid row also allows you to add classes to a row. Code below shows a regular output of the plugin.


<div class="container-fluid cont">
	<div class="row-fluid">
		<div class="span4"></div>
		<div class="span4"></div>
		<div class="span4"></div>
	</div>
</div>
		

The is a code for three columns in Container Padding Wrapper ("cont" class).

Page Blocks

Page Blocks basically are content wrappers. There are 6 available wrappers:

Block NameBlock ClassBlock Description
Blue Boxblue-boxa container wrapper with blue background by default and light content colors
Grey Boxgrey-boxa container wrapper with grey background by default and dark content colors
White Boxwhite-boxa container wrapper with white background by default and dark content colors
Container Paddingconta container wrapper with padding from top and bottom.
Container Padding Topcont-topa container wrapper with padding from top.
Container Padding Topcont-bottoma container wrapper with padding from bottom.
WYSIWYG editor is extended by the Seasons Theme to add Page Blocks to it functionality.
Using Grid, Page Blocks and shortcodes is all it takes to build beautiful pages with Seasons Theme.

Seasons Theme comes with a number of useful shortcodes that will help you build any kind of page from the components presented on the live demo of the Seasons Theme

Seasons Theme offers you a set of shortcodes and plugins that will help you build different kinds of home pages for different purposes. Live Demo of the Seasons Theme has three examples of home pages that can be built, but you are not limited to only three options. Here is the example of the Home Page for a web shop, here is the example of a Home Page for a Blog and for a Corporate Website

The components that were used to build these pages are available via shortcodes, Plugins, HTML elements and CSS classes.

Using Revolution Slider Plugin

Revolution Slider

Revolution Slider comes with Seasons Theme for free and should be used only with the Seasons Theme. Please read the documentation and tutorials on how to use Revolution Slider here

The Seasons Theme package contains slider sample data that you can import. To do that go to the backend of your site, click on Revolution Slider Section, find the "Import Slider" button and upload a seasons_slider.zip package that is located in SAMPLEDATA folder of the Seasons Theme package.

Import Slider

Once you create new or import an existing slider you will be given a shortcode that you can use do display the slider anywhere on page or blog post (See image below).

Slider Shortcode

Using WooCommerce Plugin

WooCommerce Plugin

Before reading further it is recommended to read Woocommerce Getting Started Guide

Seasons Theme is designed to fully support WooCommerce plugin. Once the plugin is activated in a new WordPress installtion (no woocommerce data in database), the plugin will prompt you to create WooCommerce Pages.

Click on "Install WooCommerce Pages" button, this will add necessary Pages to your WordPress site.

Each of the created pages contains a WooCommerce shortcode to display WooCommerce content, such as product listing, shopping cart, checkout form, customers account info and so on. Once you add products, categories, product tags you will see them displayed on the WooCommerce Pages.

It is important to get familiar with the functionality of the WooCommerce plugin before using it in the theme.

Using Wysija Newsletter Plugin

Wysija Newsletter Plugin is a comfortable way to create and manage newsletters, the plugin contains a newsletter form builder to create newsletter subscription forms, once you activate the theme and install plugins, it will be available to you through the backend of your site.

Wysija Newsletter Plugin

Before reading further it is recommended to watch this screencast for beginners.

Using Contact Form 7 Plugin

The Contact Form 7 Plugin is a great contact form builder for WordPress, we have styled contact form elements to match the Seasons Theme Style, thus you can create any kind of contact forms and use them anywhere on your site.

Contact Form 7 Plugin

More in-depth information about the plugin can be found at Contact Form 7 Plugin Documentation

The live demo of the Seasons Theme uses Contact Form 7 form on the Contact Us Page

Using Arconix FAQ Plugin

Seaons Theme comes with Arconix FAQ Plugin that can be used to create an FAQ section on your site. You can see an example of the FAQ Section here

Arconix FAQ Plugin

More in-depth information about the plugin can be found at Arconix FAQ Plugin Documentation

Seasons Theme comes with a number of useful shortcodes that will help you build any kind of page from the components presented on the live demo of the Seasons Theme

Using Shortcodes

It is strongly recommended to read about WordPress Shortcodes at Codex before reading further.

Seasons Theme Shortcodes

We have created a page that describes the functionality and usage of all shortcodes used in Seasons Theme here

Category Items Shortcode


[categoryitems itemselection="recent"]
Available options:
   itemselection: recent / featured / top_rated / random / bestsellers
   orderby    : name / price
   order      : ASC / DESC
   hide_empty : true / false,
   include    : 1, 2, 3 ... (categories id to include separated by comma)
   mode       : slider / (turns "categoryitems" view in full width slider, see below)

Content Carousel Shortcode


[carousel mode="inline" class="testimonials"] 
[caritem]Proin gravida nibh vel ... (HTML Content)[/caritem]
[caritem]...[/caritem]
[caritem]...[/caritem]
[/carousel]
Available Options:
   mode = inline / 
   class = (css class to be used)
 

Gallery Shortcode

 [gallery columns="4" ids="1510,1509,1508,1507"] 
Available Options: 
   collumns: integer up to 10
   ids     : ids of media
   size    : (list of sizes given in the docs)
   effect  : circle / fadein / bar / bar2 / bar3 / cover / cover2 / cover3 (hover effect)

Sortable Gallery Shortcode

 [gallerysortable columns="4" ids="1052,1053,1051,1050,1049,1048,1047,1046"] 
Available Options: 
   layout  : fitRows / cellsByRow / cellsByColumn / masonry
   ids     : ids of media
   size    : (list of sizes given in the docs)
   effect  : circle / fadein / bar / bar2 / bar3 / cover / cover2 / cover3 (hover effect)
   gallery : fancybox / prettyPhoto

Gallery Preview Shortcodes

 [gallerypreview title="Our Latest Models" ids="524,521,520,510"] 
Available Options: 
   ids     : ids of media
   gallery : fancybox / prettyPhoto
   title   : string (the title of the gallery)

Recent Comments

[pt-recent-comments number="4"]
Avilable Options:
  number: (integer, number of posts to display)

Tweets Shortcode

[tweets max="2"]
Available Options:
   max: (integer, number of tweets to display)

Social Icons Shortcodes

[social type="html5 " link="#"/]
Available Options:
  type : facebook / linkedin / google-plus / twitter / html5 ...
  link : url (link to your social profile)

Recent Posts Shortcode

[recent-posts posts="3"]Recent Entries[/recent-posts]
Available Options:
   posts             : (integer, number of posts to display)
   shortcode content : the title

FAQs Shortcode

[faq]
All available settings are set through the dashboard.

Tabs Shortcode

[tabs style="horizontal"]
[tabitem title="Developer"] content ... [/tabitem]
... 
[/tabs]

Available Options:
   style : vertical / horizontal
   title : (string, title for each tab)

Accordion Shortcode

[accordion]
[accitem title="Developer"]content ... [/accitem]
... 
[/accordion]
Available Options:
   title : (string, title for each tab)

Progress Bar Shortcode

[progressbar value="30" title="More to come"/]
Available Options:
   value : (integer, value of the progressbar)
   title : (string, progressbar title)

Infographic Shortcode

[infographic width="371" title="Achivements" fontcolor="#daa32b"]
[value value="50" label="150 Projects" color="#6e71a3" /]
...
[/infographic]
Available Options:
   width     : (integer, width of the container)
   title     : (string, infographic title)
   fontcolor : (hexadecimal, color for the infographic title )
   value     : (integer, value of the arc)
   label     : (string, label for the arc)
   color     : (color, of the ard)

Doughnut Shortcode

[doughnut]
   [data color="#3c00ff" value="10"]
   ...
[/doughnut]
Available Options:
   width : (integer, container width)
   height: (integer, container height)
   color : (hexadecimal, color of the doughnut section)
   value : (integer, value of the doughnut section)

Pie Shortcode

[pie]
   [data color="#3c00ff" value="10"]
   ...
[/pie]
Available Options:
   width : (integer, container width)
   height: (integer, container height)
   color : (hexadecimal, color of the doughnut section)
   value : (integer, value of the doughnut section)

Bar Shortcode

[bar labels="labe1, label2, ..."]
   [dataset color="#6e71a3"] 65 , 59 , ... [/dataset]
   ...
[/bar]
Available Options:
   width : (integer, container width)
   height: (integer, container height)
   labels : (comma separated strings)
   color : (hexadecimal, color for a dataset)

Polar Shortcode

[polar]
   [data color="#6e71a3" value="10"]
   ...
[/polar]
Available Options: 
   width : (integer, container width)
   height: (integer, container height)
   color : (hexadecimal, color for a dataset)
   value : (integer, value of a dataset)

Radar Shortcode

[radar width="371" height="300" labels="March, April, ..."]
   [dataset color="#bf0425"] 65 , 59 , ... [/dataset]
[/radar]
Available Options:
   width  : (integer, container width)
   height : (integer, container height)
   labels : (comma separated strings)
   color  : (hexadecimal, color for a dataset)

Line Chart Shortcode

[line labels="March, April ..." width="770" height="300"]
   [dataset color="#bf0425"] 65, 59, ... [/dataset]
[/line]
Available Options:
    width  : (integer, container width)
   height : (integer, container height)
   labels : (comma separated strings)
   color  : (hexadecimal, color for a dataset)

Caption Shortcode

[caption id="attachment_1053" align="alignnone" width="300" gallery="fancybox"] 
    Caption Text ... 
[/caption]
Available Options:
   width   : (integer, container width)
   width   : (height, container height)
   gallery : fancybox / prettyphoto

Maps Shortcode

[gmap data="address:New York - NY 10017 , bubbletext:Pointer" width="100%" height="310px"]
Available Options:
   data   : (string, settings data, see docs)
   width  : (string, width of the map container)
   height : (string, height of the map container)

Pricing Shortcode

[pricetable title="Super" currency="$" type="hero" price="100" info="per year" link="http://google.com" cta="Get Now"]
<ul>
<li><b>50</b> products</li>
<li><b>5</b> image per product</li>
...
</ul>
[/pricetable]
Available Options:
   title    : (string, price table title)
   currency : (string, currency sign) 
   type     : hero / 
   price    : (string, price)
   info     : (string, info)
   link     : (url for call to action button)
   cta      : (string, call to action button title)

Profile

[profile name="Mark Miller" role="Creative Director"]
<span class="about">Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat.
consequat auctor eu in elit.</span>
[social type="facebook" link="#" /]
[social type="google-plus" link="#" /]
[social type="linkedin" link="#" /]
[social type="twitter" link="#" /]
<img class="alignnone" src="#" height="270" data-role="meteor" data-effect="circle" />
[/profile]
Available Options:
   name : (string, person's name)
   role : (string, role in the company)

Icon Menu Shortcode

[iconmenu]
   [iconitem url="http://google.com" buttontext="View More" title="Backend Theme Options" text="Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat"][/iconitem]
   ...
[/iconmenu]
Available Options:
   url        : (url, link of the item)
   buttontext : (string, call to action button text)
   title      : (string, item's title)
   text       : (string, item's text)
   icon       : (html tag, item's icon) 

Simple Slider Shortcode

[soliloquy id="998"] 
Available Options:
   id : (integer, id of the slider)
   editable from the dashboard, see docs

Embed Shortcode


[embed width="1170" height="528"]http://vimeo.com/76495339?color=000[/embed]
Available Options:
   width  : (integer, container width)
   height : (integer, container height) 

Newsletter Shortcode

[wysija_form id="1"]
Available Options:
   id : (integer, the id of the newsletter form)
   Settings are set through dashboard, see docs

Basic Concepts

Before reading further make sure you have read and understood Basic Concepts, Using Plugins and Shortcodes

To create a Home Page go to the backend of your site and select "Pages" section, then click "Add New" button. Enter a page title (let's say Home Page), assign Full Width Page Template and click "Publish" button. Then go to "Settings" section and click on "Reading" settings, in the "Front page displays" section set to "A static page" and in the "Front Page" select box select a static page that you want to be displayed as a Home Page. Click "Save Changes" button.

Before creating Home Page you have got to have content ready to be published, if you are going to use products related shortocdes ([categoryitems], [featured_products]...), blog posts related shortcodes ([pt-recent-comments]), or gallery related shortcodes ([gallerypreview]) you have to add products to your catalog via backend, add posts and create gallery

Video Tutorial below will guide you through the process of creating a Home Page, you will be shown how to add different home page elements, but please mind that you are not limited in your home page options, the tutorial below shows how to create and add different elements.

Home Page sibebars

Home Page of the Seasons Theme contains two additional sidebars, you may use them to display widgets that you want to show only on home page, the "After Content Sidebar" and "Before Footer Sidebar"

The live demo of the Seasons Theme has "Featured Products", "New Products", "Top Rated Products" and "Random Products" widgets in the After Content Sidebar, and Text Widget for the "Before Footer Sidebar" with the following content

<div class="call-to-action-1">
    <span class="call"><b>seasons store</b> newsletter</span>
    [wysija_form id="1"]
</div>

Notice the [wysija_form id="1"] shortcode to display the Wysija Newsletter Subscription Form

The Home Page Content

You can find the sample content for the Home Page here

Blog Posts

Before reading further please read How to add Blog Posts

Once you add Blog Posts, you may create a blog page. To do that create an empty page, title it as Blog or News (you may title it anyway you want), publish the page. Next, go to "Settings" -> "Reading", in the "Front Page displays" section find the Posts Page select box and select a page that you have just created. Click "Save Changes" button.

Seasons Theme Offers you several types of the Blog Page Layout, Grid, List and Masonry. To control the Blog Page Layout go to Seasons Theme Section in the backend of your site, open "Blog Settings" tab. There you will find blog page settings, Posts Layout Type and wether to use Pinterest Like (Masonry) posts layout.

You also may turn on or off the sidebars on Blog Page, if the sidebars are turned off the blog posts will occupy 100% of the page width. The tutorial below will show you how to set up the blog page.

The Seasons Theme supports all available post types like video, audio, gallery and so on.

WooCommerce Pages

Before reading further please read about WooCommerce Pages

Once you install WooCommerce plugin and install WooCommerce Pages you can continue to add Products to your Shop and when you add an initial set of products you can continue to configure your Shop Pages.

The Seasons Theme has two Shop sidebars, Shop Sidebar Left and Shop Sidebar Right, you may use those sidebars to display Shop related Widgets:

  • WooCommerce Product Categories
  • WooCommerce Layered Nav Filters
  • WooCommerce Layered Nav ... (Place Product Variations filter like size, color etc)
  • WooCommerce Price Filter

To make Shop page look good you will have to also set some WooCommerce Settings. Go to "WooCommerce" section in the backend of your site, select "Settings" section. There, find "Styles and Scripts" section and uncheck "Enable WooCommerce CSS" and "Enable Lightbox". Next, switch to "Catalog" Tab and set the image size properties as follows.

Also, switch to "Pages" Tab and make sure the settings are set as follows

Seasons Theme Control Panel has some extra settings for the Shop pages, the sidebar positions, the number of products per page and wether to use Sliding Gallery.

The video tutorial below will show you how to set different settings and layouts for the shop page.

WordPress Gallery

Before reading further please read about WordPress Gallery

Seasons Theme Completely supports default WordPress Gallery functionality and extends it. You can use up to 10 columns with the gallery shortcode [gallery columns="10"] the gallery images will be resized automatically depending on the page's width. You also can sent the thumbnail sizes through the "size" parameter. The available image sizes are:

  • 'category-thumb' w:300
  • 'homepage-thumb' w:368
  • 'homepage-thumb-cropped' w:368, h:386
  • 'single-thumb' h:291
  • 'gallery-thumb' w:570
  • 'default-thumb' w:500, h:500
  • 'grid-thumb' w:380, h:163
  • 'list-thumb' w:380, h:380
  • 'insta-thumb' w:81, h:81
  • 'related-thumb' w:170, h:128
  • 'full-width'

Seasons Theme also offers you a sortable gallery shortcode ([gallery_sortable]), that allows sorting images by tags. To use the sortable gallery each image has to contain tags. To add tags to images from your Media Gallery follow the steps below.

  • Go to the backend of your WordPress Site
  • Open "Media" -> "Library" Section
  • Find an image that you plan to add to a sortable gallery
  • Click on "Edit" button
  • Find Image "Description" field
  • Write tags that describe the image separated by comma
  • Click "Update" button and repeat the process for each image you plan to add to the sortable gallery

Video tutorial below describes the process of creating the galleries.

Contact Form 7 Plugin

Before reading further please read about Contact Form 7 Plugin

To build a contacts page you will need to use Google Maps shortcode [gmap] and Contact Form 7 Plugin. The google maps shortcode has a lot of settings that are passed through the "data" parameter.

[gmap data="lat: 41.895465, lng: 12.482324, bubbletext:Seasons Shop, zoom: 15, zoomControl : false, panControl : false, streetViewControl : false, mapTypeControl: false, overviewMapControl: false, address:133 Mercer St, New York, NY, 10012" width="100%" height="513px"]
    

The parameters are:

lat
Latitude Value (41.895465)
lng
Longitude Value (12.482324)
bubbletext
Text for the pointer
zoom
Map Zoom Value
zoomControl
true or false
panControl
true or false
streetViewControl
true or false
mapTypeControl
true or false
overviewMapControl
true or false
address
In case you don't know the longitude and latitude values you may use address instead

To create a contact form go to the backend section of your WordPress site, open the "Contact" section and lick "Add New", to create a new contact form. The Seasons Theme live demo uses the contact form with the following code.

<p>[text* your-name 50/  placeholder "Your Name" ] [email* your-email 50/ placeholder "Your Email"  ] </p>
<p>[text  your-subject 100/ placeholder "Subject" ]
</p><p>[textarea  your-message 40x5 placeholder "Message"  ] </p>
<p>[submit "Send Message"]</p>

Once you create a contact form and click save you will be given a shortcode of that contact form. See image below.

The video tutorial below shows how to create the Contact Us page.

Fonts Used in Seasons Theme are: