Sign in

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

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.

Theme installation

The theme can be installed through the WordPress Admin panel.

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

A detailed video for theme installation is available here:

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

  1. JetPack
  2. Kirki Customizer Framework

Theme demo

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

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 Homepage set Home page, and for posts, page set Journal page.
  5. In Appearance -> Customize go to Theme Settings -> Home Page Settings. Enable Home sections, and add the following elements:
    1. Slider section: Choose Slider element type, enter “Popular posts” as title, select category that you like, choose horizontal slider style and set the number of slides to 4.
    2. Archive section: Choose 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 Archive element type, enter the title The Joys of Reading, select the desired category, choose List archive style and set the number of posts to the desired value.
  6. In Prim 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 Social position.

Theme customization options are the following, and they will help you add a personal touch to the theme.

The Customizer

The Customizer allows you to modify easily theme visuals and settings. Here are the customization options in Prim 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 is used for setting up 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.


Customizer menu option allows the user to manage available menu locations, and add and remove menu items. Prim 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 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 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.

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

Homepage Settings

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

Theme Settings

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

  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

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

  • slider
  • archive
  • call to action

Theoretically unlimited number of content blocks can be added to the homepage, but keep in mind that more blocks mean longer loading time.

Content blocks can be easily rearranged by using 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 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 full-screen slider, while Horizontal will scroll from top to the bottom.
  4. Number of posts: How many slides will be displayed in the slider.

Different slider types – Film strip, Classic and Horizontal.

Archive block

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

Call to Action section 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. 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 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 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 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.

In Footer Settings can be managed and turned on 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 active. 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: Color used for the elements with the horizontal slider.
  • Background Color: Background color for the whole site.
  • Accent Color:
  • Headline Color: Color for all post titles.
  • Paragraph/Text Color: Content text color.
  • Link Color: 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.

Additional CSS

Additional CSS section 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 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 a {
font-size: 16px;
color: #fff;
.nav-menu a:hover {
color: #fff;

Page Title

.page {
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;
Was this article helpful?

We’re here to answer all your questions!

If, somehow, you haven’t found answers to your questions, feel free to contact our chatty & friendly support team.

Support request

Need help configuring your theme?

Don’t want to spend hours building your site from the ground up and perfecting its design? Let us do it 一 we like to get our hands dirty!