Talisa - Food Recipes Wordpress Theme

By Progression Studios

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, visit our support forum.

Theme Installation

To install your theme in WordPress you must navigate to the menu "Appearance" on the left and then the submenu "Themes". From that page you should see your current list of themes like "Twenty Fourteen". Now click the "Add New" button at the top. Then click on the text button at the top "Upload". You then should click Choose File and find your theme files on your computer and upload them. Note: You are only uploading the folder "Talisa-WordPress.zip" Your final step is to "Activate" your theme.

If you have any issues installing your theme. Visit this faq: Solving Broken Theme/Stylesheet Missing WordPress Theme Issues

Plugin Installation/Activation

After installing your theme, you will be prompted to install a set if additional plugins. Click on the "Begin Installing Plugins" text link to install the plugins. We strongly recommend installing theses upon the initial installation. You can also deactivate and remove them later on.

You will then view hte "Install Required Plugins" page. You can also reach this page under Appearance > Install Plugins. You can select all the items and Bulk Install the plugins or install the plugins one at a time.

Note: Make sure to "Activate" the themes after you install theme.

Setting up your bread-crumbs

You can easily adjust your bread-crumb navigation under "Settings > Breadcrumb NavXT". Here are hte live preview settings:

 <span class="divider">/</span>

<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" title="Go to %title%." href="%link%" class="%type%"><i class="fa fa-home"></i></a></span>

Then under the "Post Types" tab, adjust this setting:

Getting your URLs to display page names instead of numbers

By default the pagenames will be website.com/p15 instead of website.com/about. To fix this go to "Settings" > "Permalinks" and my recommendation is to change the Common Settings to "Day and name". After choosing "Day and Name", Click "Save Changes" and your done. Your urls will now display a proper Permalink structure.

Importing Demo Content

I have created a folder labeled "Live Preview XML" which contains an export for the Live Preview. This is located in the "Additional Files" folder. The place to upload this XML file is in WordPress under Tools > Import.

Once you've arrived on the Import page, you will click on the "WordPress" link: Wordpress - Install the WordPress importer to import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.

The first time you do this you will get a pop-up prompting you to install the "WordPress Importer". You will need to click "Install Now". Then You will have installed the plugin and need to click "Activate Plugin & Run Importer".

From here you will just need click "Choose File" and select the "mywebsite.wordpress.2013-12-27.xmll" file. Then click "Upload file and import".

You will then be prompted to Assign Authors. You can read the description at the top as this explains everything. Note: Make sure you Import Attachments.

Check the box "Download and import file attachments". This will download attachments for images included in the Live Preview demo.

You now just need to wait for the importer to finish. This might take a few minutes depending on your hosting server speed.

Select the Navigation Menu

After the importer is completed, you will have to select your menu under Appearance > Menus.

Select the Menu as the "Main Navigation" under the "Theme Locations". After you've selected your navigation from the drop-down, click "Save". This is what links your newly created menu to the theme.

Select Your Homepage and Blog

Next you will need to select your homepage and blog under Settings > Reading.

Theme Options & Colors

You can easily adjust the theme options by going under Appearance > Customize like so:

Uploading a logo

From there you can click on headings like "Theme Settings" & "Home Settings" to adjust the theme. The logo for example is edited under "Theme Settings". You can click on the logo and Upload a new image.

After you add your new image, you will need to adjust the logo width and logo height. Also, you can adjust the margin above and below the logo.

Color Scheme Modifications

You can easily adjust the color scheme of the theme within the theme customizer. We have two sections for these: "Background Colors" and "Font Colors".

You can easily adjust the color and click "Save" at the top. If you don't like the change, just click on "default" to reset the color to it's original color.

Need to adjust more colors?

If the font or background color you want to change isn't listed in the Theme Customizer, check the style.css file. We have a table of contents at the top that points out all of the sections within theme. You can also look-up styles using FireBug for FireFox or Safari/Chrome Inspector. This will allow you to edit additional places within the theme.

How to use Firebug for Firefox to look-up styles in the style.css file: https://www.youtube.com/watch?v=6eTW8-C6_gk

How to use Inspector for Safari & Chrome to look-up styles in the style.css file: https://www.youtube.com/watch?v=nOEw9iiopwI

Header Backgrounds

You can adjust the header backgrounds under Apperance > Header

Note: You can customize the header image on pages by setting a featured image for a page.

Navigation Menus

The navigation is easy to customize. You can add pages, categories, or even custom links. Both of the Navigation Menu's are edited in the "Appearance" section under "Menus".

Step 1) Create a Menu

To start, create a new menu. You can click on text link "create a new menu". Then, just entered in a menu name and click "Create Menu".

For this example, we created a Menu Navigation with the name "Main Navigation".

Step 2) Select a Menu under Theme Locations

After you have created your menu, you need select the Theme Location. You can do this by going under the "Manage Locations" tab at the top. Then select a menu under "Primary Menu" and click "Save Changes". Now you have a navigation menu set to your theme.

Step 3) Add pages to your Menu

The final step is adding pages and links to your newly created Menu. You can just select a page via the check-box and click "Add to Menu".

Then the page will be added in the Menu list on the right. You can drag menu items around to order them. Or customize/delete the menu items by clicking on the down arrow on the right. Once you are done customizing your menu, click "Save Menu".

Step 4) Adding Recipe Categories/Ingredients/Cuisines to the Menu

By default the recipe Taxonimies pages won't be visible. You can enable these by clicking on "Screen Options" in the top right of the Menus page and checking the "Recipe Category" checkbox. Then you will be able to add the Recipe Categories just like pages.

Step 5) Making Sub-Menu's

You can make multiple level's of sub-menus. All you need to do is drag the menu item that you want inside the sub-menu under-neath the parent menu item. There will be an option to indent the item, so that the sub-menu item looks like it is pushed inside of the parent menu item. See example, "Sample Page" is in a sub-menu of the parent page Home:

Step 6) Adding Recipe Archives to the Menu

By default the plugin will have a "Post Type Archive" section. Just click on that and then you can add a link to all "Recipes" into your menu. This will link to all the recipes.

Recipe Pages

Recipes are created using the Recipe custom post type. Adding the Ingredients and Directions are done using simple Bulleted List and Numbered List.

Ingredients List:

The ingredients can be created by using a simple bulleted list. You can create a bulleted list by clicking the bulleted lists button in the editor.

Directions List:

The directions can be created by a using a numbered list. You can create a numbered list by clicking the numbered lists button in the editor.

Recipe Front End Posting

Adding a front end posting form is easy. To generate the front-end posting form, just add-in this shortcode onto any page:

[new-recipe-form]

Widgets

The sidebars are controlled via widgets. You can easily manage the widgets of the theme under Appearance > Widgets.

Drag & Drop your widgets into the corresponding Widget Area

You simply drap & drop the widgets into the spots you want. Drop the widget out of the box if you want to remove it.

Available Widget Areas:

• Sidebar - Default sidebar available on all pages
• Recipe Sidebar - Sidebar available the recipe pages
• Footer Widgets - This widget area shows in the footer. You can adjust the column count in the Theme Customizer.

Unlimited Sidebar Areas

If you want to use unlimited sidebars so you can have unique sidebars on specific pages, use this plugin:

Unlimited Sidebars Plugin

Creating the Homepage

Step 1) Add New Page

By Default the home-page will display the latest blog posts. In order to setup your theme like the Theme Demo, you will need to create a new page. We called our page "Home".

Step 2) Set your page as the homepage

Next, you will go to "Settings" > "Reading" in the WordPress Dashboard.

From there you will change your "Front page displays" from Your latest posts to "A static page". You will want to choose the page you created from the drop-down for 'Front Page'.

Once you've chosen your new Front Page, you can click "Save Changes" and you will now have a custom home-page.

Step 3) Set your page template

The home-page from the Live Preview uses a custom page template named "Homepage". You can select this under "Page Attributes" > "Template". This can be done in the right sidebar when editing any page.

Note: You will select this option while editing the actual page.

Step 4) List of recipies

By default the homepage will pull in the latest recipies. You can choose a specific recipe category to pull-in by adjusting the Page Settings: "Homepage Recipe Category Slug ". If this is blank, it will pull in all recipies.

Note: If you don't want any recipes on your homepage. just add-in a category that doesn't list into the section.

Optional Step) Adding Simple Text & Shortcodes

You can add text to your homepage by just typing text in on your homepage. You can build a page using shortcodes and/or images. For example instead of using the Homepage Feature boxes, you can just use the two column shortcodes.

Homepage Slider

The featured slider can be added by creating or importing the feautred slider. You can manage your sliders under hte heading "Revolution Slider". From there you can copy your shortcode into your hompage under "Homepage Slider".

Then copy the Revolution Slider shortcode onto your homepage. You will add-in the shortcode under "Page Settings" > "Homepage Slider: Insert Slider Shortcode" option:

Example Homepage Slider Included

We have included an example of the homepage and shop page sliders under "Additional Files" > "Live Preview Files" within your download. You can click "Import Slider" and import the "Slider Homepage.zip" file.

Latest News/Blog

Creating the blog page is simple. You will need to create a page that you would like to be your Blog (We created a page called "Latest News"). Then you need to need to go to "Settings" > "Reading" in the left sidebar. Under Front Page displays you will want to select "A static page". Then for "Posts page" you will select whatever page you want to be your Blog to be and click "Save Changes".

Adding the 'Continue Reading' Button (Cut-off content on index)

By default the blog-posts on the blog index will display all content. If you want to cut-off the blog-post on the index earlier, you will use the "Insert More" tag. The information above the break will be displayed on the Blog Index and all other information will be displayed on the post page. You can find the button for in default text editor as shown in the example.

Note: The "Insert More" tag will also display the 'Continue Reading' text.

Inserting an Image to your Post (Featured image)

Just click "Add Media" and upload the image. Then click "Set Featured Image" and select your image. The last step is to click "Use as featured image". See the example below.

Adding a video to your Post

You just need to find the embed code to your video and paste that into the Audio/Video Embed box. Example:

Note: The video will automatically be resized for you.

<iframe src="http://player.vimeo.com/video/22884674?title=0&byline=0&portrait=0&color=ffffff" 
	width="400" height="225" frameborder="0"></iframe>

Getting the embed code

You can get the video embed code from vimeo, youtube, and etc. easily by clicking on the "Embed" link on their website as shown below in the image:

Gallery Post

Posting a gallery is simple. First you will select the "Gallery" post format.

When using the media uploader, you can select the drop-down to see only items "Uploaded to this post". This will show you what items are in your actual gallery. You can then adjust the image order using drag/drop and remove any images if necessary.

Note: Do not click "Inser Gallery" or "Insert into Post". The gallery is automaticaly created when using the Gallery Post Format.

Change the number of Blog posts per page

Changing the number of blog posts that display on the index is just a matter of going to Settings > Reading.

Contact & Full Width Pages

The Contact & Full Width Pages are controlled via Page Templates. You can select this while editing pages in the sidebar on the right under the heading "Page Attributes".

Contact Page

The Contact Page can be created by selecting a custom Page Template "Contact Page" under Page Attributes.

Inserting the Map into the Contact page

You can easily insert the map into the Contact Page via the short-codes. Just click on the Shortcodes button in the editor an add "Google Maps". You can then adjust the zoom level, location, and height of the map (The map will automatically be 100% width):

Note: You will add-in the map shortcode under the page settings "Contact Page Map Short Code".

[ls_googlemap location="new york,usa" zoom="5" title="New York" height="500"]

Inserting the Contact Form onto the page

Youo can easily add-in a contact form by clicking on the "Contact" post type. Then copy the shortcode like so and paste it into your Contact Page:

[contact-form-7 id="5" title="Contact form 1"]

Learn more about how to use & customize the Contact Form here: http://contactform7.com/docs/

Full Width

The Full Width Page can be created by selecting a custom Page Template "Full Width" under Page Attributes.

Theme Shortcodes

This theme has some built in short codes to help you build your theme. You can find the short codes demoed in the Live Preview Short Codes page.

Built into the Post Editor

The Short codes are build-in to the post editor so you never have to memorize or look-up a short code again!

Icons

You can easily add-in icons into buttonslike so:

[ls_button icon_right="fa-home" color="default" url="http://progressionstudios.com"]Default Button[/ls_button]

You can see a full list of icons here: http://fontawesome.io/icons/. Just find the icon you want to use, and place in the text.

Note: You can easily remove the icon from a butotn by removing that option icon_right="fa-home" like so:

[ls_button color="default" url="http://progressionstudios.com"]Default Button[/ls_button]

Translating

You can easily translate this theme via:

Install and activate the plugin and go to Tools > Localization (shown in your language), then follow the instructions on how to translate the plugin.

Customizations

We do not offer support for customizations or extending our framework. This section is just additional information for developers and buyers that want to extend our framework and are comfortable making adjustments to theme files.

Note: We are available for hire via our website if you need help with customizations. Just fill out our contact form with your project details.

Child Theme

We always recommend using a child theme if you are extending a theme. Here is a great plugin to quickly build a child theme:
One Click Child Theme
WordPress Child Theme Documentation

Responsive layout

This site is beautiful at any size, be it a 17" laptop screen or an iPhone. All of the styles for the responsive layout are located here: /css/responsive.css

The responsive grid is controlled via "Media Queries". Magnolia uses media queries to serve the scalable grid, but also for the convenience of styling your site on different size screens. Magnolia's media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don't map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS devices. The built in media queries include:

• Smaller than 960: Smaller than the standard base grid
• Tablet Portrait: Between 768px and 959px
• All Mobile Sizes: Less than 767px
• Just Mobile Landscape: Between 480px and 767px
• Just Mobile Portrait: Less than 479px

Example:

/* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}
			

How to disable the Responsive Ability

You can easily remove the responsive styling by removing the /css/responsive.css file. If you do this, then add a body min-width otherwise tablets will have trouble rendering the background images properly:

body {min-width:1200px;}

Adjusting Image Sizes

All of the image sizes can be found in the functions.php file at the top.

Note: You must re-upload images if you adjust the sizes.

Example Blog (1140 pixels wide by 435 pixels tall). True means it is being cropped:

add_image_size('progression-blog', 1140, 435, true);

WordPress documentation on adding image sizes for your reference

CSS Styling

We have one main CSS stylesheet and it is located in the main theme folder under style.css file. The responsive styles are listed above.

Adding more Post/Page Meta-boxOptions

Just like the theme options above we are using an open-source custom meta boxes framework. You can learn more on gitbhub here (We placed our metabox options in /inc/dev7_meta_box_framework.php): Dev7studios Meta Box Framework

Photoshop Files

I've included all of my photoshop designs within the files:

1. The original layered PSD Files (/Additional Files/Photoshop Files)
2. Templates for site (/Additional Files/Templates)

As of June 22, 2016 Google has started to require an API key to use Google Maps on your site. Don't worry as this is still free. You just need to register with Google and get a free API key. Then paste the key into our theme.

Step 1) Register and get an API Key here: https://developers.google.com/maps/documentation/javascript/get-api-key

Step 2) Login to your WordPress site and add your API key into your theme customizer. (Appearance > Customize > Google Maps)