Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to e-mail us. Thanks so much!
The table of contents (left sidebar) should help get you started so you can jump to the section you need help with. We have included tons of screenshots throughout this file in an attempt to make finding your answers as easy as possible.
Please make sure that your system meets minimal requirements:
- PHP 5.2 or newer
- Mysql 5.x
- The Theme is compatible with following versions of WordPress: 3.1 or newer
- mbstring PHP extension installed on your server.
This WP theme was tested on following Web browsers:
- IE 8.0+
- FF 3.6+
In Order to install the theme please follow these steps:
Step 1) Install new instance of a wordpress. (Check for supported versions)
If you did not installed WordPress yet go ahead and do so now. Many webhosts like GoDaddy provide utilities to automatically install wordpress for you as a value added application. If not, no worries, wordpress is very easy to install. Infact the WordPress site actually has tutorials walking you through how to set it up.
Step 2) Uncompress the file (.zip) downloaded from ThemeForest. Uncompressed file will have following structure.
│ ├── demo-xml.xml - Demo content XML file.
├── Help Files/
│ ├── assets/ - Images, mostly screenshots.
│ ├── help.html - Help file
│ ├── mazzareli-html.v1.0.zip - Mazzareli HTML templates
│ ├── mazzareli-psd.v1.0.zip - Mazzareli Photoshop files
│ ├── readme.txt
│ ├── license.txt - License Agreement
├── changelog.txt - All changes made on this theme.
├── mazzareli-wp-theme-v1.0.zip - Mazzareli WordPress Theme (this file should be uploaded)
Step 3) In order to install Mazzareli theme you need to upload .zip file called "mazzareli-wp-theme-vX.X.zip. Navigate to the page shown below and upload the theme file.
After succesfull uploading you should see screen like this. Press Activate link to activate the theme.
Congratulations! You have installed and activated the theme.
At this moment you can proceed with entering your content and/or import demo content which is included with this theme.
Importing Demo Content
We have created demo content that you can import into your WordPress installation, so you can hit the ground running! Pages for all the available layouts, shortcodes, blog posts, galleries and custom post types (Testimonials, Products, Events) have been setup in this XML file. All you have to do is import it. Steps are outlined below with screenshots. This step is not mandatory.
Demo content file is placed in Demo folder. To import data follow this steps.
In case you have already installed and activated a WordPress Importer plugin Wordpress will show this screen.
Otherwise you will be redirected to the install plugin page. Install the plugin and activate it.
Now you need to select demo content file from your computer and press button "Upload file and Import". Following screenshot will appear. Make sure you've selected option "Download and import file attachments". Press Submit button.
Slider data and data related to widget are not a part of demo content. It is to say sliders and widgets should be created manually.
In order to setup homepage with slider we need to create one. Please follow this steps.
Create a new page. See screenshot below.
Select a homepage template as shown on picture below.
Save page. Next thing to do is to tell WordPress that we want this particular page to be set as homepage. If you named newly created page "homepage" it will appear in selectbox (3). Select it. See picture below.
Homepage is finished. At this moment there is no slider. We need to create one. For more details about creating an slider please navigate to the slider section of this document.
Permalinks and .htaccess
These settings are not mandatory but we recommend you to create
.htaccess file and to copy this file in wordpress root directory. Also it is good practice to change default Wordpress option related to permalinks. By default WordPress creates links like this:
These links are not nice, not userfriendly and are not SEO optimized. It is much better to have links like this:
Changing permalinks format screenshot.
In case you do not have a
.htaccess file WordPress will try to do it for you and probably will fail. The reason for this is file permissions.
Wordpress will not be able to create/write new file to your server. Generaly speaking there are two approaches to handle this. To set write permitions on WordPress root directory and repeat steps for creating nice permalinks or to create it by yourself. Both approaches have the same result but do not forget to unset write permitions on root directory.
Purpose of this section is to show you how and what the theme works with images uploaded by the user (you).
Uploading and inserting images in WP is easy and intuitive. Let's say user friendly. All you need to do is to navigate to WP Media Center and follow the interface.
It is important to know that the theme makes about 10 versions of an uploaded image (do resizing and cropping). Why is that? Well we tought that it is very useful to upload an image once and to use it multiple times in different situations. For example the slider requires three image sizes, posts also have a few templates and require other image sizes, menu card, galleries, etc... It is to say one image can be used in many different situations.
In order to cover all use cases we recommend use of images with following size : 1024x768px or bigger. Image of this size will fit all use cases. Of course images can be bigger then the mentioned one. In case you need some picture only for a post and will not be used for a slider than it could be smaller.
Automatic cropping and resizing images
Automatic cropping and resizing is very handy and speed up content management a lot but sometimes there will be badly cropped one. In this cases the image must be cropped/resized manualy. Do not forget that
WordPress have all you need to do it. For more info check this link.
Of course you can always resize or crop an image in your favorite image editor and upload it.
Let's see want this theme brings that is not included in a standard Wordpress Instalation and is related to pages.
- Sidebars Metabox
- List of 19 different templates
See screenshot below
Sidebar metabox controls what sidebars should be shown at particular page. You are able to select No Sidebars, one or many sidebars to be shown at particular page.
Notice! Some templates does not allow sidebars. For example if selected a template without sidebar or "Homepage Template" the sidebar metabox options does not affect these templates.
Page templates overview:
- Default Template - Default page template without sidebar.
- Page with right sidebar - Page template with sidebar on the right side.
- Blog 1 Column template - Have sidebar. Shows list of posts.
- Blog 2 Column template - Does not have sidebar. Shows list of posts.
- Blog 3 Column template - Does not have sidebar. Shows list of posts.
- Blog 4 Column template - Does not have sidebar. Shows list of posts.
- Blog big list template - Does not have sidebar. Big pictures, title and excerpt on the left. Shows list of posts.
- Blog medium list template - Does not have sidebar. Medium pictures, title and excerpt on the left. Shows list of posts.
- Blog small list template - Does not have sidebar. Small pictures, title and excerpt on the left. Shows list of posts.
- Book a table template - Has sidebar. Before publishing this page you need to setup contact info in theme's administration panel. This topic is cover in Theme's administration panel section.
- Chef page template - Page about Restaurant Chef.
- Contact template - Has sidebar. Before publishing this page you need to setup contact info in theme's administration panel. This topic is cover in Theme's administration panel section.
- Copyrights template - Page with this template should contain text about copyright.
- Event template with sidebar - List of events. Has sidebar.
- Event template without sidebar - List of events. Does not have sidebar.
- Menu page - Menu card page. Before publishing this page it is recommended to create products(meals) and theirs categories (Main Dishes, Breakfast...)
- Testimonials template with sidebar - Create testimonials first and that create a page with this template. Has sidebar.
- Testimonial template without sidebar - Create testimonials first and that create a page with this template. Does not has sidebar.
Beside these templates WP requires default templates for single post, blog, categories... Those templates are not at the list because only WP can use them. All those templates have sidebar section.
Create / Edit a Post
Let's see what additional options do we have when creating a posts. Follow screenshots. Make sure that Sidebar Meta box is enabled by thicking "Sidebars" and "Custom Fields" at the Screen Options panel
You have planty options at Shortcodes for customizing your page.
All of your shortcodes have been built right into the WordPress text editor. A screenshot has been provided below. Just click on the shortcode you want to add, configure the settings for that shortcode from the pop-up window and click Add Shortcode. This will drop the shortcode right into your text editor. Update your page or post, and your shortcode will show up on your page. In the Demo XML content we have created demo pages for each shortcode, so you can open up any of these pages to view the shortcodes. Some shortcodes can be simply injected to a post or page. On the other hand there are also advanced shorcodes which require parameters. For example, to add gallery shortcode click last icon at screenshot.
A description of shortcode buttons follows. We start from left to the right.
- Unordered List - This is not a shortcode. It generates good old HTML.
- Headings - Select a text in text editor and then select particular Heading option.
- Mark shortcode - Marking a text. Select a text in text editor and click this button.
- Devider - Insert dotted devider.
- 1/2 - 1/2 - Split page in to two columns.
- 1/3-1/3-1/3 - Splits page to three colums.
- 1/3-2/3 - Split page in to two columns. Second one is twice in size of the first one.
- 2/3-1/3 - Split page in to two columns. First one is twice in size of the secont one.
- 1/4-3/4 - Split page in to two columns. First one is forth in size of the secont one.
- 1/4-1/4-1/4-1/4 - Split page to four columns.
- BlockQuote - Select text and press this button to create a blockquoted text.
- Left Quote - Quotes text and moves it to the left.
- Right quote - Quotes text and moves it to the right.
- Message - Nice way to show special informations.
- Youtube - Insert youtube clip. Just provide full url to the Youtube movie clip.
- Iframe - Insert an iframe.
- Insert a gallery. To use this shortcode you need to create at least one gallery. For "How to create a gallery" follow this link.
The theme includes four Custom Post Types.
- Gallery Post Type
- Testimonials Post Type
- Products Post Type
See picture below.
Gallery Post Type
Galleries can be created, updated and deleted as any other post. Galleries can by inserted to a post or a page by using the gallery shortcode. Shortcodes are covered in Shortcodes chapter. At this moment we want to create a new gallery.
In order to add one or more pictures to a gallery we need pictures. If you already uploaded some pictures in Wordpress Media Center those pictures will be listed. Otherwise we need to upload them. Navigate to WP Media Center and upload a few pictures. After that navigate to Gallery Post Type
Select one or more pictures by clicking on them.
Every picture can have meta data and those informations are shown in gallery. Let's see meta data
After you entered meta data click ADD button. Save gallery like you are saving posts or pages (Publish button). Gallery is created and saved.
In order to insert gallery to a post or to a page please navigate to "Shortcodes" section of this document.
Testimonial Post Type
In order to show testimonials on your website you should do two things. Create a list of testimonials and to create a page with those testimonials by selecting testimonial's page template. First let's see how to create a testimonial.
Enter testimonial title and content. Also Testimonial post type has unique metabox "Testimonial Attributes". Name field represents the name of the person and field "Additional Info" represents any addtional info. For example: company name and position.
After you created at least one testimonial you can create testimonial page. Create new page as usual, enter page title (ex. Testimonials), enter some text in rich text editor (this text will be shown above the testimonials.) and the most important thing select testimonia page template. At the moment you can choose between page with or without sidebar.
Product Post Type
In our case products are food items (ex. Mushroom Soup, Spagheti Milanese, Grilled chicken etc.). All products should be grouped in categories. For example we could create three main categories (Main dishes, Cakes and Beaverages).Those food categories are top level categories. Every top level category should have at least one SUB CATEGORY. For example top level category Beaverages could have following sub categories (Hot Drinks, Beers, Wines ..... )
Notice! Products should be placed in SUB CATEGORIES and NOT in TOP LEVEL CATEGORIES.
First things first. Let's create a few categories. Later we will create products and assign products to categories. Please follow screenshots.
Only category "Name" field is mandatory. All other fields are optional. Other options overview:
- Parent - If you want to create a top level category set "Parent" field (dropbox) to "None".(It is default value for this field).
- Order - This option is very handy and it allows you to control categories order in menu card.
- Description - Does not have any role. Skip it.
- Slug - By default WP will create slug for you but if you want to enter your slug this is the place. (Ex. You have category called "French Wines". By default WP will create slug "french_wines"). Slug field allows you to change this slug to "wines" if you want.
Create a few top level categories and sub categories. See screenshot below.
Now we are ready to create our products. Please follow screenshots.
After you click "Add New" button new page appears. This page has a few specific metaboxes and options. These options are related only to products.
Product metabox overview:
Following metabox allows you to select template for single product page. There are two options. Page with or witout sidebar.
Next metabox show all available food categories. Select one or more categories for your product.
Important! Every product CAN be assigned to many subcategories and NOT to top category! Top categories have only one role, to better organize you menu card.
Attributes metabox have only one option - Order. In case you are familiar with page reodering this feature works the same way. Enter a number and reorder your products. Products are ordered from smaller values to greater.
Useful tip. When you are reodering your products assign them values like 5, 10, 15, 20 .... . This could be very handy in case when you have new product and would like to insert it between two existing products.
Featured image metabox - Click on this link to associate an image with your product.
Every product can have Price and Specialy Flag. This fields are not mandatory.
Info If a product is marked as Specialty it will have small red banner at the top.
After you set all options press Publish button to save new product.
Finaly we have covered all option related to a product creation. Let's see how it looks. Press Preview link in order to see product single page. Now you can enter as many products as you want. From this point you can proceed to Menu Card section to create a menu card for your restaurant.
Event Post Type
Event post type is handy for announcing events. For example if you organize party in your restaurant you can create event post. Let's create events.
Metabox related to events only looks like this:
Metabox includes information about start date, the place where the event will take place and number of participants. After you created an event you can preview it by clicking "Preview Changes" button.
We are not finished yet. We created an event but it is not visible at our website yet. In order to show events you need to create new page and select proper tempalate (Events Tempalate with/without sidebar). Further more you need to put this page in main menu navigation. Customizing main menu is covered in this section.
This is the result. List of events and single event pages. At the moment we have only one event created.
What is the difference between this theme and a default one?
All settings are grouped in two sections. Main Settings and Slider settings. Also there is a third tab called Help. Here you will find link to your online help files. Further more Main Settings are grouped in many smaller logical groups. Every option has a short description included in option pages. Do not forget to hit the SAVE button after editing options.
Look & Feel
This section allows you to set Color sheme for a site, favicon and logo image. Select your options and press SAVE button. Take in mind that for the logo there is an restriction related to dimensions. Maximum recommended size for a logo picture is 100px. Standard size of a favicon picture should be 16x16px.
These options allows you to change the way how blog pages looks like. Keep in mind that all options are not appliable to all blog pages. Options overview:
- Meta Data - Show/Hide Meta data about posts. This option is not appliable to all blog pages.
- Hide Categories - By selecting categories from this list, you are disabling displaings post from a selected categories. This option is not applied to a Categories Widget.
- Read More Text - Renaming Read more button text. By default "Read More"
- Comments - Turn ON/OFF comments at single post page.
- Hide Sidebar - If you enable this option you can hide sidebar on any particular page that you want to.
At Products settings you can control two options:
- Enable/Desable meta data (date, author, categories...)
- Menu of a Day - You can select which items you will show in that box. You can select maximum 4 items, because of the height of the box.
These options allows you to change the way how testimonial page will look like. For example, you can show/hide page title or page intro text.
You can see how it looks at example:
These options are applied to header section of every page. Some options are applied only to a HOME PAGE header section.
- Teaser Text - Turn ON/OFF text located at header string.(Social icons and text, breadcrumbs, section title)
- Breadcrumbs - Turn ON/OFF breadcrumbs
- Hide breadcrumbs text - Turn ON/OFF "You are here" text
- Book A Table button - Enable this to show book A Table link
Options in Footer settings are applied to all pages.
- Show/Hide Footer section
- Show/Hide Subfooter section
- Copyright Text - Show / Hide copyright text at footer section.
- Copyright - Text it self.
- Show Copyright Link - Show / Hide the link
This section controls how your homepage will look like. Here is the screenshot.
- Hide slider - Show/hide a slider.
- Show Featured section - Featured section is placed right below the slider. This option can Show/Hide this section.
- Data Source - With this option you can control what type of content should be shown in featured section. Every option includes different options.
POST or PAGE as data source will include one select box where you can select what POST/PAGE should be shown.
POST CATEGORY option will include a list of categories. By selecting a category the features section will show a list of posts from selected category.
MENU ITEMS option will include a list of all products you created. Is is a multiselect box.
- Items per row - This option takes effect only if CATEGORY/PAGES/MENU ITEMS data source selected. It controls how many items should be shown at once.
- Items per slide - This option takes effect only if CATEGORY/PAGES/MENU ITEMS data source selected. It controls how many items should be slided at once.
- Image height - This option takes effect only if CATEGORY/PAGES/MENU ITEMS data source selected. Changes image size and orientation.
- Show "read more" link - Show/Hide "Read more" link.
Google Map is shown at the contact page. Select your position on map by moving marker. Also do NOT forget to enable google maps on your site by clicking ENABLE button (first option).
All options related to a Contact and Book a table informations. First and second part of the options are reserved for Contact info and Book A Table forms.
These options are also used by some widgets. Other options are related to an email messages.
- Show Contact Form - ON/OFF Contact form at Contact Page. By disabling this option Contact form will be hidden.
- Auto Reply - If you enable this option, visitors who send you an email message will receive a confirmation e-mail message.
- E-mail Subject - Subject of an Auto Reply Message.
- Your Name - "From" field in an automated e-mail message.
- E-mail Address - Email address where you will receiving messages from contact form. This e-mail address will be included in a "From" field of an Automated e-mail message.
- Contact Message - This text appears above the contact form.
- Response Message - Text of an Automated E-mail message.
Book A Table Form
These options are related to Book A Table Page.
- E-mail Address - Email address where you will receiving messages from contact form.
- Auto Reply - If you enable this option, visitors who send you an reservation message will receive a confirmation e-mail message.
- E-mail Subject - Subject of an Auto Reply Message.
- Response Message - Text of an Automated E-mail message.
Create Contact/Book A Table Page
This section describes how to create Contact or Book A Table Page. Before we start please make sure that you have entered all data related to a contact and book a table page.
To create contact/book a table page please follow these steps:
- Create New Page and select "Contact Page Template" or "Book A Table Template" from a list of available templates.
- Save it.
- Open WordPress Menu Administration Panel (Apperance->Menus)
- Add newly created page to an existin menu and click Save.
- That's all.
These options controls Social icons area. Provide Full URL to the related sites/services (ex. for Facebook you could enter something like http://www.facebook.com/themelaboratory.) In case you do not provide data for a particular Service (facebook, twitter...) related icon will be hidden.
The Theme supports unlimited number of user defined sidebars. To create one navigate to theme's administration panel, click on menu item called "Sidebars". Sidebar options will appear. Enter the name of your sidebar. Click Add Button. In case you need more than one sidebar repeat last two steps. After you finish with adding new sidebars click SAVE button.
At this point two more things left to make your sidebars visible on your website. Let's say you've already created a page called "About Us" and you want to display particular user defined sidebar at this page. Navigate to the WordPress Widgets page. In the list of all sidebars you should be able to see your sidebars. Drag&Drop one or more widgets to your sidebars. When you are done with inserting widgets to user defined sidebars, open "About Us" page for editing. Below the text editor you should see meta box called "Sidebars". See picture below.
Available options are:
- "No Sidebar" to remove all User defined sidebars from a page/post
- Select one sidebar by single mouse click on sidebar's name.
- Select more sidebars by holding CTRL key on your keyboard and click on sidebar names from a list.
Do not forget to save changes!
Overview. First we created custom sidebar. Second, we applied one or more widgets to our sidebar. Third we added our sidebar to particular page. Steps are identical in case you want to add one or more sidebars to a post.
First step is to generate your Google Analitics code. After that just paste it to a related textarea.
Options in Custom section are applied to all pages. These opitons allow you to add your Custom CSS/JS code without editing theme's files.
The theme includes three variations of the same slider.
- Default - A slider with PNG mask.
- Standard - A slider with fixed dimension, aligned to the center of a page.
- Full - A slider that stretch to full page width.
It important to notice that these sliders have incommon option but also there are some specific options to each slider type. Creating a slider is realy easy. Minimal slider configuration require to:
- Enter slider name.
- Create at least one slide.
At first moment we can ignore all those options and create slider with minimum cofiguration. Please follow screenshots.
Enter the slider's name and proceed to the slide options (bottom of the page). Next screenshot shows three slides. By clicking on slide box the box will expand. In case you do not have slides created list of slides will be empty.
Click "Add New Slide" button. Following screenshot will appear.
Enter slide title and upload image file by clicking on "Upload File" button. At this point you entered all required data to create a slide. You can add a few more slides by repeating last two steps or to hit Save button and check the slider at homepage.
Text box options. In order to have text boxes in your slider you need to enable it. By default this option is DISABLED.
Incommon slider options overview:
These options are incommon for all slider themes.
- Slider Name - Slider name.
- Slider Type - At the moment the theme supports one slider (Anithing slider.)
- Theme - By default slider with mask is selected. Behing this slider type there are two more slider type (Standard and Full). It is important to know that slider with mask DOES NOT support video slides. It is to say if you create two slides. One with image and one with video. The video slide will not be shown.
- Mode - (Fade or Vertical) The way how the slider will slide slides.
- Easing - Easing effect to apply.
- Build Arrows - Show/Hide navigation arrows.
- Toggle Arrows - navigation arrows will slide out on hovering & hide @ other times.
- Auto Play - If Enabled, the slideshow will start running.
- Auto Play Locked - If Enabled, user changing slides will not stop the slideshow.
- Auto Play Delayed - If Enabled, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts.
- Pause on Hover - If Enabled, & the slideshow is active, the slideshow will pause on hover.
- Stop at End - If Enabled, the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
- Play RTL - If Enabled, the slideshow will move right-to-left.
- Delay - How long between slideshow transitions in AutoPlay mode (in milliseconds).
- Resume Delay - Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
- Animation Time - How long the slideshow transition takes (in milliseconds).
- Delay Before Animate - How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).
- Allow Rapid Change - If Enabled, allow rapid changing of the active pane, instead of ignoring activity during animation.
These slide options are incommon for all slide types.
- Slide Name - Enter a slide name.
- Slide type - Select a slide type. IMAGE/YOUTUBE/VIMEO
Following options are related to IMAGE slide type
- Link - In case you want to link a slide enter full URL(ex. http://www.google.com).
- Item File -
Following options are related to a YOUTUBE slide type
- Video ID - Youtube video ID. How to get video ID?. See screenshot below. Just copy past marked video ID.
- Video Alignment - This option does NOT have effect on "Full Slider Theme". Aligns video to LEFT, RIGHT or CENTER.
- Item Width - Set video player's width in pixels by sliding small slider. Leave "0" for auto width.
- Item Height - Set video player's height in pixels by sliding small slider. Leave "0" for auto height.
VIMEO slide is the same as YOUTUBE slide. Here is the screenshot of how to find VIMEO video ID. Find a video of interest. Click a SHARE button. Following popup will shop up.
In order to localize the theme you will need:
- Any po editor(we recommend POEDIT) to translate the theme from English language to your language.
- New file (your translation) should be copied to folder called "framework/language".
- Let's say that you translated language file to italian language. There is special naming convention for these file, Language_Country.po (in our case it_IT.po)
- Open main Wordpress config file and find following row.
//change it to
Save the file and that's it. Your website is tranlsated.
Questions and Answers that could be helpfull to you to get familiar with building your site.
- Q: I have problem with images. At some pages my images are cutted off or too small. For example image fills just a half of a frame. What should I do to fix this?
- A: When you upload an image, wordpress creates (resize, crop) 13 different images from an original one (ex. pics for sliders at home page, posts, galleries etc.) In some cases original image is smaller then required which leads us to the described problem. Only solution for this problem is to upload a larger image. If you are uploading a picture for a slider it should be at least 950X300px. Our recommendation is to upload images with following dimension 1024x768px or larger
- Q: I uploaded image larger then 1024x768px but steal in some cases my images are cutted off or are not cropped well. How to fix this?
- A: Apart from image size there is one more thing. It is the aspect ratio of an image. The perfect aspect ratio is 4:3. How to change aspect ratio or how to crop an uploaded image in wordpress could be seen HERE or HERE. Important note. When cropping select an option "Apply to all images". After cropping done, we are not done yet :(. One more thing remains. Navigate to the Media Library Page(see picture below). Find your image and click "Regenerate "link.
- Q: Unable to install theme. Wordpress reports that style.css is missing? What should I do to fix this?
- A: Please make sure that you uploaded right file. When you download Mazzareli WP Theme, unzip archive and find file called "mazzareli-wp-theme-vX.X.zip". In order to install Mazzareli Theme you need to upload that file.
- Q: How to upgrade the theme?
- A: Replace old files with new ones. Or remove old files first and then add new ones.
I've used the following images, icons or other files as listed.
- Cheryl Hand Webfont
- Georgia (everything else)
- Icons are created by ThemeLaboratory so they are free for commercial use.
- Images are not included in psd files.
- Anything Slider
- Wordpress plugin: Breadcrumbs Plus by Luis Alberto Ochoa
- Wordpress plugin: Wp-pageNavi by GamerZ, scribu
- Wordpress plugin: Custom Taxonomy Sort 1.1.5
- Tweeter Bootstrap - JS/CSS
- Color Picker by Stefan Petre
- BxSlider by Steven Wanderski