Meza

Getting Started With Meza

First, I’d like to thank you for purchasing Meza.

Meza is a restaurant theme that can be adapted to any type of restaurant business. You can definitely use it for any other type of business as it offers many features, customizations, and e-commerce tools. This guide will help you get started using our Meza theme for WordPress.

 

What does Meza mean?

The full word is actually mezze/meze and comes from Middle Eastern origin. In Lebanon, the variation meza is used and holds the same informal meaning, a type of entrée where lots of platters are served in a sequence, in preparation for the main dish. It is common for a meza to be a full meal as lots of dishes are served. We chose Meza as it’s easier to pronounce. Note that the Z is pronounced as a “zed” and not as an “s”, and this Arabic word does not mean “table” as it does in the Spanish word, mesa.

 

Note 1: To update this theme, follow our documentation: https://www.organizedthemes.com/documentation/how-to-update-your-theme/
Note 2: To install our demo content, follow our documentation (ensure that you’re reading the Meza section): https://www.organizedthemes.com/documentation/how-to-install-demo-content/

 

Table of contents

    1. Install Helper Plugins
    2. Create Home and Blog Pages
    3. Meza Options
    4. Customizer
    5. Navigation Menus
    6. Food Menus
    7. Page Builder
    8. Shortcodes
    9. Contact Form Setup
    10. Troubleshooting

 

Install Helper Plugins

When you activate the theme, there will be a banner at the top of your admin area requesting that you install and activate a few plugins, if they aren’t installed yet. It’s suggested that you install these for the best experience. They are:

  1. WooCommerce
  2. Organized Themes Addons (it adds extra features to Meza and the WPBakery Page Builder)
  3. WPBakery Page Builder
  4. Redux Framework (also known as Redux – this is a required plugin for Meza Options)
  5. Breadcrumb NavXT
  6. Contact Form 7
  7. Envato Toolkit Master
  8. Widget Importer & Exporter

WooCommerce is optional, but is the recommended system if you need an e-commerce for physical products. For digital products, consider Easy Digital Downloads.

Meza is built with support for WooCommerce, and when the plugin is active, it will add some additional options for your site. If you don’t need e-commerce on your site, you can completely skip using it.

 

Create Home and Blog Pages

By default WordPress displays your latest posts on the front page of your site. To display something else, go to the pages section in your dashboard and create a new page. Give it a name like “Home” and publish it. If you’d like to have a blog on your site, go on and create a page for it as well and publish it.

Then, go to the Settings section in your WordPress dashboard and click on Reading. At the top of this screen you can set what your front page displays. Choose the static page option and then the select your homepage from the drop down. Choose your blog page as the “posts” page and save your changes. That will give you a static page for your homepage.

You can also set this up in the customizer. There is a section there called “Homepage Settings” where you can set the homepage and blog page for your site.

 

Meza Options

Here is where most of Meza’s options reside. You can edit many theme options here. To get to Meza Options, go to your WordPress dashboard and click Meza Options.

You can use the Import/Export feature in Meza Options to import/export options later on when you do save a backup.

We’re still typing this section for Meza Options, but so far, most settings are straightforward.

 

Per Page Options

Tip: Most sections (Pages, Posts, Menus, etc.) in WordPress have a “Screen Options” located at the top right. Expanding that allows you to control how many items you want per page/post, and the sections/boxes that appear on that page/post.

Every page and post have their own settings.
When you create or edit a Page, you will find the following options:

Page Attributes (right side): Default Template or Custom Template. Our Default Template is the one you will most probably be using as it has our layout pre-built, such as the header, footer, images, etc. The Custom Template is more of a blank page, enabling you to add your own layout and content the way you want, without much help from our theme.

Page Options (bottom):

  • Layout: Choose between a full width (content using nearly the full width of your screen), sidebar (having a sidebar where you can add widgets), or default.
  • Header: Lets you override the default header style, navigation menu font color, and logo chosen in Meza Options, to have your own choice for that page.
  • Breadcrumb: Turn on or off the breadcrumb (the links that enable you to see where you are currently located in your website, such as Home > About). Turning this off also hides the top background that is behind the breadcrumb. To hide all breadcrumbs in one shot, go to Meza Options > Layout and choose Off next to Breadcrumb. You can also override the breadcrumb image, animation, and animation delay that are in Meza Options > Layout.
  • Footer: Lets you override the default footer style and logo chosen in Meza Options, to have your own choice for that page.

When you create or edit a Post, you will find the following options:

Post Options (bottom) – these override the default settings in Meza Options, both Blog and Logo options:

  • Animation: Select the animation you want. Click on X to remove it.
  • Delay: Choose the time it takes for the page to show up. When it shows up it animates using the Animation chosen. Enter a number in milliseconds. Example: 3000. Don’t enter anything in this field to have it show up and animate immediately.
  • Navigation Font Color: Lets you override the default navigation font color for that individual post that is chosen in Meza Options > Header.
  • Default Header Logo: Lets you override the default logo for that individual post that is chosen in Meza Options > Logo.

 

Customizer (found in your WordPress dashboard > Appearance > Customize)

The customizer is where you’ll set some theme options and customize a part of the appearance of your site. It’s broken up into sections to keep items organized. Some of these sections (Menus, Widgets, Homepage Settings) are added by the WordPress core. Others can be added by plugins.
To fully customize your site, after going through the Customizer, go to your WordPress dashboard and click on Meza Options. This gives you a lot more options for and control over your site.

Meza adds several sections to help you customize your site. Here’s a quick run down of what’s in each section:

  • Site Identity: Add your titles and Site Icon (Favicon, which appears next to browser tabs, though we suggest setting that up in Meza Options > Logo > Favicon).
  • Colors: Header and background colors.
  • Header Image: Doesn’t do anything for the moment.
  • Background Image: Add a background image for when you use a Custom Template when creating a Page.
  • Menus: We removed this menu from the customizer. To edit the navigation menu, go to Appearance > Menus.
  • Widgets: If a page, post, or category accepts widgets, you can navigate to that page and add a widget using that section.
  • Homepage Settings: Choose how you want your homepage to be displayed. Posts only? Or choose Static page to select your Homepage and Posts (Blog) page.
  • WooCommerce: If WooCommerce is active on the site, this section will appear to allow you to customize various aspects of the shop.
  • Additional CSS: Add your own CSS code. What you add here will not get erased when you update your theme.

The customizer allows you to make changes and see them live before your visitors see them on the live side of your site. It’s a great way to set things up without affecting the front until you publish your changes.

 

Navigation Menus

The easiest way to create a navigation menu is inside the WordPress customizer. Just click on the “menu” section there (it’s for navigation menus and not food ones) to get started. Here’s a quick video that can walk you through that:

Meza has one navigation menu locations. The MainMenu location is in the header on the opposite side of the screen from the logo. It is a mega menu type of menu that allows you to have multiple columns, images, text, links, and more.

The Footer can have menu items and other content (text, images, etc.), and you can control that by using HTML in Meza Options > Footer.

 

Food (Menu)

To organize your menu, each food item needs to be placed in a menu category. Start by creating your categories in the WordPress dashboard > Food Menus > Menu Category. Make sure to add a Description, Featured Image, and Cover Image.
The Featured Image shows in menus like this one: https://demo.organizedthemes.com/meza/menu-parallax/
The Cover Image serves as an icon/tab image as seen here (you can also use colored images instead of icons): https://demo.organizedthemes.com/meza/tab-menu/

To create the food menu for your restaurant, you would go to the Food Menus section that is listed on the left hand side of your WordPress dashboard. To add a new item, click the button at the top there that says ‘Add New’.

At the top of the next screen, enter a title that will server as the food name. Below that is the main content box where you’ll place the description of the food item.

Below that, in Food Menu Options, you’ll see a field for the price. You can move the Food Menu Options to the right, if it helps you. You can enter anything you’d like here. It can be a simple number or even multiple items like this:

12.50 | 15 | 20

To enter a different currency, or to remove it, navigate to Meza Options > Food Menu. You can also change the currency position between left and right.

To add a food menu item to a category, while creating or editing a food item, look below the Publish box and you’ll see the box for Menu Category. You can click the checkbox to check the category or categories that you want.

if you’d like denote different prices based on sizes for example. We’ve set this up to be flexible so you can set your menu and pricing as you’d like to.

 

Page Builder

To have maximum flexibility in building your pages, Meza includes the WPBakery Page Builder plugin and the Gutenberg Block Editor. You can still use the Classic Editor with Meza.

We already paid for a developer license for this plugin, so you do not need to buy it even if that plugin mentions it in your dashboard. Buying a license will give you updates quicker so that you don’t have to wait for us to update our theme. It’s your choice. We will try our best to keep it updated so long as the company that owns that plugin keeps it up-to-date.

The WPBakery Page Builder replaces your default WordPress content builder with a different editor while giving you the choice to still switch to other editors. It separates your content up into rows which are then filled with widgets in the number of columns you choose.

In Meza, we’ve created multiple modules/widgets to add functionality to help build your site and to also offer some additional design options. Here is a list of the Meza Modules (widgets) that we built for WPBakery Page Builder and Meza – note that every widget has its own settings and configuration:

Meza blog – displays a list of blog posts.
Meza food menu – displays your food menu(s) in your chosen style.
Meza heading – add a heading either above texts or over images in your chosen style.
Meza Google Maps – Add a Google Maps map of your location using your latitude and longitude (can be acquired from Google Maps’ website).
Meza about us – add a heading, subheading, text and an image to display your about us information.
Meza open hours – displays your hours of operation in an elegant way in columns (and images, if added).
Meza video lightbox – make videos pop-up in a lightbox.
Meza testimonial – displays testimonial slider.
Meza gallery – add photo galleries.
Meza services – displays your custom services in your chosen style in columns.
Meza contact info – displays your contact information.
Meza space divider – separate sections based on the amount of pixels you choose.
Meza chef view – displays a list of your chefs.
Meza event – displays your events.
Meza slider – add a slideshow anywhere that displays any images you want and a call-to-action button.

In addition to the above widgets, see our shortcodes section on this page to learn how to add the above without using the page builder (it must still be installed and activated for some of them to work but does not have to be used on a specific page and/or post).

Let’s look at how the front page of the demo is made.

  1. Create a Page

    Start out by creating a page. At the top of the main content box, you’ll see a button that says “Backend Editor”; click on that. Now, you’ll see the page builder interface instead of the default WordPress one. Start out by clicking on the “Add Element” button and then Row to create your first row. Then, click the plus button and add a Text Block. Alternatively, to quickly input a row along with a text block to enter text, click the Add Text Block. You can then hover over the text block and click the edit button to begin entering your content.

    You can also use the Frontend Editor instead of the Backend Editor. This enables you to see your changes live and behaves as if you’re editing your site in real time as you will see your layout.

  2. Create your columns, if needed

    Now that you’ve inserted your first row, you’ll see a button on the left side that, when hovered upon, displays various column presets. You can also click Custom to set your own. The default you’ll see is one but you can choose among various number of columns. Realistically, you’ll want to choose a number between 1 and at most five or six. You can change this number later if you’d like to.

  3. For more information, please visit WPBakery Page Builder’s documentation.

Any of these options can be changed at any time so feel free to experiment.

Note: To replace the main top image, first you have to decide if you want to keep the Breadcrumb or not as having the Breadcrumb set to On will use the background image that you set in Meza Options > Layout.

If you keep the Breadcrumb On, you can keep disable it per page in Page Options when editing that page

In the top row, top right of the builder, click on the pen icon to edit it (to ensure that it’s the row and not a column that you’ll be editing, hover over the pen icon and the “Edit this row” text should appear). Row Settings > Design Options > below background, add an image there, and below the image, where Theme defaults is, click on that and choose Cover, Contain or one of the others. Save.
Then, scroll down to Page Options > Breadcrumb and choose Off.
Update the page.

That finishes up the introduction to the page builder. It’s a very flexible tool that you can use to create a unique layout for your website.

Alternatively, switch to either the Block Editor or the Classic Editor to build your pages, or choose your own page builder like SiteOrigin Page Builder, Elementor, Beaver Builder, or any other. You will, however, lose the many features that we custom built into the WPBakery Page Builder.

 

Shortcodes

This is a list of shortcodes that work in Meza. WPBakery Page Builder must still be installed and activated for the following shortcodes: meza_food_menus, meza_open_hours, meza_sliders, meza_video, meza_gallery, meza_services, and meza_product_categories. The rest do not need it to be active. We’ll also show some shortcode variables as examples of what you can achieve with them. You can modify them as you see fit by adding your information between the quotation marks, and remove the ones that you do not need. You can safely remove the notes in the shortcode, such as /* Image ID */.

When an image/img number is required, you will need to get the ID from the Media page. Click on an image and look at the URL where it says either item or post followed by a number. That number is the ID.

For any meza_style value, make sure to enter the word and not a numerical value. E.g., “two” and not “2”.

  1. Display blog posts: [meza_blog]
    1. Shortcode variables – Display blog posts in 2 columns with a limit of 4 per page and display pagination so that users can change pages: [meza_blog meza_columns="2" meza_limit="4" meza_pagination="yes"]
  2. Display food menus (note: there are nine food menu styles): [meza_food_menus]
    1. Shortcode variables: [meza_food_menus meza_styles="one" meza_columns="3" meza_limit="-1" taxonomie="slug1, slug2" meza_pagination="false" meza_menu_img="ID_OF_MEDIA" meza_btn="false" meza_animation="" meza_delay="" /]
  3. Display a heading (note: there are seven heading styles): [meza_heading]
    1. Shortcode variables: [meza_heading heading_style="one" meza_heading="" meza_content="" meza_animation="" meza_delay="" /]
  4. Display Google Maps: [meza_google_maps]
    1. Shortcode variables: [meza_google_maps meza_lat="" meza_long="" /]
  5. Display an introduction message (“about us”) (note: there are two introduction styles): [meza_introduction]
    1. Shortcode variables: [meza_introduction about_style="one" meza_heading="" /* text as heading */ meza_sub_heading="" meza_content="" meza_left_img="" /* Image ID */ meza_sign_img="" /* Image ID */ /]
  6. Display your hours of operation: [meza_open_hours]
    1. Shortcode variables: [meza_open_hours meza_columns="2" meza_open_hour="[{"meza_heading":"Friday and Sunday","meza_content":"Open from 10 AM - 11 PM","meza_number":"+123456789","meza_website":"demo.organizedthemes.com/meza","meza_bg_img":"256"},{"active":"active","meza_heading":"Monday - Thursday","meza_content":"Open from 11 AM - 10 PM","meza_number":"+123456789","meza_website":"demo.organizedthemes.com/meza"}]" /]
  7. Display a video (note: there are two video styles): [meza_video]
    1. Shortcode variables: [meza_video video_style="one" meza_animation="fadeInRight" meza_link="https://www.youtube.com/watch?v=xB6XrSYAg2E" meza_img="261"]
  8. Display testimonials: [meza_testimonial]
    1. Shortcode variables: [meza_testimonial testimonial_style="one" meza_limit="3" meza_animation="fadeInUp" /]
  9. Display a gallery with selected images (note: there are two gallery styles):[meza_gallery]
    1. Shortcode variables: [meza_gallery gallery_style="one" meza_gallery_item="[{"meza_link":"#","meza_img":"276"},{"meza_link":"#","meza_img":"277"}]" meza_animation="fadeInUp"]
  10. Display services: [meza_services]
    1. Shortcode variables: [meza_services meza_columns="4" meza_service="[{"meza_heading":"WINE CLUB","meza_img":"286","meza_content":"Meza is a restaurant, bar and coffee roastery located on a busy corner site in Farringdon.","meza_animation":"fadeInUp"},{"meza_heading":"AWARDS","meza_img":"289","meza_content":"Meza is a restaurant, bar and coffee roastery located on a busy corner site in Farringdon.","meza_animation":"fadeInUp","meza_delay":"100"},{"meza_heading":"OUR TEAM","meza_img":"288","meza_content":"Meza is a restaurant, bar and coffee roastery located on a busy corner site in Farringdon.","meza_animation":"fadeInUp","meza_delay":"200"},{"meza_heading":"OUR SOURCES","meza_img":"287","meza_content":"Meza is a restaurant, bar and coffee roastery located on a busy corner site in Farringdon.","meza_animation":"fadeInUp","meza_delay":"300"}]" /]
  11. Display contact info: [meza_contact_info]
    1. Shortcode variables: [meza_contact_info meza_heading="Contact information" meza_address="1 Meza restaurant street" meza_phone="+0123546789" meza_email="info@mezarestaurantWP.com" /]
  12. Add a divider with your chosen height: [meza_divider]
    1. Shortcode variables: [meza_divider divider="30"]
  13. Display chefs (note: there are three chef styles): [meza_chef]
    1. Shortcode variables: [meza_chef chef_style="three" meza_limit="3" meza_animation="fadeInUp" taxonomie="31" /]
  14. Display events (note: there are two events styles): [meza_events]
    1. Shortcode variables: [meza_events event_style="two" meza_limit="1" meza_left_animation="fadeInLeft" meza_right_animation="fadeInRight" /]
  15. Display a slider with selected images (note: there are nine slider styles): [meza_sliders]
    1. Shortcode variables: [meza_sliders slider_style="eight" meza_slider_six="[{"meza_image":"511","meza_heading":"Let's start the day
      with a cup of coffee","meza_content":"Espresso & House Blend Coffee","meza_btn":"url:#|title:Explore Now||","meza_img":"512"},{"meza_image":"511","meza_heading":"Let's start the day
      with a cup of tea","meza_content":"Tisane, herbal tea","meza_btn":"url:#|title:Explore Now||","meza_img":"1108"}]" meza_btn="url:/meza/reservation/ |title:Book a Table||" /]
  16. Display a WooCommerce product category (note: there are three product category styles): [meza_product_categories]
    1. Shortcode variables: [meza_product_categories style="one" per_page="12" number="" orderby="name order="ASC" product_orderby="title" product_order="desc" hide_empty="1" parent="" ids="" category="" operator="IN" /* Possible values are 'IN', 'NOT IN', 'AND'. */ meza_image="" meza_btn="" meza_animation="" meza_delay="" main_tab_name="" /]

 

Contact Form Setup

Make sure to set up your contact forms or else no emails will be sent. You can set them up in your WordPress dashboard > Contact > Contact Forms. Edit all 3 and modify the information in there, especially the Mail tab. You can opt to use another contact form, such as Gravity Forms, Ninja Forms, or others.

 

Troubleshooting

  1. The Meza Options menu is no longer visible.
    Make sure that the ‘Redux Framework’ plugin is activated. It’s also known as “Redux”. Do not deactivate it if you intend on using Meza and Meza Options.

 


If you have any questions about using Meza, please contact us and we’ll be happy to help.

Organized Themes

As the owner of Organized Themes, I'm here to help you create a fantastic website. Let me know how I can help.