Ristorante documentation

Contents

Installation

To install this theme, simply make sure to have a correctly running copy of WordPress, and install then activate our theme.

Installing WordPress

If you haven’t set up your WordPress installation yet, you can grab a copy of latest WordPress version here. Next, go through the installation instructions inside the readme.html file and set up your WordPress installation.

If you are new to WordPress and have problems installing it you might want to check out this page.

How to setup your theme

This section covers the basic information to setup the theme in the same way of the online demo.

Installing the main theme

You can either choose to upload the theme to your server via FTP, or use the WordPress theme upload function. In either cases, please make sure to upload only the archive file named after the theme, contained in the main package you downloaded (e.g. if the main package is called “Theme v.1.0”, you want to upload the “theme.zip” file contained in it).

If you are new to WordPress and have problems with theme you might want to check out this page.

If you do not plan to use a child theme, you can then proceed activating the theme.

Installing the child theme

Even with the main theme installed, using a child theme is a good practice when it comes to our themes, as it ensures that you can get all the benefits from updating the main theme when a new version comes out, while retaining your own customizations.

Inside the main theme package you’ll find a ready to use child-theme package.

You can upload the child theme just like you were uploading or installing a regular theme. If you plan to use it, proceed activating it. Please note that the parent theme activation is not required when using child themes.

First steps after activating the theme

If you’re performing a fresh installation of the theme, upon activation you’ll be redirected to the theme’s welcome page where you’ll find a quick start guide to get your theme up and running, a collection of useful F.A.Q. and a list of the major theme features.

An help page containing the quick start guide and all of the F.A.Q. will always be available by clicking on the “Help” link in the upper right hand corner of the “Appearance > Theme Options” and “Appearance > Framework settings” pages.

Theme options are organized in tabs, each one of them covering a specific section or function of the website, and each option contained in a tab often comes with a little help text to clarify its usage.

If you want to return to the main options panel at a later time, you can find it under Appearance > Theme options, in the WordPress admin side menu.

Required plugins

A notice message above the theme options page will let you know what plugins are required for the theme, if any, and give you a quick way to install or activate them.

If you want to access the suggested plugins page for the theme at a later time, you can find it under Appearance > Install Plugins, in the WordPress admin side menu.

Suggested plugins

A notice message above the theme options page will let you know what plugins are suggested for the theme, and give you a quick way to install or activate them.

You can dismiss the suggested plugins message by clicking on the “Dismiss this notice” link inside the message box.

If you want to access the suggested plugins page for the theme at a later time, you can find it under Appearance > Install Plugins, in the WordPress admin side menu.

The theme has been designed to work best with the following plugins:

After the activation of the WooCommerce plugin a new tab specific for the plugin will be created in the “Theme options” panel with some dedicated options.

If you need assistance concerning the manual installation of plugins, you can refer to the official WordPress Codex page.

How to replicate the demo content

To load the demo content in your website, make sure to install the official WordPress Importer plugin.

After the plugin has been installed, go to the “Tools > Import > WordPress” page, and upload the dummy content XML file provided in the theme package.

Pub demo

To import the dummy content of the Pub demo, go and use the XML file you can find in the “Dummy/pub demo” folder of the main theme package you’ve downloaded.

After that, you’ll also need to import the provided backup file in the same folder, that sets up a series of global settings and customizations. You can do so by uploading the thb-dummy-pub.thb-backup file using the control located under Appearance > Framework settings > Import in the WordPress administration.

Restaurant demo

To import the dummy content of the Restaurant demo, go and use the XML file you can find in the “Dummy/restaurant demo” folder of the main theme package you’ve downloaded.

After that, you’ll also need to import the provided backup file in the same folder, that sets up a series of global settings and customizations. You can do so by uploading the thb-dummy-restaurant.thb-backup file using the control located under Appearance > Framework settings > Import in the WordPress administration.

After the dummy content has been uploaded, you’ll need to associate a menu to the theme defined menu locations (the main menu is usually called “Primary“).

You can then set a static page to be your website’s home: head over to the “Settings > Reading” options panel, then choose your new front-page from the “A static page” select option.

How to update your theme

Important: before beginning the update procedure, make sure to make a backup of the theme folder inside your WordPress themes folder, located in /wp-content/themes/your-theme.

Also, before downloading the updated package, make sure to read the version changelog and the list of changed files.

We strongly suggest to use the provided child theme, as it would not break the theme compatibility with future updates.

When updating, or when switching from a previous WordPress installation, we warmly recommend that you regenerate the theme’s Media Library items thumbnails: you can do that automatically, using a plugin like “Force Regenerate thumbnails”. Unused image sizes will also be cleared from your media library.

If you want to manually upgrade your theme you can follow these guidelines:

To update the your theme, re-download the theme, extract the zip file’s contents, find the extracted theme folder, and upload it using a FTP client to the /wp-content/themes/your-theme folder in your server. Beware: this will overwrite the old files! That’s why it’s important to backup any changes you’ve made to the theme files beforehand.

If you didn’t make any changes to the theme files, you are free to overwrite them with the new files without risk of losing theme settings, pages, posts, etc. Backwards compatibility is guaranteed. If you have made changes to the theme files, you will need to compare your changed files to the new files listed in the changelog below and merge them together.

Update plugins

How to update our plugins, if any of them is shipping with the theme:

In order to update a plugin bundled with our theme (for example “THB Portfolio”) you’ve to follow these steps:

  1. Go to “Plugins > Installed plugins”
  2. Deactivate the plugin (for example “THB Portfolio”)
  3. Delete the plugin
  4. Go to “Appearance > Install plugins” and install the required plugin (for example “THB Portfolio”)
  5. Activate the plugin

You can then check that the version number has changed in the “Plugins > Installed plugins” page.

You can view a quick video about “how to update a plugin” on our YouTube channel.

Options presets

Upon installing the theme, a series of presets is automatically loaded. This presets include general theme options and the demo skin.

If you want to backup your options and import them at a later time, please refer to the “Framework settings” section of this document.

Refresh the website’s permalinks

In order to avoid 404 errors, we suggest that you refresh the website’s permalinks. You can do so, by going to the Settings > Permalinks page, and hit “Save changes”.

Regenerating the media library thumbnails

This theme supports custom image sizes. Newly uploaded images are automatically resized, while previously uploaded ones aren’t.

If you come from a previous installation and have images in your Media Library, we warmly recommend that you regenerate the theme’s Media Library items thumbnails upon the theme installation or activation: this ensures that images used in the theme are sized properly according to the theme specifications.

To batch resize images in your Media Library according to the theme image sizes, you can use a plugin like “Force Regenerate thumbnails”. Unused image sizes will also be cleared from your Media Library.

Setting up the home page

By default the home page will display your latest posts. If you want to set a specific page to be your home page, you can do that in the WordPress reading settings (Settings > Reading), choosing the “static page” option.

In the WordPress reading settings (Settings > Reading) page, we recommend to leave the “Posts page” option under “Front page displays” set to blank, in order to avoid pagination isssues.

Images

Images will be imported into the Media library when you upload the dummy content xml. All images are from Unsplash licensed under CC0 license.

Image sizes

The theme define several image sizes that you can find in the config/config-general.php file:

  • add_image_size( 'micro', 80, 80, true ); // Used for related posts
  • add_image_size( 'thumbnail', 130, 130, true ); // system image size used also on page/post builder blocks and the food menu item
  • add_image_size( 'large', 930, null, true ); // system image size used also on page/post builder blocks and in the single attachment page
  • add_image_size( 'large-cropped', 930, 580, true ); // system image size used also on page/post builder blocks and in the single attachment page cropped with a 16:10 proportion
  • add_image_size( 'medium', 610, null, true ); // system image size used also on page/post builder blocks
  • add_image_size( 'medium-cropped', 610, 380, true ); // system image size used also on page/post builder blocks cropped with a 16:10 proportion
  • add_image_size( 'full-width', 1600, null, true ); // Used by the header extended and the blog extended layout
  • add_image_size( 'grid-large', 400, null ); // used by the grid layouts (photgallery, portfolio) on 3 and 4 columns configuration with the "variable" height option set
  • add_image_size( 'grid-large-cropped', 400, 400, true ); // used by the grid layouts (photgallery, portfolio) on 3 and 4 columns configuration with the "fixed" height option set
  • add_image_size( 'grid-small', 300, null ); // used by the grid layouts (photgallery, portfolio) on 5 columns configuration with the "variable" height option set
  • add_image_size( 'grid-small-cropped', 300, 300, true ); // used by the grid layouts (photgallery, portfolio) on 5 columns configuration with the "fixed" height option set

Please note that if you need to modify a specific image size value, or you’re experiencing weird looking blurred images (especially when using full width backgrounds or slides), you must remember to regenerate your Media Library thumbnails. You can do that automatically by using a plugin like “Force regenerate”.

Retina support

The theme supports retina images out of the box only for the website’s logo, the splash page logo and the page loader logo. If you have other needs concerning the appearance of images in devices with higher density, you can use a plugin such as WP Retina 2x.

Advanced setup

Here are some steps you might want to follow after setting up your theme.

Custom logo upload

Our themes come with the ability for you to choose an image or text as your main logo.

You can upload a graphic logo for the website, loading page or for the website on mobile displays from the “Logo & Images” tab in the “Theme options” page. If the field is left empty, a simple text logo will be used, which can be later styled in the theme Customizer. Please remember to load a properly dimensioned logo.

Menus

This theme supports the WordPress custom menus feature.

This theme has two custom menu locations for the main and the mobile navigation and offers a multi-level support.

To setup your custom menus, navigate to Appearance > Menus. Give your menu a name and build it up using the available items. To extend the available menu items, click the “Screen Options” tab at the very top of the screen and configure your options. Once you have built your menu, save it and assign it to a location.

For more info on the WordPress custom menu feature check this video tutorial, or refer to the Codex.

The register_nav_menus function is located in the config/config-general.php file.

Social links

Global links to social network pages can be set up under the “Social” tab in the “Theme options” panel. Each link must be a valid URL that points to the respective profile page on the social network.

In order for a link to be considered valid, it must begin with either http:// or https://.

After global social links have been set up and saved, the Theme options page must be refreshed. After refreshing the page, you’ll be able to select which social networks links will be displayed alongside the copyright text area on the bottom of the pages in form of icons, through the “Social networks in the footer area” option. The “Social networks in the header area” will help you display social icons in the header portion of the theme.

Please note that these links only provide a simple link to the various social networks profile pages, and do not offer any more structured integration.

Food menus

You can easily create food menus by accessing the Food Menus area in the WordPress admin.

Food menus pages feature the same layout options of the regular pages, conveniently grouped under the “Theme options” meta box.

In the “Food” tab of the “Theme options” meta box you’ll find the controls to create and style a food menu.

Food categories

The Food Menu custom post type is associated with a specific taxonomy called “Food Category”. While this taxonomy can be associated to a food menu, its entries can also the associated to the food menu dishes directly (see the Dishes section in this document).

Before a food category can be associated to a dish, it must be created in the “Food Menus > Food Category” screen in the WordPress admin.

Food menu organization

Each food menu is composed by a list of dishes, and the dishes can be subsequently grouped according, for example, to their type (e.g. Entrees).

The food menu can be displayed as a vertical list of groups and dishes, or it can be arranged in tabs, with each tab representing a particular group of dishes.

You can select which layout solution you want the food menu by selecting respectively “Regular” or “Tabs” from the “Menu display” options in the “Food” tab of the menu editing screen.

After you’ve chosed a layout for your menu, you can begin adding content to it, that is adding dishes, and organizing them by grouping them under “Dividers”.

Dividers

A dish divider is used to give a context to the dishes that are listed below it (e.g. Entrees, Desserts, etc.)

Dishes listed below a divider but before another divider or the end of the food menu form a group of dishes.

You can add a dish divider by clicking on the “Add divider” button in the “Food” tab of the menu editing screen.

A dish divider is composed by three different informations:

  • A title (e.g Entrees)
  • A subtitle
  • An appearance setting that defines how the dishes listed below the divider will be displayed. The possible values for the group of dishes display are:
  1. Regular, with the dishes listed one after the other
  2. Regular with images, with the dishes listed one after the other and displaying their own image, if set (see the information available for the single dish below)
  3. Two columns, with the dishes being arranged in a two columns layout, one after the other
  4. Two columns with images, with the dishes being arranged in a two columns layout, one after the other, and displaying their own image, if set
  5. Carousel with 3 columns, with the dishes arranged in a carousel component
  6. Carousel with 5 columns, with the dishes arranged in a carousel component
Dishes

You can add a dish by clicking on the “Add dish” button in the “Food” tab of the menu editing screen.

After clicking on the “Add dish” button you’ll be presented a modal window containing all the dish information. Clicking the “Ok” button at the bottom of the modal window will add the dish to the menu.

You’ll be able to open the dish editing modal window again by clicking on the dish name; also, dishes can be dragged around the menu and rearranged.

Dishes information in their editing modal window are divided into three tabs:

  • Options, containing data that will be displayed directly in the food menu page:
    • Dish name
    • Subtitle, ingredients
    • The food categories the dish belongs to (see the Food categories section of this document for more information)
    • Price
    • Picture
    • Highlight text, used to make one or more dishes stand out
    • URL, to make the dish link to a specific page in the website
  • Dish variants, also displayed directly in the food menu page
    • A dish variant is a particular variant of the dish that dictates a price change. For example, a medium sized burger could cost 5$, while a big sized burger could cost 8$. You can add variants by clicking on the “Add” button in the “Dish variants” tab, and the insert a label and a price.
  • By filling the fields in the Detail tab, the dish will feature a link that will open a modal window on frontend, to allow the dish to be better described. The title, subtitle and description fields are textual, the picture is decorative and will be shown alongside the text, and the key/value details will be shown in a table below the textual information.

Food menu builder block

After a food menu has been created, it can be also displayed in a different page using the Food menu builder block, provided by the theme.

When editing a page with the provided page builder, just select the “Food menu” block and make it reference the desired food menu in the “Select the food menu” option in the block editing modal window.

Events

You can create an Event page by associating the Event page template to it in the page editing screen.

Event pages feature the same layout options of the regular pages, conveniently grouped under the “Theme options” meta box.

In the “Event” tab of the “Theme options” meta box you’ll find the controls to define the event the page is promoting.

The event title is the title of the page, and you can also add a Subtitle, under the “Options” tab of the “Theme options” meta box.

The available event data are:

  • Date, the day the event takes place
  • Venue, a brief text field to illustrate where the event is held and its address
  • Price, the event price, if any

No matter if a sidebar has been selected in the Event editing screen, the specific event information will be displayed as a custom area on the side of the regular page content.

Recurring events

To create a recurring event, simply create an event that doesn’t have a Date set, but make sure you fill the “Subtitle” field under the “Options” tab of the “Theme options” meta box.

Event builder block

Single event pages can also be referenced from the Event builder block, by selecting the event page from the “Select the event” option in the Event builder block editing modal.

Event builder blocks can have a cover image that is displayed as a background for the builder block, and can also be set to cover the entire column width with the “Fill the column” option.

Events list builder block

To fetch a list of the events that have been created, you can use the Events List builder block.

You can select to filter Future events (e.g. events that have their event date field to a future date), Past, Recurring (see the definition of recurring event in the “Recurring events” section of this document above), or All, through the “Select the events” option in the Event builder block editing modal.

Events lists can also be displayed using two different layouts, List and Stripe. List will generate a simple events list, while stripe will also use the events featured images as backgrounds.

Open Table integration

The theme is compatible with the Open Table Widget plugin, which allows you to insert the Open Table reservation widget in one of the theme’s widget areas.

In order for the Open Table widget to have a dedicated skin that reflects the theme’s look and feel, you’ll need to make sure that the plugin it’s not loading its own style. To do so, go to Settings > Open Table Widget in the WordPress admin and check “Disable Plugin CSS”.

Layout

General options concerning the website layout can be found in the “Layout” tab in the “Theme options” page.

If you need to make specific customizations to the theme appearance, you can use the “Custom frontend CSS” textarea located under the “Custom CSS” tab in the “Theme appearance” page.

In pages and post-type entries, a box called “Template options” is entitled to manage all the options concerning the appearance of the page or post.

Pages

The theme features eight different page templates. Under the “Theme options” box in the page editing screen, you’ll find options to edit specific aspects of the page templates, such as:

  • Page subtitle as long with its position,
  • Disabling the page title and subtitle by checking the “Disable page header” checkbox,
  • Page header alignment,
  • Page width.

The available page templates are:

  • Default
  • Blank page, with no header or footer
  • Blog, a regular blog
  • Blog grid, a grid-like blog layout
  • Blog extended, a vertical blog layout with extended images
  • Event, a page displaying event information (see the Events section of this document)
  • Home Page, an home-page preset
  • Photogallery, a grid-like layout to display a gallery of pictures

Layout builder

The Layout Builder is a tool to easily build custom layouts, and you can find it under the “Layout builder” metabox in the pages’ editing screen.

The Layout builder content is essentially a block of custom contents that is injected in the page, usually below the regular page extended text. The Layout builder content is divided in horizontal regions called “sections”, each section can have multiple “rows”, each row can be formed by multiple “columns” of various widths, each one of them containing a variable number of “blocks”.

Here we’re going to briefly describe how the Layout builder works in the page editing screen of your admin backend.

Sections

First off, you can create sections by clicking on the “Add section” button in the “Layout builder” metabox.

Sections are meant to be portions of content that are distinct from one another, hence they have specific options concerning their appearance. You can access the appearance options hovering on the section, and clicking on the “Section appearance” control in the upper right hand corner: they can either be boxed or extended, with the content being limited to a central portion of the screen, or extending to the viewport’s edges.

Each section can also have a background assigned, that will stretch for the entire width and height of the section.

Sections, as well as columns and blocks, can also be specified with their own custom CSS class of your choice, so that you can hook to it via the custom CSS textarea of the theme’s admin panel.

Rows

You can add a new row to a section by clicking on the “Add row” control in the upper left hand corner of the section. Please note that rows can be dragged up or down within their own section, but they can’t be dragged to another section.

Columns

After inserting a row, you’ll be able to add columns. As a matter of fact, look for the “Add column” label in the row block that you just added, and you’ll be presented with a set of viable options concerning the width of the column you’re about to add. The theme supports widths from one fifth (20% of the available width), to 100%.

Going over a column with your mouse will show various options concerning the column: reduce or enlarge the column width (if possible), clone the column with its contents and alter the column appearance.

Columns as carousels

Concerning the column appearance, by clicking on the cog icon a modal window will be shown with various options. It is worth noting that each column can also be displayed as a carousel, with the blocks contained in the column being the carousel items. You’ll find various options to control the column carousel appearance, as well as the column CSS class, in the Column appearance modal.

Blocks

After creating a column, you’ll be able to add blocks to it by clicking on the “Add” button at the bottom of the column. After clicking the control, you’ll be shown a modal listing all of the available builder blocks. After selecting the block you want to add, you’ll be shown the block editing screen.

Blocks can be dragged around columns to alter their order, even within columns that are not part of the same row.

Note: if for some reason a block is present in the page configuration but not installed (e.g. it’s declared by a plugin and such plugin is not active), the block will be presented in a “disabled” state, and will not be shown on frontend. You’ll need to activate the plugin in order to make the block appear.

Icons

Some blocks support icons as decoration. Icons are generated through the Fontello web service, and most of them are taken from the Font Awesome package. In order to allow the system to support also other packages in the future, we’re not following the Font Awesome naming convention for icons; instead of prefixing them with fa fa-code-of-the-icon, the following syntax should be used: icon-code-of-the-icon.

Sidebars

Custom sidebars can be created from the “Theme options > Sidebars” section

Sidebars are actually not available on the 404 page.

Footer

The theme can display a footer section at the bottom of all the pages. The section can be structured to have a number of columns of different widths. The Layout option under the Footer heading will allow you to choose both how many columns you’re going to have in the footer and their dimensions.

Selecting the “None” option will disable the footer area entirely, while selecting a column configuration will automatically create a new WordPress Widget Area. A widget area is a section of the page which can be filled with widgets, which are little, reusable and configurable bits of contents. To learn more about widgets, you can refer to their WordPress documentation page.

Footer widget areas are named as “Footer column #”, and can be edited under the Appearance > Widgets section of the WordPress administration.

Responsive

The theme has been designed to adapt itself to various screen sizes, like the ones used by tablets and phones. In order to get the most out of the theme even on these kind of devices, make sure to enable the appropriate responsive feature, in the “Responsive” section of the “Layout” tab.

Customizer

This theme supports the WordPress native theme customization panel, available from version 3.4. Theme customization allows you to edit the appearance of your theme.

Options are conveniently grouped in layout sections, and a number of controls that allow the modification of fonts and colors are available.

If you want to backup your skin and import it at a later time, please refer to the “Framework settings” section of this document.

Fonts

A large number of selected fonts from the Google Web Fonts library is available for you to use in the theme Customize screen.

From the “Theme appearance” page you’ll find advanced font settings.

Fonts imports

Here you can add your Typekit kit ID or include code from other external fonts web services like Fonts.com, Fontdeck, etc.

Typekit kit ID

Paste you Typekit kit ID in order to use your Typekit fonts directly on in the WordPress Customizer. You might want to read more about how to create a kit on the Typekit website. Please remember to always add your development domain to the Typekit kit domains list. You can read more about this topic here and here.

External import code

You can use the “External import code” textarea to add the code needed by your webfont service in order to import its custom fonts.

Fonts in use

Here you can choose to refine your font variants. Variants can then be used in the “Custom frontend CSS” textarea on the “Custom CSS” tab.

For each font family imported in the theme you’ll find a reference to the CSS selector in use for that family. Clicking on it will automatically select the whole selector, so that you can copy and paste it in the “Custom frontend CSS” textarea or in your external CSS file.

Custom fonts upload

If you want to use your own font, create a new font-face kit using the font-face Kit Generator from Font Squirrel or download an already created Font Face Kit and upload it under the Custom fonts upload tab of the Theme appearance page. You’ll then find your newly uploaded font in the fonts selection dropdown menu.

Post formats

This theme supports the following post formats:

  • Aside
  • Gallery
  • Link
  • Image
  • Quote
  • Video
  • Audio

Some post formats feature specific options; if the selected post format needs a more specific control, an additional metabox will appear right under the post title in the post editing screen.

Framework settings

The “Framework settings” page is intended to offer advanced control over the installation of the theme, allowing for admin customization and data backup and restore.

Advanced

In the “Advanced” tab of the “Framework settings” page, you’ll be able to optionally compact theme’s Javascript files on frontend. This is particularly useful as it noticeably increases performance, and doesn’t force you to use a plugin just for that.

Super users

A Super user is a registered administrator that can edit the Framework settings. By default, all admins can edit the settings contained in this page, however it is possible to restrict the access to it only to a selected group of admins.

To do this, simply fill the “Super users” field with a comma-separated list of the usernames you want to allow access to the “Framework settings” page.

A particularly useful note about customizing the theme for your client: by specifying a Super User you’ll also disable all theme updates notifications to non-super users.

Please note The “Super users” field will be displayed only if there is more than one user registered.

Admin customizations

If you want to add some extra CSS to the WordPress Administration area and in the WordPress Login page or modify the login logo, you can do so from the “Framework Settings” page under the “Admin customizations” tab.

Export and import

The theme offers the ability to export and backup your options and customizations to the theme’s appearance. Backup is handled through the Export tab which will prompt you to save a file with “.thb-backup” extension upon submit.

If you want to import your options at a later time, simply open the Import tab, and upload the previously saved “.thb-backup” file. Please note that this will completely overwrite your options/skin settings.

Dummy content removal

If you’ve imported the contents from the WordPress exporter XML file, you may want to remove them once you’ve set up your theme. To do so, just open the “Dummy content” tab in the “Framework settings” options page, and select which imported contents you want to remove.

FAQ

An extensive collection of F.A.Q. is included in the theme option panel, on the Welcome page and from the red link called “help” under “Appearance > Theme Options” and “Appearance > Framework settings” pages.

Support

In order to keep valuable information organized, and to provide a better service to our users, please note that support is offered on our Support platform only. Support requests submitted via either comments on the item’s page on ThemeForest, or via email, will all be redirected to the forum.

Before opening a report please make sure to read our policy about “How to ask for support”, then go through the appropriate forum which is the one specifically dedicated to the product you bought, and click on the green “Report a bug” button.

Note If you have some issues with the theme and you have installed additional plugins, please disable them first and check if the issue persists.