Installation

Attention:

Stein is only compatible with a self-hosted WordPress websites.

Before installing Stein theme, make sure your server met the following requirements:

  1. WordPress 5.0 or greater.
  2. MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
  3. PHP version 7.2 or greater.

1 Download the Theme

Go to your ThemeForest Download page, find Stein theme on your purchase list, click "Download" button next to the product name. You will be provided with two download options.

  1. Installable WordPress file only, choose this option to download the installable theme file in .zip format.
  2. All files and documentation, choose this option to download all theme files including it's offline documentation. If you choose this option, to find the installable theme file you have to extract the downloaded file, the file is located under Theme Files folder named stein.zip.

2 Install the Theme

Login to your WordPress admin and navigate to Appearance › Themes. Click Add New button next to the page title at the top of the page. Alternatively, you can go to this path: /wp-admin/theme-install.php

Click Upload Theme button to reveal the theme uploader panel, click on Choose file and select the theme installable file you've downloaded previously in your local directory then click Install Now to finish the installation.

3 Activate the Theme

Once the theme has been installed on your website, head back to Appearance › Themes, look up for Stein theme in the list of installed themes, mouse-over on it's thumbnail and click on Activate button.


Plugin Dependencies

Although Stein will work out of the box without installing any additional plugins, but we advise you to install the following plugins to enjoy all the theme features.

Advanced Custom Field

Use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data.

Breadcrumb NavXT

This plugin generates locational breadcrumb trails for your WordPress powered blog or website. These breadcrumb trails are highly customizable to suit the needs of just about any website running WordPress.

Contact Form 7

Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Envato Market

The Envato Market plugin can install WordPress themes and plugins purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token.

Kirki Customizer Framework

Kirki Customizer Framework is the ultimate framework for for extending the WordPress Customizer controls. This plugin is highly recommended since all Stein's options are only works if this plugin is installed and activated.

Post Views Counter

Post Views Counter allows you to display how many times a post, page or custom post type had been viewed.

Regenerate Thumbnails

Regenerate the thumbnails for your image uploads. Useful when you install Stein on an existing site.

Stein Kit

In order to comply with the WordPress Theme Requirements, we create a dedicated plugin to house all advanced features that belongs to plugin teritory such as custom widgets and 3rd party integrations.

Fortunately, Stein is equipped with TGM Plugin Activation so you don't need to manually search and install these plugins. Simply follow these steps after Stein installed:

  1. Go to Appearance › Install Plugins.
  2. Select the plugins to install in the list and choose Install from the Dropdown menu.
  3. Click Apply.

You may also install plugins by simply clicking the Begin Installing Plugins link in the notification message that appears after theme activation.


Regenerate Thumbnails

Stein will automatically generate additional thumbnails for every new image uploaded to your website but it's not possible to generate additional thumbnails for existing images that uploaded before using Stein.

Fortunately, there is Regenerate Thumbnails plugin that can help you to generate those additional thumbnails without having to re-upload your previous images.

Follow these steps to regenerate thumbnails for your existing images:

  1. Go to Tools › Regenerate Thumbnails, or simply go to this path: /wp-admin/tools.php?page=regenerate-thumbnails.
  2. Click on Regenerate Thumbnails For XXX Attachments button.

Please don't close or navigate to other page until the process is completed. The process will take longer or faster depending on the amount and size of your images.


Update Guide

Please Note:

To setup automatic update you will need Envato Market plugin installed and activated.

Follow these steps to setup automatic update:

  1. Login to your WordPress admin and click Envato Market menu, or simply go to this path: /wp-admin/admin.php?page=envato-market.
  2. Generate your Envato API Personal Token here.
  3. Copy the token into the Token field.
  4. Click the Save Changes button.

Once completed, the system will periodically check for updates and will notify you when a new update available.


Tailwind CSS

Stein is build on top of Tailwind CSS, a utility-first CSS framework for rapid development. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

To prevent conflict with the core WordPress and external plugins styles, we make some adjustment in the Tailwind configuration. We use tw- prefix for all utility classes and change the separator from colon : to underscore _.

Below the example of a stylized button using original Tailwind CSS configuration:

<button class="bg-black hover:bg-white text-white hover:text-black py-2 px-4 rounded">Button</button>

With Stein, the code would be:

<button class="tw-bg-black hover_tw-bg-white tw-text-white hover_tw-text-black tw-py-2 tw-px-4 tw-rounded">Button</button>

Visit Tailwind CSS website to learn more about the framework.


Stein's header is divided into three (3) areas: Topbar, Main and Mobile.

1 Topbar

Topbar is located at the very top of your header, it contains a menu and a list of social media links with icon. You can easily enable/disable this area and change its height in Layout › Header › Topbar tab of WordPress Customizer screen.

Here is the list of available options for Topbar.

Option Name Default Description
Enable topbar? true Check to enable or uncheck to disable.
Height 56 Specify the Topbar height. Min: 48 and Max: 96

2 Main

This is the main area of the header, it contains your site title/logo, and primary menu. It cannot be disabled but you can change its style and specify its height from Layout › Header › Main tab of WordPress Customizer screen.

Option Name Default Description
Style 1 The header style. Possible value: Style 1 & Style 2.
Height 96 The header element height.
Navbar Height 72 The menu navigation bar height. It only visible when style 2 selected.
Enable sticky? false Check to enable and uncheck to disable sticky header.
Branding Type text Header branding type. Text or Image.
Logo Image null Logo image uploader. This option will be visible only if Branding Type is set to Image.
Logo Dimension auto | auto Logo image dimension. If logo image dimension is larger than header width or height you can specify the custom dimension for your logo image.
Menu Alignment center Header menu items alignment. Possible value: Left, Center and Right

3 Mobile

This area will be used as a replacement of Topbar and Main area on mobile screens. The options for this area can be found at Layout › Header › Mobile tab of WordPress Customizer screen.

Option Name Default Description
Height 96 The Mobile Header height.
Enable sticky? false Check to enable and uncheck to disable sticky mobile header.
Branding Type text Mobile header branding type, can be text or image.
Logo Image null Logo image uploader. This option will be visible only if Branding Type is set to image.
Logo Dimension auto | auto Logo image dimension.

Drawer

Drawer is an off-canvas widgets area. This area is hidden by default and requires a click on the Drawer toggle to show/hide it. Drawer has two (2) dynamic widgets areas: Drawer Desktop and Drawer Mobile.

Similar to its name Drawer Desktop widgets area is only visible when you are viewing the site using desktops and Drawer Mobile will only visible if you are viewing the site using mobile devices.

Tips:

Drawer Mobile widgets area is the perfect place to put a navigation menu for mobile view using Nav Menu widget.

The Drawer options can be found at Layout › Drawer tab of WordPress Customizer screen.

Option Name Default Description
Branding Type text Branding type, can be text or image.
Logo Image null Logo image uploader. This option will be visible only if Branding Type is set to image.
Logo Dimension auto | auto Logo image dimension.
Enable social icons? false Check this option to show social icons at the bottom of the Drawer.
Enable desktop view? false Check this option to show the Drawer on desktop view.

Page Title

Page title is located between content and header. It gives the visitor information what is the page that they're viewing. It will show up on archive pages such as category page and individual static pages such as about page or contact page.

Page title may contains image as its background. On individual static page, it will use the page featured image and on category or tag archive, we provide a custom field in edit category/tag page to insert an image that later will be used for its archive page title background.

You can set the default background image from WordPress Customizer as a fallback if no image found on the specified page. The options for Page Title can be found in Layout › Content › Page Title.

Option Name Default Description
Image null Default page title image.

Stein is support WP Nav Menu that allows you to easily manage your menu items directly from your administration screen with drag and drop interface.

Location Dropdown Max. Depth
Topbar Menu Yes Unlimited
Header Menu Yes Unlimited
Footer Menu No 1

You can manage these menus in Appearance › Menus.


Stein's sidebar has two (2) widgets areas: Sidebar Top and Sidebar Bottom. Both are dynamic widgets area that accept any available widgets. You can manage widgets for these areas in Appearance › Widgets.

By default the sidebar is placed at the right side of the site's content, but is possible to move its position to the left or even disable it completely right from the Customizer screen.

If sticky sidebar enabled, the Sidebar Bottom will be stuck to the top of the page when scrolling makes this area is the perfect place to put your widgets that you wish to always available on the user's viewport.

Below is the list of available options for the Sidebar that can be found in Layout › Content › Sidebar tab of WordPress Customizer screen.

Option Name Default Description
Position right The sidebar position, left, right or none. Choose none to disable the sidebar. This setting may be altered by individual post or page meta boxes
Enable sticky? false Check this option to make Sidebar Bottom sticky.

Stein's footer is currently separated into three (3) parts: Instagram, Widgets and Info but we may add some extra parts in future. These parts are sortable, means you can change the display order of each part. For example, you can move the Instagram part from top to bottom and so on.

The base options for Footer can be found in Layout › Footer › Base tab of WordPress Customizer screen.

Option Name Default Description
Content instagram,widgets,separator,info The footer content ordering. You can change the order of each part using this option.
Branding Type text Branding type, can be text or image.
Logo Image null Logo image uploader. This option will be visible only if Branding Type is set to image.
Logo Dimension auto | auto Logo image dimension.
About null About text to be displayed on About widget.

1 Instagram

This footer part displays feed from the specified Instagram username. It will only works if Stein Kit plugin is active.

Below is the list of available options for the Instagram part that can be found in Layout › Footer › Instagram tab of WordPress Customizer screen.

Option Name Default Description
Username null The Instagram username.
Button Text null The Instagram follow button text. Leave it empty to disable follow button.
Enable button icon? false Check this option to show Instagram icon on the follow button.

2 Widgets

This footer part has three (3) dynamic widgets areas: Widgets Area 1, Widgets Area 2 and Widgets Area 3 and a static widget: About. They're also sortable, means you can change the display order of each part. You can change the sort order in Layout › Footer › Widgets tab of WordPress Customizer screen.

2 Info

This part is contain site's copyright text and footer menu. It has two style: Style 1 and Style 2. The options for this part can be found in Layout › Footer › Info tab of WordPress Customizer screen.

Option Name Default Description
Style 1 The footer info style. Available: Style 1 and Style 2
Copyright Text © {year} {site title}. All right reserved. Site's copyright text.

Homepage

Stein's homepage sections are managed by WordPress Customizer which makes it easy for you to create a unique homepage layout and see the live preview in one page before publishing.

Currently Stein has six (6) homepage sections: Main Content, Post Block, Post Carousel, Post Slider, Post Tiles and Promo Boxes. This amount may be changed because we may add more sections in the future.

1 Main Content

This is the main content of your homepage, it contains your latest posts and sidebar. The options for this section can be found in Home › Main Content tab of WordPress Customizer screen.

Header Options

Option Name Default Description
Enable header? false Check this option to enable section header
Title null Section title.
Subtitle null Section subtitle.

Content Options

Option Name Default Description
Preset Card 1 Column Select pre-defined content preset.
Sidebar Position inherit Sidebar position. Available: inherit, left, right and none. Set to inherit to use general sidebar position or set to none to disable sidebar.
Post Syle card Post style. Available: default, card and cover.
Post Column Size 1 Post column size. Available: 1, 2, 3, and 4
Post Orientation vertical Post content orientation, vertical or horizontal.
Post Content Spacing medium Post content spacing. Available: tight, normal, medium and wide.
Post Title Size 4xl Post title size. Available: base, large, xl, 2xl, 3xl, 4xl, 5xl and 6xl.
Show post categories? true Check this option to show post category list.
Post Meta date,readtime Post meta manager.
Post Excerpt Length 35 The number of words to show in the excerpt. Set to 0 to disable it.
Post More Text Read More The read more link text if the excerpt enabled.
Navigation pagination The posts pagination type. Available: pagination and load more.
Prev Text Prev The posts pagination prev link text.
Next Text Next The posts pagination next link text.
Button Text Load More Posts The posts load more button text.

Container Options

Option Name Default Description
Layout normal The container layout type, could be normal or fullwidth.
Separator Top Border The container separator. Available: none, top border, bottom border, and top & bottom border.
Customize colors? false Check this option to customize section colors.
Background Color #fafafa The section background color.
Title Color rgba(0,0,0,0.87) The section title color.
Subtitle Color rgba(0,0,0,0.38) The section subtitle color.
Spacing - The section padding for desktops.
Tablet Spacing - The section padding for tablets.
Mobile Spacing - The section padding for mobile devices.

2 Post Block

Displays a set of posts with custom post query. You can use this section to show posts by a specific category or tag, popular posts, most viewed posts and more.

The options for this section can be found in Home › Post Block tab of WordPress Customizer screen.

Header Options

Option Name Default Description
Enable header? false Check this option to enable section header
Title null Section title.
Subtitle null Section subtitle.

Content Options

Option Name Default Description
Preset Card 1 Column Select pre-defined content preset.
Post Syle card Post style. Available: default, card and cover.
Post Column Size 4 Post column size. Available: 1, 2, 3, and 4
Post Orientation vertical Post content orientation, vertical or horizontal.
Post Content Spacing tight Post content spacing. Available: tight, normal, medium and wide.
Post Title Size large Post title size. Available: base, large, xl, 2xl, 3xl, 4xl, 5xl and 6xl.
Show post categories? true Check this option to show post category list.
Post Meta date,readtime Post meta manager.
Post Excerpt Length 0 The number of words to show in the excerpt. Set to 0 to disable it.
Post More Text Read More The read more link text if the excerpt enabled.
Enable button? false Check this option to enable button navigation.
Button Text View More Posts The navigation button text.
Button URL null The button target URL.

Source Options

Option Name Default Description
Source Most Recent The post query source type. Available: Most Recent, Most Commented, Category, Tag, Format or Custom. If Post View Counter it will contains: Most Viewed - All time, Most Viewed - Yearly, Most Viewed - Monthly, Most Viewed - Weekly and Most Viewed - Daily
Categories - The multiple category selector for queriying post by one or more categories.
Tags - The multiple tags selector for queriying post by one or more tags.
Format - The post format selector for queriying post by a specific post format.
Order Publish Date The query order by options. Available: None, Post ID, Post Title, Publish Date, Random, Comments Count and Views Count.
Sort DESC Whether sort the posts ascending or descending.
Limit 4 The maximum number of posts to show.
Offset 0 The posts offset count.

Container Options

Option Name Default Description
Layout normal The container layout type, could be normal or fullwidth.
Separator Top Border The container separator. Available: none, top border, bottom border, and top & bottom border.
Customize colors? false Check this option to customize section colors.
Background Color #fafafa The section background color.
Title Color rgba(0,0,0,0.87) The section title color.
Subtitle Color rgba(0,0,0,0.38) The section subtitle color.
Spacing - The section padding for desktops.
Tablet Spacing - The section padding for tablets.
Mobile Spacing - The section padding for mobile devices.

3 Post Carousel

Displays a set of posts with custom post query in carousel layout. You can use this section to show posts by a specific category or tag, popular posts, most viewed posts and more.

The options for this section can be found in Home › Post Carousel tab of WordPress Customizer screen.

Header Options

Option Name Default Description
Enable header? false Check this option to enable section header
Title null Section title.
Subtitle null Section subtitle.

Content Options

Option Name Default Description
Preset Card 1 Column Select pre-defined content preset.
Post Syle card Post style. Available: default, card and cover.
Post Column Size 4 Post column size. Available: 1, 2, 3, and 4
Post Orientation vertical Post content orientation, vertical or horizontal.
Post Content Spacing tight Post content spacing. Available: tight, normal, medium and wide.
Post Title Size large Post title size. Available: base, large, xl, 2xl, 3xl, 4xl, 5xl and 6xl.
Show post categories? true Check this option to show post category list.
Post Meta date,readtime Post meta manager.
Post Excerpt Length 0 The number of words to show in the excerpt. Set to 0 to disable it.
Post More Text Read More The read more link text if the excerpt enabled.
Enable pagination? false Check this option to enable carousel pagination.

Source Options

Option Name Default Description
Source Most Recent The post query source type. Available: Most Recent, Most Commented, Category, Tag, Format or Custom. If Post View Counter it will contains: Most Viewed - All time, Most Viewed - Yearly, Most Viewed - Monthly, Most Viewed - Weekly and Most Viewed - Daily
Categories - The multiple category selector for queriying post by one or more categories.
Tags - The multiple tags selector for queriying post by one or more tags.
Format - The post format selector for queriying post by a specific post format.
Order Publish Date The query order by options. Available: None, Post ID, Post Title, Publish Date, Random, Comments Count and Views Count.
Sort DESC Whether sort the posts ascending or descending.
Limit 4 The maximum number of posts to show.
Offset 0 The posts offset count.

Container Options

Option Name Default Description
Layout normal The container layout type, could be normal or fullwidth.
Separator Top Border The container separator. Available: none, top border, bottom border, and top & bottom border.
Customize colors? false Check this option to customize section colors.
Background Color #fafafa The section background color.
Title Color rgba(0,0,0,0.87) The section title color.
Subtitle Color rgba(0,0,0,0.38) The section subtitle color.
Spacing - The section padding for desktops.
Tablet Spacing - The section padding for tablets.
Mobile Spacing - The section padding for mobile devices.

4 Post Slider

Displays a set of posts with custom post query in a slider. You can use this section to show posts by a specific category or tag, popular posts, most viewed posts and more.

The options for this section can be found in Home › Post Slider tab of WordPress Customizer screen.

Header Options

Option Name Default Description
Enable header? false Check this option to enable section header
Title null Section title.
Subtitle null Section subtitle.

Content Options

Option Name Default Description
Label null The slider label. Will be placed next to slide's number indicator.
Source Most Recent The post query source type. Available: Most Recent, Most Commented, Category, Tag, Format or Custom. If Post View Counter it will contains: Most Viewed - All time, Most Viewed - Yearly, Most Viewed - Monthly, Most Viewed - Weekly and Most Viewed - Daily
Categories - The multiple category selector for queriying post by one or more categories.
Tags - The multiple tags selector for queriying post by one or more tags.
Format - The post format selector for queriying post by a specific post format.
Order Publish Date The query order by options. Available: None, Post ID, Post Title, Publish Date, Random, Comments Count and Views Count.
Sort DESC Whether sort the posts ascending or descending.
Limit 4 The maximum number of posts to show.
Offset 0 The posts offset count.

Additional Content Options

Option Name Default Description
Type posts Content type can be Posts, Custom HTML or None to disable.
Title null The title. Leave it empty to disable.
Source Most Recent The post query source type. Available: Most Recent, Most Commented, Category, Tag, Format or Custom. If Post View Counter it will contains: Most Viewed - All time, Most Viewed - Yearly, Most Viewed - Monthly, Most Viewed - Weekly and Most Viewed - Daily
Categories - The multiple category selector for queriying post by one or more categories.
Tags - The multiple tags selector for queriying post by one or more tags.
Format - The post format selector for queriying post by a specific post format.
Order Publish Date The query order by options. Available: None, Post ID, Post Title, Publish Date, Random, Comments Count and Views Count.
Sort DESC Whether sort the posts ascending or descending.
Limit 4 The maximum number of posts to show.
Offset 0 The posts offset count.
Custom HTML '' Custom HTML code to show if type set to "Custom HTML".

Container Options

Option Name Default Description
Layout normal The container layout type, could be normal or fullwidth.
Separator Top Border The container separator. Available: none, top border, bottom border, and top & bottom border.
Customize colors? false Check this option to customize section colors.
Background Color #fafafa The section background color.
Title Color rgba(0,0,0,0.87) The section title color.
Subtitle Color rgba(0,0,0,0.38) The section subtitle color.
Spacing - The section padding for desktops.
Tablet Spacing - The section padding for tablets.
Mobile Spacing - The section padding for mobile devices.

5 Post Tiles

Displays a set of posts with custom post query in a tiled layout. You can use this section to show posts by a specific category or tag, popular posts, most viewed posts and more.

The options for this section can be found in Home › Post Tiles tab of WordPress Customizer screen.

Header Options

Option Name Default Description
Enable header? false Check this option to enable section header
Title null Section title.
Subtitle null Section subtitle.

Content Options

Option Name Default Description
Style 1 Select post tiles layout. Available: 1, 2, 3, and 4.
Gap Size 0 The space between items.
Enable button? false Check this option to enable button navigation.
Button Text View More Posts The navigation button text.
Button URL null The button target URL.

Source Options

Option Name Default Description
Source Most Recent The post query source type. Available: Most Recent, Most Commented, Category, Tag, Format or Custom. If Post View Counter it will contains: Most Viewed - All time, Most Viewed - Yearly, Most Viewed - Monthly, Most Viewed - Weekly and Most Viewed - Daily
Categories - The multiple category selector for queriying post by one or more categories.
Tags - The multiple tags selector for queriying post by one or more tags.
Format - The post format selector for queriying post by a specific post format.
Order Publish Date The query order by options. Available: None, Post ID, Post Title, Publish Date, Random, Comments Count and Views Count.
Sort DESC Whether sort the posts ascending or descending.
Limit 4 The maximum number of posts to show.
Offset 0 The posts offset count.

Container Options

Option Name Default Description
Layout normal The container layout type, could be normal or fullwidth.
Separator Top Border The container separator. Available: none, top border, bottom border, and top & bottom border.
Customize colors? false Check this option to customize section colors.
Background Color #fafafa The section background color.
Title Color rgba(0,0,0,0.87) The section title color.
Subtitle Color rgba(0,0,0,0.38) The section subtitle color.
Spacing - The section padding for desktops.
Tablet Spacing - The section padding for tablets.
Mobile Spacing - The section padding for mobile devices.

6 Promo Boxes

Displays a set of stylized links with image to attract your visitor's attention. The options for this section can be found in Home › Promo Boxes tab of WordPress Customizer screen.

Header Options

Option Name Default Description
Enable header? false Check this option to enable section header
Title null Section title.
Subtitle null Section subtitle.

Content Options

Option Name Default Description
Column Size 3 The item column size. Available: 1, 2, 3, and 4.
Limit 3 The maximum number of items to be displayed.
Items null Promo boxes items manager.
Enable button? false Check this option to enable button navigation.
Button Text null The navigation button text.
Button URL null The button target URL.

Container Options

Option Name Default Description
Layout normal The container layout type, could be normal or fullwidth.
Separator Top Border The container separator. Available: none, top border, bottom border, and top & bottom border.
Customize colors? false Check this option to customize section colors.
Background Color #fafafa The section background color.
Title Color rgba(0,0,0,0.87) The section title color.
Subtitle Color rgba(0,0,0,0.38) The section subtitle color.
Spacing - The section padding for desktops.
Tablet Spacing - The section padding for tablets.
Mobile Spacing - The section padding for mobile devices.

Archives

Archives is used to display a list of posts by category, tag, date, author, etc. Similar to the homepage, archive page's content and sidebar can also be customized.

The options for archive pages can be found in Archives tab of WordPress Customizer screen. Below the list of available options:

Option Name Default Description
Preset Card 1 Column Select pre-defined content preset.
Sidebar Position inherit Sidebar position. Available: inherit, left, right and none. Set to inherit to use general sidebar position or set to none to disable sidebar.
Post Syle card Post style. Available: default, card and cover.
Post Column Size 1 Post column size. Available: 1, 2, 3, and 4
Post Orientation vertical Post content orientation, vertical or horizontal.
Post Content Spacing medium Post content spacing. Available: tight, normal, medium and wide.
Post Title Size 4xl Post title size. Available: base, large, xl, 2xl, 3xl, 4xl, 5xl and 6xl.
Show post categories? true Check this option to show post category list.
Post Meta date,readtime Post meta manager.
Post Excerpt Length 35 The number of words to show in the excerpt. Set to 0 to disable it.
Post More Text Read More The read more link text if the excerpt enabled.
Navigation pagination The posts pagination type. Available: pagination and load more.
Prev Text Prev The posts pagination prev link text.
Next Text Next The posts pagination next link text.
Button Text Load More Posts The posts load more button text.

Just like its name, this page is used to display the search results, when a user submitted the search form they will be redirect to this page.

The options for this page is identical to Archives, but located in a separated location. You can find the options in Search Results tab. Please refer to Archives section above to see all available options.


Single Post

Single post is used to display an individual post. The options for this can be found in Single Post tab of WordPress Customizer screen. Below the list of available options:

Layout Options

Option Name Default Description
Sidebar Position inherit The sidebar position. Available: Inherit, Left, Right or None. Set to Inherit to apply settings from global sidebar position or set to none to disable the sidebar.

Author Bio Options

Option Name Default Description
Enable author bio? false Check this option to enable author bio in the single post.
Default Text '' If individual author's bio is empty this will be used as a placeholder.

Related Posts Options

Option Name Default Description
Enable related posts? false Check this option to enable related posts in the single post.
Title Related Posts Related posts title
Source all Related posts source. Available: All, Tags and Categories.
Only from the same author? false Check this option to only show related post by the same author.

Tutorials

1 Make logo image looks crisp on retina displays

There is only one image uploader for each logo spot means there is no additional logo image field for retina displays. However, each logo spot has logo dimension field, we can make use of it to create a sharp image on retina displays.

Let says the original dimension of your logo image is 150x36 of pixels, create the retina version by multiplying the dimension by 2, so it becomes 300x64 of pixels. Upload the retina version instead of your original logo then on logo dimension field enter 'auto' for width and '36px' for height.

Save your changes and now your logo will be looks crisp both on retina and non retina displays.

2 Setup Mobile menu

Go to Appearance › Menus. Create a new menu "Mobile Menu" then add items into it and save your menu.

Go to Appearance › Widgets. Select "Navigation Menu" widget and drop it to "Drawer Mobile" widgets area on the right side. Select your newly created menu on the dropdown and hit save.

Now you will see your mobile menu on the drawer if you open the site on mobile browsers.

3 Setup Mega Menu

Stein has built-in mega menu that displays a list of categories followed by recent posts for each category.

To setup mega menu please go to Appearance › Menus. Since mega menu is only available in Header menu location, create a new menu or select an existing one then assign it to Header menu location as seen on the image below.

Click on the "Save Menu" button to save your changes and reload the page.

Once reloaded, now when you expand the menu item setting, you will see the mega menu settings as seen on the image.

Check the "Enable mega menu?" checkbox to make the selected menu item displayed as a mega menu. On the "Categories" field next to the checkbox, you can select which categories to show or leave it empty if you wish to show all categories.

Please note: Mega menu only works for top-level menu. If the menu contains sub-menus, those will be ignored and replaced.

4 Create different header image on category/tag page

If you open Layout › Content › Page title tab of WordPress Customizer screen, you will find an option to upload/select image that will be used as a global background image of the archive page title.

But, it also possible to use a different image for individual category/tag page. To setup a category/tag header image:

  • Go to Posts › Categories or Posts › Tags.
  • Mouse over to your selected category/tag and click on "Edit" link next to the category/tag name.
  • Upload or select your image using the image uploader as seen on the image below.

5 Setup Instagram

To display your Instagram feed, Stein needs to connect with the Instagram API using an access token. Please watch the video below to see how to obtain your own access token.

Once you have the access token in hand, go to Settings › Instagram and paste the access token into the "Access Token" field and hit the save button.

A Instagram access token is lasts for 60-days, Stein will automatically refresh the token once every week to make sure your always have an access.


Changelog

v1.4.5 – 17 August 2020
  • New: Instagram Basic Display API
v1.4.4 – 25 May 2020
  • New: TailwindCSS v.1.4.6
  • New: Support for wp_body_open hook
v1.4.3 – 11 January 2020
  • New: Single post no sidebar alt layout
  • Fix: Light and dark mode default background
v1.4.2 – 27 December 2019
  • Fix: Footer Instagram item url
v1.4.1 – 27 December 2019
  • Fix: <script> tag being included in wp_add_inline_script()
v1.4.0 – 27 December 2019
  • New: Lazysizes 5.2.0
  • New: Swiper 5.2.1
  • New: TailwindCSS 1.1.4
  • New: Use CSS Variables (Custom Properties).
  • New: Drawer color settings.
  • Fix: Mega menu link color.
  • Fix: Footer Instagram button url.
  • Fix: Incorrect usage of translation functions.
v1.3.6 – 24 October 2019
  • New: TailwindCSS 1.1.3
  • New: Swiper 5.1.0
  • New: Lazysizes 5.1.2
  • New: Bandcamp and Patreon icons.
  • New: Close search dialog and drawer when pressing the ESC key.
  • Fix: PHPCS configuration.
v1.3.5 – 17 October 2019
  • Fix: Instagram image src.
  • Fix: Page Header image for archive pages.
v1.3.4 – 23 September 2019
  • New: Instagram access token field as the alternative method to get Instagram profile and media.
  • Fix: Rosenstein demo content.
v1.3.3 – 6 September 2019
  • Fix: Promo boxes are not properly linked to the defined URL.
  • Fix: Mega menu that shows empty content when no categories selected.
v1.3.2 – 16 August 2019
  • Fix: Button and separator blocks.
v1.3.1 - 15 August 2019
  • Fix: Post tiles conditional limit.
v1.3 - 25 July 2019
  • New: Individual category page header image..
  • New: Ability to select which categories to show in the mega menu.
v1.2 - 12 July 2019
  • New: Mega menu.
  • New: Dropdown menu color mode.
  • New: Options to set average read words per minute.
  • New: Options to change post author meta label.
  • New: Options to change single post navigation label.
  • Fix: Only show menu label colors field if label has a value.
v1.1 - 10 July 2019
  • New: Code quality, Stein is now follows WordPress Coding Standard. Validated with WPCS for PHP_CodeSniffer.
  • Fix: Incorrect demo import configuration.
v1.0 - 05 July 2019
  • Initial release.