WordPress & Basic Setup

Installing WordPress

WordPress is well-known for its ease of installation. Under most circumstances installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools to automatically install WordPress for you. However, if you wish to install WordPress yourself, here is the official documentation on it:

5 Minute Installation Guide

Theme Package Contents

Once you download the theme-package from ThemeForest, extract it. It contains:

whyte.zip
Main Theme! This .zip is installed in WordPress.
whyte-child.zip
Pre-created child theme for Whyte.Use it!
whyte-documentation.zip
Docs you are reading right now.
whyte-demo-content.zip
Contains .xml file with Demo Content.

Theme Installation

You can install the theme in two ways: through Wordpress, or via FTP. If you have trouble installing the theme via Wordpress (this can happen on some specific webhost setups), please proceed with installing it via FTP and you will be able to get around the issue.

Theme Installation via WordPress Admin Panel

  1. Navigate to Appearance > Themes.
  2. Click Add New and hit the Upload button.
  3. Navigate to find the "whyte.zip" file on your computer and click "Install Now" button.
  4. The theme will be uploaded and installed.
  5. Go to Appearance > Themes and activate the installed theme.

Theme Installation via FTP

  1. Log into your hosting space via an FTP software.
  2. Unzip the whyte.zip file and only use the extracted whyte theme folder.
  3. Upload the extracted whyte theme folder into
    wp-content > themes in your WordPress installation.
  4. Go to Appearance > Themes and activate the installed theme.

Child Theme

It's highly advised to install and use a child-theme.

Child-theme extends the main-theme with custom settings or code.
If you wish to customize or make changes to Whyte, child-theme will keep your changes safe when you update the main theme.
In pretty much all the cases, it is the best idea to immediately upon installation of Whyte main-theme, you install and active whyte-child theme.

Whyte Package contains a pre-created child theme - whyte-child.zip. Use it!
You must install the main-theme first, and then child-theme.

You should never update child-theme, it’s your custom code. Update only the main-theme.

If you wish, you can learn more about child themes.

Regenerating Thumbnails

Upon activating Whyte and migrating from another theme, previously added featured images might take strange aspect-ratios, be unnecessary big or just look out of place.
This is because image thumbnails have not been resized/cropped per Whyte's presets.

Just install Force Regenerate Thumbnails Plugin, and fire it up from Tools > Force Regenerate Thumbnails. This will regenerate all your 'pre-Whyte' featured images, and you'll be golden.

Theme Update

There are three ways to update the theme to newer version. It is recommended to always update your theme to the latest version as we implement new features and improvements over time. Some of these updates might be needed in order to make the theme compatible with newer versions of WordPress. There is no risk on losing your settings and content. However, if you had done modifications on theme files, then they will be lost. For customization, you should use Child Theme (you should never update the child-theme).

Theme Update via Envato Market Plugin

Envato has released a plugin that aims to bring an automated, simple and fast way of updating your themes purchased on Envato. Upon installing the theme, you'll be notified and asked if you wish to install the Envato Market Plugin.

Once you activate the plugin, you'll be able to connect it to your Envato account and update the theme with one click.

In the case of some malfunction, feel free to remove this plugin, and use other methods for updating theme. While this should be the most streamlined approach, plugin may be prone to bugs.

Theme Update via WordPress Admin Panel

WordPress doesn't have automated system for updating themes. You would have to first delete the current theme, and then install the latest version. This is a bit of a bummer.

Fortunately, there's a plugin that sorts this thing out. You can install Theme Upgrades Tool. Follow the simple guide-steps, and you'll be able to update the theme with a simple 'Update' option.

Theme Update via FTP

Similarly to the installing a theme via FTP, you can update your theme by simply overwriting the current theme files.

  1. Log into your hosting space via an FTP software.
  2. Unzip the whyte.zip file and only use the extracted whyte theme folder.
  3. Upload the extracted whyte theme folder into
    wp-content > themes in your WordPress installation.
  4. You'll be asked if you really wish to overwrite the current folder. Confirm, and let the files upload.

Translating

Whyte Theme, as well as child-theme, comes with the created language whyte.pot file.

Included file is located in languages folder, and it is a template file for your traslation of theme strings.
If you need to create the translations for a language, just duplicate the whyte.pot file and rename it into the LANGUAGE_NAME.po file.

Example

If you would to translate your website into french language, you would duplicate whyte.pot file into fr_FR.po.
Then you would edit file and add translations.
Upon saving the translations, fr_FR.mo would be automatically generated.
At the end, the languages folder would contain 4 files:

  • whyte.pot
  • whyte.mo
  • fr_FR.po
  • fr_FR.mo

Note the difference between the .pot and .po file extensions. .pot is the original template, while .po is your translation file.

Changing your website language is very easy.
In WordPress Admin Panel, go to Settings > General, and at the bottom find Site Language.

Note that you can use translation files to change the theme strings in default english language, by creating the en_US.po translation file.

For editing the translation files, you can use Loco Translate Plugin (which automates almost whole process explained above!), PoEdit software, or some of the online translation tools.
For more details about translating WordPress, check the Codex: Localization. First part covers creating theme and translation template file, but second part covers the translating (which you are interested in).

Multilingual content

For multilingual websites, we strongly recommend WPML plugin. Alternatively, you can use some of the free plugins available on WordPress repository, which have different amount of features and stability.

Plugins

Whyte requires and recommends a couple of plugins to extend it's functionality.
All can be installed automatically from notification in Admin panel.
While most of these plugins are optional you may want to extend theme's options with them.
However, Whyte Shortcodes plugin is necessary as it contains important part of the theme's functionalities.

Whyte Shortcodes - recommended
This plugin contains most of theme's custom elements and shortcodes (custom blog, rich title, rich image, custom banner, separators, icons, ad/social widgets).
It is recommended that you install this plugin.
Advanced Custom Fields - recommended
This plugin will enable additional fields and settings on Posts, Pages, Taxonomies and Author.
It is recommended that you install this plugin.
Envato Market - recommended
Installing this plugin will enable you to connect your website to your Envato account and have direct access to updates of all your purchases.
You will be able to automatically update Whyte theme with a simple click.
Breadcrumb NavXT - recommended
Activating this plugin will allow theme to display breadcrumbs beneath the main navigation, as seen on our demo.
Jetpack - recommended
The most used WP plugin, it bundles various modules aimed to enhance your website and the way you administer it.
We recommend enabling the Widget Visibility module.
WP-LESS - optional
Installing this plugin will add advanced color options in WP Customizer.
You'll be able to set black, white and greys, in addition to the primary, and gradient colors.
WP Instagram Widget - optional
Lightweight plugin for displaying your instagram feed in a widget.
Whyte has styles for this plugin out-of-the-box.
Whyte's Instagram Footer widget must be created with this particular plugin, in order to get the correct styling.
MCE Editor: Tables - optional
Extend the WordPress Editor with the table element/options. Useful for recipes or similarly laid out data.
Contact Form 7 - optional
Great plugin for building forms.
Whyte has styles for this plugin out-of-the-box.
You are free to use any other plugin for creating forms.

Importing Demo Content

We have included the exported XML file from our demo, which allows you to quickly set up your theme with Whyte demo content.

  1. The XML file is included within the download package at root level in a zip called whyte-demo-content.zip
  2. Extract it and find whyte-demo-content.xml
  3. Navigate to WP Admin > Tools > Import
  4. Select and install WordPress Importer
  5. Once its installed, select the XML file and upload it. It will take a few minutes to install and upload all content

If Demo-XML file won't load, it's most likely due to host limitations. The easiest way to get around that is to leave the "download images and attachments" box unchecked. That will give you all the pages and posts without the attachments.

Images used in Whyte Demo Preview are not included in a theme-package.
By importing demo-content, you will get grey placeholder images instead of photos.
Demo import still may take some time due to sheer amount of content.
If you are encountering server issues or timeouts, feel free to import the content again (even multiple times).
The content, and especially images will not get duplicated but skipped over, thus your import will always continue from where it ended the previous time.

Theme Setup

Single Posts

Single Post Display Settings

Global settings for single posts can be set in
Customize > Blog Layouts & Posts > Single Posts.

Settings are pretty much self-explanatory. Everything is enabled by default.
If you wish not to display a particular segment, just check it off.
Some of these settings can be overriden for a particular post on it's own Post Settings.

Customizing a particular Single Post


If you install the required Advanced Custom Fields plugin,
your Edit Post page will be extended with a couple of additional setting fields.

What is displayed as Cover?
By default, featured images are shown as covers on Single Posts. You may choose to display Custom Cover, Gallery, Video or Hide the cover altogether.
If you choose to display Gallery or Video, first gallery/video from your content will be extracted into Cover.
It will be moved, not duplicated.
If you don't have gallery/video within content, Cover will be hidden.
Custom Cover Height
Customize the exact height for your custom cover. This overrides the default value set in Theme Customizer.
It affects only Featured Image and Custom Cover.
Cover Width
Choose the if the Cover is content width (1300px) or full width. This overrides the default value set in Customizer > Layout.
Custom Cover Image
With this setting you can customize the cover image. Especially useful when using vertical featured images.
Post Meta is Sticky
By default this is checked. Post Meta located in the first sideblock of the single post will be sticky.
Uncheck this field to prevent it from sticking.
Enable Comments
Unchecking this field will completely remove the comment form and all already posted comments from this post.
Show Infobar
Show/Hide the Infobar on this particular post. This overrides the global setting from Customize > Blog Layouts & Posts > Infobar

Post Formats

Different post formats will change the display of that post in blog layouts.
Single Post display will look the same, no matter what post format is set.

Post Formats:

Standard
Displays featured image. This is default post format.
Quote
Displays first quote from the post's content. Alters the whole article and not only featured media.
Gallery
Displays first gallery from the post's content.
Video / Audio
Displays first embedded media from the post's content.
List of all supported third-party embeds in WordPress.
If desired content (quote, gallery, embedded media) for a particular post-format does not exist in it's content,
post will act as if it was standard, and it will display featured image.

Post Excerpts

Posts in the blog lists/layouts will display excerpts, unless mentioned differently.

In the case of excerpt being used, highest priority has the manual excerpt (How to add manual excerpts?).
If manual excerpt is not entered, it will be automatically created from first 20+ words of post's content, ending with a . ! ? ; - full sentence.

Any blog that uses excerpt and not full content doesn't support <!--more--> tag.

Blog Layouts

List

  • Displays featured image.
  • Image post format behaves same as the standard.
  • Quote post displays styled quote instead of whole article.
  • Gallery and audio/video posts use appropriate media as featured.

Masonry

  • Articles are laid out in masonry style.
  • Standard format doesn't display featured image.
  • Image format displays featured image.
  • Quote post displays styled quote instead of whole article.
  • Gallery and audio/video posts use appropriate media as featured.
  • Tablets show two columns.
  • Desktop will display three columns, unless the blog is added via shortcode directly into the post's content, when it will display two columns.

Image Masonry

  • Same as Masonry layout, but it displays featured images for Standard post format.
  • Articles are laid out as grid in uniform size.
  • Doesn't display excerpt nor post meta.
  • Always displays featured image
  • Quote is the only format that alters the post's style.
  • Tablets show two columns.
  • Desktop will display three columns, unless the blog is added via shortcode directly into the post's content, when it will display two columns.

Homepage Setup

Your homepage can be set to display your latest posts or a custom static page.
This part of the documentation will cover the case of setting up Latest Posts homepage.
For custom homepages built on static pages, jump here.

Latest Posts is default homepage. You can check if that is the chosen display in
WP Admin > Settings > Reading > Front page displays.


To setup the Featured Posts on top of the homepage,
head on to Customize > Blog Layouts & Posts > Featured Posts.

Note that you can display Featured Posts on a Static Page via Page Settings on it's edit screen.


By default, your Featured Posts will display 4 latest posts.
In order to pick the exact posts for the Featured Posts, your posts must be properly tagged. Choose a tag in Featured Posts Settings, and it will use only posts of that tag.

We recommend using some descriptive tag, like 'Featured', for tagging posts that you wish to be featured in the slider.

Once you've created a couple of posts, added featured images for them and tagged them with some common tag, pick that tag from the Featured Posts: Tag to use

Under Count, choose the limit for featured posts count. Note that you can turn the slider off with 0, or make it use all posts with -1.

Lastly, check Exclude Featured posts from blog, to exclude the exact featured posts from the main blog below it, thus removing the duplicates.
Of course, you can uncheck this setting, and display all posts undisturbed.

To disable the Featured Slider, set Count to 0

Homepage Latests Posts

Choose the desired Blog Layout and Pagination Type.

Setting for the number of articles per page can be found in
WP Admin > Settings > Reading > Blog pages show at most.
This is global setting, and will be used for your archive lists as well.

Ads setting lets you choose after how many posts will the Ad be displayed. This is explained in detail in the Ads Section.

Custom Homepage Setup

Using static pages to create a homepage gives you a lot options and ways to build your content. It is not out-of-the-box approach as Latest Posts are, but Whyte makes it pretty easy!

Latest Posts is default display mode. Once you create a page you wish to use as homepage, choose it in WP Admin > Settings > Reading > Front page displays.

Using Page Blog feature

If you've installed the required Advanced Custom Fields plugin, below the main content in Edit Page screen,
you'll see the Page Settings.
Second tab - Blog has options for creating custom blog on that particular page, and displaying Featured Slider.

This can be used to easily create a blog list with various rules and filters, which can come very handy if Latest Posts is not the list you wish to have, or you are in need of additional blog lists or custom archives.

For full details jump to Page Blog section.

Blog created as Page's Custom Blog will be displayed below the main content, and will take full content width.

Using [blog] shortcode

[blog] shortcode enables you to create a custom blog anywhere you wish, and can be used very creatively to construct either single or multiple blog lists on the same page.

For example, following screenshot is the page content for the page on the right:

It creates two sections of Sideblock Ad + Rich Title + Blog, separated with the additional Full Width Ad.

All this content is created with simple and intuitive Editor action-buttons and shortcode generator. Detailed explanation and how-to-use is in the Editor Section.

Approaches and options are limitless. Some examples can be seen on our demo, and you can import them via demo-content provided in the theme-package.


While Featured Posts can be displayed using the checkbox settings in Page Settings > Blog, there is a specifically designed Featured Banners widget.

This widget is designed to be used in the Above Page Content Area. It will display up to 4 items.

Item can be any Page, Post, Tag or Category. If item has featured image set, it will be displayed, otherwise it will have a gradient colored box.

Additionaly, item can be Custom Banner which let's you choose the image, title and link. This is handy for external links like shop, important social media or complementary sites you have.

As all widgets, these can be customized and added into your website in WP Admin > Appearance > Widgets.

In order to choose on what pages is certain widget displayed/hidden, we recommend installing the Jetpack plugin, and enabling the Widget Visibility module. Every widget will have additional setting at the bottom where you can set your custom rules.
For example, you may wish to show the Featured Banners only on your custom homepage.

While these two elements appear similar, they have different visual style and respond to different requirements:

  • Featured Posts is automatically updated - you choose a tag, and latest 4 posts with that tag are featured.
  • Featured Banners is completely manual - you handpick up to 4 items to be featured as banners.
  • Featured Posts displays only Posts.
  • Featured Banners displays Category, Tag, Page, Post or Custom Link.
  • Featured Posts is configured and enabled in the Customize.
  • Featured Banners is a widget.
  • Featured Posts can be displayed on Homepage or Static Page.
  • Featured Banners can be displayed on any page.


The Blog Filmstrip widget is designed to be used in the Below Page Content Area, and is perfect for Editor's Picks style of content.

Available options in this widget are pretty self-explanatory. Automatic scrolling of the widget can be neabled in the Animation interval field.

Archives Setup

Settings for Archives are pretty straight-forward and are same as the Latest Posts settings.
They can be found in Customize > Blog Layouts & Posts > Archives.

Archives cover Tag, Category, Date and Author pages, as well as Search results page.

Tag & Category featured images (and covers)

Whyte Theme supports taxonomy descriptions and featured images.
All elements together create the Cover for that taxonomy page, and are used in Featured Banners widget and MegaMenu.
Feel free to customize these in WP Admin > Posts > Categories/Tags.

Additionaly to these settings, Categories have their own setting for gradient colors.

Category Gradient Colors

Theme has global setting for gradient colors in Customize > Style > Colors. This color gradient can be overriden in certain cases with the custom Category gradient found in WP-Admin > Posts > Categories (if you have activated the required ACF plugin).

This is a very handy way to visually differentiate your categories, and give them a certain personal flavor.

Hover effects on blog posts and category labels are the most prominent elements where this will take effect.

Posts use the colors of their appropriate categories. In case of multiple categories, alphabetically first one is used.

Ads

Whyte comes with a streamlined system for using Ads.
It has two widget areas for placing ads into:

  • Square - for narrow ads like 300x250 and 300x600.
  • Wide - for wider ads like 728x90.

Both of these areas simply hold your Ads, whether they are manual ads/images or <script> Google ads. It's completely your content.

Thanks to this system, you'll be able to set your Ad's content only once in your widgets, and display them throughout your site whenever you wish by simply including the Ad Widget.

How to display ads?

Ad widgets are never displayed automatically. You must include them where you wish.
After you have created and added your ads in the appropriate Widget Areas, you'll be able to show them in your post's content or within any blog!

Display Ads in content

To display your Ad Widget in the content, simply choose it from Elements > Content

Depending on the placement, alter between Square and Wide ads to fit perfectly.

In the image on the right, square ads are used within Sideblocks, while wide ads are used in a Full Width section as a content separator.

Display Ads in blog

To display your Ad Widget in the blog, simply choose so in the Ad Setting of the blog you're creating.

You can choose after how many articles the ad is displayed. This is repeating value, so the ad will display after each X articles.

In blog, Ad size is automatically chosen based on the layout used.
For example: Masonry will display square ads, while List will display wide ads.

Infobar


Infobar is very handy feature that sticks to the bottom of the screen and shows you what's the current post you're viewing, how much of it have you read, sharing options and 'Read Next Post' link.

Infobar can be enabled or disabled in Customize > Blog Layouts & Posts > Single Post > Show Infobar.

Infobar also has the option to make Read Next Post be in the same category, thus making an easy navigation through the posts not only in publishing date, but within the current category.
This option can be found right after the main on/off infobar setting.

Each Single Post can override the global setting for Infobar in it's own Post Settings.

Menus can be customized in the WP-Admin > Appearance > Menus.
There are two dedicated menu locations within Whyte, both regarding the main menu:

  • Main Menu - Displays as regular horizontal navigation.
  • Mobile Menu - Displays on mobiles as a slide-out navigation.

When you create your menu, you can add it to the desired location.
Typically, you'll add same menu to both locations, but still, if you wish to have different menus/hierarchy depending on the device accessing website, you can create different menus for different locations.


MegaMenu


Additionally to the standard WordPress menu settings, Whyte brings a special checkbox setting - Display as MegaMenu.

This setting is available in the first level of your navigation, and it will change the display style of the dropdown menu nested within.

Instead of standard dropdown list, wide dropdown will be displayed, with featured images.

Make sure to add featured images for all menu items you wish to display as MegaMenu with images. Additionally to the Posts and Pages, featured images can be added to all Categories and Tags in WP-Admin > Posts > Categories/Tags.

Setting URL as # enables you to have a 'blank' link, meaning it will behave as a regular link, but have no effect on click. This is ideal for creating dropdowns.

MegaMenu without images


By checking the Hide featured images from MegaMenu setting right below the Display as MegaMenu, you make sure to display only links without images, while still having the big 'table-like' dropdown menu.

This can be used to clearly display larger menus.

Second level of navigation will created columns, every next level will populate this it's parent's column.

Notification Bar

Notification Bar can be enabled and customized in Customize > Notification Bar.
It displays at the top of the page.

If Notification Bar can be dismissed setting is enabled, a small x button will display on the right. Once a visitor dismisses your notification, he will not see it again. The notification becomes visible again once the contents of it are changed - text, button or link.

Jetpack subscription can be added with a simple click as well. Just install Jetpack plugin and configure the Subscription module, as you tipically would. The form will be automatically displayed as notification.

Breadcrumbs are automatically activated as soon as you install the Breadcrumb NavXT plugin.

It will work out-of-the-box, but if you wish to fine-tune it, plugin settings can be found in WP-Admin > Settings > Breadcrumb NavXT.

Theme Options

Whyte's theme options are created with native WordPress Customize with live preview.
You can access it from the Customize link in the Admin Bar,
or from WP Admin > Appearance > Customize.

Theme Options: General

Site Title & Tagline
Default WordPress settings, used for building your website's title in a browser-tab,
and generating default meta tags.
Site Icon
Native WP option. This gives you the favicon - browser/app icon of your site.
Upload sqaure image in 512x512 size.
Main Logo
You main logo image, which will be used in header.
Load Pages with Ajax
Globally enable smooth ajax navigation through website.
Since pages are loaded with javascript,
some third-party plugins may not be aware that page loading/changing has happened, and thus not work correctly.
If this is the case with some of the plugins you'd like to use, you have two options:
  1. Easy: Just disable Whyte's Ajax loading.
  2. Advanced: Hook the plugin to the Whyte's Ajax navigation. Check Javascript Hooks for details.
Post Comments with Ajax
Enables smooth comment posting.
If you use some comment plugins, you may need to disable this.
Use Facebook Open Graph meta tags
This improves sharing your posts on Facebook.
If you use a third-party plugin that takes care of this, disable this option.
Footer Logo
Pick and upload your footer logo, if you wish to have one.
Copyright
Add copyright text. It supports multiple rows, and even shortcodes.

Theme Options: Layout

Sticky Header Menu
Check to make the header menu appear at the top of the screen once you start scrolling up.
Sideblock width on desktop
Choose width of the sideblock. Defaults to 300px.
Lower window resolutions will override this size and make it responsive.
Cover Height
Uniform height for Cover images on posts, pages or taxonomies. Defaults to 400px.
Cover Width
Choose if all covers should be displayed in content width (1300px) instead of fullwidth.
Display Whyte's X visual element
Uncheck this to remove all X visual elements throughout the theme - image hovers, on separators, in rich image and custom banner elements.

Theme Options: Style

Style: Colors

By default, you can change only the Accent and Gradient colors.
However, if you install WP-LESS plugin,
you'll gain ability to define white, black, and greys in between.

Accent Color
Used as primary accent color for links and accented details.
Gradient Colors
Defines the default gradient that will be used throughout the website.

With WP-LESS plugin:

White
Everything white: button text, elements over the images.
Pale Grey
Used as background on form elements, code blocks, highlighted text, navigation dropdowns, dropcaps.
Light Grey
Used whenever a slightly lighter version of grey is needed. Most of the borders, meta-info, widget titles, and textual labels.
Grey
Main text color. Used mostly for typography.
Black
Everything black: titles color, dark-black elements, secondary-links, notification background, underlaying borders and hovers.

Style: Backgrounds

Pick Backgrounds for the Body and Footer.
Footer can have a Dark-mode enabled by checking the needed field.
Dark-mode will render text in light color, thus making it readable on darker backgrounds.

Style: Typography

Here you can set the typography options for the theme.
Each font selection is self-explanatory.
Some notes:

  • You can choose to Justify most of the elements by checking the 'Justify post excerpts and quotes.' field.
  • After all the available elements, on the bottom you'll see a Character Sets field.
    This will enable you to include additional character sets (like greek or vietnamese) into the Google Fonts embed.
  • Settings for Labels, are affecting post-meta, buttons, title labels, social links, blockquote cite
  • Kerning setting has high sensitivity. Use 0.1 or 0.2 values for the best results.
    You can use a negative values also, like -0.1.

Theme Options: Blog Layouts & Posts

Homepage

This panel has the settings for the style of main blog in the Latest Posts homepage.
It is covered in detail in the Homepage Setup part.

Archives

This panel has the settings for the style of the blog in all archives pages.
It is covered in detail in the Archives Setup part.

Single Posts

Here you can find options to enable or disable various sections of the single post display.
They are all visible by default.

Featured Posts

Options for setting up Featured Posts, that can be displayed on the homepage or any static page.

Sharing Settings

Configure the list of social networks on which your posts can be shared.
This is Whyte's styled feature.
If you wish to use third-party plugin or service, you'll most likely wish to disable all of Whyte's sharing options.

These sharing links are visible below each single post, and posts in Masonry and List layouts.

Theme Options: Notification Bar

Enable and configure the notification bar appearing at the top of the website.
Explained here.

Theme Options: Advanced

Display Pingbacks
Disabled by default. Enable it if you want to display pingbacks alongside your comments.
Google API
Enter your own Google API key that will be used for Google Fonts. If left empty, theme's own API key will be used. If in doubt, leave empty.

Theme Options: Navigation

This is default WordPress options panel.
Here, you can assign your custom-created menus to a dedicated menu areas.

Menu settings can also be found in WP Admin > Appearance > Menus, with a lot of additional options!

Theme Options: Widgets

This is default WordPress options panel.
Here, you can add widgets to the dedicated widget areas.
Same settings can be found in Appearance > Widgets.

Live Preview in Customize can sometimes make the process of setting widgets behave weird.
If you notice something similar, move on to Appearance > Widgets and customize widgets there.

Theme Options: Static Front Page

This is default WordPress options panel.
Here, you can choose what does your homepage display - Latest Post or a custom static page.

Theme Options: Additional CSS

This is default WordPress options panel.
Here, you can input custom CSS styles, which will be stored in database and not get overriden upon any update.

Editor & Content

Whyte Theme extends the native WordPress's TinyMCE editor with a couple of style formats, elements and shortcodes.
Their usage will be covered here.

Formats


In Editor, note the Formats dropdown menu.
It contains custom Whyte typography and button styles.
Formats always format the current content.

Wrap in Sideblock
This format will wrap your current selection in a sideblock.
It can be handy when you already have a content you wish to move into a new sideblock.
Final result is same as when Sideblock is freshly added, and then populated with content.
Dropcap
Select the first letter of a paragraph, and format it as a Dropcap.
Description Heading
Additional heading style, used as a secondary title, or subtitle.
Works same as Headings 1-6, but is styled differently.
This is a block-level format.
Gradient Heading
Similar element to Gradient Heading, only it comes with a gradient border below it. Specifically used as Main Blog Title within the theme.
This is a block-level format.
Highlighted Paragraph
Formats the selected paragraph as highlighted.
This is a block-level format.
Highlighted text
Select words, or part of the text, and make it highlighted.
Similar as you would do with Bold or Italic
Cite (for Blockquote)
Style text selection as <cite>.
Label Value
Simple label-style format useful for displaying values in the table.
Korra Buttons
Styles a selected link as a button. Variuous options available.
This format works only for links.

Description heading and Highlighted paragraph, just as native Blockquote or H1-H6, are block-level formats.
That means that they will format whole paragraph of text, even if you only selected a part of it.

Elements & Shortcodes


In order to use most of the elements here, you must install the required Whyte Shortcodes Plugin via the alert message in your WP-Admin. This plugin contains Whyte's custom functionalities and shortcodes.

While Formats format the existing content, Elements will input the new element into the content, at the cursor's place.

Shortcode Generator


Most of the elements are created via the custom 'Generator' which makes it easy to customize any element or shortcode.

Shortcodes can be edited the same way they are added - via the same Generator by selecting the shortcode in the editor and simply clicking the same element button under Elements.

Elements

Rich Title
Enables you to make a custom-styled Heading element, which supports extensive descriptions and custom background imagery.

Rich Image
Specifically designed element to showcase an image with a comment/details. Much more prominent then the standard captioned image.
Shines when used in Full Width / Content width sections.

Custom Banner
Element visually similar to Rich Image, but enhanced with a custom height and linked button.

Ad Widget
Displays Square or Wide Ad widget area, which should be populated with custom ads. Check details about using Ad widgets.

Icon
This introduces the Icon Picker, which can be used to browse the Whyte's icon set.
Upon selecting icon, it's shortcode will be placed in the content.
This shortcode will transform into an graphical icon on the preview of the page.
Icon can be placed almost anywhere, even in titles or dropcaps.
Shortcode example:
[korra_icon icon="heart"]

Scroll-To Anchor
Invisible element that acts as an anchor with unique ID.
Linking to this anchor will make the page scroll to it.
For example:
Link <a href="#my-anchor">Scroll to Anchor</a>
will scroll to [korra_anchor id="my-anchor"].
Blog
Create a custom blog with huge amount of settings.
Small Separator
This is a smaller separator that provides visual separation.
It can be horizontally aligned with native text-align tools.
Great to use right after a heading!
Gradient Separator
Same as Small Separator only in gradient colors instead of grey.
Alignment Clear
Invisible border that clears any previous alignments.
Use after left/right-aligned element,
forcing the following content to make a break and return to normal content flow, not wrap around.
Invisible Spacing
Shortcode for fine tuning the vertical space between elements.
Just set the height value in pixels.

Tables

In order to add table options into the editor,
you must install MCE Editor: Tables plugin.

Plugin brings a lot of settings and options. You can still use formatting inside the table.
In the image on the right, Description Heading is used for title, and Label Values for data.

Tables can be inserted anywhere, even in Sideblock.

Sideblock & FullWidth Sections

Sideblock, Full-Width and Content-Width sections are Whyte's custom feature that enables you to
easily split your content into a dynamic and organized structure.

Front-end display

Admin edit content


  • Sideblock section is pulled out of the main content column and is sticking to the top of the page when scrolling.
  • Full-Width section is stretching across whole screen.
  • Content-Width section is covering the exact content area (1200px).
  • Both Full-Width and Content-Width sections will unstick the Sideblock before them.
  • Sideblock can be unsticked manually with the invisible Unstick Border (available in the sideblock dropdown in the editor).
  • All sections are inserted empty in the editor via toolbar buttons, and then populated with content.

Gallery

Gallery is created with native WordPress gallery feature.
It supports captions and can have lightbox enabled.

Using Gallery

  • When editing post click Add Media button.
  • Select Create Gallery from the left menu.
  • Pick one or multiple images from media library and create gallery.
  • Link to: Media File to enable lightbox feature.
  • Depending on the Gallery Style, different settings will take effect.
  • Columns are only having effect in Masonry Style

Image Sizes

In the gallery settings you'll notice the Size setting.
There are a couple of image size presets, and you'll want to use different for different effects and use-cases.

  • Full Size - original you uploaded.
  • Full-Width Scale - scaled to 1820px width.
  • Content-Width Scale - scaled to 1200px width.
  • Horizontal Crop - cropped to 1.5:1 ratio.
  • Square Crop - cropped to 1:1 ratio.
  • Portrait Crop - cropped to 1:1.5 ratio.

Unless you are creating a wide slider or gallery of 1-columned wide images, you'll pick one of the crop presets.

  • Default gallery style.
  • Similar to Google and Flickr gallery styles.
  • Images are laid out horizontally and system tries to create a perfect balanced gallery.
  • Columns have no effect.
  • Setting max height will limit the row height. Otherwise, this will max out at image maximum height or 600px.
  • Columns are fully respected.
  • Images are laid out without size changes in a vertical order so that all columns are as similar height as possible.
  • Setting columns to 1 and picking scaled or horizontal image size will create nice column of images.
  • Using one of the Crop image sizes with the desired number of columns will create a perfect grid (since all images will be of uniform width and height).
  • Example on the right is created by uploading pre-cropped images per our desires, and then using full size image preset to use originals.
  • Slider will have height calcualated as average from all images in the gallery.
  • Max height setting will limit the slider height.
  • All images will stretch to cover the slider.
  • Animation frequency can be increased ( 0 = off ), to enable automatic sliding.
    Value is in milliseconds - 3000 = 3 seconds.


  • Images are laid out horizontally in a single row.
  • If gallery gets wider than the container, it will have scroll.
  • Smallest image in the gallery will dictate the height for the whole filmstrip.
  • Max height setting will limit the height of gallery.
  • Animation frequency can be increased ( 0 = off ), to enable automatic scroll.
    Value is in milliseconds - 3000 = 3 seconds.


  • When creating gallery, choose Link to: Media File to enable lightbox.
  • Automatically displays full-size images.
  • Displays post/page name, navigation and image title/caption/description.
  • To customize image details, edit it's title, caption and description.

Authors

After each post, the Author Block will be displayed with the details about post author. This can be hidden in Customizer > Blog Layouts & Posts > Single Post.

Additionally, these details will be displayed in the Cover area of the Autor's archive.

Create & Edit Authors

To add or edit authors go to WP Admin > Users.
Essentially, author is a user with the role of 'author'.
If you need more information on the roles and their capabilities, check the official WordPress documentation.

Author Image

WordPress uses Gravatar service for displaying author's image. Just create a gravatar profile, connect your author’s email to it, and image will be automatically displayed.

Alternatively, you can extend this functionality and use a third-party plugin which would allow you to upload your avatar image directly to your website.

Cover image

Last field in the User settings. This image will be used as background for Cover on the Author Archive page.

Pages

Pages are created with the same editor tools as posts.
They are usually static, and prominently displayed in navigations.
They are commonly used for About and Contact pages.

However, beside this default functionality,
Whyte extends the pages with the options to create custom blog lists on them, below the main content.
This way, you can have multiple custom blogs on your website, or create an awesome custom intro content to your blog ( and set that page as a homepage in WP Admin > Settings > Reading ).

Page Settings

If you've installed the required Advanced Custom Fields plugin,
below the main content in Edit Page screen, you'll see the Page Settings.

Layout & Title

First tab - Layout & Title has options for overriding the global layout settings on this particular page.

In addition to the basic title, here you have fields for customizing the Cover of this page, which will override the featured image.
Setting the Custom Cover Height will alter the standard Cover height set in Customizer.
Checking Rich Cover will alter the display style of the Cover and enable the input of description.

Page's Custom Blog

Second tab - Blog has options for creating custom blog on that particular page, and displaying Featured Slider.

Check Display Featured Slider to display the featured posts on top of the page.
This slider is configured in Customize > Blog Layouts & Posts > Featured Slider.


By checking the Use Blog option, you'll enable the blog, and make additional options to appear.

Blog Display Style
Pick one of the blog layouts for the blog.
Blog Category
Pick a category to filter the articles in your blog.
You can choose multiple categories.
Leaving everything unchecked will show all categories.
Blog Category Exclude
Pick a category to exclude from blog.
Blog Featured Exclude
By checking this option, you will exclude the featured posts from this blog, thus not creating duplicates.
Blog Posts per Page
How many articles will be showed per page.
Leaving this empty will fallback to the global setting from WP Admin > General > Reading
Blog Pagination
Pick a desired style for pagination.
Pagination: Custom More-Button
If pagination is set as custom link button, you'll be able to choose the link and text of the button.
Blog Ads
Displays an Ad after every X posts. The Ads are created in Widget Ad Areas.
Enable Sticky Posts
This gives you the option to skip the specifically designed sticky posts, and display them normally with the rest. This option is not available on native WordPress lists, since they must display sticky posts as intended.

Contact Page

In order to create a contact page, you need a plugin for creating custom forms.
We recommend Contact Form 7. It's easy to use and reliable.
Whyte also contains styling for this plugin.

In the Contact Form 7 Admin area, you'll be able to build your custom forms,
which will later be included in your static page via the generated shortcode.
It's pretty simple, but nonetheless, here's a basic form we use on our demo:

[text* first placeholder "Your Name*"]
[email* email placeholder "Your Email*"]
[textarea* message x12 placeholder "Your Message*"]
[submit "Submit"]

Widgets

Widgets can be accessed and customized in WP Admin > Appearance > Widgets.
Whyte brings 11 dedicated widget areas, and 5 custom widgets.

Widget Areas

Above Page Content Area
Wide area right below header. Useful for Featured Banners or Ads.
Below Page Content Area
Wide area right above footer. Useful for Filmstrip Blog or Ads.
Header Area
Best used for social links.
Depending on the Header Menu position, this widget area will be rendered on the left or right.
Ad Area - Square
Container for 300x250 or 300x600 ads.
Widgets placed here will be displayed in appropriate blogs and in content when used [korra_ad_widget type="square"].
Ad Area - Wide
Container for 728x90 ads.
Widgets placed here will be displayed in appropriate blogs and in content when used [korra_ad_widget type="wide"].
404 Area
Widget Area that acts as a main content on 404: Not Found pages.
Search Results Area
Widget Area that acts as a main content if search provides 0 results.
Footer Area Top
Wide area on top of the footer. Useful for navigation or social menu.
Footer Area Left/Right
Two half-width areas are main part of the footer. Useful for About text, or Blog Widget.
Footer Area Bottom
Wide area on bottom of the footer. Useful for navigation or social menu.
Footer Instagram Area
Full Width Widget Area designed to be used specifically with WP Instagram Widget plugin.

Whyte Widgets

Beside the native WordPress widgets, Whyte brings 5 custom ones to the table.
Additionally, we have styled the recommended WP Instagram Widget, so it fits perfectly in the theme.

Korra: About

Create your 'About' block for footer with ease.

Title
Basic widget title.
Image
Image to be displayed.
Social Shortcode
Input your custom social shortcode here.
For details on how to build the shortcode, check Social Widget.
Description
Add custom description to be shown at the bottom of the widget.
Supports paragraphs and shortcodes.

Korra: Blog Filmstrip


Display custom blog as a filmstrip.

Title
Basic widget title.
Number of posts
Set the maximum number of posts to display.
Category
Filter the posts by specific category, or skip to display all posts.
Tag
Filter the posts by specific tag, or skip to display all posts.

Note that if both Tag and Category settings are specified, only posts that match both cases will be displayed.
This can be used for displaying, for example, only 'featured' tagged posts from the 'Movies' category.
Order by
Choose ordering rule for the posts.
For example, Latest Posts widget would use date, but 'Most Popular' would use comment count.
Order
A->Z or Z->A
Animation interval:
Enable automatic scrolling of filmstrip, or leave 0 to scroll it only manual.

Korra: Blog Widget

Display custom blog list.
Double Blog Feature can be enabled by simply setting up the Secondary Blog fields. Title is obligatory.

Title
Widget title. Used for switching between blogs.
Number of posts
Set the maximum number of posts to display.
This field is shared between double blogs.
Category
Filter the posts by specific category, or skip to display all posts.
Tag
Filter the posts by specific tag, or skip to display all posts.
Note that if both Tag and Category settings are specified, only posts that match both cases will be displayed.
This can be used for displaying, for example, only 'featured' tagged posts from the 'Movies' category.
Order by
Choose ordering rule for the posts.
For example, Latest Posts widget would use date, but 'Most Popular' would use comment count.
Order
A->Z or Z->A


Customize up to 4 banners.
They can be selected to be any Page, Post, Category or Tag.
Additionally, banner can be Custom Banner.
This will let you pick custom image, title and link for the banner.
Very useful for creatig custom banners for external links, sponsors or shops.

Korra: Social


Build your own social links.

  • Support any number of networks.
  • Choose custom Icon, title and link.
  • Either Icon or Title are required.
  • By ommiting icon or title, you can create a strict icon or textual navigation list.

Widget automatically generates a [korra_social] shortcode, which can be used anywhere on the site. Note that shortcode is stand-alone, so you can use Widget to customize the shortcode, copy it and then freely remove the widget.

Instagram Footer is created by placing WP Instagram Widget into the Footer Instagram Area widget area.
WP Instagram Widget is installed through the same-name plugin. It is a recommended plugin, and upon activation of the theme, you should see the notice for installation of the recommended plugins.

Footer Instagram will take full width of the screen, and photos will fit the space.

Advanced
This section is for developers.

Javascript Hooks

If you're installing a third-party plugin, or just building some functionality on your own, there's a possibility that you'll need to hook into Whyte's Ajax loading, or make the theme aware of your added content/function.

Hooking into Ajax

Whyte fires an event when new page has been loaded with Ajax.
If some plugin works only on initial loading or full page refresh, but not after navigating to other page, chances are that it is not aware that new page was loaded via javascript.

You need to kickstart it. Of course, only if that plugin supports to be manually fired.
You can use the following snippet:

$(document).on('korra:ajaxPageLoad', function(){
	plugin_function();
});

Recalculating layout

This is mostly concern regarding the sticky Sideblock and Full-Width sections.
If the content changes, Whyte must be told to recalculate the heights and update the position of sideblocks.
After your asynchronous content changes changes, just trigger the Whyte's re-layout:

$(document).trigger('korra:layout');

Frequently Asked Questions

How to add manual excerpt?

Field for manual excerpt is hidden by default in WordPress.

When in Edit Post screen, in top-right angle find Screen Options, pull down the options, and check Excerpt setting.
You'll be able to see the manual excerpt field below the main content editor area.

Embedded media is not responsive.

This usually happens when Jetpack plugin is installed.
Specifically, Jetpack's Shortcode Embeds module overrides the Whyte's functionality for responsive embedded media,
and all the Youtube/Vimeo embeds start rendering out of proportion and size.
Just deactivate this module from the plugin and things will get back to normal.

All Jetpack modules can be accessed via YOUR_SITE/wp-admin/?page=jetpack_modules

If the above approach doesn't help, make sure to use the original URL for embedding media. Don't use shortcoded or embed-codes. WordPress will automatically convert your link into embedded media when you paste the link in the editor.

For example, when embedding YouTube videos in content, paste the link in this format:

https://www.youtube.com/watch?v=2wsUHhiMpGw

How to change logo size?

Logo is displayed in the original size.
If you wish to resize it, you can do so with CSS:

.korra-logo img {
  width: 200px;
}

Why are the images not displaying correctly?

Upon activating Whyte and migrating from another theme, previously added featured images might take strange aspect-ratios, be unnecessary big or just look out of place.
This is because image thumbnails have not been resized/cropped per Whyte's presets.

Just install Force Regenerate Thumbnails Plugin, and fire it up from Tools > Force Regenerate Thumbnails. This will regenerate all your 'pre-Whyte' featured images, and you'll be golden.

How to embed instagram image?

Unfortunately, this is a known WordPress bug - Instagram auto-embed doesn't work properly.
Current solution would be to either:

  1. Manually paste your embed code into Edit Post content (text editor, not visual)
  2. Use Simple Instagram Embed plugin, which sorts the auto-embed issue out.

What image size to upload?

No matter what image size you upload (as long as it is big enough), it will be automatically resized according to it's usage and placement.

If you're adding the image to your content, you'll be able to pick it's display size (bottom-right in your screen), or soft-tune it with the live resizing tool in the editor.

With all that being said, maximal width that any image could have is 1820px.
By uploading images wide at least 1820px, you make sure that everything will look spot on.

Image height is completely optional.

How to change image-size preset?

In your child-theme's functions.php use the following function:

add_action('after_setup_theme', 'change_image_size', 11);

function change_image_size() {
  remove_image_size('korra-horizontal-l');
  add_image_size('korra-horizontal-l', 780, 520, true);
}

In this example, image-size horizontal-l is changed.
You can find all Whyte's image-size presets originally defined in main theme's functions.php file.
If you need more details on customizing the preset, you can check official WordPress documentation.

If you wish to use a third-party plugin for gallery, it is a great possibility that it uses the native WordPress' [gallery] shortcode, which Whyte also uses for it's gallery. This might lead to an error.

To disable the Whyte's overrides for the gallery, in your child-theme's functions.php paste this code:

add_action( 'init', 'remove_korra_post_gallery' );

function remove_korra_post_gallery(){
  remove_filter( 'post_gallery', 'korra_post_gallery', 10 );
}

How to remove meta details from posts display?

Use the CSS that reffers to your need:

/* Remove comments meta */
.meta--comments { display: none !important; }

/* Remove date from meta */
.meta--date { display: none !important; }

/* Remove author from meta */
.meta--author { display: none !important; }

Add text underline and justify

From WordPress version 4.7, editor does not feature underline and justify formatting buttons.
This plugin brings them back - Re-add text underline and justify.

Control widget visibility

Best way to control on what pages a certein widget is displayed (for example, you wish Featured Banners to be visible only on homepage) is with the Widget Visibility module in the widely used Jetpack plugin.
Simply install the plugin and enable the module if it is not enabled by default. You can search modules in the Jetpack > Settings to quickly find and toggle it.
Once the module is active, all your widgets will have a Visibility button next to the Save button. Via this button you can access and customize the rules for displaying the widget.

Demo Content doesn't import correctly

If Demo-XML file won't load, it's most likely due to host limitations. The easiest way to get around that is to leave the "download images and attachments" box unchecked. That will give you all the pages and posts without the attachments.

Images used in Whyte Demo Preview are not included in a theme-package.
By importing demo-content, you will get grey placeholder images instead of photos.
Demo import still may take some time due to sheer amount of content.

If you are encountering server issues or timeouts, feel free to import the content again (even multiple times).
The content, and especially images will not get duplicated but skipped over, thus your import will always continue from where it ended the previous time.

Support

Thank you for purchasing our theme.

If you have any questions that are beyond the scope of this help file, please feel free to contact us on support@korra.io.
We will respond in the shortest time possible.

Credits

Theme uses SmoothScroll.js plugin by Balázs Galambosi.