Sleek WordPress Theme - Documentation

1 WordPress & Theme Installation

1.1 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

1.2 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.

1.2.1 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 "sleek.zip" file on your computer and click "Install Now" button.
  4. The theme will be uploaded and installed.
  5. Activate the newly installed theme. Go to Appearance > Themes and activate the installed theme.

1.2.2 Theme Installation via FTP

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

1.2.3 Migrating from Another Theme

If you are migration from a theme which used the native featured images functionality of WordPress. Please use the Regenerate Thumbnails plugin to resize all the thumbnails. Click the link above and download the free plugin, and read through the steps it contains, it has all the information you need.

1.3 Plugins

Sleek requires two plugins to work properly: ACF: Advanced Custom Fields and WP-LESS
Both can be installed from WordPress Plugins Repository or automatically from notification in Admin panel.

Upon Sleek Theme activation, you will see the message [image above] of plugins needed.
Click Begin installing plugins, and activate plugins afterwards, and you are all set.

1.4 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.

Note that this plugin is still in beta, so it is possible to encounter a bug. In this case, use other methods for updating theme.

1.4.1 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.

1.4.2 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 sleek.zip file and only use the extracted sleek theme folder.
  3. Upload the extracted sleek 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.

1.5 Importing Demo Content

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

  1. The XML file is included within the download package at root level in a zip called sleek-demo-content.zip
  2. Extract it and find sleek-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

Images used in Sleek Demo Preview are not included in a theme-package. By importing demo-content, you will get grey placeholder images instead of photos.

If Demo-XML file won't load, its 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.

1.6 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 Sleek, 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 Sleek main-theme, you install and activate sleek-child theme.

Sleek Package contains a pre-created child theme - sleek-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.

1.7 Regenerating Thumbnails

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

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

1.8 Translating

Sleek Theme comes with the created language .po & .mo files.
Child-theme also already contains these files, and they're ready for translation.

Included files are en_US, and located in languages folder.
If you need to create the translations for a different language, just duplicate and rename the .po file.
Upon saving the translations, .mo will be automatically generated.

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 en_US language.

For editing the translation files, you can use PoEdit.

In case of creating a multi-lingual website, you will need to show the language switcher in a way of menu or widget on your website. Note that if you have enabled Ajax Navigation (Theme Customizer > General > Load pages with ajax), language switcher located in header or footer might not refresh correctly on page navigation. Solution is to either disable ajax navigation or move language switcher into sidebar or main content area.

2 Theme Settings

Access theme settings through Appearance > Customize in Admin Menu, or through Customize Theme link in Admin Bar on top.

Theme Settings are natively integrated into WordPress Live Customizer. Live preview of most options is supported.
WordPress Live Customizer contains both Sleek options, and native WordPress options. Here will be covered only Sleek settings.

2.1 General Settings

2.2 Layout Settings

Use Sidebar - Enable Sidebar. You can override this later, for blog-home (latest posts), single posts or pages.

Independent Sidebar

By checking this, you're enabling unique Sleek layout. Screen width is split into three sections: Header, Main Content & Sidebar.
When Independent Sidebar is ON every section has it's own scroll and scrolls independently.
Uncheck this to get, basically, layout with header positioned left.

Comments in Sidebar

Sleek supports comments to be placed in Main Content and in Sidebar.
Check this to place Comments in Sidebar. If post/page happens to have disabled sidebar, comments will be automatically placed in Main Content [unless comments are disabled].
Uncheck this to place comments in Main Content.

Note: Sidebar Comments come to full potential when combined with Independent Sidebar.

2.3 Style & Typography Settings

2.4 Blogging Settings

2.4.0 Blog Home: Use Sidebar

Override default Use Sidebar Setting for main blog page - Latest Post page, or leave as Default to keep default setting.

2.4.1 Blog Home: Title Header

Enable and setup Title Header for main blog page - Latest Post page. It's custom page title with additional info.

Full documentation on Title Header

2.4.2 Blog Home Posts

Setup and customize Main Blog Posts [Latest Posts]

2.4.3 Featured Posts

Choose and enable featured posts on Main Blog Posts [Latest Posts].

2.4.4 Archive Posts

Setup and customize list styles on archive pages:

2.5 Advanced Settings

2.5.1 Custom CSS

Add your own custom CSS to override and customize the theme.

2.5.2 Embed Google Maps javascript

Enabled by default. If you don't use google maps or use third-plugin, you can disable theme's embedding here.

2.5.3 Display Pingbacks

Disabled by default. Enable it if you want to display pingbacks alongside your comments.

2.5.4 Google API

Enter your own Google API key that will be used for Google Fonts and Google Maps. If left empty, theme's own API key will be used. If in doubt, leave empty.

3 Blog & Posts

Additionally to the native WordPress post settings and options, Sleek has enabled Post Formats [1], and specific Custom Fields [2].

3.1 Post Formats [1]

Choose one of specifically designed post-formats, or none for standard blog post.
Format type heavily changes the way post is displayed, both in list and in single view.

3.2 Post Custom Fields [2]

All Fields in WordPress Admin have detailed description.

  1. Format Specific Fields
  2. Single Settings
  3. List Settings

3.2.1 Format Specific Fields

  • Featured Image Lightness - This is only used when title, or some other text is overlaying featured image.
    Check to make overlaying text black [extremely white images].
  • Embed URL - In Video or Audio formats, add here link for local file, or embed link to add and highlight media.
  • Author - Add author signature for Quote/Status format.
  • Link - In Quote/Status if you wish to link author's name, add here the link.
    In Link format, add here main link.

3.2.2 Single Settings

Settings for Single Post View.

  • Show Author Badge - Enable/Disable Author image on top of the post.
  • Show Excerpt - On Standard format, enable/disable excerpt on top of the post.
  • Show Featured Image / Media - Enable/Disable featured image on standard post. On other post formats - toggle on/off media header. Disabled Media works well with Enabled Author Badge!
  • Enable Comments - WordPress's way of disabling comments will leave previously posted comments visible. This way, you completely show/hide comment module.
  • Place Comments in Sidebar - Override Global setting in Theme Customizer for comments placement.
  • Sidebar: Use Sidebar - Override Global setting in Theme Customizer for sidebar usage.
  • Sidebar: Use General Tab - General Tab in sidebar contains sidebar widgets. Here, you can choose to disable it for the current post, and use only comments in sidebar.
  • Full Width Content - This removes paddings and width limitations of main content area.
    This enables custom content building, and is generally used for custom pages, not posts.

3.2.3 List Settings

  • Masonry Post Size - Choose between small, medium and large size of this post in masonry.
    Masonry Post are small by default, but you can stress and enlarge particular ones.

3.3 Authors

To add or edit Authors go to Admin Menu > Users.
All native WordPress settings are supported.

Social Links Shortcode

To provide maximum support for social options and customization, we've enabled full Social Shortcode support.
Just paste it in, and your custom social links will be configured.

Read More about Social Shortcode

3.4 Category / Tag

To add or edit Categories / Tags go to Admin Menu > Posts > Categories/Tags.
Sleek supports description, as well as custom background for categories.
Display is styled like Title Header.

  • Name - Display name for category.
  • Slug - Machine name for category.
    Used for Blog Shortcode category argument.
  • Parent - Category Hierarchy.
  • Description - Category description that will be displayed on category page.
  • Featured Image - Choose Custom Background to be displayed for Title Header on category page.
  • Featured Image is Light - Check if custom background is light. This will create text black-colored and thus readable.

4 Pages

WordPress Custom Static Pages are augmented with specific settings and fields.

  1. Layout Settings
  2. Title Header
  3. Page Blog

4.1 Layout Settings

Here you can find settings for overriding main layout, or content.

  • Full Width Content - This removes paddings and width limitations of main content area.
    It enables advanced customization and page building, such as full width background rows. Manual grid must be used to ensure proper user experience.
  • Enable Comments - WordPress's way of disabling comments will leave previously posted comments visible. This way, you completely show/hide comment module.
  • Place Comments in Sidebar - Override Global setting in Theme Customizer for comments placement.
  • Sidebar: Use Sidebar - Override Global setting in Theme Customizer for sidebar usage.
  • Sidebar: Use General Tab - General Tab in sidebar contains sidebar widgets. Here, you can choose to disable it for the current page, and use only comments in sidebar, or use none and thus disable sidebar altogether.

4.2 Title Header

Title Header is styled title with optional additional info and background.
It can be enabled and used on Pages, as well as Category / Tag List and Main Blog List [ Latest Posts ]
To enable Title Header on Category / Tag pages, edit the Category in Admin > Posts > Categories

  • Use Title Header - Enable/Disable Title Header. If disabled, page title [2] won't be displayed. You must manually add H1 in content.
    If enabled, Page Title will be used for Title [2].
  • Title Above [1] - Title label, or additional info displayed above Main Title [2]. It's optional.
  • Title Description [3] - Description of page, or additional information or content. It's optional.
  • Title Header Background - Custom background to use for whole Title Header element. Customize it via background control.
  • Title Header Background Darkness - Text over image is white by default, because it suits most images.
    If your custom background is extremely light, check this to make text black, and readable on light background.

4.3 Page Blog

Page Blog enables you add custom blog list below main content on any page.
It has full WordPress native blog support. That means that you can create custom blog pages, to use instead native Latest Posts page.
Sleek Demo Homepages are created by leveraging this feature.

  • Use Blog - Enable/Disable Blog on Page, below main content.
  • Blog Title - Add Title for Blog list, or leave empty do disable Title.
  • Blog Title Above - Add title label, or additional info above main blog title.
  • Blog Display Style - Choose how to display list. Use masonry, newspaper, list, slider or carousel style view.
  • Blog Category - Choose posts of what category to display. None / Nothing Selected means that All categories and all posts will be used.
  • Blog Posts per Page - Choose how many posts to display per page. If left empty, it will default to blog posts setting in Settings > Reading.
    For No Limit use -1. This means that all posts will be immediately visible, and no pagination will be displayed.
  • Blog Pagination - Choose natural - numbered pagination, load-more button, infinite load [ auto load more ], or no pagination at all.

4.4 Contact Forms

Sleek has fully styled and supported forms and form elements.
Contact Form 7 is recommended plugin which has been carefully supported and styled.

Advanced Usage

If you wish to customize form layout, you can use Grid Layout system to group form fields as needed. Example is the image above.

Advanced Usage of Grid Layout

5 Elements & Shortcodes

All shortcodes have a quick-add button integrated in TinyMce rich-text editor.
Buttons / Sections are:

  1. Typography
  2. Elements
  3. Grid Layout
  4. Get Background
  5. Get Icon

5.1 Typography Shortcodes

Typography Shortcodes are basic toolset for writing.
Mainly inline or textual elements, they will provide styled augmentation for content.

5.1.1 Separator

Get the Shortcode:

[separator size="medium" center="false" empty="false" opaque="false" margin_top="" margin_bottom=""]

Attributes:

5.1.2 Custom Title

Preview:

Get the Shortcode:

[title above="" h1="false" center="true"]TITLE_TEXT[/title]

Attributes:

5.1.3 Icon

Icon by default gets the style and size of element it's used in.

Get the Shortcode:

[icon]ICON_NAME[/icon]

Attributes:

5.1.4 Dropcap

Wrap first letter or icon of paragraph in [dropcap] shortcode.
Two styles are possible, classic dropcap and hexagonal.

Preview:

Get the Shortcode:

[dropcap style=""]X[/dropcap]

Attributes:

5.1.5 Blockquote

This is not a shortcode, but the augmented and differently styled blockquote.
It supports author cite.

Basic Blockquote Preview:

Custom Blockquote [Typography Set] Preview:

5.1.6 Highlighted Text

Simply highlights selected part of text with background.
Use to outline certain words or sentence.

Get the Shortcode:

[highlighted_text]TEXT[/highlighted_text]

Attributes:

5.1.7 Highlighted Paragraph

Highlight paragraph by enlarging it, and possibly boxing it with background.

Preview:

Get the Shortcode:

[highlighted_p boxed="false" center="false"]TEXT[/highlighted_p]

Attributes:

5.1.8 Horizontal Clear

This is not a shortcode, but the styled <hr> that clears floats and prevents layout breaking in certain situations.
Not often used, this will provide you with a way to clear float after ie. left-aligned image, and continue with your content laid out normally.

5.2 Element Shortcodes

Elements dropdown contains larger components for building content.

5.2.1 Button

Preview:

Get the Shortcode:

[button url="#" new_tab="false" size="medium" style="solid" color="false" light="false"]TEXT[/button]

Attributes:

5.2.2 CTA

Preview:

Get the Shortcode:

[cta btn_text="" btn_url="" bg="" bg_light="true" appear="false"]TEXT[/cta]

Attributes:

5.2.3 Slider

Slider is created from posts in Custom Post Type 'Slider'.

Slider - Custom Post Type

Get the Shortcode:

[slider slides="1,2,3" height="" padding="70" effect="pulse" interval="4000" control="arrows"]

Attributes:

5.2.4 Image Slider

Slider is created from images in media library. Caption field is used for caption.

Preview:

Get the Shortcode:

[image_slider slides="1,2,3" height="" effect="pulse" interval="4000" control="arrows"]

Attributes:

5.2.5 Blog

Creates custom blog list.

Get the Shortcode:

[blog title="" title_above="" posts="8" style="list" category="" sort_by="date" sort_order="DESC" carousel_arrows="false" carousel_grid="3" interval="4000" slider_effect="slide_x" slider_control="arrows"]

Attributes:

5.2.6 Google Map

Create Google Map with custom pinned location.
Custom pin style and bubble content are supported.

Preview:

Get the Shortcode:

[gmap lat="48.851978" lng="2.348151" zoom="14" pin="" scrollable="" height=""]BUBBLE[/gmap]

Attributes:

5.2.7 Social Links

Two styles. Unlimited icon/link customization.

Preview:

Get the Shortcode:

[social style_big="false" icon_name="url" icon_name="url"]

Attributes:

Example:

[social style_big="false" facebook="http://facebook.com" twitter="http://twitter.com" pen="http://custom-link.com"]

This would look like this:

5.2.8 Progress Bar

Animated and colored progress bar. It will animate completence when enters screen.

Preview:

Get the Shortcode:

[progress_bar title="" percent="" color="grey"]

Attributes:

5.2.9 Icon Badge

Animated and colored progress bar. It will animate completence when enters screen.

Preview:

Description:

First column is default icon state.
Second column is hover state of icon.
Third column is hover state of linked icon badge [ by URL attribute ].

Styles:

  1. grey
  2. white
  3. Dark mode: - This is automatic style applied when grey or white icon badges are on dark background [ie. row background];

Get the Shortcode:

[icon_badge icon="" size="medium" style="grey" url="" tooltip="" tooltip_location=""]

Attributes:

5.3 Grid Layout

Grid Layout enables you to split your content in custom grids.
When building page with Full Width Content enabled, grid layout must be used to ensure proper content flow.
Grid Layout consists of two parts:

  1. Row
  2. Columns

5.3.1 Row

Row is a required wrapper for columns.
It must wrap columns, and it must contain at least one column.

Preview:

Get the Shortcode:

[row padding_top="" padding_bottom="" bg="" bg_light="true" appear="false"] [column size="1-1" appear="false"] [/column] [/row]

Attributes:

5.3.2 Columns

Combine columns so that it sums 1 per row.

Preview:

Get the Shortcode:

[column size="1-1" appear="false"]CONTENT[/column]

Attributes:

  • size - value
    Use above image of grid and size legend as a guide.
  • appear - true / false
    Make animated appearance when element enters in screen viewport.

Sizes:

  • 1-1 [100%]
  • 1-2 [50%]
  • 1-3 [33%]
  • 2-3 [66%]
  • 1-4 [25%]
  • 2-4 [50%]
  • 3-4 [75%]
  • 1-5 [20%]
  • 2-5 [40%]
  • 3-5 [60%]
  • 4-5 [80%]
  • 1-6 [16%]
  • 2-6 [33%]
  • 3-6 [50%]
  • 4-6 [66%]
  • 5-6 [83%]

Grid Layout Shortcode Examples:

[row padding="" bg=""]
    [column size="1-3"][/column]
    [column size="2-3"][/column]
[/row]

Advanced Usage and CSS Classes:

If you need to get use grid outsite shortcode system,
you can use div and section tags with css class structure like:

.column--1-1
.column--1-2
.column--3-4

Example for grid usage in ContactForm7:

<section class="column--1-3">
    [text* first-name placeholder "Name*"]
    [email* email placeholder "Email*"]
    [text phone placeholder "Phone"]
</section>

<section class="column--2-3">
    [textarea* message x10 placeholder "Message*"]
    [submit "SEEK FOR MORE"]
</section>

5.4 Get Background / Background Control

This is special control element for creating and choosing background.
It opens in a lightbox, and can be found integrated in Theme Customizer, Title Header Fields and quick-add button in editor.

  • Right Side [image] - Preview section.
  • Color - Color picker for base color.
  • Image - Image to use as background.
  • Repeat - Enabled, and setup how image is repeated.
  • Size - Enable cover to stretch image across container, or contain to make sure that whole image is visible.
  • Position - How is image positioned, what part of it has priority in displaying.
  • Attachment - Choose if image scrolls with content or is it fixed in place [parallax].
  • Pattern - Choose pattern to place above image.

5.5 Get Icon / Icon Picker

This is a special control element for browsing and picking icons.
There are various icon sets included, along with custom build icons uniquely for Sleek.

If you are in need for Icon Picker, find it in editor and browse icons.

  1. Browse available icons.
  2. Search by using filter [top-right].
  3. Click to select icon.
  4. Get the name of selected icon [top-left].
  5. or Save to finish with your action.

6 Media

You can find here guides on how to create:

6.1 Slider

Slider is a Custom Post Type, where you create slides[posts] to call from shortcode in a Slider element.

6.1.1 Slide Creation

  • [1] - Add slide content, like any other.
  • [2] - Customize Slide Background Media.
  • Slide Image - Use Background Control to customize custom background image of the slide.
    If left empty, Featured Image [3] will be used for slide background.
  • Slide Image is Dark - Check to make slide content [1] be white and thus readable.
    If image is extremely light, leave this field unchecked.
  • Video - Use Video Background instead of image. Add here self-hosted video file.
  • Toggle Video Overlay - Add custom video overlay.
    Choose to darken your video, or add pattern above it to make content readable.

6.2 Masonry Gallery

Masonry Gallery is created with native WordPress gallery feature.

  • 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.
  • [1] Link to: None for basic gallery.
  • [1] Link to: Media File to enable lightbox feature.
  • [2] Set number of columns.

7 Menus

For the first-timers, here's a guide on how to setup Main Navigation.

WordPress Menu User Guide

Sleek has one pre-defined menu location - Header Menu
In Admin Menu, go to Appearance > Menus.
Create Main Header Menu and add it to Header Menu Location.

  1. Name your menu.
  2. Click create / save.
  3. Add it to Header Menu location.
  4. Build and customize your menu.

Adding Footer Menu

In order to add small menu on bottom [terms of use / privacy], create menu and add it as a widget.

Jump to Footer Widgets

8 Widgets

Setup, suggestions and basics of widgets will be covered here. For more:

WordPress Widgets Guide

Sleek has 3 custom widgets - Blog List, Blog Slider & Social Media Links.

Sleek has three Widget Areas:

8.1 Sidear Area

Sidebar Area makes the right part of Content, under the General Tab

Also, you can use shortcodes in all widget areas.
Use Text Widget and paste in shortcode for blog, social link, or any other.

8.2 Footer Area

Footer area is located on bottom of header, bottom-left part of screen.
It's useful for adding copyrights, secondary menus or social links.

How to add footer menu?

  1. Create Footer Menu in Menus. How to do that?
  2. Add Custom Menu Widget to Footer Area.
  3. Edit newly-added widget, and choose the Footer Menu you created on step 1.

Copyright

Copyright is added through Theme Customizer.

8.3 404 Area

404 Area is used as main content on 404 - Not Found page.
Use it to add message, search or links to guide visitors back on track.

8.4 No Search Results

Search Results widget area is displayed when search results find 0 results
Use it to add message, search or links to guide visitors back on track.

9 FAQ

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.

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 1600px, and this is used only for sliders or title header backgrounds.
Maximal width of content/blog image is 1075px.
By uploading images wide at least 1600px or 1075px, depending on the usage, you make sure that everything will look spot on.

Image height will be automatically calculated, depending on the usage, and image will be cropped to the needed aspect ratio.

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('l');
    add_image_size('l', 1075);
}

In this example, image-size l is changed.
You can find all Sleek'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.

Embedded media renders out of proportion and size

This usually happens when Jetpack plugin is installed.
Specifically, it's Shortcode Embeds module overrides the Sleek's functionality for responsive embedded media.
Just deactivate this module from the plugin and things will get back to normal.

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

Remove appearance animation

.sleek-animate-appearance {
	-webkit-animation: none !important;
	animation: none !important;
}

Remove meta details from posts display

Comments, categories, author and date in the meta below the title can be removed independently for single post views and blog lists ( like homepage ). Use the CSS that reffers to your need:

/* Remove comments from blog-list */
.loop-container .meta--comments { display: none !important; }

/* Remove categories from blog-list */
.loop-container .meta--categories { display: none !important; }

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

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

/* Remove comments from single post */
.article-single .meta--comments { display: none !important; }

/* Remove categories from single post */
.article-single .meta--categories { display: none !important; }

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

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

Add top logo for mobile/tablet

In order to add your logo on top of the main content area for mobile and tablet devices, use the following CSS to include it as a background.
Customize the exact values per your need.

@media only screen and (max-width: 1200px){
	#main-content .nano-content:before {
    content: '';
		width: 100%;
    padding-top: 200px;
    background-image: url(http://sleek.korra.io/wp-content/themes/sleek/img/logo.png);
    background-position: 50% 40px;
    background-repeat: no-repeat;
  }
}

Hooking into Ajax

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

Sleek 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:

jQuery(document).ready(function( $ ){
	$(document).on('sleek:ajaxPageLoad', function(){
	    plugin_function();
	});
});

Hooking into Scroll

If you're installing a third-party plugin, or just building some functionality on your own, there's a possibility that things related to the page's scroll will not work since Sleek's layout has three separate scrolling columns, instead of whole page scrolling

You can use the following snippet to trigger the expected scroll event whenever Sleek actually scrolls:

jQuery(document).ready(function( $ ){
	$(document).on('sleek:scroll', function(){
	    $('html, body').trigger('scroll');
	});
});

In case that the above code doesn't help, and the case that you use Visual Composer with some Add-on packs for it, try this code:

jQuery(document).ready(function( $ ){
  $(document).on('sleek:scroll', function(){
    MPCwaypoint.refreshAll();
  });
});

Active state for items in Ajax Main Menu

If you're using Ajax navigation on the theme, main menu doesn't have 'active' state on it's items when clicked. The reason behind this is the possibility of accessing the same page without using the main menu. This is hard to keep track of.

For example: You may have 'Contact' link in your navigation, but also in the content of your pages or posts. If a visitor would click on some of these links in the content, the main menu would not be aware that it has the exact same page link - thus failing to change to 'active' state. This gives inconsistency in the 'active' state behavior of the main menu.

Still, if you prefer to have active state visible, you can use the available css class and style the items like this:

.header__nav .ajax-active > a {
    color: #ff4d4d !important;
}

Add Custom Fonts to Font Picker

So, you got your custom font-files (.ttf, .otf, ...) and wish to integrate them into the theme and be able to chose it in Font Picker within the Theme Customizer. Process takes two steps:

  1. Upload your fonts to your child-theme, and load them via @font-face in your style.css. Your font is now loaded and available to use.
  2. Extend the Font Picker Control used in Theme Customizer. To do this, copy the sleek_get_google_fonts() function from sleek/framework/admin/google_fonts/google_fonts.php into your child-theme’s functions.php file. Edit your file, and somewhere towards the end of the file, you’ll see how ‘websafe’ fonts are added to the list. Just add your own font-family in the same way. That's it, now your font is available in the Font Picker.

10 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 shortest time possible.

Guide 1: Create Main Sleek Homepage

1. Import the Demo-Content which you have received in theme-package, or create your own posts

2. Go to Theme Customize via Admin-Bar link, or in main menu Appearance > Customize.
As Front Page, set 'Your Latest Posts'. This is WordPress' default homepage.

3. Under 'Posts and Blogging Settings' uncheck 'Use Title Header' to remove main page title.

4. For Home Posts Display style select Masonry, and for pagination type select Auto Load More.

5. To enable Featured Slider, choose what category to use as featured. You must have at least 1 post categorised with it.
Set how much posts to be in slider, and for Display Style select Slider Overlay

6. Create posts or edit those from demo-content. Use Standard Post Format, or choose specific one to enhance the experience.
Choose size for post in masonry list in Post Setting > List Settings > Masonry size
Set Featured Image to be used and add manual excerpt.

7. In case you don't have all the fields visible, check if they are checked to display in Screen Options.

Guide 2: Create custom page - Spacious Home

Overview of page

Sections:

  • 1. Opening Image - [row] with background image
  • 2. Intro Text - [title] + 2-[column] text content
  • 3a. Blog Carousel Title - [row] with background + [title]
  • 3b. Blog Carousel - [blog] carousel
  • 4. About Section - [row] + 2-[column] text content
  • 5. Icon Blocks - 4-[column] text + [icon_badge]
  • 6. Newsletter Section - [row] + [title] + [contact-form-7]
  • 7. Blog List: Newspaper - Custom Page - Use Blog

0. Page Layout: Enable 'Full Width Content' and disable sidebar on your page.
Under 'Title Header' tab, uncheck 'Use Title Header', to remove main page title.


1. Opening Image: Create first image section.
Create [row] or Grid 1/1 from 'Grid Layout' dropdown.
Put cursor in "" of bg and use Get Background to create and pick your custom background.
Use padding_top or padding_bottom to soft-tune the height of your background section.

[row padding_top="550" padding_bottom="0" bg="" bg_light="true" appear="false"][/row]

2. Intro Text: Create main title and intro text in two columns.
Use Typography > Custom Title. Add title and label above title. Change h1 to true to make this main page title.
From Grid Layout pick Grid 1/2 + 1/2. Inside [column] [/column] add any content you wish.

[title above="WELCOMING LINE" h1="false" center="true"]You've Just Entered the Sleekzone![/title]

[row padding_top="" padding_bottom="" bg="" bg_light="true" appear="true"]

[column size="1-2" appear="false"] Custom Text Content [/column]

[column size="1-2" appear="false"] Custom Text Content [/column]

[/row]

3a. Blog Carousel Title: Create custom title with background.
In order to get background, we must insert [row] and pick the background for it.
Create [row] and set a background (as in step 1.). Optionally, soft-tune paddings.
Create Custom Title, as in step 2., but leave h1 as false (this is not main title).

[row padding_top="40" padding_bottom="30" bg="#f5f5f5" bg_light="true" appear="false"]

[column size="1-1" appear="false"]

[title above="WHAT TO READ NEXT" h1="false" center="true"]Latest From the Blog[/title]

[/column]

[/row]

3b. Blog Carousel: Create blog carousel.
Use Elements > Blog and set style as carousel
Set how many posts to show with posts setting, and how many items to be visible on screen with carousel_grid.
Optionally, filter posts by setting category or change sorting with sort_by and sort_order.
Find full explanation on blog here.

[blog title="" title_above="" posts="12" style="carousel" category="" sort_by="date" sort_order="DESC" carousel_arrows="false" carousel_grid="4" interval="4000"]

4. About Section: Create content block with background image.
Create [row] and set a background (as in step 1.). Here, background is positioned to center-right area. Optionally, soft-tune paddings.
Use [column size="1-2"] to position content on the left half of the row.
Add Custom Title, Text Content and [button] for link. Set url and link text.

[row padding_top="" padding_bottom="" bg="" bg_light="true" appear="true"]

[column size="1-2" appear="false"]

[title above="OUR STORY" h1="false" center="false"]Celebrating A Year Of Excelence[/title]

Custom Text

[button url="#" new_tab="false" size="medium" style="outline" color="true" light="false"]Learn More[/button]

[/column]

[/row]

5. Icon Blocks: 4-column icon blocks.
Use Grid 1/4 + 1/4 + 1/4 + 1/4 or create a [column size="1-4"], add content in it and copy it 3 more times.
Pick Elements > Icon Block, set cursor to icon and use Get Icon button to select icon to use.
Add additional content and center it horizontally.
Note: We used slider in the demo, which can be done exactly as shown here, only through Slider Post Type, and [slider] shortcode.

[row padding_top="" padding_bottom="" bg="" bg_light="true" appear="false"]

[column size="1-4" appear="false"]

	[icon_badge icon="" size="medium" style="grey" url="#" tooltip="Favorites"]

	[custom_heading center="true"]FAVOURITES[/custom_heading]

	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

[/column]

[/row]

6. Newsletter Section: Create section with background, custom title and contact form.
Create [row] and pick background. Optionally soft-tune with paddings.
Add Custom Title or other content.
Use Contact Form Plugin (we used Contact Form 7), and paste here the shortcode for pre-created form.

[row padding_top="300" padding_bottom="" bg="" bg_light="true" appear="false"]

[column size="1-1" appear="true]

[title above="BE BETTER @ BLOGGING WITH SLEEK!" h1="false" center="true"]Join Our Mailing List for Exclusive Content[/title]

[contact-form-7 id="3721" title="Newsletter"]

[/column]

[/row]

7. Blog List - Newspaper: Add custom blog on bottom of the page
In Page Settings, go to Blog tab.
Check 'Use Blog', and settings will expand.
Set 'Blog Display Style' to newspaper, or customize additionally how and what posts to display.


Guide 3: Create custom page - Masonry Home

Overview of page

Sections:

  • 1. Opening Slider - [slider]
  • 2. About - [title] + image + [highlighted_p] + [button]
  • 3. Blog List: Masonry - Custom Page - Use Blog

0. Page Layout: Enable 'Full Width Content'.
Under 'Title Header' tab, uncheck 'Use Title Header', to remove main page title.


1. Opening Slider: Create slides and add slider to the page.

Create Slide with content and image.
For full docs check Slider Documentation.

Note: We used image for stylistic title on our demo, instead of H2 title.

In Slider Posts list, find ID's of slides. They are used in [slider] shortcode.

From Elements, select [slider] shortcode to add it to the page.
Add comma-separated id-numbers of slides.
Optionally set minimum height for your slider, choose auto-animation interval in ms, or customize sliding effect.

[slider slides="294,295" height="700" effect="fade" interval="4000" control="pager"]

2. About: Add about content.
Create [row] to center-wrap content and optionally soft-tune top and bottom paddings.
Choose Typography > Custom Title, set center="true" and add custom Title and label above it.
Choose Typography > Separator and set center="true". Optionally soft-tune margins.
Add image with Add Media button and center it horizontally.
Choose Typography > Highlighted Paragraph, set center="true" and add custom text.
Choose Elements > Button, set url and add custom button title.

[row padding_top="40" padding_bottom="80" bg="" bg_light="true"]

[column size="1-1"]


	[title above="What We are All About" h1="false" center="true"]Here We Do Amazing Stuff Every Single Day![/title]

	[separator size="medium" center="true" empty="false" margin_top="" margin_bottom="55"]

	IMAGE

	[highlighted_p boxed="false" center="true"]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat totam rem aperiam, eaque ipsa quae ab illo inventore.[/highlighted_p]

	[button url="#" new_tab="false" size="medium" style="solid" color="true" light="false"]Join The Crowd[/button]

[/column]

[/row]

3. Blog List - Masonry: Add custom blog on bottom of the page
In Page Settings, go to Blog tab.
Check 'Use Blog', and settings will expand.
Set 'Blog Display Style' to masonry, and customize additionally how and what posts to display.