Installation
Stein is only compatible with a self-hosted WordPress websites.
Before installing Stein theme, make sure your server met the following requirements:
- WordPress 5.0 or greater.
- MySQL version 5.6 or greater OR MariaDB version 10.1 or greater.
- 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.
-
Installable WordPress file only, choose this option to download the installable theme file in
.zip
format. -
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 namedstein.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 Recommended
Use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data.
Breadcrumb NavXT Optional
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 Optional
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 Optional
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 Recommended
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 Optional
Post Views Counter allows you to display how many times a post, page or custom post type had been viewed.
Regenerate Thumbnails Optional
Regenerate the thumbnails for your image uploads. Useful when you install Stein on an existing site.
Stein Kit Recommended
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:
- Go to Appearance › Install Plugins.
- Select the plugins to install in the list and choose Install from the Dropdown menu.
- 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:
- Go to Tools › Regenerate Thumbnails, or simply go to this path:
/wp-admin/tools.php?page=regenerate-thumbnails
. - 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
To setup automatic update you will need Envato Market plugin installed and activated.
Follow these steps to setup automatic update:
- Login to your WordPress admin and click Envato Market menu, or simply go to this path:
/wp-admin/admin.php?page=envato-market
. - Generate your Envato API Personal Token here.
- Copy the token into the Token field.
- 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.
Header
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.
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. |
Menus
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.
Sidebar
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. |
Footer
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. |
Search Results
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
- New: TailwindCSS v.1.4.6
- New: Support for wp_body_open hook
- New: Single post no sidebar alt layout
- Fix: Light and dark mode default background
- Fix: Footer Instagram item url
- Fix: <script> tag being included in wp_add_inline_script()
- 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.
- 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.
- Fix: Instagram image src.
- Fix: Page Header image for archive pages.
- New: Instagram access token field as the alternative method to get Instagram profile and media.
- Fix: Rosenstein demo content.
- Fix: Promo boxes are not properly linked to the defined URL.
- Fix: Mega menu that shows empty content when no categories selected.
- Fix: Button and separator blocks.
- Fix: Post tiles conditional limit.
- New: Individual category page header image..
- New: Ability to select which categories to show in the mega menu.
- 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.
- New: Code quality, Stein is now follows WordPress Coding Standard. Validated with WPCS for PHP_CodeSniffer.
- Fix: Incorrect demo import configuration.
- Initial release.