“Goodold Restaurant” Documentation by “raybreaker”

---

“Goodold Restaurant”

---

Table of Contents

1. Installation and setup
2. Setting Up Google Maps
3. How to add new slide to sliders
4. How to add new post in blog and new dishes in menu
5. Theme option
6. Navigation menu
7. Add image to gallery
8. Theme files
9. Sources and Credits

---

1. Installation and setup - top

Before installation of theme make sure that your have working version of WordPress (for more information regarding installing WordPress visit WordPress Codex).

STEP 1. Download and unzip file with theme from Themeforest.

STEP 2. Find "wpgoodold" folder that located in your unzipped theme folder and move it to "your_wordpress_folder/wp-content/themes".

STEP 3. Activate theme in Wordpress Dashboard > Appearance > Themes.

STEP 4. Install Contact Form 7 plugin:

STEP 4.1. Navigating to Wordpress Dashboard > Plugins and then click "Add New".

STEP 4.2. In field "Search" type "Contact Form 7" and click "Search Plugin" button.

STEP 4.3. Click "Install Now" link under Contact Form 7 plugin.

STEP 5. Import example data:

STEP 5.1. Navigating to Wordpress Dashboard > Tools > Import and then click WordPress.

STEP 5.2. After installation of importer click on "Choose File" button and choose file "demo_content.xml" that located in your theme folder and then click on "Upload file and import" button.

STEP 5.3. Reassign the author of the imported item to an existing user of your site and click on checkbox "Download and import file attachments". After you do this click on "Submit" button and wait until all data will be import.

STEP 6. (optional step) If your want to have lightbox effect at gallery page your should also setup wp-jquery-lightbox plugin.

Congratulations you have just finish installation of Goodold theme!

2. Setting Up Google Maps - top

This theme has two build-in google maps (in footer section and at contact page).

To make google maps work your should obtain Google Maps API keys and enter it in Google Maps API Key field that located in "Wordpress Dashboard > Appearance > Theme Option > Google Maps"

2.1 Where to find coordinates of place - top

STEP 1. Open Google Maps and find desired location

STEP 2. Right-click on that place and choose "What's here?"

STEP 3. Copy coordinates in the search box

3. How to add new slide to sliders - top

STEP 1. Navigate to "Wordpress Dashboard > Posts" and click on "Add New" link.

STEP 2. Enter title of slide in the title field. If you don't want that slide have title add new custom field "no_title"=true (to display custom field click on "Screen Option" button in top right corner and click on "Custom Field" checkbox).

STEP 3. Click on "Set featured image" link and select picture that will be use as slide image (note: image should be 950x420px to display correct).

STEP 4. Select proper category: if you want to add slide to main slider select "Slider" category, if your want to add slide to small slider that located in the Our Story section select "Slider story 1" or "Slider story 2" category.

STEP 5. Click on "Publish" button to add slide.

4. How to add new post in blog and new dishes in menu - top

To add new post in to blog you should create post and set it to any category except "Menu" and "Slider" and they child categories.

If your want to display thumbnail image before post's text just add feature image to them.

To add new dishes in to menu you should create post and set it to any child category of Menu category.

Dish thumbnail also settings with help of feature image. Every dish in menu must have custom fields: "Price" and "Ingredients"

If your want to make a certain dish featured (featured dish displayed in sidebar on menu page) just add to them custom field "featured"=true.

5. Theme option - top

Goodold theme has build-in plugin OptionTree that let you easily setting every aspect of this theme (like color, font, slider behavior etc.) without any knowledge of PHP, HTML and CSS.

To start setting theme navigate to "Wordpress Dashboard > Appearance > Theme Option".

6. Navigation menu - top

Goodold theme has 2 navigation menu: header menu and footer menu.

To start setting menu navigate to "Wordpress Dashboard > Appearance > Menu".

7. Add image to gallery - top

To add image to gallery you should add image to Media Library (Wordpress Dashboard > Media > Add New) and then attach it to Gallery Page.

8. Theme files - top

8.1. Theme layout - top

This theme is a fixed layout with two (Menu, Blog and Contact page) and one (Home, Gallery and Story page) columns. All of the information within the main content area is nested within a div with an id of "content-left". The sidebar's (column #2) content is within a div with an id of "content-right". The general template structure is the same throughout the template.

Example of general content structure with two columns.

Example of general content structure with one columns.

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

	#content-left div {
		color: #someColor;
	} 

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

	#main-content #content-left div {
		color: #someColor;
	}

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

---

8.2. CSS files and structure - top

I'm using four CSS files in this theme. All CSS files except style.css file located in "wpgoodold/css/" folder, style.css located in "wpgoodold" folder.

The style.css file contains all of the specific stylings for the page. The file is separated into the following sections:

	/*   ------- Reset Style Section -------   */

	some code

	/*   ------- General Style Section -------   */
	
	some code
	
	/*   ------- Content and Sidebar General Style Section -------   */
	
	some code
	
	/*   ------- Home Page Section -------   */
	
	some code
	
	/*   ------- Menu Page Section -------   */
	
	some code
	
	/*   ------- Blog Page Section -------   */
	
	some code 
	
	/*   ------- Blog Post Page Section -------   */
	
	some code 
	
	/*   ------- Gallery Page Section -------   */
	
	some code
	
	/*   ------- Contact Page Section -------   */
	
	some code 
	
	/*   ------- Prefooter Section -------   */
	
	some code 
	
	/*   ------- Footer Section -------   */
	
	some code
	
	/*   ------- Style for mobile devices -------   */
	
	some code
		

The nivo-slider.css file contains stylings for the slider that used on main page. The file is separated into the following sections:

	/*   ----- General Slider Style -----   */

	some code

	/*   ----- Pascal Theme (used for main slider) -----   */
	
	some code
	
	/*   ----- Illustration Theme (used in illustration to "Our story" on main page) -----   */
	
	some code
	

The fancy-caption.css file contain style for fancy-caption plugin.

The jquery-ui.css file contains stylings for the widget (you may find example of using widget on Story > Widget page). Change the styles that placed outside of the sections listed below are not recommended:

	/*   ------ Accordion Style Section ------   */

	some code

	/*   ------ Tabs Style Section ------   */
	
	some code
	

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

---

8.3. JavaScript files - top

All JS files can be found in "wpgoodold/js" folder. This theme imports five Javascript files:

1. nivoSlider.js implement slider (used on Main page).
2. fancyCaption.js create fancy image caption that shows on mouse hover on image (used on Gallery page).
3. twitterFeed.js create twitter feed (used in slider on Menu, Blog and Blog Post Page).
4. ztwitterFeed.js create twitter feed (used on main page).
5. bxSlider.js create text slider (used on main page in "Customer Review" section).

---

8.4. PSD files - top

I've included three psds with this theme:

1. The header (header.psd)
2. Social network icon (social_network.psd)
3. Section icon (section.psd)

OSP-DIN font that used in section.psd and header.psd may be found in PSD folder or also may be download from fontsquirrel.com.

If you'd like to change the main image in the header, open "header.psd", make the necessary adjustments, and then save the file as "header.png" in the images folder. Do the same for the social network and section icon.

9. Sources and credits - top

I've used the following images and icons:

• Barbecue Ribs Green Well Food by stevendepolo
• Barbecue Ribs Green Well Food Macro by stevendepolo
• Product Shots of Food by NickNguyen
• Garden Salad by stevendepolo
• Cascade Dining Rooms by prayitno
• Cascade Dining Room Lunch Time by prayitno
• Chicken Wing Skewers by avlxyz
• Restaurant La Boheme by Unique Hotels Group
• Aftermath by benwatts
• Tasting Room by Southern Foodways Alliance
• Food by NickNguyen
• Marmee Birthday Cake by kimberlykv
• Walnut Shrimp Chinese Food by stevendepolo
• Spicy Chicken with Handmade Noodles by avlxyz
• Pin icon by iconFinder
• Icon Sweets 2
• Subtle Pattern

I've also used the following jQuery and WordPress plugin:

• Nivo Slider
• jQuery Fancycaption
• jQuery Twitter Feed
• jQuery
• jQuery UI
• bxSlider
• zTwitterFeed
• Contact Form 7
• WP-PageNavi
• Option Tree
• WP jQuery Lightbox

---

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

raybreaker

Go To Table of Contents

---