Sequoia WP theme

Version 1.0 created: July the 25th , 2014. | By: Aligator Studio | Email: themes@aligator-studio.com

Slider Revolution premium plugin included

Thank you for purchasing our theme.
Sequoia theme is e-commerce WordPress theme compatible with WooCommerce plugin

NOTE: In documentation bellow, by clicking on buttons like this , this , this , this , this or this you'll learn more, often important details about theme.
Aqua Page Builder will be in most cases referred as AQPB

Main Theme (parent) set up

THIS DOCUMENTATION ASSUMES YOU ALREADY KNOW HOW TO INSTALL WORDPRESS ON YOUR SITE (DOWNLOAD INSTALLATION, SET UP DATABASE AND RUN SERVER WORDPRESS INSTALLATION), AND HAVE BASIC KNOWLEDGE OF WORDPRESS CONCEPTS, ROUTINES AND TERMINOLOGY.

Sequoia THEME INSTALLATION BEST PRACTICE:


  • 1. make clean WP installation
  • 2. install and activate Sequoia theme - IMPORTANT -After theme activation
  • 3. install REQUIRED PLUGINS (install and activate):
    IMPORTANT - Plugins installation procedure

    Sequoia theme heavily depends on Aqua Page Builder (AQPB) plugin. Although theme could function properly without plugin (especially blog and standard pages), theme would miss some great features targeted for integration AQPB plugin.



    1. Aqua Page Builder plugin AQPB
    2. WooCommerce - Important notes
    3. Aligator Custom posts
    4. Aligator Shortcodes Plugin
    5. Slider Revolution - Important notes

  • 4. import demo content - Import notes
  • 5. set home page

    IMPORTANT NOTE -DEFAULT HOME PAGE:
    Since default WP home page is set to display blog posts, such is the case with Sequoia theme, too.

    To set home page as in theme demo (with imported content) in Settings > Reading set "Front page displays" to "A static page (select below)" and select imported "Home page".
  • 5. set permalinks - Important notes
  • 6. set menus - Important notes

Child theme set up

TO INSTALL CHILD THEME, PARENT (MAIN) THEME MUST BE INSTALLED.

TO LEARN BASICS ABOUT CHILD THEMES, CONCEPTS AND REQUIREMENTS, CHECK WP CODEX - CHILD THEMES

  • 1. install main (parent) theme

    first install parent theme, as described above
  • 2. install and activate one of 3 child themes

    Sequoia has 3 child themes provided in downloaded package:
    • Sequoia Fashion
    • Sequoia Food
    • Sequoia Handmade
  • 3. import XML file from any of three child themes.

    Import notes for child themes

Theme features
theme specific content

Products

After installing WooCommerce plugin, you will be able to add products, which are actually custom post type ("product" custom post type).

Adding products can be done in WP admin menu - Products > Add product, the list of all products is in Products > Products

If you imported demo content you'll be able to see that there are set Product categories, Attributes and product tags.

There are plenty of settings, options and possibilities you can add to your products and this is all covered in WooCommerce documentation which we highly recommend to use during your e-commerce shop activation.

NOTE:
Sequoia theme adds nothing in administering shop or products, all the shop related settings are part of WooCommerce plugin - theme is dealing with products front end presentation (css styling and adapting shop pages layout to theme), especially in Aqua Page Builder custom theme blocks.

Sequoia theme / WooCommerce related specifics :


Administering Aqua Page Builder blocks with products content (and other) is explained in Aqua Page Builder custom theme blocks section.

Theme options Shop settings adds additional layer of control over displaying products. For more info, head over to Theme options section.



Portfolio items

After installing Aligator Custom Post Types plugin your theme installation will have additional custom post type registered - Portfolio.

Portfolio post type is another way to format you content in special way - different then posts, pages or products - to show your latest projects, models, sales actions ...


Adding portfolio item

  • In WP admin menu go to Portfolio > Add New Item
  • Add title, text and set featured image
  • Create and select portfolio categories and tags (in side meta boxes)
  • Featured item - in first side meta box check if you want to make item featured (for usage in page builder blocks )
  • Post formats tabs (above the title) are used to assign post format to the portfolio item (standard, image, gallery, audio, video or quote) - details about Post formats settings (custom meta boxes) are in the section "Post formats"
  • Portfolio custom meta box:

      Portfolio custom meta box adds additional information to main content and featured image and that data is displayed in single portfolio page only:
    • Tagline - displayed bellow the item title
    • Layout mode - float image left, right or stretch in full width (good for image post format)
    • Featured image format - choose between registered image formats
    • Number of related items - in the single page bottom there are related portfolio items section - set the number of items
    • Button URL and label - button and link to eventual external or internal "project" page

Creating portfolio page

Portfolio page (or page section) can be created with AQPB plugin - "Ajax content" or "Filtered content" block. AQPB block are explained more detailed in "Aqua/Sequoia Page Builder blocks" section.

Featured posts, products, portfolios ...


Sequoia theme utilizes featured content for additional layer of filtering content. Since great deal of delivering content is done with AQPB plugin, in plugin blocks there is a option "Show only featured" and it filters featured posts, products or portfolio items, along with other filter (post type, taxonomy, number of items etc ...)

Making items featured:
  • Posts - use "sticky post" feature - in post "Publish" box - toggle "Visibility" setting and check the "Stick this post to the front page"
  • Products - in products list page (WP menu - Products > Products)- click on little grey star in line of each product you want to be featured
  • Portfolio and slide items - in item edit page, in "Featured" box check the "Make this item featured"

Featured image ( or, post thumbnail)


Each of upper post types are using Featured post image - this is the image that represents the content and it is used in archive pages and single pages as bellow post titles and title background, respectively.

Media sizes and formats


Image sizes

Sequoia recommended image size is min. 1400px in width. Ideally, the ratio between with / height would be in ratio 1 : 1.618 (golden ratio) - 1400px x 860px in landscape mode or 1400px x 2200px in portrait mode.


Additional mage sizes created by theme are - Sequoia portrait and Sequoia landscape.


NOTE: because of the theme responsive and flexible nature, the relevant concepts for images are:

  • width/height ratio (aka portrait or landscape) and
  • image resolution (the bigger resolution the better quality - but loading time is longer / more bandwidth consumed).

We recommend usage of Sequoia portrait of landscape formats, and only if necessary custom image sizes (available in Aqua Page Builder blocks), smaller sizes (bigger sizes will heavy load image resizing script.)

Audio

Since WP version 3.6 it' very easy to use audio and video with embedded media player.

Audio files - upload files (mp3 ) via media uploader ( activate "Audio" post format tab ) from custom meta box "Audio settings" for self-hosted audio, or simply enter audio file URL in the same input field. Audio files uploaded this way will be display in post archive pages, single pages and in page builder blocks ( ajax content and filtered content blocks )

Audio mp3 files can be added with "Add media" pop-up window, in which case for the uploaded audio will be added [audio] shortcode. Audio files added that way will be visible only on posts single page.


Video

Sequoia is using video hosting services such as YouTube, Vimeo, Sreenr etc. to add video as featured media using post formats and custom meta boxes.

First - select post format video tab, then in custom meta box "Video settings" enter video ID code (not full address of video), and then enter the values of width and heigh of video.

To add more video media inside the post content it is recommended to use Aligator Studio Shortcodes (installed in automated theme plugins installation). Assuming the Aligator Studio Shortcodes are installed and activated - click on "Add shortcodes" button, select "Video" and, same as in post format way - choose video host service, enter only video ID code, and then enter the values of width and heigh of video.

Page templates

Sequoia has following defined page templates ( "static" pages - in WP admin menu - "Pages" )

  1. Default template - standard WP template with sidebar
  2. Blank template - template with no header (with logo and menus) and footer - good for "Landing pages"
  3. Full width page - page without the sidebar
  4. Page builder template - page template best suited for usage with Aqua Page Builder templates
  5. Page of posts - page with blog posts archive display capability ( with pagination )
  6. Page of posts INFINITE load - page with blog posts archive display capability with AJAX infinite posts loading

Aqua Page builder blocks

As stated before, Sequoia theme heavily relies on AQUA Page Builder plugin - building custom pages with pre packed blocks, using page builder page scaffolding ( grid system ) and many blocks customization options.

To learn some AQPB basics before continuing with Sequoia page builder block, please visit plugin's page


To extend plugin's capability Sequoia theme offers following powerful page builder blocks :


  • ROW block

    The base block for Sequoia content - ROW block is the block that holds page scaffolding and where you add other page builder blocks.

    The ROW BLOCK is built to be used primarily in "Page builder template" - page builder template has different layout - maximally adapted to ROW BLOCK.

    Options:
    • Titles color - overrides the color default or theme options values for headings inside the row.
    • Text color - overrides text color values
    • Link color - overrides link color values.
    • Overlay color - applies over the background image, with usage of opacity control - can be used as background color, too
    • Overlay opacity - set opacity/transparency of overlay colo
    • Row background image - upload your image as row background
    • Background repeat and size
    • Padding top and bottom - adjust the paddings
    • Full width content - blocks inside are stretched to full width page, not contained with scaffolding (css grid) container
    • Equalize inner blocks heights - if different amount of content in inner blocks, set heights of each to same value.
    • Remove side and bottom gutter - remove spaces created by theme grid system
    • Paralax background - activates paralax effect - to be used if bakground image is set
    • Paralax background ratio - the ratio for paralax background background position and speed
    • ----------YOUTUBE VIDEO BACKGROUND---------
    • YouTube video ID - enter YT video id ONLY, not the full address to YT video.
    • Auto play video - starts the video play automatically after page load
    • Mute video - mute the sound of the video
    • Optimize display - fit the video size into the window size optimizing the view
    • Loop video - loops the movie once ended
    • Volume - loudness of the sound (in percentage)
    • Video quality - default’ or “small”, “medium”, “large”, “hd720”, “hd1080”, “highres”
    • Video image ratio - ‘4/3’ or “16/9” to set the aspect ratio of the movie
  • Ajax content

    Ajax content is using ajax loading of posts, products or portfolio items by selecting it's categories.

    IMPORTANT NOTES

    • Post type and categories (taxonomies) must match - post with categories, products with product categories, and portfolio items with portfolio categories.
    • Multiple categories are selected using CTRL + click (use same combination to deselect ) - when selected the menu (with two different layouts will display)
    OPTIONS
    • Block title and subtitle / block style (float left, right, centered) - optional
    • Position of subtitle - above or bellow title
    • Viewport enter animation - css block animation when enters in the browser view.
    • Post type - first and the most important filter - required
    • Post, product or portfolio categories select
    • Block style - 3 styles of Ajax content block layout
    • Taxonomy menu style - display inline or in toggle menu
    • Image format - registered image sizes (automatically created upon image uploads)
    • Image width and height - custom image size - if set overrides registered image formats - using image resizing script
    • Show zoom and/or Item link buttons - buttons appearing on item hover
    • Use slider, slider pagination, navigation - if items should be displayed in slider ( OWL carousel slider - responsive, touch and mouse drag capable slider)
    • Total items - total number of items to display - default is 8 if empty it will display max. item number, given the filters above.
    • Responsive slider items number - set number of items per different screen resolutions
    • Display only featured - additional filter layer - if checked only featured (or sticky) items will display
    • Hover animations - separate for image (and zoom/link buttons) and post text
    • "Read more" and URL address - custom link to given URL address
    • Additional CSS classes - add css classes defined in child theme or theme options custom css

  • Ajax products

    Ajax products block is displaying products, filtered by product categories, selected via ajax loading.

    IMPORTANT NOTES
    • Multiple categories are selected using CTRL + click (use same combination to deselect ) - when selected the menu (with two different layouts will display)
    • Ajax products categories block is designed to display product categories images in menu, so it's advisable to upload images for your products categories
    OPTIONS
    • Block title and subtitle / block style (float left, right, centered) - optional
    • Position of subtitle - above or bellow title
    • Viewport enter animation - css block animation when enters in the browser view.
    • Product categories select
    • Special filters - select to display latest, featured, BEST SELLING or BEST RATED products (WooCommerce features)
    • Categories menu - select between categories images, categories titles only or none
    • Menu columns - select the style of menu columns (items) display
    • Category images - text and overlay color
    • Product image format - registered image sizes (automatically created upon image uploads)
    • Toggle off/on "Quick view", "Add to cart/Select options" and "Add to Wishlist"( YITH WooCommerce Wishlist plugin must be installed)
    • Hover animations - separate css animations for image and product info, on tiem hover
    • Show zoom and/or Item link buttons - buttons appearing on item hover
    • Use slider, slider pagination, navigation, slider timing (in miliseconds) - if items should be displayed in slider ( OWL carousel slider - responsive, touch and mouse drag capable slider)
    • Total items - total number of items to display - default is 8 if empty it will display max. item number, given the filters above.
    • Responsive slider items number - set number of items per different screen resolutions
    • Button text and link - custom link to given URL address
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Filtered content

    Filter content is displaying content filtered by number of filters (categories, number of items. etc.) with dynamic javascript filtering and sorting with auto sizing and layout.

    IMPORTANT NOTES
    • Post type and categories (taxonomies) must match - post with categories, products with product categories, and portfolio items with portfolio categories.
    • Multiple categories are selected using CTRL + click (use same combination to deselect ) - when selected the menu (with two different layouts will display)
    OPTIONS
    • Block title and subtitle / block style (float left, right, centered) - optional
    • Position of subtitle - above or bellow title
    • Viewport enter animation - css block animation when enters in the browser view.
    • Post type - first and the most important filter - required
    • Post or portfolio categories select
    • Display only featured - additional filter layer - if checked only featured (or sticky) items will display
    • Image format - registered image sizes (automatically created upon image uploads)
    • Image width and height - custom image size - if set overrides registered image formats - using image resizing script
    • Block style - 3 styles of block layout
    • Taxonomy menu style - display inline, toggling menu or none
    • Show sorting dropdown - select menu to sort items dynamically
    • Total items - total number of items to display - default is 8 if empty it will display max. item number, given the filters above.
    • In one row - number if items in one row (value changes on mobile devices - check the demo)
    • Hover animations - separate css animations for image and product info, on tiem hover
    • "Read more" and URL address - custom link to given URL address
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Filtered products

    Filtered products is displaying products filtered by number of filters (categories, number of items. etc.) with dynamic javascript filtering and sorting with auto sizing and layout.

    IMPORTANT NOTES
    • Multiple categories are selected using CTRL + click (use same combination to deselect ) - when selected the menu (with two different layouts will display)
    OPTIONS
    • Block title and subtitle / block style (float left, right, centered) - optional
    • Position of subtitle - above or bellow title
    • Viewport enter animation - css block animation when enters in the browser view.
    • Product categories select
    • Product categories menu style - display inline, toggling menu or none
    • Show sorting dropdown - select menu to sort items dynamically
    • Special filters - select to display latest, featured, BEST SELLING or BEST RATED products (WooCommerce features)
    • Image format - registered image sizes (automatically created upon image uploads)
    • Image width and height - custom image size - if set overrides registered image formats - using image resizing script
    • Toggle off/on "Quick view", "Add to cart/Select options" and "Add to Wishlist"( YITH WooCommerce Wishlist plugin must be installed)
    • Hover animations - separate css animations for image and product info, on tiem hover
    • Total items - total number of items to display - default is 8 if empty it will display max. item number, given the filters above.
    • In one row - number if items in one row (value changes on mobile devices - check the demo)
    • "Read more" and URL address - custom link to given URL address
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Single product

    Sequoia "speciality" - single product block - best used in combination with ROW block and it's paralax property (using large product image as paralax background - as in theme demo.)

    OPTIONS

    • Block title and subtitle / block style (float left, right, centered) - optional
    • Position of subtitle - above or bellow title
    • Product select - select single product for display
    • Image format - use one of the registered image formats
    • (product) Image gallery pagination, navigation and timing - settings for sliding product images.
    • Style - style of the layout - centred , or float left or right
    • Background color - back color for single product block
    • Background opacity - opacity for background color
    • Product options display- choice between displaying product details with options dropdowns (like in WooCommerce product single page - "Reduced"), or displaying simple "Add to Cart/Select options" (like in WooCommerce catalog page - "Full")
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Headings

    • enter the title (or heading)
    • heading size
    • sub(or sup)-title and subtitle position
    • Viewport enter animation - css block animation when enters in the browser view.
    • Viewport Animation delay
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Banner block

    Banner block can be used for discounts announcements, big notices, and additional attraction to different aspects of your site.

    OPTIONS
    • Banner image - background banner image upload
    • Image format - size of the image used for background
    • Background size and position - css background properties
    • Viewport enter animation - css block animation when enters in the browser view.
    • Viewport Animation delay
    • Overlay color - coloured layer between back image and texts
    • Overlay opacity - opacity for coloured layer between back image and texts
    • Block opacity - overall block opacity
    • Padding - padding for all the block
    • Border style - choice between solid, dashed, dotted and double border
    • Title and text
    • Title size - choose between extra large, large, medium and normal
    • Subtitle - additional layer of text
    • Text color - applies to title and text
    • Text float - choice between right. left and centred
    • Disable invert colors on hover - turn on/off hover changing colors
    • Button label an link - if no label, link applies to whole banner block
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Image block

    Simple image upload with some options:

    OPTIONS
    • Image upload
    • Viewport enter animation - css block animation when enters in the browser view.
    • Viewport Animation delay
    • Image format - size of the image used for background
    • Image width and height - custom size, independent on registered image sizes (more server memory and CPU consumption )
    • Caption title
    • Caption title size
    • Textfield - additional caption text
    • Caption and text color
    • Text floating
    • Link and link opening in new tab/window
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Team member

    OPTIONS
    • Member image - upload your image
    • Member name - required
    • Position, URL, Phone, Member info - fields are optional
    • Social networks (available via toggle button) - optional
    • Viewport enter animation - css block animation when enters in the browser view.
    • Viewport Animation delay
    • Layout style - choose between centred, float left or right
    • Image style - square or round
    • Image size - enter image size in percentage ( for example 55% )
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Google Map block

    IMPORTANT NOTICE: Only one Google Map Block per page can be used

    OPTIONS

    • Title or name - will be used on marker popup window
    • Viewport enter animation - css block animation when enters in the browser view.
    • Viewport Animation delay
    • Address input fields - address STREET, and address TOWN, COUNTRY
    • Address additional info
    • Location latitude and longitude (will override the Address input fields in map location search )
    • Width and height of the map (enter units - preferable percentage for width and pixels for height)
    • Map color - color overlay for map - adjust it to your site's color
    • Map desaturation - desaturation of color - default or the one set above
    • Disable scroll zoom - useful disabling to prevent "un-scrolling" of the page
    • Location image - thumbnail image that will be displayed with click on map marker
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Contact form

    OPTIONS

    • Block title and subtitle / block style (float left, right, centered) and subtitle position
    • Recipient email address - required
    • Location image - optional image - example usage - company headquarters
    • Location description
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Testimonials

    OPTIONS

    • Block title / block style (float left, right, centered) - optional
    • Viewport enter animation - css block animation when enters in the browser view.
    • Testimonial sub-block - add image, title, testimonial text and name per each sub-block
    • Add testimonial button - add as many sub-blocks as you like
    • Images style - square (default) or rounded (not applicable in IE8 and less)
    • Slider pagination, navigation toggle and timing input (in miliseconds)
    • Responsive slider items number - set number of items per different screen resolutions
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Icon block

    Create your customized icon with the choice of over 470 glyph icons from Icomoon

    OPTIONS
    • Icons select - select icon to customize by clicking on it
    • Icon and block color and size controls (toggled)
      • glyph size,
      • glyph color,
      • padding,
      • border size,
      • border radius,
      • border color,
      • background color,
      • no icon background checkbox (transparent background)
      • Block color and opacity option
    • Block border style - solid, dotted, dashed, double
    • Icon hover animation - "attention seekers" on mouse hover, using hover.css library
    • Viewport enter animation - css block animation when enters in the browser view.
    • Viewport Animation delay
    • Icon block title and text (optional)
    • Additional button (must be entered both label and link to display the button)
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Slider block

    Slider block is designed to be used for displaying for post types: Posts, portfolio and products.

    OPTIONS
    • Image format - registered image sizes (automatically created upon image uploads)
    • Post type - the most important filter - required
    • Layout style - 4 styles applicable any post type
    • Animation style - 4 automated animations styles applicable any post type
    • Post, product or portfolio categories select
    • Special filters - choice between latest, featured (sticky) and best selling and best rated (WooCommerce products only)
    • Total items - total number of items to display - default is 8 if empty it will display max. item number, given the filters above.
    • Use slider pagination, navigation, slides auto-play delay time
    • CSS transitions - Use OWL Carousel's css animations on slides change
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Slider Revolution block

    Slider Revolution block requires Slider Revolution plugin to be installed and activated, and to have at least one slider created, which shortcode can be inserted in Slider Revolution block.

    Sequoia theme include also sliders used in theme demo, and these files can be found in theme's downloaded package, zipped in "Sliders.zip" file.

    OPTIONS
    • Choose Slider Revolution slider
  • Images slider block

    OPTIONS

    • Block title / block style (float left, right, centered) - optional
    • Viewport enter animation - css block animation when enters in the browser view.
    • Images sub-block - add image, title and captions text per each sub-block
    • Add new image button - add as many sub-blocks as you like
    • Images style - square (default) or rounded (applicable only to thumbnail image format)
    • Slider pagination, navigation toggle and timing input (in miliseconds)
    • Responsive settings - number of items to show for different device widths.
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Social icons

    Block for entering contact information and social networks profile links

    NOTE: if horizontal line type is "none", height will apply as blank space. In case of "none" the margin settings won't apply.

    OPTIONS
    • Block title
    • Title and block elements float - left, right centered
    • Horizontal or vertical - display contact info and social icons horizontally or vertically
    • Contact info fields sub-blocks - add any number of info fields - each block has field type choice: phone, mobile, email, website, (physical) address
    • Social network info fields ( toggled )
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Clear block

    Some blocks need more vertical spacing between them or simply need to go to new row - so use "Clear block"

    NOTE: if horizontal line type is "none", height will apply as blank space. In case of "none" the margin settings won't apply.

    OPTIONS
    • Horizontal line type - none, single, double, dotted, dashed
    • Line color
    • Line width - applies to any line style
    • Margin - applies to top and bottom margin, NOT left and right.
  • Onepager menu block

    One pager menu block - insert menu items and connect them to anchored links ( ROW block ID's )

    NOTE: recommended to create all the link targets ( ROW blocks with content ) first, as after saving the template the ID's structure is refreshed and reassigned ( ID's are needed to be inserted in menu items)

    OPTIONS
    • Menu items adding
      • Menu item label
      • Menu item anchor link
      • Item icon dropdown select
    • Sticky menu - on scroll it will stay fixed on top
    • Menu margin - a space between menu and container boundaries
    • Copy menu to side menu /header - can include existing menu from that location - Main menu location is used.
    • Menu background color
    • Menu style - 2 styles
    • Menu alignment - left, center, right
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Onepager logo
  • Product categories block

    Simple product categories block.

    NOTE: same menu as in Ajax Products block, except for ajax loading products, this menu links to product archive pages.

    OPTIONS
    • Block title Block subtitle
    • Block title style and subtitle position
    • Viewport enter animation - css block animation when enters in the browser view.
    • Product categories multiple select
    • Categories menu - with category images (set on Products > Categories) or without images
    • Menu columns - autostretch, autofloat or fixed number
    • Category images - text and overlay color
    • Images width and height
    • Additional CSS classes - add css classes defined in child theme or theme options custom css
  • Button block

    Simple button block.

    NOTE: same menu as in Ajax Products block, except for ajax loading products, this menu links to product archive pages.

    OPTIONS
    • Block title
    • Block subtitle
    • Button float - left, centered, right
    • Button style - default, smaller, larger, extra large
    • Button margin control
    • Button colors - background, border and font color
    • Button size
    • Button label - text to be shown inside button
    • Button link - url address when button is clicked
    • Toggle new tab/window link opening
    • Additional CSS classes - add css classes defined in child theme or theme options custom css

Post formats and custom meta

Sequoia theme uses Wordpress feature - post formats - to add one more layer of control over content formatting.

CUSTOM META - each post type has it's own specific settings, grouped in custom meta boxes and meta fields.

Post formats are used in POSTS and PORTFOLIO ITEMS

NOTE: after import of demo content WP importer doesn't import post formats for PORTFOLIO items, so those will need to be set after the import of demo content.

POST FORMATS used in Sequoia theme:

  • Standard - no special settings, apart from "General settings" metabox
  • Audio

    by clicking on "Audio" post format tab the following custom meta box options will appear bellow the main editor

    OPTIONS
    • Audio file - upload your mp3 audio file.
  • Video

    by clicking on "Video" post format tab the following custom meta box options will appear bellow the main editor.

    NOTE: Sequoia utilizes video host services to deliver video content, self-hosted video is not supported. With custom meta box settings add featured video, but you can add more videos with use of shortcodes.

    OPTIONS
    • Video host site - choose between video host services
    • Video ID - enter ONLY video ID, not the whole URL address to video page
    • Width of video - enter the value AND the unit (px, em or %)
    • Height of video - same as above
    • Featured image or video thumbnail - Sequoia theme supports automatic usage of video thumbnails for featured image, but we recommend usage of standard WP featured image (post thumbnail)
  • Gallery
  • Image

    by clicking on "Image" post format tab the following custom meta box options will appear bellow the main editor.

    Use standard "Featured image" (post thumbnail) feature. If the image caption is entered (when uploading image or in "Media" settings).
  • Quote

    by clicking on "Quote" post format tab the following custom meta box options will appear bellow the main editor.

    OPTIONS

GENERAL CUSTOM META - regardless on whether you are editing post, page, portfolio or slide, there is CUSTOM META BOX "General settings" on the side of the edit page. Those settings are "cross-posts" settings, some can be applied to several post types, some to all.
All general settings are explained in the general settings metabox.

MENU LOCATIONS and MEGA MENU

Sequoia has following registered menus locations:

  1. Main horizontal menu
  2. Main vertical menu
  3. Main mobile menu
  4. Secondary menu

Any number of menu items, grouped under any menu name can be created, as long as they are assigned to menu locations using "Manage locations" or in "Menu Settings" at the bottom of menu items edit section.

NOTICE:
- one created menu can be assigned to any location or multiple locations
- it's recommended to use at least two menu locations:
  • one of the MAIN horizontal or vertical menus and
  • main MOBILE menu
Using Main mobile menu is recommended becuase of different layout and resolution of mobile devices.

To make editing menus faster, there is a nice plugin for duplicating menus - Duplicate Menu
To learn basics of administering Wordpress menu system - visit this Wordpress.org address - http://codex.wordpress.org/WordPress_Menu_User_Guide

MEGA MENU

Mega menu is theme built-in specific feature of Sequoia theme. It turns regular WP menu into Mega menu capable menu using custom post meta additional input fields in menu items edit page (Appearance > Menus)


Create Mega menu:


  • Create 1st level menu item using "Links" (custom menu item) - drag and drop to main items editor Check the "Mega menu" checkbox - this will be the "parent" of mega menu - on this item mouse hover the sub-menu with "mega menu capabilities" will appear
    NOTES:

    Only the 1st level of menu items can be MEGA MENU PARENTS

    Only "Links" (custom menu item) can be MEGA MENU PARENTS (or mega menu holder)

  • Under the same 1st level menu item, create sub-menu (2nd level) item as mega menu section title (can be link too - use any menu type)
  • Under the 2nd level menu item (added as section title) - add any number of menu items (in 3rd level) - those items will be grouped under the same section with title of the 2nd level item
Mega menu custom image:

  • Create 2nd level menu item - under 1st level menu item with checked "Mega menu" checkbox
  • In 2nd level item edit box, under "Custom image", click on "Upload" button to upload image or select the image from media library
Mega menu post with thumb and excerpt:

  • Create 2nd level menu item - under 1st level menu item with checked "Mega menu" checkbox

    NOTE: item must be "Posts", "Products" or "Portfolio"

  • In 2nd level item edit box, check the "Post thumb and excerpt" checkbox.
Mega menu new row:

After creation of several 2nd level menu sections (and 3rd level menu items inside), it's possible to shift new menu sections in new row, separated by line. To do that:

  • Create 2nd level menu item - under 1st level menu item with checked "Mega menu" checkbox
  • In 2nd level item edit box, check the "Clear for row" checkbox.
  • Add more 2nd level section with 3rd level menu items (or mega menu images) after item marked "Clear new row).
"Simple clear" - mega menu item :

2nd level mega menu items are formatted to act as section titles. To override this feature and use them as regular menu items just add simple-clear css class selector in "CSS classes (optional)" menu item field (that field must be enabled in "Screen options" )

NOTE: custom fields used for creating Mega menus are also not imported with XML file- you'll need to set those manually.

Widget areas (sidebars)

Sequoia has following defined sidebars (or, widget areas) available for adding widgets (WP default, WooComerce or theme specific)

  1. Sidebar - standard (left or right, depending on theme options)
  2. Shop sidebar - used only on shop pages
  3. Product page filter widgets only in product catalog page - use with WooCommerce Layered Navigation widget
  4. Filter reset widget - widget area reserved ONLY for reset layered navigation - use "WooCommerce Layered Nav Filters" widget ONLY
  5. Header widgets - for vertical side menu
  6. Footer widgets 1
  7. Footer widgets 2
  8. Footer widgets 3
  9. Footer widgets 4


Widgets icons - All the default widgets, WooCommerce widgets and theme widgets have icons representing specific widgets feature or purpose - this is Sequoia specific and will be turned off on theme switch.

Widget icons can also be "turned off" in theme options (Appearance > Theme options > Blog settings > "Widget title icons ?" section)

NOTE: Widget icons won't apply on 3rd party widgets (the ones not mentioned above)

NOTE: "Shop sidebar" and widgets inside will appear only on shop pages (All products, product categories, single product, cart, checkout, account page ...) and INSTEAD of standard sidebar

Theme options

Sequoia has large array of theme options settings that will affect your site's look, feel and behaviour. We won't go in detailed explanation of each and every option as those are explained in Theme options panel itself (in little icon "i" on side of each option)

Theme options list

  • General settings
    • Site logo image
    • Logo, site title and site description on/off
    • Custom favicon
    • Placeholder image
    • Customize login page
    • Login page background image
    • Block non-admin users from WP dashboard
    • UNDER HEADER titles background image
    • Layout (float left, right, full width)
    • Use Nice scroll toggle
    • Nice scroll settings
    • Use Nice scroll on SIDE MENU and MEGA MENUS
    • Show breadcrumbs toggle
    • Language flags toggle (if WPML plugin is active)
    • Sidebar missing widget replacement content
    • Hide edit pages metaboxes
    • Tracking Code
    • Theme contact form
  • Shop settings
    • Header cart icon action (popup mini-cart or link to cart page )
    • Products page numbers (Products per page, Products columns, Related total, Related columns)
    • Product categories catalog numbers (categories columns, image width and height)
    • Category images text color
    • Catalog shopping action buttons (toggle "Quick view", "Add to cart" and "Wishlist")
    • Products catalog full width page toggle
    • Single product full width page
    • Cart and checkout full width page
    • Products display settings (Products display settings, Disable zoom button,Disable link button)
    • Image format for products catalog page
    • Single product image display ( slider, thumbnails or magnifier )
    • Single product image format select
    • Quick view image format select
    • Catalog page viewport animation
    • Product image hover animation
    • Product info hover animation
    • Display shop title background image ?
    • Shop title background image
  • Fonts
    • Google fonts or Typekit fonts (or system)? toggle
    • HEADINGS FONT : Google Font
    • BODY FONT - Google Font
    • HEADINGS FONT : Typekit font ID
    • HEADINGS - system font
    • BODY FONT - system fonts
  • Styling options
    • Images hover overlay color
    • Images hover overlay opacity
    • Links color (primary)
    • Links hover color (secondary)
    • Buttons background color
    • Buttons HOVER background color
    • Buttons font color
    • Buttons HOVER font color
    • Site background color
    • Site background tiles or uploaded images
    • Site tiles
    • Site upload
    • Site repeat, attachment, scroll
    • Body background color
    • Body background color opacity
    • Theme background tiles or uploaded images
    • Background tiles
    • Background upload
    • Background repeat, attachment, scroll
    • Custom CSS
  • Header / Side menu
    • Side menu or header menu (layout orientation)
    • Predefined header layouts
    • Minimalistic header - sidebar animations (no IE9)
    • Logo/title height (width is auto)
    • Title font size (percentage)
    • Title word breaking
    • Side menu blocks (default)
    • Logo max height
    • Header menu Custom CSS
    • Header/menu blocks for MOBILE DEVICES
    • Header / Side menu background color
    • Header background color opacity
    • Side menu background color opacity
    • Header / Side menu font color
    • Header / Side menu links color (primary)
    • Header / Side menu links hover color (secondary)
  • Header info
    • Contact info/ Social links
  • Footer settings
  • Home settings
    • Blog home page title
    • Blog home page header background image
    • Upload blog home page header background image
  • Blog
    • Featured image size (in px)
    • Single blog page title background image (featured) ?
    • Blog archive title background image ?
    • Upload blog archive title background image
    • Blog CATEGORIES/TAGS title background image ?
    • Upload blog CATEGORIES/TAGS title background image
    • Blog AUTHOR pages title background image ?
    • Upload blog AUTHOR pages title background image
    • Post meta settings
    • Post date format
    • Show post format icons ?
    • Widget title icons ?
  • Portfolio
    • Single portfolio page title background image (featured) ?
    • Portfolio archive/taxonomies title background image ?
    • Set portfolio archive/taxonomies title background image
  • Backup
    • Backup theme options
    • Transfer Theme Options Data

Plugins

Sequoia theme is crafted to work with few obligatory plugins (or better - highly recommended - Sequoia can function without any plugin), such as:

  • WooCommerce
  • Aqua Page Builder
  • AS Shorcodes (included in download package)
  • Slider Revolution (included in download package)

and is compatible with few recommended plugins, such as:

  • WooCommerce ShareThis Integration
  • YITH Woocommerce Wishlist
  • YITH WooCommerce Ajax Search
  • WPML - multilingual WP
  • MailChimp for Wordpress (Lite)

MailChimp / Sequoia specifics

To set up MailChimp widget form for same appearance as in theme demo (http://aligator-studio.com/Sequoia), use following HTML code in form: ( in MailChimp fo WP > Forms )

	<label for="mc4wp_email">Email address: </label> 

	<div class="Sequoia-mailchimp">
		<input type="email" id="mc4wp_email" name="EMAIL" required placeholder="Your email address" />
		<input type="submit" value="Sign up" />
	</div>
				

If you want to revert to default (starter) MailChip form, here's the code to copy:
	<p>
		<label for="mc4wp_email">Email address: </label>
		<input type="email" id="mc4wp_email" name="EMAIL" required placeholder="Your email address" />
	</p>
	<p>
		<input type="submit" value="Sign up" />
	</p>
				

WPML plugin compatibility

Sequoia theme is compatible with WPML plugin. Since WPML is third party plugin, please, first get all the info on WMPL setting up and functioning on WPML.org pages.

LANGUAGE FILES:

  • To translate Sequoia strings (words and phrases in theme code), use .po (and .mo) files found in Sequoia's "languages" folder.
  • WooCommerce language file can be found in plugin's "i18n/languages" directory
  • Wordpress languages files can be found in Your Country WP site and should be add to "wp-content/languages" directory. WP langauge files are mostly usable for default widgets translation.

With Sequoia theme activated, translate posts, pages and products (and categories, custom taxonomies etc.) as for default WP themes (TwentyThirteen, TwentyTwelve ...) - Sequoia will display all the translations. However, there are some Sequoia specifics in functioning with WPML:

Sequoia and WMPL specific features and settings:

  1. [wmpl_translate] shortcodes:

    Sequoia utilizes custom shortcode function for usage for WIDGETS TITLES (if you are not going to use "String translation" WMPL extension - NOTE: String translation for widgets work only if widgets are activated after WPML and String translation plugin activation) Example of shortcode usage:
    [wpml_translate lang=en]This is my english content[/wpml_translate]
    [wpml_translate lang=es]Este es el contenido español[/wpml_translate]
    
  2. Aqua Page Builder and WPML:

    Although Aqua Page Builder is supported for multilingual features (translatable custom post type "Template" we recommend creating separate templates for each language and insert page builder templates in translated pages.

  3. WOOCOMMERCE AND WPML:

    IMPORTANT: WooCommerce and WMPL must have WooCommerce multilingual plugin installed (along with both WooCommerce and WPML plugins)

    For translating WooCommerce products, product categories, attributes, tags and all related to WooCommerce, please read the "WooCommerce multilingual" tutorial section on wpml.org website

  4. List of all WMPL related necessary plugins (or recommended) for Sequoia/WooCommerce:
    • WPML Multilingual CMS - necessary
    • WooCommerce Multilingual -necessary
    • WPML CMS Nav - necessary
    • WPML String Translation (recommended)
    • WPML Translation Management (recommended)
    • WPML Sticky Links (recommended)

Scripts and credits


CSS files

If you would like to edit the color, font, or style of any elements, and you have the knowledge to edit CSS files there are couple of CSS files included in theme:

  • style.css - main Sequoia styles
  • In "CSS" folder:
  • reset.css
  • foundation.min.css
  • glyphs.css
  • admin_styles.css - styles for admin post editor
  • owl.carousel.css
  • prettyPhoto.css
  • wp_default.css
  • component.css
  • animate.css
  • admin_styles.css

or, you can edit appearance in theme options under menu in admin section ( Appearance - Theme Options - Styling Options ).


SCRIPTS :Javascript files (jQuery).

Sequoia uses couple of javascript files, mostly jQuery plugins by other people, and some custom created code by us. Here is the list of jQuery files use in Sequoia, all (most) in "js" folder

  1. PrettyPhoto
  2. OwlCarousel plugin
  3. jQuery Transform
  4. Debounced Resize jQuery plugin
  5. Modernizr
  6. jQuery Waypoints
  7. jQuery Easing
  8. jQuery Formalize
  9. jQuery Shuffle
  10. jQuery Paralax
  11. jQuery NiceScroll
  12. jQuery mb.YTPlayer
  13. retina.js
  14. jQuery Elevate Zoom
  15. jQuery One Page Nav Plugin
  16. Flexie - flexbox polyfill
  17. Sidebar Effects
  18. Sequoia Custom jQuery code

jQuery is a Javascript library that greatly reduces the amount of code that you must write.
Most of the animation in this site is carried out from the jQuery plugins included in theme and some or executed by customs scripts.

To learn more about usage of jQuery plugins visit jQuery site:


Other (PHP frameworks and scripts)

  1. SMOF by Aquagraphite - theme options framework
  2. Custom Metaboxes and Fields framework
  3. TGM-Plugin-Activation

Plugins

Sequoia have included Aligator Shortcodes, Aligator Custom Post Types and Slider Revolution inside the theme, but their separate installation is needed, as well as WooCommerce and Aqua Page Builder, which are not included. All the plugins bellow are required:

  • WooComerce,
  • Aqua Page Builder,
  • AS Shortcodes,
  • Slider Revolution
Sequoia theme is highly dependable on Aqua Page builder plugin, so it is advisable to install Aqua Page Builder plugin.
Also, Sequoia theme is built for WooCommerce plugin, and as base for Wordpress shop site driven by WooCommerce ( not compatible with other e-commerce plugins - WP e-Commerce, Jiggo Shop etc.)

Slider Revolution plugin (although proclaimed as required) is optional, but we actually highly recommend it. Slider Revolution documentation.

Sources and Credits

We've used the following assets, listed with licencing info.


Photos, images and graphics authors:

Bellow listed are image source pages, except for YouTube and Vimeo videos, which are linked to video pages and video author (profile) pages .

All assets used in demo are Creative Commons licensed for commercial use with atributon to their authors:


Fonts used by Sequoia:

Sequoia features scripts for utilizing Typekit.com fonts - premium web service for quality web font

standard system fonts and web fonts and Google Web Fonts


Once again, thank you very much for purchasing this theme. We would be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist.

© Aligator Studio 2014