Aperitive WordPress Theme Documentation

Aperitive is a responsive and highly customizable WordPress theme built for restaurants. This theme’s design will ensure your site visitors’ mouths water as soon as they land on your website. Read how you can get the most out of the theme with the Aperitive WordPress theme documentation.

Aperitive WordPress theme documentation, step 1: Theme specifications

• Page featured image recommended dimension is 1054 x 1000px.
• Page and Post content maximum width on 1920px-wide screen is 704px.
• Recommended logo size is 110 x 220px.
• Sidebar content width should be 440px.

Aperitive 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 Upload Theme.
5. Click on Choose theme, and then browse for a 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. Aperitive Custom Post Types
3. Kirki Customizer Framework

Aperitive Custom Post Types

This plugin will extend the theme with two custom post types – Gallery and Food Menu.

Gallery Custom Post Type

Gallery is used to create a visual portfolio of your work. In our demo, we didn’t set it, but you can use it to add your photos. To display a Gallery on your site, you’ll have to:

1. Go to Gallery -> Add New. Create several Gallery items – enter titles and set featured images for each of the items. If necessary, you can create Gallery categories, and associate your items with the categories.
2. When you are done creating the Gallery items, go to Pages -> Add New. Create a new page – enter the title and select the page template Gallery. This page will display all Gallery items.

You can also add a Gallery page to the main navigation.

If you need to display Gallery items from only one category, you can add a link to that category to the main navigation. The theme will automatically generate a Gallery category page and display all related items on that page.

Food Menus Custom Post Type

The main purpose of the Food Menus in the custom post type in the Aperitive WordPress theme documentation is to make the food menu creation easy. Food menus are using different terminology than other custom post types. Here’s the terminology you need to be familiar with:

• Menu Items: In here are listed all your menu items.
• Add One Item: Create a single food menu item.
• Add Many Items: Used to create several items at once, but without all the details. You can add the missing details later.
• Menu Item Labels: Words or phrases that are used to describe a dish. For example: “Spicy”, “Beef”, “Gluten-free” etc.
• Menu Sections: Menu sections are parts of a menu in which similar dishes are presented. For example, sections can be “Appetizers”, “Main Course”, “Desserts” etc. Sections are displayed on the Food Menu page and allow visitors to display items per section.

Setting up a food menu is quite easy:

1. Go to Food Menu -> Add One Item. Enter the title, description, price, add labels and add an item to the desired Menu Section. Featured image is optional, but it will not appear on the food menu page, but only on the single food page.
2. Create Food Menu page: Go to Pages -> Add New and create a new page with the Menu page template. On this page, the theme will display all Food Menu items, organized in sections.

Aperitive WordPress theme documentation, step 3: Theme demo

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

[YT VIDEO]

Aperitive WordPress theme documentation, step 4: Theme setup

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

1. First, create several posts. Go to Posts -> Add New and create several posts. Set the featured image for each post.
2. When you are done creating the posts, go to Pages -> Add New. Create pages Welcome, News, Reservations, Menus, and Contact. All pages are using the default page template, except the Menus page, which is using a Menu page template. Insert a contact form into the Contact page. For the Reservations page, insert contact details and instructions for visitors on how to reserve a table.
3. Creating food items: As described above, you will need to create several food items. Don’t forget to set the prices and organize them in sections. In our demo, we have used the sections Main Dishes, Salads, Soft Drinks, and Wine List.
4. Go to Settings -> Reading and set theme reading settings to read static page. For the Home page, set the Welcome page, and for the posts landing page, set the News page.
5. In Appearance -> Menus Create two menus – Primary and Social. Add all your pages to the Primary menu and mark it as Primary. For Social menu, add links to your social profiles as Custom Links, and mark that menu as Social.
6. Finally, head to Appearance -> Customize and set the following options:
   1. Site Identity: Set your logo or enter a site title.
   2. Theme Settings -> Blog Layout Settings set the blog to display two columns and enable author box, under single post content.
   3. In Theme Settings -> Food menu Settings disable single menu item page.
   4. Theme Settings -> Contact Page Settings enter Google map link. Keep reading to learn how to get the Google Map source.

If you want to customize the theme a bit more and a personal touch to it, be sure to read the rest of the documentation.

Aperitive WordPress theme documentation, step 5: The Customizer

The Customizer in the Aperitive WordPress theme documentation allows you to modify theme visuals and settings easily. Here are the customization options available in the Aperitive theme:

1. Site Identity
2. Menus
3. Widgets
4. Homepage Settings
5. Contact Settings
6. Color Settings
7. Additional CSS
8. Theme Options

Site Identity

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

1. Logo: Site logo is an image in a .jpg, .jpeg or .png format. Suggested logo image size is 150 x 150px.
2. 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.
3. Tagline: Tagline is a short description of the site, or simply a punchline of your business.
4. Title and Tagline Visibility: If Display Site Title and Tagline is checked, both Site Title and Tagline will be displayed.
5. 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. Aperitive theme has two menu locations available – the Header menu, which is mostly used as a Primary menu, and the Social menu.

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.

Aperitive theme has a slide-out widget area. If there are widgets, sidebar trigger will appear in the same line with the navigation. Widgets can be also managed from Appearance -> Widgets.

Homepage Settings

Homepage Settings in the Aperitive WordPress theme documentation 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.

Contact Settings

The Contact Settings panel is used to set a contact form email address for receiving messages. The contact form can be added to any page by adding the shortcode [aperitive_contact_form] to the desired post or page content area.

Color Settings

Setting up colors and adding a personal touch to the theme is important when you are building a brand. The Color Settings panel allows you to set colors for various elements in the theme. There are two sub-panels: General Theme Colors and Header Colors.

General Theme Colors

General Theme Colors cover color settings for the theme elements that are present in almost all pages 一 background, text, buttons, etc. Available settings:

• Background Color: Background color used for the content area.
• Paragraph Color: Content text color.
• Headings Color: Color for headings 一 applies to all Headings.
• Headings Link Hover Color: Hover color for Post, Page, and Gallery Headings.
• Button Bg Color: Background color used for buttons on a Contact Form, or in Widgets.
• Button Bg Hover Color: Button background color visible on hover event.
• Button Text Color: Button label color.
• Button Text Hover Color: Button label color on hover event.
• Link and Meta Data Color: Color used for the links in the content and metadata (date, category, author).
• Meta Data Hover Color: Links and metadata color used for hover event.
• Sidebar Bg Color: Background for sidebar area.
• Sidebar Text Color: Default color of the text that is displayed in the sidebar.

Header Colors

Header Colors define the color palette used for the main headers in the theme.

• Lead Header Color: Main header color.
• Lead Header Bg Color: Background color used for the main headers.
• Mobile Header on scroll Bg Color: Background color used for mobile headers on scroll event.

Theme Options

The Theme Options panel of the Aperitive WordPress theme documentation contains theme-specific customization options, divided into seven sub-panels.

Gallery Settings

Gallery Settings are used to set how many Gallery items will be displayed on the page with the Gallery Page Template.

Blog Layout Settings

1. Blog Layout: Blog page can display posts in the single column, or in two columns.
2. Display author box under single post content: If checked, a box with the author name and bio will be displayed under the content on the single post page.

Paging Settings

The Paging Settings section of the Aperitive WordPress theme documentation allows you to set how the theme will load more posts or gallery items. Paging can be set to classic (numerical) paging, and to infinite load. The infinite load can be set to load more items on a scroll or on button click.
Keep in mind that Paging Settings are not available if the Jetpack plugin is not activated.

Contact Page Settings

The Contact page can display a map and a contact form.

 

To display a map, you will need to copy and paste Google Maps src link from the embed code.

Embedding Google Map

1. Go to https://www.google.com/maps.
2. Search for the business location that you wish to embed. If the business is not displayed on the map, click on the location to place a temporary marker.
3. From the left side of the screen click on the Share button. The share window will appear.
4. Switch to Embed a Map, copy, and paste the code into Notepad or similar text editor.
5. The code should look something like this:
   From the code, you’ll need just a section from the src parameter:

   https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1404.4050249588875!2d19.84487103460801!3d45.2516337246631!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x475b106bfad7e511%3A0xf54cc084a9f8e4cf!2sStartit+Centar+Novi+Sad!5e0!3m2!1sen!2srs!4v1566147396267!5m2!1sen!2srs
   

6. Paste that link into the Google Map embed field.
7. Save changes. And you’re done!

Contact message on form submits success is the message that will be displayed after the message from the site form is successfully sent.

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 the extended variants. If you need assistance on how to integrate additional variants, please submit a support ticket.

Footer Copyright

The Footer Copyright contains only one field where you can enter your own copyright text or credits. HTML code is not supported for security reasons.

Aperitive WordPress theme documentation, step 6: Useful CSS classes

With some additional CSS classes, you can modify styles 一 font sizes, colors, etc. for elements that are not covered originally with the Customizer. All CSS classes can be added to the theme CSS or to the Additional CSS section within the Customizer in the Aperitive WordPress theme documentation.

Site Title
To change title font size and/or alter color:

.site-title a {
font-size: 22px;
color: #fff;
}

Color change for hover event for site title:

.site-title a:hover {
color: #fff;
}

Main Navigation

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

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

Page Title

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

Single Post Title

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

Single Post Entry Text

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

Hide Search Icon

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