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:

hygge.zip
Main Theme! This .zip is installed in WordPress.
hygge-child.zip
Pre-created child theme for Hygge. Use it!
hygge-documentation.zip
Docs you are reading right now.
hygge-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 "hygge.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 hygge.zip file and only use the extracted hygge theme folder.
  3. Upload the extracted hygge 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 parent-theme with custom settings or code.
If you wish to customize or make changes to Hygge, 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 Hygge parent-theme, you install and active hygge-child theme.

Hygge Package contains a pre-created child theme - hygge-child.zip. Use it!
You must install the parent-theme first, and then child-theme.

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

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

Regenerating Thumbnails

Upon activating Hygge 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 Hygge's presets.

Just install Force Regenerate Thumbnails Plugin, and fire it up from Tools > Force Regenerate Thumbnails. This will regenerate all your 'pre-Hygge' 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 hygge.zip file and only use the extracted hygge theme folder.
  3. Upload the extracted hygge 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

Hygge Theme, as well as child-theme, comes with the created language hygge.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 hygge.pot file and rename it into the LANGUAGE_NAME.po file.

If this is your first time translating theme, we recommend Loco Translate Plugin as the fastest and easiest approach.
You pretty much will not need any of the following explanation as the plugin sorts most of those things by itself.

Example

If you would to translate your website into french language, you would duplicate hygge.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:

  • hygge.pot
  • hygge.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

Hygge requires and recommends a couple of plugins to extend it's functionality.
All can be installed automatically from notification in Admin panel.
The theme will work without any of these plugins.
However, those tagged with required will enable important theme features and settings.
Those tagged with recommended will bring some handy features that we recommend.
The others are to be installed if you really wish to have them - they are our picks among various similar plugins.

Hygge Shortcodes - required
This plugin contains most of theme's custom elements and shortcodes (custom blog, rich image, custom banner, separators, icons, ad/social widgets).
It is recommended that you install this plugin.
Advanced Custom Fields - required
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 Hygge theme with a simple click.
Widget Visibility - recommended
Enables you to choose on what pages should certain widget be displayed/hidden.
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 color.
WP Instagram Widget - optional
Lightweight plugin for displaying your instagram feed in a widget.
Hygge has styles for this plugin out-of-the-box.
Hygge'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.
Hygge 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 Hygge demo content.

  1. The XML file is included within the download package at root level in a zip called hygge-demo-content.zip
  2. Extract it and find hygge-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 Hygge 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 to hide a particular segment, just uncheck it.
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, Only Title 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, only title will be shown.
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.

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.
Image
Displays featured image and stresses it in the lists (e.g. List with highlights will display this post as highlightes).
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 usually 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.

Single Posts will display only the Manual Excerpt on the start of the article,
if enabled in Customizer > Blog Layouts & Posts > Single Post.

Blog Layouts

List

  • Image post format behaves same as the standard.
  • Quote/Gallery/Audio/Video post formats will display their respective media
  • Display's excerpts.

List with Highlights

  • Standard post format will look same as in List.
  • Image/Quote/Gallery/Audio/Video post formats will display their respective media and appear highlighted as large posts.
  • Display's excerpts.

Masonry

  • Articles are laid out in masonry style.
  • Depending on the available space, posts will be laid out in 1-4 columns.
  • Image/Quote/Gallery/Audio/Video post formats will display their respective media.
  • Does not display excerpts.

Grid

  • Articles are laid out as grid in uniform size with margin between.
  • Depending on the available space, posts will be laid out in 1-4 columns.
  • Image/Quote/Gallery/Audio/Video post formats will display their respective media.
  • Display's excerpts.

Grid 3-2

  • Articles are laid out as grid in uniform size.
  • Rows alternate between displaying 3 and 2 posts.
  • In smaller spaces, layout will break into 2-1 alternation.
  • Image/Quote/Gallery/Audio/Video post formats will display their respective media.
  • Does not display excerpts.

Grid 3-1

  • Articles are laid out as grid in uniform size.
  • Rows alternate between displaying 3 and 1 posts.
  • In smaller spaces, layout will break into 2-1 alternation.
  • Image/Quote/Gallery/Audio/Video post formats will display their respective media.
  • Does not display excerpts.

Filmstrip

  • Available only as a Widget and custom shortcoded element.
  • Primarily intended to be used in footer as 'Editor Picks'.
  • Shines when used in Full Width section.
  • Displays only featured image.
  • Does not display excerpts.
  • Available only as a Featured Posts element and custom shortcoded element.
  • Primarily used as Featured Posts on top of the page.
  • Shines when used in Full Width section.
  • Displays only featured image.
  • Display's excerpts.

Widget List

  • Available only as a widget and custom shortcoded element.
  • Primarily used in sidebar/sideblock.
  • Shines when used in narrow section.
  • Displays only featured image.
  • Does not display excerpts.

Widget Slider

  • Available only as a widget and custom shortcoded element.
  • Primarily used in sidebar/sideblock.
  • Shines when used in narrow section.
  • Displays only featured image.
  • Does not display excerpts.

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 Posts, 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 Hygge 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 Posts.

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 with the content on the right:

It two different blog lists, one in Sideblock and one in main content. After it, Custom Banner is displayed within the Full Width section.

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.


Featured Banners is a widget 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.
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 Widget Visibility plugin. 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.

Blog Filmstrip (Editor Picks)


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 enabled 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)

Hygge 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 colors.

Category Colors

Theme has global setting for primary (accent) color in Customize > Style > Colors. This color can be overriden in certain cases with the custom Category color 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

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

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

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.

Menus can be customized in the WP-Admin > Appearance > Menus.
There are two dedicated menu locations within Hygge, 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, Hygge 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.

Theme Options

Hygge'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.
Logo width
Enables use of retina logo. Input 2x smaller size than the actual image width.
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 Hygge's Ajax loading.
  2. Advanced: Hook the plugin to the Hygge's Ajax navigation. Check Javascript Hooks for details.
Ajax loader uses post thumbnails when possible
This will display a small thumbnail of the post/category being loaded within the circling loader. Uncheck to always use the default loader.
Default Ajax Loader Image
You can upload your custom image or gif here to customize the default ajax loader. If you remove the image, loader will become minimal circled loader.
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.
Enable Sidebar
Choose to display/hide the main sidebar.
Sidebar width on desktop
Choose width of the sidebar. Defaults to 360px.
Sideblock width on desktop
Choose width of the sideblock. Defaults to 360px.
Lower window resolutions will override this size and make it responsive.

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.

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 different page parts.

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 Hygge's styled feature.
If you wish to use third-party plugin or service, you'll most likely wish to disable all of Hygge's sharing options.

These sharing links are option each single post, and in most blog lists.

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

Hygge 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 Hygge 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 highlighted paragraph or description.
Works same as Headings 1-6, but is styled differently and can be used for blocks of text.
This is a block-level format.
Cite (for Blockquote)
Style text selection as <cite>.
Label Value
Simple label-style format useful for displaying values in the table.
Hygge Buttons
Styles a selected link as a button. Variuous options available.
This format works only for links.

Description Heading, 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 Hygge Shortcodes Plugin via the alert message in your WP-Admin. This plugin is bundled within the theme and contains Hygge'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 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
Banner with custom link, image and details.

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

Blog
Create a custom blog with huge amount of settings.

Icon
This introduces the Icon Picker, which can be used to browse the Hygge'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:
[hygge_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 [hygge_anchor id="my-anchor"].
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!
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 Hygge'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.
  • 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

In the post meta block on every single 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 Author'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.

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,
Hygge 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.

Page's Custom Blog

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

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


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.

Forms

Custom Form Style

Hygge brings custom form style which animates the placeholders into labels on focus.
In order to style the input field of your custom or any third-party forms like this, the html of the inputs should be changed based on the following example.

<div class="hygge-form-label">
  <label>Name</label>
  <input type="text" name="Name" />
</div>

<div class="hygge-form-label">
  <label>Email</label>
  <input type="email" name="Email" />
</div>

Contact Form/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.
Hygge 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"]

Alternatively, you can also use the custom form style and create a form like this:

<div class="hygge-form-label">
  <label>Your Name*</label>
  [text* first]
</div>

<div class="hygge-form-label">
  <label>Your Email*</label>
  [email* email]
</div>

<div class="hygge-form-label">
  <label>Your Message*</label>
  [textarea* message x12]
</div>

[submit "Submit"]

Newsletter

The subscription form on Hygge Demo is created with MailChimp for WordPress plugin for integrating MailChimp into WordPress.

Obviously, you can use any kind of mailing service and integration, whatever you wish. This is example how we built the form for our demo:

<h4>Sign up to my Newsletter</h4>
<p>A good laugh is a mighty good thing, and rather
<br>too scarce a good thing the more’s the pity.</p>

<div class="hygge-form-label">
  <label>ENTER YOUR EMAIL ADDRESS *</label>
  <input type="email" name="EMAIL" required />
</div>

<input type="submit" value="Sign up" />

Widgets

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

Widget Areas

Sidebar Area
Main widget area that's sticked to the right window edge.
Header Area
Small widget area useful for social links.
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.
Ad Area - Square
Container for 300x250 ads.
Widgets placed here will be displayed in appropriate blogs and in content when used [hygge_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 [hygge_ad_widget type="wide"].
Ad Area - Skyscraper
Container for 300x600 ads.
Widgets placed here will be displayed in appropriate blogs and in content when used [hygge_ad_widget type="skyscraper"].
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 Instagram Area
Full Width Widget Area designed to be used specifically with WP Instagram Widget plugin.
Footer Copyright Top
Wide area at the bottom of the footer. Useful for copyright text or social menu.

Hygge Widgets

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

Hygge: 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.

Hygge: 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.

Hygge: 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.

Hygge: 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 [hygge_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 Hygge's Ajax loading, or make the theme aware of your added content/function.

Hooking into Ajax

Hygge 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('hygge:ajaxPageLoad', function(){
	plugin_function();
});

Recalculating layout

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

$(document).trigger('hygge: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 Hygge'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:

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

Why are the images not displaying correctly?

Upon activating Hygge 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 Hygge's presets.

Just install Force Regenerate Thumbnails Plugin, and fire it up from Tools > Force Regenerate Thumbnails. This will regenerate all your 'pre-Hygge' 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('hygge-horizontal-l');
  add_image_size('hygge-horizontal-l', 780, 520, true);
}

In this example, image-size horizontal-l is changed.
You can find all Hygge'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 Hygge also uses for it's gallery. This might lead to an error.

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

add_action( 'init', 'remove_hygge_post_gallery' );

function remove_hygge_post_gallery(){
  remove_filter( 'post_gallery', 'hygge_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 Hygge 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.

Disable Sideblock layout

In order to completely remove the theme's native two-columned layout that leverages Sideblock feature, you can just use this CSS:

.post__content,
.post__comments__inwrap {
	padding-left: 0 !important;
}

.hygge-sideblock {
	margin-left: 0 !important;
	width: auto !important;
	float: none !important;
	position: static !important;
}

.hygge-sideblock-placeholder {
	display: none !important;
}

In order to replace the standard image gallery on WooCommerce product page and display all product images immediately in a column, you can just use this CSS:

.woocommerce-gallery-wrap .gallery__items {
	height: auto !important;
}

.woocommerce-gallery-wrap .gallery__items .hygge-slider__item,
.woocommerce-gallery-wrap .gallery__items .hygge-slider__item-inwrap,
.woocommerce-gallery-wrap .gallery__items .hygge-slider__item-inwrap a {
	position: static !important;
}

.woocommerce-gallery-wrap .gallery__items .hygge-slider__item {
	opacity: 1 !important;
	margin-bottom: 10px !important;
}

.woocommerce-gallery-wrap .gallery__items .hygge-slider__item-inwrap img {
	opacity: 1 !important;
	visibility: visible !important;
}

.woocommerce-gallery-wrap .hygge-ui-arrows {
	display: none !important;
}

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.