Documentation version 1.0


Introduction


Thank you for purchasing my theme. If you have any questions about customization of this theme please visit our Support System or contact me directly via e-mail form on my profile page. I will be happy to help you.

Theme Installation #back to top

Installation

Extract the zipped package downloaded from ThemeForest to your desktop. In the extracted package you will find heset.zip which is the WordPress theme file.

You can install the theme in two ways: through WordPress or via FTP.

Install via WordPress

  1. In the WordPress dashboard, navigate to Appearance > Themes.
  2. Click "Add New" button.
  3. Click "Upload Theme" button.
  4. Select the "heset.zip" file.
  5. Click "Install Now" button.
  6. Click the "Activate" link once the installation has finished and you're ready.

Install via FTP

  1. Log into your web server with FTP client software.
  2. Extract the Heset.zip file and upload the extracted folder to the /wp-content/themes/ folder on your server.
  3. Activate the newly installed theme by going to Appearance > Themes and clicking the Activate button.
Please Use Child Theme After Install. So future updates will not overwrite your changes

Plugins Installation #back to top

When your theme has been activated, there is a notification advising you to install recommended plugins. In order to make the theme look exactly as the demo page, you need to install recommended plugins. Click on Begin installing plugins link.

After the installation you will get a notification informing that plugins were installed successfully. After you have installed all the plugins, click on "Return to Required Plugins Installer" link at the bottom and follow the same steps yet select "Activate" from the drop-down menu. This process may take a while on some hosts, so please be patient.

Importing the Demo Content#back to top

The easiest way to get started and find your way around using this theme, is by installing it into a fresh WordPress installation, and importing our sample content. To import the demo content correctly, you must have installed and activated Heset theme. All plugins prompted you after theme activation, must have installed as well.

WARNING: As this will create posts, pages, custom post types, categories, widgets, etc. and change various system settings, it is strongly advised that you do this on a clean WordPress installation, without any previous and/or precious data. Under no circumstances we can be held responsible for total or partial data loss, so please be careful.

This theme supports one-click demo import. You can import the settings and setup for any of the 6 demos available for this theme.

Let's get started:

  • Navigate to Appearance > Import Demo Data.
  • You will see a screenshot of the demo theme. Under each screenshot is an Import Button

After the import you may uninstall One Click Demo Import plugin.

In the Tools tab of your WordPress admin sidebar, select the Appearance > Menus and create a new menu, then add pages to it and assign Theme Locations. Heset Theme supports three different theme locations for wordpress menus: Primary Menu, Secondary Menu, Handheld Menu. Primary Menu will appear near the logo and it supports multiple sub menus, we may you can add as much as you want. Secondary Menu will appear in the top bar (very top of the page). Handheld Menu is optional menu, if we want to set a menu exclusive for mobile we can use this location.

To create the primary menu, in the WordPress dashboard, navigate to Appearance > Menus and perform the following steps:

  1. Enter menu name into the correct field.
  2. Click "Create Menu" button.
  3. Check the "Primary Menu" check box.
  4. Click "Save Menu" button.
In order to create the secondary menu, click on "create a new menu" link and follow the same steps yet check "Secondary Menu" checkbox. More can be found in WordPress Codex.

Mega Menu - Columns#back to top

If you would like to use a mega menu instead of the normal dropdown, you also need to take the following steps: Go to Appearance > Menus and make sure that "CSS Classes" are turned on in your "Screen Options" tab in the upper right corner of your screen. If the box is checked you will see an input field for "CSS Classes" in each of your menu items. Now add (megamenu col-4) for a 4 Column Megamenu into the input field and set your menu items structure like shown below.

You can change col-4 to col-3 to make it a 3 column menu

Mega Menu - Category#back to top

Select the category from the dropdown as shown in the figure to create category mega menu if the category has sub categories it will display in tabs.

Live Customize Options#back to top

To get into the customize options go to Appearance > Customize. Heset theme comes with dozens of options so you can customize the theme to your needs! Most of your theme options can be found in the live WordPress theme customizer. 

General Settings#back to top

Top Section - Top header section. To remove top section hide all elements below and unassign secondary menu

Header - Header Layouts. Show/Hide Sticky Header. Header Background Images

Footer - Customize Footer Text and Footer Social Links display on/off

Layout Settings#back to top

Here we can find list of options to control post/page sidebar position. And most of the elements for Single post can be enabled/disabled.

Post Settings#back to top

Post Settings - Use these settings to manage Blog Posts, meta data display and ordering for each layouts, Content limit settings e.t.c. And most of the options can be enabled/disabled.

Standard Post Settings - Settings exclusively for Standard Post which has additional controls like Content limit type

Color Settings#back to top

Simply go to Appearance > Customize > Color Settings to make your color adjustments to fit your style.

Typography Settings#back to top

Simply go to Appearance > Customize > Typography Settings to make your adjustments. The typography control is integrated with google web fonts and you can get instant preview of the font changes

Social Network#back to top

Use these settings to manage Social links.

Homepage Setup#back to top

Incase if you want to proceed to homepage setup without demo content import.

Step 1 – Create a new page and select Homepage as page template

First, navigate to Pages in your WordPress dashboard, create a new page named Home (or anything else), select Homepage as template for your new page as shown on the image below and then publish the page:

Select the widgetized "Homepage" page template for your static front page

Step 2 – Set your new page as static front page in WordPress

After you’ve created and published the page which you want to use as your static front page, please perform the next step. Navigate to Settings > Reading in your WordPress dashboard, set your just newly created page (e.g. Home) as Front page and save your settings correctly:

Set your page as static front page in WordPress

Step 3 – Place widgets on your static front page

In this final step, you can now navigate to Appearance > Widgets in your WordPress dashboard and place the widgets in any of the available widget areas

Homepage layout of the Heset theme is fully widgetized. You can add variety of content in various widget areas (Home Top : Row x - Column x, Home Middle : Row x - Column x) to create a unique homepage look and the width is auto-adjusted based on how many columns you use.

Image below shows the basic positioning of different widget areas on the homepage.

Major Widgets used in the homepage demos are
  • + Heset - Posts - Display posts with 6 different styles
  • + Heset - Posts Grid - Display your posts in grid
  • + Heset - Posts Slider - Display your posts in slider
  • + Heset - Feature Block - Displays Promo Box

+ HESET - Posts Widget (6 Styles)

Note: If you do not add any widget to homepage widget areas (Home Top : Row x - Column x, Home Middle : Row x - Column x), then homepage layout will switch automatically to the blog layout. You can configure blog layout settings from the Appearance > Customize and then open panel Layout Settings

Note: You can also set a static page as the homepage by going to Settings > Reading option in the WordPress Dashboard.

Featured Slider #back to top

To set up the featured homepage slider you need to do the following:

Go to Appearance > Customize > Featured Content Options > Click enable "Display Featured Content" and select your preferred layout from the 'Select Featured content style' drop down.

In "Featured Content Options" you can see other options

Note with Featured Posts Slider: It's important that the posts appearing in your slider have a featured image assigned to them, and you need always use images for slider with at least 1170px width & 650px height

IMPORTANT NOTE: For "Full Width" slider: You should use images for slider with at least1920px width & 600px height to get best result.

Change the Featured Tag

By default, Heset displays any post in the slider with the tag "Featured" attached to it.

You can edit this tag in the Theme Customizer. To edited the tag, go to Appearance > Customizer. Under the Featured Content section, change the name of the tag.

The featured post is not displayed in latest blog post listing on homepage, Check on "Display featured posts in latest blog post listing." to enable display.

The Don't display this tag on the front end checkbox lets you determine whether you want the Featured tag to appear in tag clouds on the front end.

Post Thumbnails / Feaured Image#back to top

To add a featured image in a WordPress post, simply click on "Set Featured Image" link inside the featured image meta box in the post edit screen. This will open the WordPress Media Uploader. You can use that to upload an image from your computer or use an existing image from your media library. Once you select the image, simply click on Set Featured Image button.

To get the best results, set featured image with minimum width 1170px and minimum height 650px. If you want to use Full Width Featured Slider, you need to set featured image with minimum width 1920px and minimum height 650px.

If your site has already had posts, you must use the plugin Force Regenerate Thumbnails to generate necessary thumbnails for Heset theme.

Force Regenerate Thumbnails allows you to delete all old images size and REALLY regenerate the thumbnails for your image attachments.

Adding a Blog Post #back to top

To add new posts to your blog, go to Posts > Add New and follow the steps below.
  1. Give a title to your post,
  2. Place your text in the content editor,
  3. Upload a featured image by clicking "Set featured image" on the Featured Image panel,
  4. Add a category to the post, and tags if you so desire, from the respective panels

Important Note: In order to get the best result, you should choose featured images for your posts with minimum width is 1170px and minimum height is 650px. If you want to use Full width Slider, you need to use featured images with minimum width is 1920px and minimum height is 650px.

Heset has the possibility to create 5 different types of posts: standard, gallery, video, audio and quote.

Standard Post

A standard post is the default post type. You can add text and images to your post using the tools and content box.

Gallery Post

A gallery post allows you to create a slideshow-type gallery or gallery grid at the top of your post. Once selected, the Gallery post format will use the first gallery that you added to your post. Galleries can be added to your post using the WordPress Media Editor. Simply click the "Add Media" button to create a gallery and add it to your post. By default the gallery grid will shown, to change it to a slideshow set the gallery to one column grid.

Video Post

Selecting the Video post format will display a video at the top of your post. You can share videos from nearly all video hosting sites, such as Vimeo or Youtube. After you have selected the "Video" post format from within the Format options box, the next thing you need to do is add a video to your post. The theme will automatically use the first video in your post as your format video. To add a video to your post, simply copy   paste the video's URL, oembed code, or embed code within the post editor, or use the "Add Media " button to upload and embed your own video file.

Audio Post

An audio post allows you to share a music or audio track and displays it at the top of the post. Like the video post, simply copy   paste the track's URL, oembed code, or embed code within the post editor. When you preview or publish the post, the audio player will play the first audio file that you embed into your post.

Quote Post

A quote post used for quotations, specially when you wants to just share a quote which is not within a standard post. You can add text to your post using the tools and content box. Block quotes can be added easily from within the post editor. Simply highlight your text, and then press the blockquote button to turn it into a quote.

Adding Author Bio#back to top

Heset includes the option to add an author bio that will appear at the end of your blog posts. To set up this feature, log into your WordPress admin and click on your username in the top right-hand corner of the screen (or if you have the bar disabled, you can navigate to Users > Your Profile instead).

Scroll down to Contact Info section and add your social media urls.

Then scroll down to the About Yourself section and add your author bio in the Biographical Info text area. Click save

The bio you added will now show up automatically on all of your blog posts (along with your WordPress Gravatar that is linked to your user email address).

Creating a Page #back to top

To create a new page, in the WordPress dashboard, navigate to Pages > Add New. Enter page title and add your content. Also, if you need featured image, don't forget assign it.

Heset Theme supports 3 layouts: No Sidebar Full Width, with Left Sidebar and with Right Sidebar. Default layout settings for all posts/pages is controlled from the Theme Customizer Options Panel.

Creating a Contact Me Page

For contact page "Contact Form 7" plugin is recommended make sure it is installed and activated.

Create the Contact Form

  1. In the WordPress dashboard, navigate to Contact > Add New.
  2. Click "Add New" to display the contact form in English, otherwise, select your desired language.
  3. Setup your contact form. Detailed documentation here.
  4. Once finished setting up your form, click the "Save" button.
  5. Copy code snippet (short code) highlighted in blue, as we will then paste it into a WordPress page.

When you create your form you can use the column shortcode to display like in theme demo

                                    
Your Name (required)
[text* your-name]

Your Email (required)
[email* your-email]

Subject
[text your-subject]

Your Message
[textarea your-message]

[submit "Send"]

Create the Page

  1. Create a new "Contact Me" page.
  2. Paste the generated code snippet (short code), into the text box on the create/edit page screen.
  3. Click on "Update" if page has been edited or "Publish" button, to have it appear on your site.

Widgets #back to top

WordPress Widgets add content and features to your Sidebars and Footer. Examples are the default widgets that come with WordPress; for example post categories, tag clouds, navigation, search, etc. Widgets require no code experience or expertise. They can be added, removed, and rearranged on the WordPress. Go to Appearance > Widgets to manage widget options for sidebars, footer, instagram section. Heset comes with 6 useful custom widgets.

  • + Heset - About Me Widget - Add and customize your "About Me" information.
  • + Heset - Social Icons - This widget displays your site's social icons.
  • + Heset - Banner Advertisement - Add your Advertisement here.
  • + Heset - Facebook Page Box - Displays a nice facebook page box
  • + Heset - Posts - Display posts with 6 different styles
  • + Heset - Posts Grid - Display your posts in grid
  • + Heset - Posts Slider - Display your posts in slider
  • + Heset - Feature Block - Displays Promo Box

MailChimp for WordPress

MailChimp for WordPress helps you add more subscribers to your MailChimp lists using various methods. You can create good looking opt-in forms or integrate with any other form on your site, like your comment, contact or checkout form.

Configuring Sign-Up Form(s)

  1. Go to MailChimp for WP > Forms
  2. Select at least one MailChimp list to subscribe people to.
  3. (Optional) Add more fields to your form using the add MailChimp field dropdown.
  4. Embed a sign-up form in pages or posts by using the [mc4wp_form] shortcode.
  5. Show a sign-up form in your widget areas using the "MailChimp Sign-Up Form" widget.
WordPress.org Plugin Page

WP Instagram Widget

Make sure you have the 'WP Instagram Widget' plugin activated. This widget will display your latest instagram images on sidebar or footer widget area. WP Instagram widget is a no fuss WordPress widget to showcase your latest Instagram pics. It does not require you to provide your login details or sign in via oAuth. WordPress.org Plugin Page

Go to admin > Appearance > Widgets and drag, drop Instagram Slider widget to Footer Instagram Footer widget area. Config your Instagram widget with your Instagram username

Footer Widgets #back to top

Footer part of the Heset theme is fully widgetized. You can add variety of content in various widget areas (Footer : Row x - Column x and the width is auto-adjusted based on how many columns you use.

Version History (Changelog) #back to top

All images used on live preview are creative commons licensed, downloaded from unsplash.com and pixabay.com and these are not included in the theme package.

Should you have any questions that are beyond the scope of this documentation Or you want a theme customization? Just write us through Support System or contact me directly via e-mail form on my profile page. I will be happy to help you.


Changelog

Version 1.0 – June, 2017
- Initial Release