Hawea Text Documentation

1. Theme Installation

After the successful theme purchase you will receive an email including your individual theme or theme bundle download link. With this link you can download the Hawea theme folder (hawea.zip).

1.1. Installation via the WordPress admin panel

After downloading the hawea.zip file to your local computer, please go to Appearance → Themes in your WordPress admin panel and click the Install button at the top of the page. Now click the Upload Theme button and upload the hawea.zip file from your computer. You can activate the theme by hovering over the preview image, here you will see the Activate button.

1.2. Installation via FTP

Alternatively you can also install the theme directly to your server with a FTP client (e.g. Filezilla). Just drop the un-ziped Hawea theme folder into your …/wp-content/themes/ folder. Now you can see the Hawea theme in your WordPress admin panel under Appearance → Themes → Available Themes. From there you can activate the Hawea theme.

2. Custom Front Page

By default you will see the 3-column blog with the left-aligned sidebar on your front page. To use the custom Hawea Front page you need to create a new, empty page first (you can call it “Front” or “Front page”) and select the template “Front Page” under Page Attributes → Template in your page settings. Now you need to choose this new page as your static Front page under Appearance → Customize → Static Front Page.

To use the blog on a different page you now need to create a second new page (you don’t need to choose a page template here) and choose this page as your “Posts page” in the Customizer under “Homepage Settings”.

2.1. The Shop Sections

You can find the settings for your Homepage in the Customizer under Appearance → Customize → Theme Options → Front Page Settings. Here you can choose which Front page sections you want to show and how many products or product categories you want to include in each section. You can also change the title of each section.

2.2. The Slider

You find the slider settings under Appearance → Customize → Front Page Slider. Here you have the possibility to upload 1-5 images for your slider (for slider image sizes, see grey info box at the top of this page). You can also include a link for each image and an additional text (HTML is allowed) under the image. An example HTML text with link for the slider text is:

[code]
New In Store / <a href=”http://themes.elmastudio.de/hawea/product-category/new-in/”>Shop Now</a>
[/code]

2.3. The Front page content for special promotions

You can use the default Front page content area to include content like special store promotions on your front page (below the product categories). There is the example content from the Hawea live demo (you can copy and paste the code in your front page text editor):

[code]
<h5>New Years Sale</h5>
01.01.16—31.01.16
Get 50% Discount Off All Products
Use the coupon code “Happy New Year” to receive a 50% discount on all products (except new arrivals). We wish you happy shopping!

[button link=”http://themes.elmastudio.de/hawea/shop/” color=”grey” size=”xlarge”]Shop Now[/button]
[/code]

2.4. Instagram on the Front page

In order to show a number of your latest Instagram pictures at the bottom of your Front page, you first need to install the
WP Instagram Widget plugin.

Now you need to go to Appearance → Customize → Widgets and add the Instagram widget to the Front page – Instagram Widget area.

3. Widget Areas and Widgets

You can find all widget areas under Appearance → Customize → Widgets. Please note that only the widget areas are visible, which are available on the specific preview page you are viewing at the moment. So you might not see all widget areas at once, before you change your customizer preview view.

3.1. The Sidebar

The left-aligned sidebar widget area is visible on the default shop front page, on all pages and on the blog (blog front and single posts). You can use the sidebar to include your most important WooCommerce widgets and all WordPress default widgets.

3.2. Footer Widget Areas

Hawea also offers multiple, optional footer widget areas. You have one big, one-column widget area, a two-column widget area and an additional five-column widget area available.

You can use the big one-column widget area to include your Newsletter subscribe form. We especially supported the MailChimp for WordPress plugin for this purpose.

4. Custom Menus

You can find the custom menu settings under Appearance → Menus oder under Appearance → Customize → Menus. Hawea has the option to include a custom main menu as well as a social links menu.

You can create your own menu by choosing any name for your new menu. Then you need to add custom links via the menu item options on the left. After you created your menu items, you now need to choose the Menu location at the bottom of your menu settings.

4.1. Social Links Menu

To create a social links menu (which will be visible fix-positioned and left-aligned with a vertical, icon menu design like in the live demo) you need to use the “Custom Links” option to include links to your social sites like Twitter, Instagram or Facebook and save this menu with the Menu location Social menu at the bottom of the menu settings.

The following social sites will have icons available:

Codepen, Digg, Dropbox, Facebook, Flickr, Google+, Instagram, LinkedIn, Pinterest, Path, Dribbble, PollDaddy, Pocket, Reddit, Skype, StumpleUpOn, Tumblr, Twitter, Vimeo, YouTube, WordPress.com, WordPress.org, Spotify, Feed (all URLs with “/feed”) and Email (use “mailto:…”).

5. Theme Options and Customizations

Under Appearance → Customize you can find all customizations options for Hawea.

Theme Options – You can customize the footer credit text under General and all options for the Hawea shop front page under Front Page Settings.

Front Page Slider – You can include the slider images for your Front page here.

Colors – Here you can customize the Site title color, the general website background color, your link color, the footer background and Front page content area background color as well as the “Sale” circle background and text colors.

A Note on Custom CSS:
To include custom CSS you can use the Custom CSS feature of the Jetpack WordPress plugin, in case you have already installed the Jetpack plugin. Or you can use the Simple Custom CSS WordPress plugin.

6. Typography Styles

You can use a number of typography styles to design more interesting posts and pages. (Here is an overview of all typography styles in the Hawea live demo).

Dropcaps – To highlight a paragraph with a drop cap letter you can just wrap the first letter of the paragraph in a span tag with the CSS class of “dropcap”.

[code]
First letter…
[/code]

Intro Text – To highlight a paragraph (e.g. the first paragraph of your text) in a bigger font size, you can wrap the paragraph in a p tag with the CSS class of “intro”.

[code]
Your intro text here…
[/code]

Pull Quotes – You can use pull quotes on your text, by wrapping a sentence or short text in a p tag with the CSS class “pull-left” or “pull-right” for left or right aligned pull quotes.

[code]
This is a left-aligned pull quote text.
[/code]

7. Shortcodes

You can find a documentation and code snippets (ready to copy/paste) for all Hawea shortcodes on the Hawea live demo Shortcode page.

8. Supported Plugins

• WooCommerce for eCommerce
• WP Instagram Widget for Instagram images in a widget area
• MailChimp for WordPress for a Mailchimp newsletter form
• Jetpack for share buttons, extra Jetpack widgets, Carousel gallery slideshow, Tiled Gallery, and contact forms
• Contact Form 7 for forms

9. Theme Translations

Hawea is ready for theme translations. You can add your own translation or customize an existing translation easily using the WordPress plugin Loco Translate. (It would be great if you like to make your Hawea theme translation available to other theme users. Please let us know, if you want to share your translation.)

10. Child Theme for Customizations

If you want to customize the Hawea theme a little further and you need to change the code in the styleeheet (style.css) or in any of the theme template files, please consider creating a child theme for your changes. Using a child theme is quite easy and saves all your individual changes from being over written by a future update of the Hawea parent theme. You can find more information on creating a child theme in the article “WordPress Child Theme Basics” on the Themeshaper blog.

To get started you can download the sample child theme folder for the Hawea theme. Download: Hawea Child-Theme.

11. Print Doc / Save as PDF

To print out or save a PDF file of this Hawea theme documentation, just click in the Print Friendly button below. You can choose to exclude images from your print file or delete certain parts of the text.

Print or Save as PDF

ElmaStudio

Table of Contents: