Stile WordPress Theme Documentation

Stile is a contemporary, minimalistic built to let your blog content shine. This modern theme will look good on any screen size 一 it is the perfect combination of contemporary typeface and a lot of white space.

Read how you can get the most out of the theme with the Stile WordPress theme documentation.

Stile WordPress theme documentation, step 1: Theme specifications

• Post featured image recommended width is 770px.
• Page and Post content maximum width is 740px.
• Recommended logo size is 210 x 40px.
• Sidebar content width should be 300px.

Stile WordPress theme documentation, step 2: Theme installation

The theme can be installed through the WordPress Admin panel.

1. Log in to the WordPress Admin panel.
2. Go to Appearance -> Themes.
3. Click on the Add New button, at the top of the screen.
4. In Add Themes screen, click on the Upload Theme.
5. Click on the Choose theme, and then browse for theme file on your computer.
6. Click on the Install Now to start the install process.
7. After the installation is done, click on the Activate theme.

A detailed video for theme installation is available here: https://help.themeskingdom.com/how-to-install-and-setup-the-theme.

After activating the theme, you will be prompted to install the required plugins. Required plugins in the Stile WordPress theme documentation are:

1. Jetpack
2. Kirki Customizer Framework

Stile WordPress theme documentation, step 3: Theme demo

To set the theme as presented in our demo, you can import the demo file.

Stile WordPress theme documentation, step 4: Theme setup

To set up the theme, please follow the next steps:

1. Create pages with the default template: Home, Journal, About and Contact.
2. Create content for the About page and insert a contact form into the Contact page.
3. Go to Posts and create several posts. Don’t forget to set a featured image for each post, and to organize posts into categories.
4. When you are done with pages, go to Settings -> Reading and set Your homepage displays to A static page. For the Homepage set Home page, and for posts, page set the Journal page.
5. In the Appearance -> Customize, go to Theme Settings -> Home Page Settings. Enable Home sections, and add the following elements:
   1. Slider section: Choose the Slider element type, enter “Popular posts” as title, and select the category that you like, choose the horizontal slider style, and set the number of slides to 4.
   2. Archive section: Choose the Archive element type, leave the title blank, select category All, choose Magazine archive style, and set the number of posts to the desired value.
   3. Archive section: Choose the Archive element type, enter the title The Joys of Reading, select the desired category, choose the List archive style, and set the number of posts to the desired value.
6. In the Stile Settings -> Archive Settings, set to Magazine, and enable Display Category Post Count and Add rounded corners on buttons.
7. Finally, go to Appearance -> Menus. Create a new menu 一 name it Primary, and add desired categories and all your pages to it. Associate the menu with the Primary position. Create another menu and add social links to it, and associate that menu with the Social position.

If you want to customize your theme, be sure to read the following text, as it can help you add a personal touch to the theme.

Stile WordPress theme documentation, step 5: The Customizer

The Customizer allows you to modify theme visuals and settings easily. Here are the customization options in the Stile theme:

1. Site Identity
2. Background Image
3. Menus
4. Content Options
5. Widgets
6. Homepage Settings
7. Prim Settings
8. Additional CSS
9. Theme Options

Site Identity

Site Identity panel in the Stile WordPress theme documentation is used for setting up the basic site identity:

1. Logo: Site logo is an image in .jpg, .jpeg, or .png format. Suggested logo image size is 210 x 40px.
2. Logo Size: Drag slider to the left or right to decrease or increase logo size.
3. Site Title: The name of your site. Ideal length should not exceed 20 characters. If the site title is longer, it will be displayed in two (or more) lines.
4. Tagline: Tagline is a short description of the site, or simply a punchline of your business.
5. Title and Tagline Visibility: If Display Site Title and Tagline is checked, both Site Title and Tagline will be displayed.
6. Site Icon: Site icon will be displayed in a browser tab, bookmarks or in the WordPress mobile app. The icon should be squarely-shaped, and the recommended icon size is 512 x 512px.

Menus

The Customizer menu option allows the user to manage available menu locations, and add and remove menu items. Stile theme has two menu locations available – the Header menu, which is mostly used for the primary menu, and the Social menu. Menus can be managed from Appearance -> Menus as well.

Content Options

The Content Options panel in the Stile WordPress theme documentation allows you to control the visibility of posts metadata. By enabling or disabling the options, you can show or hide dates, categories, tags, and the author for all posts.

Widgets

Widgets are useful extensions for content, which you can add to your sidebar or other widget areas. In the Widgets option in the Customizer, you can see available widgets area in the currently active theme.

Stile theme there is a regular, right side widget area and footer widget area. Widgets can also be managed from Appearance -> Widgets. Widgets appearance can be controlled with the Widget Visibility feature.

Homepage Settings

Homepage settings in the Stile WordPress theme documentation work the same way Reading settings in Settings -> Reading does. Homepage settings allow you to set the theme to use a static homepage or to display the latest posts.

Theme Settings

Theme Settings is a panel where all theme-related settings are placed. In here, you can tweak homepage look, main menu settings, single post, etc.

1. Home Page Settings
2. Main Menu Settings
3. Single Post Settings
4. Archive Settings
5. Footer Settings
6. Font Settings
7. Color Settings

Home Page Settings

Stile theme has a flexible homepage and allows site admin to create a custom homepage. The homepage can be customized by adding content blocks. A content block can be:

• a slider,
• an archive or
• s call to action.

Theoretically speaking, an unlimited number of content blocks can be added to the homepage, but keep in mind that the more blocks you add, the longer the loading time will be.

Content blocks can be easily rearranged by using the drag and drop method. The mouse cursor will turn into the four-way arrow, which indicates that the block can be moved.

After clicking on the Add new Element, the new block will be added. As the first step, select what content will be displayed.

Slider block

The slider is using the featured image, title, and metadata from posts.

1. Title: Title for the slider section.
2. Categories: Slider can display content from all categories or just from the selected category.
3. Slider Style: Slider has three styles available: Film Strip, Classic, and Horizontal. The Film Strip will display several smaller images, Classic is a full-screen slider, while the Horizontal will scroll from top to bottom.
4. The Number of posts: How many slides will be displayed in the slider.

Different slider types – Film strip, Classic and Horizontal.

Archive block

The Archive is a block where posts are displayed.

1. Title: Title for the archive section.
2. Categories: Archive will display posts from all categories, or just from the selected category.
3. Archive style: Archive block can display posts in different styles. Newspaper style will display featured image on the left and content (title, metadata, and excerpt) on the right; Magazine-style will display the featured image on the top with the content, under the image and in the List style, posts will be displayed in the grid with small images and just post titles.
4. Number of posts: How many posts will be displayed in the archive section.

On the image above are displayed all three archive styles – Newspaper, Magazine, and List.

Call to Action

The Call to Action section in the Stile WordPress theme documentation is a static section. It will always display the same content. It’s usually used to attract site visitors and direct them to specific articles or such. A Call to action is always displayed in the full width.

1. Title: Title for the section.
2. Call to Action Image: Select an image that will be used as a cover image for the call to action section.
3. Call to action text: Short text that will be displayed.
4. Call to action link: Enter URL where the button in the call to action will link to.
5. Call to Action Button Text: Enter the text that will be displayed on the button.

Here is an example of how the finished call to action section looks like.

Main Menu Settings

The Main Menu can be displayed as a standard inline menu in the different positions – on the left, right, or center in the header; or hidden behind the hamburger button. If the last option is selected, the menu trigger will appear on the left side in line with the logo, and the menu will slide in from the left.

Single Post Settings

Single Post Settings have two options where reading time can be displayed, and next/previous navigation for posts can be turned on or off.

Archive Settings

Archive Settings allow you to customize the appearance of the content archive pages.

1. Archive Style: Archive can display posts in different styles. Newspaper style will display featured image on the left and content (title, metadata, and excerpt) on the right; Magazine style will display featured image on the top with the content, under the image, and in List style, posts will be displayed in the grid with small images and just post titles.
2. Display Category Post Count: If turned on, the number of posts in the category will be displayed on the category archive page.
3. Add rounded corners on buttons: If turned on, buttons “Read More” will have rounded corners.

Footer Settings

In the Footer Settings in the Stile WordPress theme documentation, you can manage and turn on the newsletter block and Instagram section, and set footer credits.

1. Display newsletter form in the pre-footer area: If turned on, the newsletter will be displayed in the pre-footer area. Settings for newsletter are located in Settings -> MailChimp Setup.
2. Footer Copyright Text: Text that will be displayed in the footer, as footer credits. You can enter basic HTML elements to create links and stylize footer text.

Font Settings

The Font Settings panel is displayed only if the Kirki Framework plugin is installed and activated. Font Settings are used to set font families and weights for global text elements 一 content, headings, and navigation. Available fonts are from Google Fonts but without extended variants. If you need assistance on how to integrate additional variants, please submit a support ticket.

Color Settings

Setting up colors and adding a personal touch to the theme is important for building a personal brand. The Color Settings panel allows you to set colors for various elements in the theme.

Available settings:

• Slider Horizontal Background Color: The color used for the elements with the horizontal slider.
• Background Color: Background color for the whole site.
• Accent Color:
• Headline Color: The color of all post titles.
• Paragraph/Text Color: Content text color.
• Link Color: The color used for links in the content and metadata (date, category, author).
• Secondary Background Color: Background color for the minor elements – e.g. slider background.
• Secondary Text Color: Default color for text that is displayed in the slider.

Stile WordPress theme documentation, step 6: Additional CSS

Additional CSS section in the Stile WordPress theme documentation is used for custom CSS classes, without interfering with theme original CSS files or creating a child theme. These classes are always loaded first, before other stylesheets. In the Useful CSS Classes section, you can find some most used classes.

Useful CSS Classes

Site Logo
To increase the site logo:

.custom-logo-link {
max-width: 200px;
}

Main Navigation color and font size

.main-navigation ul.menu li.menu-item a {
font-size: 16px;
color: #fff;
}

.nav-menu li.menu-item a:hover {
color: #fff;
}

Page Title

.page h1.page-title {
font-size: 30px;
color: #fff;
}

Single Post Title

.post h1.entry-title {
font-size: 30px;
color: #fff;
}

Single Post Entry Text

.post .entry-content p {
font-size: 12px;
color: #fff;
}

Hide Search Icon

#big-search-trigger {
display: none;
}