Sign in

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 the Add New button, at the top of the screen.
  4. In the Add Themes screen, click on Upload Theme.
  5. Click on the Choose theme, and then browse for a 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 the 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 are:

  1. Jetpack
  2. Kirki

Jetpack

Jetpack is one of the world’s most popular plugins that extends WordPress features. In the Repasto theme, it is used to extend galleries’ features and protection. The official documentation is available here: https://help.themeskingdom.com/jetpack-plugin/.

Kirki

Kirki is a plugin that enhances theme experience by adding useful elements in the Customizer, like image position picker, font settings, and such.

Theme demo

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

Theme setup

Repasto is a theme that will help you create your food blog. Posts are used for recipes and other entries.

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

  1. First, create posts – set featured images for each post. Group the posts in categories. Post categories will be used for homepage sections.
  2. Create pages – go to Pages -> Add New and create four new pages – Home, Journal, About, and Contact. Add text content to the homepage, and set the Home page to use the Home page template. Other pages are using the Default page template.
  3. Go to Settings -> Reading and set the theme to use a static page. For the Homepage set the Home page, and for the Posts page, set the Journal page.
  4. Creating primary and social menu: Go to Appearance -> Menus. Create a new menu with title e.g. Repastoary. Add all your pages to it. In our demo, we also added “Recipes” placeholder with the post categories as subitems. Mark it as a Repastoary. Create another menu, but with the title Social. Add links to your social profiles as Custom Link items, and mark it as a Social menu.
  5. Finally, you’ll probably like to add some personal touch to the theme. Go to Appearance -> Customize.
    • In the Site Identity section, set your logo or add site title.
    • In Theme Settings panel, you will need to set the following:
      • Home Page Settings: Enable the section, and add four elements:
        • Element 1: Set Element type to Archive, and archive style to Newspaper. Set categories to all, and the number of posts to 10.
        • Element 2: Set Element type to Archive, and archive style to List. Select the desired category (in our demo, we have used category Deserts), and the number of posts to 6.
        • Element 3: Set Element type to Slider, and slider style to Film Strip. Select the desired category (in our demo, we have used category Featured), and the number of posts to 6.
        • Element 4: Set Element type to Slider, and slider style to Classic. Select the desired category (in our demo, we have used category Hidden Gems), and the number of posts to 3.
      • In Theme Settings -> Archive Settings set Archive style to Magazine.

If you want to customize the theme a bit more and a personal touch to it, be sure to follow these steps:

The Customizer


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

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

Site Identity


The Site Identity panel is used for setting up basic site identity:

  1. Logo: Site logo is an image in a .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. Repasto theme has two menu locations available – the Header menu, which is mostly used as a Repastoary 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

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.

Repasto theme has 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 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. In here, you can tweak how the homepage looks; you can play with 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


Repasto 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
  • a 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 it will take your site to load.

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 the content that should 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 the 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


An Archive is a block where posts are displayed.

  1. Title: Title for the archive section.
  2. Categories: The 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 the List style will display posts in the grid with small images and just post titles.
  4. Number of posts: How many posts will be displayed in the archive section.

In the image above, you can see 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, direct them to specific articles or similar. 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.


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 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 the List style will display posts 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 the Footer Settings, you can manage and turn on a 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 the 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: Color used for the elements with the horizontal slider.
  • Background Color: Background color for the whole site.
  • Accent Color:
  • Headline Color: Color of 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


The Additional CSS section is used for custom CSS classes, without interfering with the 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;
}
Was this article helpful?
YesNo

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!

Services
New
Help