1. Start
  2. Introduction
  3. Posts
    1. Posts
    2. Products
    3. Gallery Items
  4. Pages
    1. Regular Page
    2. Blog Page
    3. Gallery Page
    4. Menu Page
    5. Mashup Page
  5. Theme Customization
  6. Widgets & The Sidebar
    1. Managing Sidebars
    2. Custom Contact Widget
    3. Custom Twitter Widget
    4. Featured Item Widget
    5. Latest Posts Widget
  7. Shortcodes
    1. Shortcode Basics
    2. A Note About Colors
    3. Line
    4. Tooltip
    5. Columns
    6. Map
    7. Tabs
    8. Accordion
    9. Button
    10. Highlight
    11. Message
  8. Creating a Front Page
  9. Navigation Menus
  10. Translating and Text
  11. Updating Your Theme
  12. Modifying Your Theme
    1. Developer Documentation
    2. Creating Child Themes
  13. Changelog

The Restaurant Classic

Version 1.0


Thanks for purchasing The Restaurant Classic! We hope it will make your life easier by allowing you to create a great website for your Restaurant. If you have any questions or problems, please read this document first. If it does not solve the issue, feel free to contact us any time on the Support Center.

Remember that we update our themes regularly. You can keep up with the development of The Restaurant Classic on the Update Blog. You can also subscribe to the RSS Feed to get updates in your RSS Reader.

Introduction


Welcome to The Restaurant Classic. We build this theme specifically with restaurant owners in mind, hopefully it will help you make a beautiful website easily. 

To get a great overview of what the theme can do we suggest taking a look at the Restaurant Classic Demo. This contains a lot of elements like galleries, blog pages, menu cards, shortcodes an more! We didn't use any custom coding while creating this demo so anything you see, you can do!

The use of this theme can be split up into roughly the following areas. 

  1. Posts
    1. Regular posts
    2. Products
    3. Gallery Items
  2. Pages
    1. Regular Page
    2. Blog Page
    3. Gallery Page
    4. Menu Page
    5. Mashup Page
  3. Widgets & The Sidebar
  4. Shortcodes
  5. Navigation Menus
  6. Updating Your Theme
  7. Modifying Your Theme
    1. Developer Documentation
    2. Creating Child Themes

You can read through all of these by using the navigation on the left. We'll cover how to use each and every setting available and we'll also go through some default WordPress stuff like adding media and using widgets and shortcodes. 

If you feel like you've read the documentation but something is still not clear or you might have found a bug, feel free to contact us through our Support Center

Posts


Posts are the building blocks of your website. They are usually well defined bits of static content. A blog post or a  product would be considered a post for example. There are three distinct types of posts used in The Restaurant Classic.

Posts

Posts are for creating general blog-like content for your site. For The Restaurant Classic this could consist of news items about the restaurant, news about scheduled live performances, daily deals, and so on. 

In The Admin

You can add a post to your site by clicking "Add New" under "Posts" in the WordPress admin. The resulting screen will allow you to add a bunch of properties like title, post content, publication date, etc. There is a great in-depth tutorial on Writing Posts in the WordPress codex. If you're new to WordPress take a peek at it, it will help you understand everything you can do here. A few points of interest:

Additional Options

As with most posts and pages, we've built in some special options you can use to manage your site and content better. You can find these options under the content editor. These options govern the rules of the single post page. When a post is listed with other posts, these options are not used. With the post post type you have the following options:

Layout
The layout changer enables you to modify the layout for this post only. If set to global the layout set up in the theme customizer will be used

Post Metadata
By default the metadata (post date, comment count, etc.) is shown on posts. If you don't need it, you can turn it off for this post here.

Sidebar
If you are using a layout with a sidebar the default sidebar will be shown. You can set the default sidebar in the Theme Customizer. If you would like to use a different sidebar on this post, choose one here.

On The Website

Posts on the website can be shown in a number of ways. If you don't have a special homepage assigned, a list of posts will be shown by default, in reverse chronological order. Posts are also shown on search results pages, category pages and so on. 

An example of a post on the website

Creating a Blog List page allows you to list posts in the way you choose. You can narrow it down to specific categories and also modify the ordering rules. Once you create such a page you can link to it from your menu, or even make it your home page. More on this in other sections. 

 

Products

Products can be used to store anything that you sell. For The Restaurant Classic this will most likely be the items on your menu. You will be able to use the menu page template to build a nicely formatted menucard out of your products in a few seconds. 

In The Admin

You can add a product to your site by clicking "Add New" under "Products" in the WordPress admin. The resulting screen will allow you to add a bunch of the usual WordPress properties like title, post content, publication date, etc. There is a great in-depth tutorial on Writing Posts in the WordPress codex. If you're new to WordPress take a peek at it, it will help you understand everything you can do here. A few points of interest:

Additional Options

As with most posts and pages, we've built in some special options you can use to manage your site and content better. You can find these options under the content editor. These options govern the rules of the single product page. When a product is shown in a list, these options are not used. With the product post type you have the following options:

Layout
The layout changer enables you to modify the layout for this post only. If set to global the layout set up in the theme customizer will be used

Sidebar
If you are using a layout with a sidebar the default sidebar will be shown. You can set the default sidebar in the Theme Customizer. If you would like to use a different sidebar on this product, choose one here.

Product Price
This field allows you to manage the price of the product. This should always be a number, no currency should be added. You  can choose your currency in the theme customizer. This will be applied to the products across the site.

Nutritional Information
Nutritional information can be entered and displayed on the product's page. You can enter values for calories, carbohydrates, protein, fat and sodium content. If values are not given, the section will not be shown. 

On The Website
Products our shown in two main places on the website. They have their dedicated product page which you can view from the admin by clicking "View Product" in the editor. They are also shown in Menu cards which you can create later. In addition, products will turn up on search pages. 

An example of a product on the website

 

Gallery items are not shown on the website like other posts. Whenever you create a post or a product, there is always a corresponding post or product page on the website. Gallery Items are only used internally as an easy way of creating gallery pages. 

In The Admin

You can add a gallery item to your site by clicking "Add New" under "Gallery Items" in the WordPress admin. The resulting screen will allow you to add the details needed to create an item which you can use in galleries. Make sure to add at least the following to each item:

  • Title - this should be short, a few words
  • Post Content - this is shown as the text of each gallery item. Don't make it too long!
  • Featured Image - this will be shown for each gallery item. Images will be resized to a square format, so if you upoad a very wide or tall image, it will be cropped.
  • Gallery Category - make sure you specify a gallery category. Later on you will build galleries out of items in specific categories.
  • URL - If you specify a URL in the additional settings under the post content area, a round link icon will be generated for you inside the gallery item.

Once you've added the items you need, you'll need to create a Gallery Page to show them off. More on this in the Pages section. 

On The Website

Gallery Items are only shown on Gallery Pages. Once you've assembled a gallery page the items there will be visible, and id the URL is flled out, clickable as well. 

An example of a gallery on the website

Pages


Pages are separate static content items on your website. While post-like items (posts, products, etc.) are used for representing actual entities, pages are for creating supporting content like an about page or a contact us page. In The Restaurant Classic, we've created a few different types of pages for making content management easier for you. Here are the types of pages you can use. 

Regular Page

Regular pages are for displaying any static content you need for your website. An about page, a contact us page, an about the chefs page, etc. would be good examples of this. 

In The Admin

You can add a page to your site by clicking "Add New" under "Pages" in the WordPress admin. The resulting screen will allow you to add a bunch of properties like title, post content, publication date, etc. There is a great in-depth tutorial on Pages in the WordPress codex. If you're new to WordPress take a peek at it, it will help you understand everything you can do here. A few points of interest:

Additional Options

As with most posts and pages, we've built in some special options you can use to manage your site and content better. You can find these options under the content editor. With the regular pages you have the following options:

Layout
The layout changer enables you to modify the layout for this page only. If set to global the layout set up in the theme customizer will be used

Post Metadata
By default the metadata (post date, comment count, etc.) is not shown on pages. If you need it, you can turn it on for this page here.

Sidebar
If you are using a layout with a sidebar the default sidebar will be shown. You can set the default sidebar in the Theme Customizer. If you would like to use a different sidebar on this page, choose one here.

Page Title
By default the title of this page is shown under the header. If you would like to hide this title, check the radio button next to  "Hide"

On The Website

You can view the page by clicking "View Page" in the backend on the page's edit screen. If your header menu is not customized each page shows up in it, so users will be able to access the page from there. If you have a custom menu you'll need to add this page in yourself. 

An example of a regular page on the website

Blog Page

Blog pages are for displaying a list of already created posts. you can list all your posts, but you can also create a few separate post lists. 

An example of when you'd need just one list is if you write a blog for your restaurant. In this case, add all your posts and create a blog page from all categories. 

An example of needing multiple blog pages is if you want to have a special promotions section, and a blog for example. In this case you would create these as posts and use categories to differentiate between a promotion and a blog post. You would then create two blog pages. In one of them you would select only the "Promotions" category to show. In the other you would select all others.

In The Admin

You can add a Blog Page to your site by clicking "Add New" under "Pages" in the WordPress admin. The first thing to do is to change the post template to "Blog Page". You can do this in "Page Attributes" box on the right. The additional options box under the post content editor will reload and show you the options relevant to the chosen page. You can then proceed to add a bunch of properties like title, post content, publication date, etc. There is a great in-depth tutorial on Pages in the WordPress codex. If you're new to WordPress take a peek at it, it will help you understand everything you can do here. Aside from all the properties of regular pages, Blog Pages have the following points of interest

Additional Options

As with most posts and pages, we've built in some special options you can use to manage your site and content better. You can find these options under the content editor. With the Blog Pages you have the following options:

Layout
The layout changer enables you to modify the layout for this page only. If set to global the layout set up in the theme customizer will be used

Sidebar
If you are using a layout with a sidebar the default sidebar will be shown. You can set the default sidebar in the Theme Customizer. If you would like to use a different sidebar on this page, choose one here.

Page Title
By default the title of this page is shown under the header. If you would like to hide this title, check the radio button next to  "Hide"

Posts Per Page
This setting allos you to change how many items are listed on one pages. Any other items will be viewable using the pagination at the bottom of the page.

Order Posts By
The two select boxes govern how posts are ordered. In the first box you can select the criteria for ordering the posts (date, title, etc.). In the second box you can choose the direction of the ordering, ascending or descending.

Categories to Show
By Selecting a number of categories you can narrow the posts shown to only those categories. If no categories are selected all posts will be shown, making the page act as a regular blog archive. You can use the "select all" and "select none" links as shortcuts for faster selection.

On The Website

You can view the Blog Page by clicking "View Page" in the backend on the page's edit screen. If your header menu is not customized each page shows up in it, so users will be able to access the page from there. If you have a custom menu you'll need to add this page in yourself. 

An example of a blog page on the website

Gallery Pages enable you to display a number of Gallery Item posts in a tiled format. The tiles consist of the content defined for each item. The featured image, the title, the content and the URL of each gallery item is shown.

In The Admin

You can add a Gallery Page to your site by clicking "Add New" under "Pages" in the WordPress admin. The first thing to do is to change the post template to "Gallery Page". You can do this in "Page Attributes" box on the right. The additional options box under the post content editor will reload and show you the options relevant to the chosen page. You can then proceed to add a bunch of properties like title, post content, publication date, etc. There is a great in-depth tutorial on Pages in the WordPress codex. If you're new to WordPress take a peek at it, it will help you understand everything you can do here. Aside from all the properties of regular pages, Gallery Pages have the following points of interest

Additional Options

As with most posts and pages, we've built in some special options you can use to manage your site and content better. You can find these options under the content editor. With the Gallery Pages you have the following options:

Page Title

By default the title of this page is shown under the header. If you would like to hide this title, check the radio button next to  "Hide"

Number of Items to Show
Select the number of items you want to show. 4 items are shown in a row. When creating the gallery, make sure you have enough items to fill it!

Ordering
The two select boxes govern how items are ordered. In the first box you can select the criteria for ordering the posts (date, title, etc.). In the second box you can choose the direction of the ordering, ascending or descending.

Categories to Show
By Selecting a number of categories you can narrow the items shown to only those categories. If no categories are selected all gallery items will be shown. You can use the "select all" and "select none" links as shortcuts for faster selection.

Enable Gallery Rotation
If enabled the gallery will automaticallly rotate through the items, displaying the contents of items. 

Animation Speed
You can set how fast the animation is (the display of the item content). The duration is given in milliseconds (a hundredth of a second). 300-600 is a good value to start with. 

Progress Speed
This setting governs how long an item stays shown for. The duration is given in milliseconds (a hundredth of a second). Around 3,500 is a good value to start with. 

Animation order
Select the order you would like the tiles to animate in. Ascending will animate the tiles in sequence, Descending will animate them in reverse order, random will animate them randomly.

On The Website

You can view the Gallery Page by clicking "View Page" in the backend on the page's edit screen. If your header menu is not customized each page shows up in it, so users will be able to access the page from there. If you have a custom menu you'll need to add this page in yourself. 

An example of a gallery on the website

 

Menu Page

Menu pages are for displaying a list of already created products. Products will be shown in a menu-card format. You can set up multiple pages with two sides each. Users will be able to flick through the pages and see the product details.

The ability to set up menus based on product categories is helpful if you would like two separate menus. While you can include all your products on one menu you might like to create a separate drinks menu or a separate vegetarian menu. 

In The Admin

You can add a Menu Page to your site by clicking "Add New" under "Pages" in the WordPress admin. The first thing to do is to change the post template to "Menu". You can do this in "Page Attributes" box on the right. The additional options box under the post content editor will reload and show you the options relevant to the chosen page. You can then proceed to add a bunch of properties like title, post content, publication date, etc. There is a great in-depth tutorial on Pages in the WordPress codex. If you're new to WordPress take a peek at it, it will help you understand everything you can do here. Aside from all the properties of regular pages, Blog Pages have the following points of interest

Additional Options

As with most posts and pages, we've built in some special options you can use to manage your site and content better. You can find these options under the content editor. With the Blog Pages you have the following options:

Page Title
By default the title of this page is shown under the header. If you would like to hide this title, check the radio button next to  "Hide"

Menu Builder

Initially you will see an empty menu builder, since no products have been added yet. The first page is ready to go, all you need to do is click on the "add category" button in the column you would like to add a product category to.

A window should appear with your categories in it, each one in a box. For convenience you can see 5 products listed in the category box. Click on the box you want to add.

The box will appear in the selected column. Note that it will still only show 5 products but on the website it will list all of them.

If you would like to add more pages click the "add page" button. This will append a page to the page list with the same controls. You will be able to add categories to any page.

You can also drag and drop categories inside pages and in between pages.

If needed you can remove any product by clicking on the round, red "x" icon in the top right corner. Deleting a page is just as easy, click the "remove" link next to the page title. Note that any categories on a deleted page will be removed.

When you are happy with the configuration make sure to save the post by clicking the "Update" button in the top right of the options box, or in the "Publish" box.

On The Website

You can view the Menu Page by clicking "View Page" in the backend on the page's edit screen. If your header menu is not customized each page shows up in it, so users will be able to access the page from there. If you have a custom menu you'll need to add this page in yourself. 

An example of a menu page on the website

 

Mashup Page

Mashup Pages are for displaying the contents of other pages in one place. For example, if you have already created a partners page, a page about the head chef, an about page and a menu, you can create a home page by adding these to a mashup page. instead of needing to write the content again, just add these pages to the mashup page in the order you need and set the Mashup Page as your home page. 

In The Admin

You can add a Mashup Page to your site by clicking "Add New" under "Pages" in the WordPress admin. The first thing to do is to change the post template to "Mashup Page". You can do this in "Page Attributes" box on the right. The additional options box under the post content editor will reload and show you the options relevant to the chosen page. You can then proceed to add a bunch of properties like title, post content, publication date, etc. There is a great in-depth tutorial on Pages in the WordPress codex. If you're new to WordPress take a peek at it, it will help you understand everything you can do here. Aside from all the properties of regular pages, Blog Pages have the following points of interest

Additional Options

As with most posts and pages, we've built in some special options you can use to manage your site and content better. You can find these options under the content editor. With the Mashup Pages you have the following options:

Page Title
By default the title of this page is shown under the header. If you would like to hide this title, check the radio button next to  "Hide"

Menu Builder

Initially you will see an empty section in the menu builder since you haven't added any pages to it. A prerequosite to creating mashup pages is to have other non-mashup pages created which you can add.

When you've created some pages, click on the "Add Page" link in the menu builder. A box should appear with a list of your pages. Click on the page you want to add.

The page will be added to the menu builder. You will see some options show up for each added page. You will be able to disabled/enable the title for the page in question and depending on the type of page you will be able to unbox the content. Content unboxing is only available for regular pages. 

Once you've set up your pages click on the update button in the top right to save the configuration. Remember that you can rearrange the pages by dragging and dropping the boxes!

On The Website

You can view the page by clicking "View Page" in the backend on the page's edit screen. If your header menu is not customized each page shows up in it, so users will be able to access the page from there. If you have a custom menu you'll need to add this page in yourself. 

An example of a mashup page on the website

Theme Customization


The Restaurant Classic comes with a theme customizer which you can use to modify various aspects of the theme. You can reach the Theme Customizer from the "Appearance" menu. Just click on "Customize Theme" and the customizer will show up. 

Many options have live preview which means that as you modify colors with a color picker you'll see the result live without reloading the site. Let's go through the options available here. 

Body Text Color
This options governs the regular text color on the main page. It should be in contrast with the content background color

Heading Text Color
This governs the text color of headings. it should be in contrast with the content background color

Background Color
The background color modifies the background color of the website. Modifying this value only has an effect if there is no tiled background image

Background Image
You can upload any image to be used on the background.

Tiled background
You can select to tile the background (this is the default behavior). This is perfect for background patterns. If you would like a large background image you can turn of tiling and center the image by turning tiling off. 

Content Area Background
This setting changes the background color of the content boxes. Make sure that this color contrasts with the text colors well.

Primary Color
The primary color is used in various places throughout the site. Buttons, links, and so on are all colored using the primary color. Many shortcodes use this color as their default as well.

Primary Text Color
The primary text color setting changes the color on items which have a primary color background. Buttons are a good example here which use the primary color as their background and the primary text color as the text color.

Logo
You can upload an image to be your logo. If the logo image is removed a text version will be used built from your site title and description. You can set these up in the site title and tagline section.

Body Font
Select a font to use as the main body font. The first fonts in the list are common fonts but you can choose from any Google Web Font as well. Since this is a pretty long list it may be a good idea to go to Google Web Fonts to find the font you need first and then finding it in the dropdown.

Heading Font
Select a font to use as the heading font. The first fonts in the list are common fonts but you can choose from any Google Web Font as well. Since this is a pretty long list it may be a good idea to go to Google Web Fonts to find the font you need first and then finding it in the dropdown.

Default Layout
Select a default layout for your pages. You can choose between a one column layout and a two column layout with the sidebar on either side.

Sidebars
To create custom sidebars enter names into this field separated by commas. To learn more about custom sidebars read the Widgets & The Sidebar section in the documentation.

Analytics
To add analytics code to your site simply paste it into this box. You can add code from multiple tracking services, just paste them all underneath each other. 

Site Title
The site title is essentially the name of your website. It is shown in the browser tab and used in place of your logo if there is no logo image.

Tagline
The tagline is a short description of your site. It is shown underneath the website title if there is no logo uploaded.

Header Bar Text Color
Select the text color that should be used in the header bar. It should be in contrast with the header bar background color

Header Bar Background Color
Select the color to use for the header bar background. Make sure it contrasts with the header bar text color.

Header Bar Quotes
You can add a number of quotes to the header bar to promote your restaurant. Add each quote on a new line. If a line is long it will flow into more than one line. Don't worry, this does not count as a separate line. Whenever you want to add a new quote just press enter and you should be fine. 

Quote Display Style
Select how you want to show the quotes. If you want to show a different one on each page load visitors will only see one quote per page load. If you rotate the quotes they will change using a fade effect. 

Twitter Share
If set to yes a share button will be added to the header for Twitter

Facebook Like
If set to yes a Facebook like button will be generated in the header bar

Google Maps API Key
While not necessary for the theme to work we recommend getting a free Google Maps API key. If you don't enter an API key you will be using a standard Red Factory API key. If too many people are using this at once it will get rate limited and your maps will not show up. The Google API page has a short tutorial on Obtaining an API Key

Facebook API Key
While not necessary for the theme to work we recommend creating a Facebook App of your own and entering it's ID. If you don't enter an API key you will be using a standard Red Factory API key. If too many people are using this at once it will get rate limited and your like button will not show up. Facebook has a tutorial on Creating an App along with many other useful tidbits!

Currency Symbol
The currency symbol set here will be used by products across the site. You can set an actual symbol like '$' or you can use ISO codes like 'USD'.

Currency Symbol Location
Depending on your currency and preferences you might like to see $19 or you might like to see 19 USD. To make this possible you can choose weather the currency symbol should be placed before or after the amount. 

Footer Background
The footer background color can be set with this option. Make sure it is in contrast with the footer text color.

Footer Background Image
The footer background image can be any image you upload. It will be tiled so a background pattern is recommended.

Footer Text Color
This setting governs the text color of the footer. Make sure that it contrasts with the footer background color.

Footer Border Color
The footer has a border which you can control the color of separately here.

Footer Quotes
You can add a number of quotes to the footer to promote your restaurant. Add each quote on a new line. If a line is long it will flow into more than one line. Don't worry, this does not count as a separate line. Whenever you want to add a new quote just press enter and you should be fine. 

Footer Quote Display Style
Select how you want to show the quotes. If you want to show a different one on each page load visitors will only see one quote per page load. If you rotate the quotes they will change using a fade effect. 

Footer Bar Background
Select the color for the footer bar background. Make sure it contrasts with the footer bar text color.

Footer Bar Color
Select the color for the footer bar text. Make sure it contrasts with the footer back background color

Footer Bar Text
The footer bar text will be shown in the left side of the footer bar.

Header Menu
Select a menu to use in the header menu slot. For more information about menus take a look at the Navigation Menus section.

Footer Menu
Select a menu to use in the footer menu slot. For more information about menus take a look at the Navigation Menus section.

Front Page Display
Select what your front page to show. Either select a list of your latest posts or choose a page to show.

 

Widgets & The Sidebar


A sidebar is an area which you can customize by dragging and dropping different widgets into it. The naming is rather confusing as it does not have to be located at the side of your content. The Restaurant Classic has two sidebar areas.

  1. The Sidebar
  2. The Footer Bar

The Sidebar is the vertical bar along your content if you use a 2 column layout. This can be placed on the left or right, setting this up is easy in the Theme Customizer. 

The footer bar is a horizontal sidebar in the footer. This can be customized in the same way as your sidebar. 

Managing Sidebars

As mentioned earlier the the has two prepared sidebar areas. It also has two pre-created sidebars which are placed in these area. If you go to the "Widgets section under "Appearance" you'll see that these two sidebars are ready for you to fill up with widgets. 

You can however create different sidebar configurations. To do this, first go to the Theme Customizer and under the general settings area add a comma separated list of sidebars you would like to use in the textarea under the "Sidebars" label. For example, enter "Product Bar, Blog Sidebar" to create two sidebars. Once you have done so, go back to the widget settings area and you will see these appear. 

Back in the Theme Customizer there is a dropdown menu labeled "Default Sidebar". The sidebar chosen here will be shown in the sidebar slot. You can override this in the settings of each page individually, let's look at an example. 

Say you would like a separate sidebar for your blog and a separate sidebar for your product pages. Go to the Theme Customizer and create a new sidebar for use in the product pages by entering it's name into the textarea "Product Sidebar". Make sure that the default sidebar selected is "Sidebar". Whenever you create a product page, simple select the "Product Sidebar" to be the sidebar for that product. 

Available Widgets

There are a number of widgets to use in any sidebar. WordPress offers a bunch of them by default like the search widget or the category list. The WordPress Codex has an article on available widgets, we recommend you read that to familiarize yourself with the default set. For the documentation of custom widgets available only in The Restaurant Classic, read on!

Custom Contact Widget

This widget displays a nicely formatted contact sheet with social links and contact info. It includes a number of options you can use to modify it's behaviour. 

If you would like to use icons different than the ones provided you will need to replace them. The images used are in the images/customContactWidget folder. Please refer to the Modifying Your Theme section before making any changes  to the theme. 

An example of a custom contact widget on the website

Custom Twitter Widget

This widget enables you to add a Twitter feed to the website. Due to some Twitter restrictions the easiest way to do this is to create the Twitter feed on Twitter, and paste the resulting code into the widget. 

To get started, go to Twitter and log in. Once there click the gear icon in the menu and click on "Settings". In the settings page navigate to the "Widgets" section using the menu on the left and click on the "Create New" button. Set up and tweak the widget to your liking but be sure to add your website to the "Domains" list. If your website is at "http://therestaurantclassic.com" simply enter "therestaurantclassic.com" into the box. 

Once you click "Create Widget" you should get a textbox with some code in it. Underneath it should say something like: "Copy and paste the code into the HTML of your site". Copy all the code in that box and paste it into "Widget Code" box in the Custom Twitter Widget. You can also add a title if you want. 

The featured item widget allows you to showcase an image with some text and a link in the sidebar. Since this content is independant of any content you add like products and posts you can use it to display promotions or advertisements as well. Here is a quick list of the available options:

An example of a featured item widget on the website

Latest Posts Widget

While you can list your latest posts with the default WordPress widget, the custom Restaurant Classic widget allows you to show the image, excerpt, etc. of your posts. You can set up how you want to order posts, what types of posts you want to show (regular posts or products) and what elements you'd like to display. Here are all the available options:

An example of a post list widget on the website

Shortcodes


Shortcodes are snippets of specially formatted content which you can use to liven up your website's content. For example, when writing a post you can use [map location='New York, 6th Avenue'] to add a google map into the content. Basically shortcodes provide easy access to adding content which would otherwise take a long time or need custom coding. 

The Restaurant Classic has a plethora of shortcodes available for making your content nicer and for inserting customizer content into any post content. 

Shortcode Basics

Before we look at the specific shortcodes, a quick tutorial on shortcodes so you can use their full potential. There are basically two types of shortcodes. Ones with content and ones without content. The map shortcode mentioned earlier does not have content. You just type the shortcode and off you go. The highlight shortcode however does have content since you will need to designate what you want to highlight, like this:

I am writing a paragraph [highlight]part of which I want to highlight[/highlight]. That is all. 

As you can see, this shortcode has an opening part and a closing part. The closing part is always the same as the opener, but has a slash before the shortcode name. 

In addition, most shortcodes also have parameters. When inserting a map for example you need to tell the shortcode what location the map should show. To do this we use the 'location' parameter. As you'll see later on, the highlight shortcode has a background parameter which enables you to change the highlight color.

I am writing a paragraph [highlight background='blue']part of which I want to highlight[/highlight]. That is all. 

That's it, all you need to keep in mind is that you will need to close shortcodes which surround content and that you can add parameters to almost all shortcodes. Now, onto the real shortcodes!

A Note About Colors

Whenever you specify a color you have a number of options. There are 8 named colors that you can use:

In addition you can use the special color 'primary' and 'primary_text'. These two colors can be set in the Theme Customizer and whenever you use these as values the defined color will be used, 

Should these colors not be sufficient you can use any HEX color you wish. If you don't know what a HEX color is do a quick Google Search for 'online color picker' and use it to select a color and copy the HEX color value into the shortcode attributes.

Line

The line shortcode allows you to add a separator line between two bits of content. Optionally you can add a little link inline with the lin. The parameters of this shortcode are: 

color
By specifying a color you are controling the color of the line. Please take a look at the Color Notes for how to specify colors.

url
If you would like to add a link next to the line (to take the user to the top of the page for example) you can do so by adding the url parameter. If given, a link will be generated for you. if you want the link to take users to the top of the page use '#' as the value for this parameter.

text
The link will have the text given here. The default text is 'link' which you will probably want to change to something more meaningful. 

position
You can define a position for the link. The position can be left or right (left is the default).

Example 1 - A plain line

[line]

An example of a line shortcode on the website

Example 2 - A colored line with a link

[line url='#' text='top' color='primary']

An example of a line shortcode on the website

Tooltip

Tooltips are great for showing small text snippets only when a user hovers over specific text. This is useful for explaining abbreviations and other non-common terms. Tooltips have the following attributes:

text
The text to show when the user hovers over the content

position
You can define a position for the tooltip. It can be left, right, top or bottom. The default position is bottom.

Example 1 - A simple tooltip

[tootlip text='This is Latin Placeholder Text']Donex id elit non[/tooltip]

An example of a line shortcode on the website

 

Columns

Columns enable you to easily sort your content into a column based layout. Creating columns requires the use of two separate shortcodes, the [row] and the [column] shortcode. There is only one attribute involved which needs to be added to the column shortcode to tell it how wide it should be.

width
Sets the width of a column in units. Should be given as one to twelve. 

There are twelve units in each row. This means that whenever you create a row you will need to distrbute 12 units throughout them. In other words you can create one 'twelve' width column in a row or two 'six' width coliumns, or three 'four' width columns. The idea is that the width of all columns in a row should add up to twelve. 

You don't have to use the same widths in a row though. You could create a 'six' width column and two 'three' width columns. Let's look at some examples. 

Example 1 - Evenly distributed two columns

[row]
[column width='six']
This column occupies half of this row.
[/column]
[column width='six']
This column also occupies half of this row
[/column]
[/row]

An example of a column shortcode on the website

Example 2 - Evenly distributed three columns

[row] 
[column width='four'] 
This column occupies a third of this row. 
[/column] 
[column width='four'] 
This column also occupies a third of this row 
[/column]
[column width='four'] 
All three columns occupy a third of this row 
[/column]
[/row]

An example of a column shortcode on the website

Example 3 - Unevenly distributed three columns

[row] 
[column width='six'] 
This column occupies half of this row. 
[/column] 
[column width='four'] 
This column occupies a third of this row 
[/column]
[column width='two'] 
This is tiny!
[/column]
[/row]

An example of a column shortcode on the website

Map

The map shortcode lets you put a customizable Google map centered on a location you specify anywhere in a post. It comes with a variety of attributes you can use to customize the map. 

location
Adding this is necessary for the map to show up. It should be an address in plain text, something you would type into the search field in Google Maps. 

type
The type of map to show. The value can be HYBRID, SATELLITE, ROADMAP, TERRAIN. The default value is HYBRID.

zoom
Set the initial zoom level for a map. If you're adding a street level map somewhere around 14 (the default) is best. The zoom can range from 1 and up where 1 is the most zoomed out. 

marker
If set to yes, a marker will be placed at the center of the map, indicating the location you specified

height
The height of the map can be set specifically if you need it. By default it is set to 400px. Don't forget to add the 'px' suffix to the amount!

Example 1 - A simple map

[map location='New York, 6th Avenue']

An example of a map shortcode on the website

Example 2 - A narrow roadmap

[map location='New York, Boradway' type='ROADMAP', height='120px']

An example of a map shortcode on the website

Tabs

Using the tabs shortcode you can create an area with tabbed navigation. This is great if you want to show more content in smaller area. The [tabs] shortcode is always used with the [section] shortcode, similarly to how columns are created. 

The [tabs] shorcode has two attributes:

contained
This attribute can be set to 'yes' or 'no'. By default it is set to yes, which means that the contents of the tabs will be contained in a box. If set to no, the box will be removed.

pill
This attribute allows you to use pill-style navigation instead of regular tabs. Set to yes if you would like pills, the default value is no.

The [section] shortcode has just one attribute:

title
The title of the section which will be used in the tab.

Example 1 - Simple contained tabs

[tabs]
[section title='My First Tab']
This is the content of this tab
[/section]
[section title='My Second Tab']
This is the content of the second tab
[/section]
[/tabs]

An example of a tabs shortcode on the website

Example 2 - Pill style tabs with shortcodes in the content

[section title='My First Tab']
[row]
[column width='four']
<img alt="An image" class="alignright size-tile wp-image-1552" height="255" src="http://mysite.com/image.png" width="400">
[/column]
[column width='eight']
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
[/column]
[/row]
[/section]
[section title='My Second Tab']
This is the content of the second tab
[/section]
[/tabs]

An example of a tabs shortcode on the website

You can use any other shortcode inside the tab content!

Accordion

An accordion is very similar to a tab, but has a vertical orientation. It is similarly useful for displaying more content in smaller spaces. To create an accordion you will need to use the [accordion] shortcode and the [section] shortcode. The setup is exactly the same as before, but the accordion shortcode does not have any parameters. The section shortcode has a title parameter which you must fill out. 

title
The title of the section which will be used in the accordion

Example 1 - A simple accordion

[accordion]
[section title='My First Accordion Section']
This is the content of this section
[/section]
[section title='My Second Accordion Section']
This is the content of the second section
[/section]
[/accordion]

An example of an accordion shortcode on the website

Example 2 - An accordion with shortcodes in the content

[accordion title='My First Accordion Section']
[row]
[column width='four']
<img alt="An image" class="alignright size-tile wp-image-1552" height="255" src="http://mysite.com/image.png" width="400">
[/column]
[column width='eight']
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
[/column]
[/row]
[/section]
[section title='My Accordion Section']
This is the content of the second section
[/section]
[/accordion]

An example of an accordion shortcode on the website

You can use any other shortcode inside the accordion content!

 

Button

Creating nicely formatted buttons is extremely easy with the button shortcode. Just wrap it around any text to make it look like a button. You can specify a URL to actually make it work as a button and you can adjust various style settings.
 
url
The URL the user is taken to when the button is clicked
 
background
The background color of the button. See the section above on using colors for what values you can add here.
 
color
The text color of the button. See the section above on using colors for what values you can add here.
 
gradient
If set to 'yes' a subtle gradient will be generated based on the background color. The default value is 'no'.
 
radius
If you would like a rounded button you can set the radius here. By default it is set to '0px'. If you would like a subtle rounded corner use a small value like '3px'. if you want heavily rounded corners use something like '3px'. Don't  forget to add the 'px' part!
 
arrow
If set to 'yes', an arrow will be generated on the right of the button. The color of this arrow will be the same as the given text color. By default it is set to 'no'
 
Example 1 - A default button

[button url='http://redfactory.nl']Red Factory[/button]

An example of a button shortcode on the website

Example 2 - A custom button

[button background='#343434' gradient='yes' radius='5px' color='#fafafa' url='http://bonsaished.com']Bonsai Shed[/button]

An example of a button shortcode on the website

Highlight

The highlight shortcode allows you to highlight bits of your text in the post content. This is useful for making something stand out, or separating some content from the rest for some other reason. You can modify the color of the highlight using attributes.

background
The background color of the highlight. See the section above on using colors for what values you can add here.
 
color
The text color of the highlight. See the section above on using colors for what values you can add here.
Example 1 - A default highlight

[highlight]we will not be open on the 25th of December[/highlight]

An example of a highlight shortcode on the website

Example 2 - A customized highlight

[highlight background='#fafafa' color='#666666']we will not be open on the 25th of December[/highlight]

An example of a highlight shortcode on the website

Message

The message shortcode is another helpful tool for making some content stick out. It is great for putting up notices, warnings and other relevant information that you want to draw the user's attention to. Using attributes you can change some properties of the display.
 
background
The background color of the message. See the section above on using colors for what values you can add here.
 
color
The text color of the message. See the section above on using colors for what values you can add here.
 
radius
If you would like a rounded message you can set the radius here. By default it is set to '0px'. If you would like a subtle rounded corner use a small value like '3px'. if you want heavily rounded corners use something like '3px'. Don't  forget to add the 'px' part!
 
Example 1 - Default message

[message]We are closed next week for technical reasons![/message]

An example of a message shortcode on the website

Example 2 - A customized message

[message background='#79cddc' color='#ffffff']
<h1> Oh No!</h1>
We are closed next week for technical reasons![/message]

An example of a message shortcode on the website

Tou can use formatting tools like headings inside messages to make them stand out even more

Creating a Front Page


You might notice that in the website demo we have an awesome looking front page. There are two basic steps which go into the creation of a font page like that.

  1. Create the content using pages
  2. Make a specific page your front page

Before we contine please read the section above this one, especially the Pages section.

First of all, we created a Mashup page and named it 'Home'. It can be named however you want, it doesn't have to be home. Then created a gallery page and made the gallery you can see on the front page. We then added a separate page which houses the quote under the gallery. 

We added a few products and assembled a menu card out of them using the Menu page template. Finally, we created a "Reviewed By" page and used four images in columns to make that section. 

back in the "Home" mashup page we selected these pages to be in the mashup in the order you see them. As the last step we went into the Theme Customizer and went to the "Static Front Page" section and selected the "Home" page to be the main page. 

Translating and Text


Almost all the text you see can be changed. This is true of the backend and the front end. The purpose of this can be translation or customization.There are two paths you can take. You can use a plugin, or you can use pot/po/mo files. 

If you are familiar with po/mo files you'll be able to scrape the theme for translatable text easily using PoEdit or similar tools. All the text is translation ready, so you'll just need to generate the files and use them. We recommend this for developers only as it is not the easiest process in the World.

You can also use a plugin such as WPML which works very well. You'll see a list of translatable text, all you'll need to do is modify it to your language or to the text you'd like used.

Updating Your Theme


Updating your theme is very easy. Themeforest always has the most recent version. If there is an update you can just re-download the theme, update and you should have all the fixes and new additions. 

To get notified of updates you should subscribe to the The Restaurant Classic feed. We'll post about upcoming updates and other related topics. You can also visit the blog any time to read the latest info. 

Note that any modifications you have made to the theme files will be overwritten with the update. Options and other settings that you modified using the Theme Customizer, widgets and so on will be safe, they will be carried over to the updated site. 

If you need to make modifications to the theme we support child themes completely so please use this method, see the next section for details.

Modifying Your Theme


The Restaurant Classic is yours to freely modify in any way you want. However, it is important that you do so in a compatable way. This will ensure that we can help you out with support issues, even if you have modified your theme and that updates don't break your site. 

Developer Documentation

Almost all the files used in the theme are documented inline. Each file has a short description, a table of contents, and where necessary, clarification. We've tried to make the code as readable and clear as possible.

All our code is 100% WordPress compatible and we follow WordPress coding standards to make it conform with core WordPress code. 

Creating Child Themes

The way we encourage you to modify our themes (and other themes) is the use of child themes. This is a very simple process which ensures that whenever you update the theme it doesn't break the site and you don't loose your modiffications. 

If you make modifications in the theme in the usual way it will get overwritten whenever you update the theme. Since we do push out updates regularly this would be a big hassle. 

If you have made modifications in the theme and want to update you'll need to back up your changes and re-add them.

A far better way is to use child themes. A child theme is a separate theme which is based on another theme. If you create a child theme it will use the files of The Restaurant Classic, except where you specify otherwise.

If you would like to learn more about this process we recommend reading the Child Themes article in the WordPress Codex.

The gist of the process is that you create a new empty directory in the themes folder with a single style.css file. Apart from the regular theme header you also need to include a special 'Template' comment which will tell WordPress which template the theme is based on. Finally, import the parent themes style using a regular import commant.

This will create a child theme which is exactly the same as its parent. From here on you only need to create the files you want to change. If you want to add custom styles just do it below the import in the style.css file. If you need to make a change in the index file just create it and modify it.

Changelog


Version 1.0

This is version 1.0, the initial version of the theme.