Sign in

Theme specifications

  • Recommended logo size is 220x50px.
  • Featured image width is 1200px.
  • Single post and page content width is 760px.

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 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: 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 Customizer Framework

Theme demo

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

Theme setup

Repasto theme is set to display the latest posts on the homepage. To set your theme in the same way we did in our demo, be sure to go through these steps:

  1. First, you will need to create several post categories. Categories will be used to group posts (recipes), and in the theme, we will use them in the navigation and set Featured Category Slider.
  2. When you are done with setting up the categories, create several posts and associate them with different categories. Make sure to set the featured images for each post.
  3. Create several portfolio items, as well. Be sure to set a featured image for each portfolio item. In the demo, portfolio items are used on the Gallery page.
  4. Now, we need to create pages where our content will be displayed – create pages About, Contact, and Gallery. About and Contact pages are using the Default page template, while the Gallery is using the Portfolio page template. Be sure to insert a contact form into the Contact page.
  5. Repasto theme is using Your latest post reading settings, so you don’t need to change it.
  6. Go to Appearance -> Menus and create a new menu. Add Home as Custom Link to your homepage, all pages, and add Recipes which will be holder for categories. Mark this menu as Primary.
  7. Create another menu – Social menu. Add links to your social profiles using Custom Link. When you are done, customize this menu as Social.
  8. Finally, we need to tweak a few things in the Customizer. Go to Appearance -> Customize:
    1. Site Identity: Enter title and favicon for your site.
    2. Content Options: Turn all options on.
    3. Repasto unique look – rounded borders and such is achieved with some extra CSS. To get the same look, add the following classes to Additional CSS:
      .nav-menu a {
          font-weight: normal;
      }
      
      .dropdown-toggle {
          padding: 8px 2px;
      }
      
      div.sharedaddy h3.sd-title {
          font-weight: normal;
      }
      
      div.sharedaddy .sd-social h3.sd-title {
          padding: 7px 18px 7px;
      }
      .header-image {
          border-bottom:none;
      }
      
      .center-logo .site-header {
          padding-top: 5px;
          padding-bottom: 5px;
      }
      .entry-meta a, .more-link {
          letter-spacing: 1px;
          font-weight: 400;
      }
      
      .masonry .sticky-wrapper,
      .featured-image,
      .featured-image img,
      .jp-relatedposts-post-img,
      body #infinite-handle span button {
          border-radius: 25px;
      }
      
      .masonry .sticky-wrapper {
          overflow: hidden
      }
      
      .masonry .lines {
          display:none
      }
      
      h1, h2, h3, h4, h5, h6, .content-area .entry-content .contact-form-submission h1, .content-area .entry-content .contact-form-submission h2, .content-area .entry-content .contact-form-submission h3, .content-area .entry-content .contact-form-submission h4, .content-area .entry-content .contact-form-submission h5, .content-area .entry-content .contact-form-submission h6 {
          clear: both;
          font-weight: 600;
          margin: 50px 0 20px;
      }
      
      .masonry .featured-image {
          margin-bottom: 30px;
      }
      
      .single .fullsize-featured .entry-header {
          max-width: 860px;
      }
      
    4. Theme Options -> Featured Category Slider: Enable the Featured Category Slider, and select the post category that you wish to display in the category slider. Enter a title for the slider and number of posts that you wish to display.
    5. Theme Options -> Header Settings: Disable sticky header and leave logo in the default position.
    6. Theme Options -> Layout Settings: Enable Display the featured image in full-width in single posts, and set Newspaper layout to Magazine style, with three columns.

The Customizer


The Customizer is a great WordPress feature that allows you to customize the theme and set theme options. Theme specific settings:

  1. Site Identity
  2. Header Image
  3. Menus
  4. Content Options
  5. Widgets
  6. Static Front Page
  7. Featured Content
  8. Additional CSS
  9. Related Posts
  10. Font Settings
  11. Color Settings
  12. Theme Options

Site Identity


Site Identity allows you to set your site title, tagline, and icon. The Site Title is the name of your site and it’s displayed in the header, where the logo is displayed. The Tagline is a short description or your motto, and it’s displayed just under the title. This setting is the same as in Settings -> General in WordPress admin panel.

  1. Logo: Upload logo for your site. The logo should be in a PNG or JPEG/JPG format.
  2. Site Title: Name of your site.
  3. Tagline: Site punchline.
  4. Display Site Title and Tagline: If enabled, both Site Title and Tagline will be displayed. The Tagline will be displayed under the title.
  5. Site Icon: The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.

Header Image


The Header image is used as the background image for the header section when the logo is set to display in the center. The Centered logo can be set in Header Settings.


This option allows you to manage created menus quickly. You can select which created menu will be displayed as Primary Menu or Footer Menu. If you need to manage actual menu items, you can do that in Appearance -> Menu.

Content Options


Content Options panel contains settings for metadata for single posts – both regular and portfolio.

  1. Author Bio: If enabled, the author bio box will be displayed on the single post page.
  2. Display date: If enabled, the publishing date will be displayed on a single and posts page.
  3. Display categories: If enabled, post categories will be displayed on a single and posts page.
  4. Display tags: If enabled, post tags will be displayed on a single and posts page.

Widgets


The Widgets section allows you to manage widgets in widget areas quickly. This option allows you the same possibility as the Widgets option in the WordPress admin panel.

Homepage Settings


This option works the same way as Settings -> Reading. It allows you to set them to read the latest post or to use static pages for landing and blog pages.


Featured content is content that is displayed in the slider on the homepage.

  1. Tag name: Enter tag that is used to mark posts that need to appear in the slider.
  2. Display featured posts: Slider can be displayed as film strip – 3 smaller images per screen or as a full-page slider.
  3. Do not display tag in post details and tag clouds: If the option is enabled, the tag that is used for the slider will not be displayed in metadata or tag cloud.
  4. Also, display tagged posts outside the Featured Content area: If enabled, posts from the featured content will be displayed in archives, and posts page. Otherwise, they will not be displayed.

Setting up the Featured content slider
The Featured content slider is displayed on the homepage, and setting up the slider is quite simple.

  1. Make sure that your theme reading settings are set to Your latest post.
  2. Create several posts and set the featured image.
  3. Tag the desired posts with the same tag – e.g., “Featured”.
  4. Go to Appearance -> Customize and in Featured Content panel enter the tag that you have used for your posts.

Additional CSS


In the Additional CSS section, you can enter your custom CSS classes, so you don’t need to mess with original styles, or create a child theme. Of course, you should create a child theme if you plan to modify other files as well.

Font Settings


Font settings allow you to set font-family and font-weight for headings and paragraphs.

Color Settings


The Colors panel allows you to set the color for different elements of the theme.

  1. Background color: General background for the theme.
  2. Comment Area Background Color: Background color for the comments area.
  3. Text color: Basic text (paragraphs) color.
  4. Headings Color: Headings – including theme default, and created in the editor color.
  5. Link and Meta Data: Color of links and categories, tags and date.
  6. Main Header Background Color: Header background color.
  7. Main Header Text Color: Color of navigation and other text in the header.
  8. Search / Social modal Background Color: Color of Search and Social menu.
  9. Search / Social modal Text Color: Text color inside Search and Social menu.

Theme Options


The Theme Options panel contains theme-specific settings. Here you can customize theme appearance – featured slider, Instagram feed, footer and header settings, and to change layout appearance.

  1. Featured Category Slider
  2. Footer Settings
  3. Header Settings
  4. Layout Settings

Featured Category Slider


The Featured Category Slider is displayed on the homepage, under the posts. This slider will display posts from the selected category.

  1. Check to enable Featured Category Slider: If checked, Featured Category Slider will appear on the homepage.
  2. Add Heading to slider: Heading will be displayed above the slider.
  3. Select Category: Post category which will be used to display posts.
  4. Exclude posts from this category to display in post listings: If enabled, posts will be displayed only in the slider. Otherwise, they will appear on archive page, as well as on post listing.
  5. Set Category Posts Number: How many posts will be displayed.
Featured category slider and the look of the front page. It’s displayed after posts.

Footer Settings


The Footer Settings field allows entering custom footer copyright information. If blank, default Themes Kingdom copyright will be displayed. You can use HTML to style footer content.

Header Settings


Header Settings contain options for sticky header and logo position.

  1. Sticky header: If enabled, the header will be always visible on the top of the screen. Otherwise, it will scroll with the page.
  2. Logo position: When centered, navigation will be displayed at the top, and logo under it, at the center of the page. The logo will use the custom background from Header Image.

Layout Settings

  1. Display featured image in full width: If enabled, Featured image larger than 1600px in portrait orientation will be displayed in full width, across the screen.
  2. Blog layout: Defines how posts will appear. Magazine style images will be displayed on the side with text, in two columns. If the sidebar is displayed, posts will be displayed in one column. A Newspaper style will display featured images at the top, with text under them.
  3. Portfolio archive layout: Portfolios can be displayed in two, three or four columns.

Theme specific features

Theme detects image orientation and depending on the image – landscape or portrait, layout of the single post page will vary.

  • Landscape: Landscape image will be displayed at the top of the single post page, with post title under it.
  • Portrait: Portrait image and post title will be displayed side by side. Please note that portrait images should not be huge and that you should keep their width under 800px.
  • Full width landscape image: the Featured image will be displayed at the top of the single post page but in full width. This will only apply for images with larger than 1600px and if the Full width image is enabled in Layout Settings.
Landscape vs. portrait vs. full-width featured image

The full-width image in the content

Inserting a full-width image in the content is an awesome way to break the text and add an outstanding image. To create full-width image in the content, simply insert an image as a media file into the content and add the class tk-fullsize-img. To add class to the image, switch the editor to text mode and add code like this to image class=”tk-fullsize-img”. For example, the full code for the image will be like this:

Useful CSS classes

Increase logo size

.site-branding {
width: 220px;
}

Remove overlay from featured content slider

.slider-entry-content-wrap {
background-color: transparent;
}

Customize navigation font

.nav-menu > li > a {
font-size: 14px;
font-weight: 700;
}

Customize single post title

.single .entry-title {
font-size: 42px;
font-weight: 700;
}
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