1. Documentation
  2. Themes
  3. Zephyr

Zephyr

Important: This theme was retired in October 2015 and is not for sale. Documentation is no longer being updated.

Welcome to Zephyr! This theme includes a Homepage page template with WooSlider support, as well as support for our Projects, Our Team, Features & Testimonials, Sensei, WooCommerce and Homepage Control plugins! Let’s get started!

Installing your Theme ↑ Back to top

To learn how to install your theme please reference our documentation here: Installing a Theme

Zephyr Theme Demo: demo.woothemes.com/zephyr

Checking your theme version ↑ Back to top

You can confirm your theme and WooFramework version by going to: Zephyr > Framework

Activate your Theme Key ↑ Back to top

After you install your theme, be sure to activate your theme key by downloading and installing the WooCommerce Helper plugin. This will verify your site when contacting support and will enable 2-click updates for quick theme upgrades down the road.

Updating your theme

It is very important to ensure you have the latest version of your theme at all times. This is the best way to proactively troubleshoot issues on your site.

Please reference the WooCommerce Helper Documentation to learn more.

Adding your Logo ↑ Back to top

By default, Zephyr will display your site title in text alongside a profile image. The profile image is your Gravatar. The email address used to display this Gravatar is the email address of the site admin. You can override this using the zephyr_header_gravatar_email filter. You can even disable it altogether by using the zephyr_header_gravatar filter.

Alternatively to this, you can display a custom logo by uploading it in the settings.

To upload your own image based logo:

  1. Go to: Zephyr > Settings > General Settings > Custom Logo.
  2. Upload your logo image – we recommend using either a .jpg or .png for this.
  3. Ensure the ‘Enable text-based site title‘ setting is disabled.
  4. Save All Changes.

If you don’t have an image based logo, you have the option to add your Site Title and Tagline, you will find the settings for this just below the logo image upload area.

Zephyr Styling Options ↑ Back to top

There are several styling options available in Zephyr allowing you to easily create a unique color scheme.

First of all there is support for native WordPress background image functionality. You can view detailed documentation on setting custom background images in the codex.

Additionally Zephyr offers a variety of color settings which can be found at Zephyr > Settings > Styling Options.

Zephyr styling options
Zephyr styling options

Here’s a break down of what each setting controls:

  • Body Background Color – This will set the main background color, assuming there isn’t a background image.
  • Content Background Color – This will set the background color of the web site content frame.
  • Text Color – This will set the color of all non-heading text.
  • Heading Color – This will set the color of all heading text.
  • Link Color – This will set the color of links.
  • Button Color – This will set the color of the buttons.

Homepage Overview ↑ Back to top

By default Zephyr will display your latest posts on the homepage. You can control the number of posts displayed on the Settings > Reading screen.

Homepage Template ↑ Back to top

Should you want to display a more ‘business’ oriented homepage you can do so using the ‘Homepage’ template. You can see an example of this in the demo. Assuming you have the corresponding plugins installed and active, this page will display the following content:

  • WooSlider
  • Features
  • Recent Products
  • Recent Projects
  • Team Members
  • Testimonials

You can enable/disable these components and re-arrange the order in which they’re displayed using the Homepage Control plugin. The set this page as your homepage:

  1. Go to Pages > Add New and create a new page called ‘Home’ or something else appropriate
  2. Select ‘Homepage’ from the template dropdown
  3. Go to Settings > Reading and choose the ‘Home’ page you just created as your static homepage

Including WooSlider in the Homepage Template ↑ Back to top

The Homepage Template slider in Zephyr will pull in slides from a specific slide group. Once you’ve created and saved the page you will see an option to select the slidegroup on the edit page screen:

Choose a slide group from which to display slides on this page.
Choose a slide group from which to display slides on this page.

Blog Posts ↑ Back to top

If you’re using the Homepage template, you may still want to have a dedicated blog page.

  1. Go to: Pages > Add New to create your blog page template.
  2. Title the Page, example: Blog.
  3. Select ‘Blog‘ from the Page Attributes > Template dropdown option. Learn more about Page Templates here.
  4. Publish your new Blog Page Template.
  5. Go to: Posts > Add New to add a post.
  6. Upload a featured image for the post.
  7. Optionally, set the post category or tags.
  8. To embed a video go to the Zephyr Custom Settings and paste the video link in the Embed Video area.
  9. Optionally, override the layout settings for the post page.
  10. Publish your post.
  11. Go to Settings > Reading and choose the ‘Blog’ page you just created as your posts page

Image Dimensions ↑ Back to top

Here are the ideal image dimension to use for Zephyr. Larger images will be dynamically resized to fit, while smaller images will be stretched larger to fit. Product images will scale width and height and will not be cropped into a square (unless you use the ‘Hard Crop’ setting found in WooCommerce > Settings > Product > Product Image Options). For greatest control of your image sizes, it is best to save out your images to the exact size before uploading.

Please note! We do not recommend that you force the height of your slider or product images with CSS as this will break the responsiveness of the theme images. Rather, it is best to save out your slider/product images with the same height before uploading.

Recommended Image Sizes ↑ Back to top

To edit these settings go to: Zephyr > Settings > Dynamic Images > Thumbnail Settings

Zephyr Dynamic Image settings
Zephyr Dynamic Image settings
  • Thumbnail Image Dimensions: 1200px x 1200px
  • Single Post Thumbnails: 1200px x 1200px

WooCommerce Product Images ↑ Back to top

To adjust the Shop Image settings go to WooCommerce > Settings > Product and scroll to the bottom of the page to find image size settings. If you change these settings after you’ve uploaded images, you must Regenerate Thumbnails for the changes to take effect.

Due to the product layout on archive shop pages, square product images work best to help evenly align the rows. This can be achieved by using the WooCommerce Hard Crop feature and setting the same pixel dimension for both the width and the height.
  • Minimum recommended product archive image width: 300px (600px for retina support)
  • Minimum recommended product single image width: 519px (1038px for retina support)
  • Minimum recommended product thumbnail image width: 173px (346px for retina support)

To learn more about WooCommerce product images please see further documentation here: Adding Product Images and Galleries and here Using the Appropriate Product Image Dimensions

Create a contact page ↑ Back to top

We recommend using one of the many excellent contact form plugins available for WordPress if you want to add a form to any page.

You may also like to use our Contact Details plugin to display information such as your HQ address, phone numbers and social media details.

FAQ ↑ Back to top

Can I re-order the components on the homepage? ↑ Back to top

Yes, there are 2 ways to do this: with code, or with a plugin. The plugin essentially wraps the code into a nice easy-to-use package, so if you don’t like getting your hands dirty with the code then give the plugin a try.

Using the Homepage Control plugin

Download, install and activate the Homepage Control plugin to gain complete control of the components in your homepage. You can re-order and toggle their visibility all from the WordPress dashboard. You can read about installing and using Homepage Control in the documentation.

Using Code

If you look in includes/theme-actions.php you will notice all the homepage components are hooked into the woo_homepage action. The number at the end of these add_action() functions represents the priority, or the order the hooked function is called. So for example:

add_action( 'homepage', 'woo_display_wooslider', 10 );
add_action( 'homepage', 'woo_display_features', 20 );

The WooSlider section (woo_display_wooslider) has a lower priority value which results in earlier execution. If you wanted to display the Features section before WooSlider, you would just need to set that priority value of 20 to something lower than 10. But instead of doing this in the parent theme and losing the change during an update, you can do it easily via your child theme.

First you unhook the features function from the homepage action using remove_action() like so:

remove_action( 'homepage', 'woo_display_features', 20 );

You then simply hook it back in with the new priority:

add_action( 'homepage', 'woo_display_features', 5 );

This functionality also allows you to hook other functions into your homepage such as template tags from a third party plugin. Say you’re using a third party plugin to display a calendar, you can easily hook that into the homepage display using: add_action( 'homepage', 'some_calendar_plugin_template', 10 );.

You can read more about add_action() here, and remove_action() here.

Can I change the email used for the gravatar in the header? ↑ Back to top

Add the following snippet to your child themes functions.php file.


add_filter( 'zephyr_header_gravatar_email', 'jk_change_intro_grav_email' );
function jk_change_intro_grav_email( $email ) {
$email = email@email.com;
return $email;
}

view raw

functions.php

hosted with ❤ by GitHub

Can I change the disable the gravatar in theheader? ↑ Back to top

Add the following snippet to your child themes functions.php file.


add_filter( 'zephyr_header_gravatar', '__return_false' );

view raw

functions.php

hosted with ❤ by GitHub

Can I change the number of team members displayed on the homepage template? ↑ Back to top

Add the following snippet to your child themes functions.php file.


add_filter( 'woo_template_our_team_limit', 'jk_change_our_team_homepage' );
function jk_change_our_team_homepage( $team_limit ) {
if ( is_home() ) {
$team_limit = 8; // Display 8 team members
}
return $team_limit;
}

view raw

functions.php

hosted with ❤ by GitHub

Can I change the number of features displayed on the homepage template? ↑ Back to top

Add the following snippet to your child themes functions.php file.


add_filter( 'woo_template_features_limit', 'jk_change_features_homepage' );
function jk_change_features_homepage( $features_limit ) {
if ( is_home() ) {
$features_limit = 4; // Display 4 features
}
return $features_limit;
}

view raw

functions.php

hosted with ❤ by GitHub

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment