KnowChow

Chow WP & FoodiePress Documentation

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form on themeforest.net/user/purethemes. Thanks so much!


Author: Purethemes
Created: 16 March 15
Modified: 16 March 15
Current Version: 1.0
Documentation Version 1.0

This documentation in latest version is always available on docs.purethemes.net/chow

I assume you have your own WordPress installation, so let's get started!


Installation

You can do it in two ways:

  1. FTP Upload:
    • Extract the “chow-theme.zip”
    • Open up your FTP manager and connect to your hosting
    • Browse to wp-content/themes
    • Upload the chow theme folder.
    • Log Into WordPress and go to Appearance - Themes
    • Find the Chow and click activate
  2. WordPress Upload
    • Download the “Installable WordPress file only” you'll find it here

    • Navigate to Appearance Add New Themes Upload.
    • Follow the instructions on the screen, select the downloaded theme folder (“chow-theme.zip”).
    • Hit Install Now and the theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to Appearance Themes and activate Chow.

 

Plugins installation - step I

If installation was successful, you'll see a notice about required plugins for Chow, to proceed click "Begin installing plugins"


Plugins installation - step II

You'll see a list of plugins, select all and choose Install, if everything will go OK, you'll be moved to the Plugins menu in wp-admin, all new plugins should be activated

It might happen that you'll encounter error, in that case install plugins one by one.

The most important plugin is FoodiePress. MailChimp Widget is needed for a newsletter widget, and WooCommerce is needed if you wish to setup shop

If you installed required plugins and don't need anything else, just click Dismiss this notice


After activating the theme, you will notice under Appearance menu new sub-menu Theme Options. You'll find there Theme Options Panel, from where you can do a lot of cool stuff. Every section of Theme Options Panel will be described later.


Now open this Options Panel and hit Save button - it will set some options for the start.


After activating the plugin FoodiePress on Plugins list, you can go to Settings -> FoodiePress and check the checkbox there. This will automatically add [foodiepress] shortcode to the start of your post if your post has any Ingredients added. This is most usefull settings as you don't have to care about inserting the shortcode.


Now open this Options Panel and hit Save button - it will set some options for the start.

If you want to have the same content on your website as Live Preview of Chow theme, you'll need to import demo content. To do that please go to Tools Import WordPress, install plugin you'll see and than select file "extras/chow-import.xml". You'll find it in "All files & documentation"

Just download and extract this file, you'll find the "extras" inside

If you don't want to import whole data, in "extras/layouts" you'll find txt files with code from Live Preview. You can choose for example home.txt, copy whole content of that file, than create new home page on your WordPress, paste it in Text view (the right top tab over Post/page Editor), and start working on your page based on this layout.

Notice All photos included with import file are just plain gray color, as they are copyrighted files purchased on PhotoDune. If you want to use them, list of links is at the end of this documentation.

If your import was successful, please go to Appearance Menus and in Manage Locations and for 'Primary Menu' choose "Menu", than save.

Next, you should setup your permalinks to look pretty. You can go to Settings Permalinks, choose the Custom Structure, and use this: /%category%/%postname%/

This theme uses WordPress 3.0 Custom Menus. Go to Appearance > Menus and you will see a panel where you can create new menus. Create one, add your created pages to it(from the left side panels) and save it. After this, go to tab Manage Locations where you can select the Menu from dropdown box . Choose your newly created menu, click Save and your menu is ready.

User dashboard

If you'll enable user registration on your WordPress website, you can add a page that will be a dashboard for users. To do that, create new page, named it for example 'My account' and as Page Template select "Chow User Account Template"

To enable registration, go to Settings -> General and select checkbox "Anyone can register". In next option set start role to "Contributor". That way users will be able to add and edit their own posts

After adding that page, go to Appearance -> Theme Options -> General and for the option "Choose My account page" select the page you've created.

The My Account page also lists all recipes that user has added to favourites




Submiting Recipes

If you'll enable user registration on your WordPress website, you can add a page that will allow users to add recipes. To do that, create new page, named it for example 'Submit Recipe' and as Page Template select "Submit Recipe Template"

To enable registration, go to Settings -> General and select checkbox "Anyone can register". In next option set start role to "Contributor". That way users will be able to add and edit their own posts

If you want to allow users to upload images to your website, install plugin User Role Editor and add option "upload_files" to Contributor role




Editing Recipes

For editing recipes previous steps must be done.

Create new page and as Page Template select "Edit Recipe Template"

After adding that page, go to Appearance -> Theme Options -> General and for the option "Choose Edit page" select the page you've created.




Add to Favourite Recipe

This feature is enabled by default but you can turn it off in Theme Options

It works for logged and not logged user.

For logged users, the list is displayed in My Account page, for not logged, it's stored in a cookie, and displayed in the popup.

To show popup, add to your sidebar widget named FoodiePress Favourites Widget

Post

Creating posts is nothing special if you have even basic experience with WordPress. Chow theme offers couple of additional options in Post editor.

Post types

Chow supports two format of posts - gallery and video. You can change it in right side box. Default is Standard - that one shows only text of post and thumbnail image if added. Each change will show a form with options to fill. For Video, just put there a link to a vide from youtube,viemo, or any other service that has support for oEmbed.

Below Editor you'll see Layout box and Post options box.

Layout box

Layout box gives you ability to select sidebar to display with post or page, and also select layout of post - you can put sidebar on left or right side, or just show full-width content (in case of pages). Right side is default.

You can create more sidebars in Theme Options in Sidebars section. Just follow instruction there.








Background image for post header

You can select image for Header Background that will be displayd in post:

It should be 1920x300px, if the original image is bigger it will be cropped and resized by WordPress

Select image for slider

You can select image that will be used in slider in case the post is selected for it. If you'll leave this field empty, the 'Featured Image' will be used for a slider image.

It should be 1920x590px, if the original image is bigger it will be cropped and resized by WordPress

If you want to use shortcodes in post content, you need to write the excerpt or you might see non parsed shortcodes in search results or in front page.

Layout box

Layout box gives you ability to select sidebar to display with post or page, and also select layout of post - you can put sidebar on left or right side, or just show full-width content. Right side is default.

You can create more sidebars in Theme Options in Sidebars section. Just follow instruction there.

Recipes can be created only if you've installed and activated FoodiePress plugin. By installing this plugin you get new form on posts where you can fill recipe informations. Here's how it should look:

While creating recipe, you need to fill as much information as you know about it, but the basic required is Ingredients and Instructions. Now step by step I'll explain each part.

    • Recipe title recipe box is Schema.org compatible and it has to have title - if you won't put it here, the post title will be used
    • Recipe theme each recipe box can look different, there are two default recipe templates but it's super easy to create your own if you have basic HTML&CSS knowledge - more about it in Customization section
    • Short summary -it's not required but it's good to write something about recipe there, try to make it short!
    • Indgrediets - here's important part - each ingredient added is here is at the same time added to the taxonomy Ingredients. This allows you to save them and reuse in next recipes thanks to autocomplete on this fields. Example - if you create post with recipe for chocolate cake, you add 'Dark chocolate' as one of ingredients, which also will be added to Ingredients taxonomy of this post. When you will create new recipe for different cake, which also requires dark chocolate, just by typing 'choco' you will see suggetsion to use the same ingredient name. Later, this is used to search all recipes by ingredients. You can drag and drop ingredients, and you can add Separator field, if for example you have two-parts recipe
    • Instructions preferably step by step list of things to do , but you can easily put there even a video
    • Preparation time; Cooking time; Yield first two are quite easy, the Yield is the quantity produced by the recipe (for example, number of people served, number of servings, etc).
  1. Total time needed another taxonomy that allows you to group recipes by time. Although you have another field for Prep Time and Cook Time to fill under Ingredients, but this allows you for more flexibility.
  2. Levels and Servings also not required, but useful taxonomies to group your recipes
  3. Ingrediets those are exactly the same Ingredients you've added to the Recipe Editor box, you shouldn't add it there, this fields needs to be displayed, but imagine it's not there;)
  4. Nutrition Facts- these are not required, and probably won't be used much, but it's still pretty valuable info - the nutrtition lists is also Scheme.org compatible.
  5. Photo - it's good when recipe has photo included - this is the image that will be displayed as a thumbnail in google - if you've added Featured Image to the post, it will be used instead of the photo added here.

Adding Ingredients in recipe allows you to have advanced search form for Recipes. It's possible to search recipes by ingredients (just type what you have in fridge, and click search to find what you can do it, and you can even select which ingredients you don't like to exclude them from results!). Here's a demo http://chow.purethe.me/browse-recipes/

You should use contact form 7 plugin for contact form. After installing it, go to Contact - Add new (or edit current one) and in Form field paste what's below:

                                    
<fieldset>
    <div>
        <label>Name:</label> [text* your-name]
    </div>

    <div>
        <label >Email: <span>*</span></label>[email* your-email]
    </div>

    <div>
        <label>Message: <span>*</span></label>[textarea your-message]
    </div>
</fieldset>
[submit "Send"]
                                    

Than at the top of page you'll see shortcode, for example:

[contact-form-7 id="503" title="Contact form 1"] 
Use it on a page you want to have contact form.

Here's some short info about basic plugins you can and need to use in Chow.

If you're using MailChimp for sending mailings, you can get subscribers by using official MailChimp Widget plugin that is nicely styled for Chow.

After installing, go to Settings - PageNavi, and be sure to have checked "Use pagenavi-css.css". This will replace standard "next/prev" page buttons with pagination list.

Chow has many shortcodes which will help you to build awesome layouts. In "extras" folder you have sample layouts saved as text files, so you can just copy them to your Editor and use them as a base for your site.

Here is list of all shortcodes:

[clear]

Empty div with clearfix, use after floated elements

[icon icon="book"]

This will add one of icons from Font Awesome pack

[tooltip title="" url="" side=""] text [tooltip]

Create tooltip over link, showed on hover.

Options
  • title
  • url
  • side top | left | bottom | right
[list style=1 color="yes"]
<ul>
<li> list item </li>
<li> list item </li>
</ul>
[/list]
                            
Options
  • author 1 | 2 | 3 | 4
  • source yes | no

Use it to replace boring list bullets with nice icons

[quote author="Laurie Colwin" source="http://google.com"]No one who cooks, cooks alone. Even at her most solitary, a cook in the kitchen is surrounded by generations of cooks past, the advice and menus of cooks present, the wisdom of cookbook writers.[/quote]

Nicely styled quote box

Options
  • author name of author
  • source link to source
[space class="margin-top-30"]

This works like [clear] shortcode but allows you to add custom class, for example to make some whitespace. There are couple class available, margin-top-xx, margin-bottom-xx where xx can be number 0,10,15,20,25,30,35,40,45 or 50

[space class="margin-top-30"]

This works like [space] shortcode shows horizontal grey line

Chow is based on modified Skeletons grid - Full width page has 16 columns, if it's page with sidebar it has 16 columns. Using columns shortcodes you can build your own layouts.

The important part of columns shortcode except the width is place. You have 3 options here - first, none or last. If last is used, it's assumed that this column is last in current row and floats will be cleared. First  will set margin-left to 0px. If you have more than two columns you might want to use also place="center" - it will set margin left and margin right to 0px. It's good to try different parameters to find out what looks the best in specific situation.


[column width="one-third" place="first" ] Put here content [/column] [column width="two-thirds" place="last" ] Put here content[/column]
                            
Options
  • width "1/3", "2/3", "sixteen" (default), "fifteen", "fourteen", (..), "two", "one"
  • place "first" (default), "center", "last", "none"
  • custom_class just adds custom class to the container div, handy if you want to style something in different way

You can use other shortcodes in columns.

[headline margintop="0" marginbottom="30" clearfix="1"] Text [headline]
Example:

This will create H tag styled for nice start of paragraph. You can add top and bottom margin to it.

It need's to be wrapped with [accordionwrap] shortcode

[accordionwrap] [accordion title="Accordion#1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor libero sodales leo, eget blandit nunc tortor eu nibh. Aenean nisl orci lorem, condiment ultrices consequat eu lorem ipsum dolor sit amet inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo dolor sit amet.[/accordion][accordion title="Accordion#1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor libero sodales leo, eget blandit nunc tortor eu nibh. Aenean nisl orci lorem, [/accordion][accordion title="Accordion#1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor libero sodales leo, eget blandit nunc tortor eu nibh. Aenean nisl orci lorem, [/accordion] [/accordionwrap]
                    
[tabgroup] [tab title="Tab 1"] Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.[/tab] [tab title="Tab 2"] Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.[/tab] [tab title="Tab 3"] Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit. [/tab] [/tabgroup]
                    
[dropcap type=""] A[/dropcap]

Make first letter of paragraph larger than the rest of the text. As "type" you can use also 'full'.



[popup title="Modal Popup" buttontext="Open popup"] Chow is a premium template created for ecommerce and business websites [/popup]
                            
Options
  • title - required title
  • buttontext - text on the button
[highlight style=""] text [highlight]

This will highlight wrapped text.

Options
  • style "color" (default), "gray", "light"
[box type=error] Error! Please fill in all the fields required. [/box]
                            
Options
  • type "error", "notice", "warning", "success"
[button color="green" url="#" icon="icon-ok" iconcolor="white"] Text [/button]
                            
Options
  • url link
  • color "color" (default), "gray", "dark"
  • customcolor "#000000" (any color hash)
  • iconcolor "white","black"
  • icon Font Awesome icon name
  • target "_blank"
  • customclass
[shareit facebook="yes" pinit="yes" twitter="yes" gplus="yes"]
                            
Options
  • facebook - set to "yes" to show button
  • pinit - set to "yes" to show button
  • twitter - set to "yes" to show button
  • gplus - set to "yes" to show button
[slider][slide image="http://themes.loc/chow/wp-content/uploads/sites/11/2014/07/service.jpg" caption="The New Way To Success"][/slider]
                            
Options
  • image - URL to image
  • caption - Text to show
  • url - URL of the slide
  • Chow MailChimp List Signup
    Works only if you have installed plugin named 'MailChimp Widget'
  • Chow Author
    Dispays informations about author of current post or about selected author
  • Chow Popular
    Shows popular recipes based on ratings

Options panel is based on amazing OptionsTree plugin.

Typography

You can choose from one of 500+ Google fonts. Select font for body and for headers. You can also just choose some nice font for a logo if you prefer to have text logo instead of image.

Sidebars

All sidebars that you create here will appear both in the Appearance > Widgets, and then you can choose them for specific pages or posts. Please choose a unique title for each sidebar and make it one word.

Chow is using new feature of latest WordPress - Theme Customizer, you'll get there by clicking Appearance - Customize

It gives you real time preview of changes you made to your site.

You can learn from here about Translating theme into your language.

The .pot file is in 'chow/languages' folder named 'default.pot'.

You can use Poedit to translate the .po file. You need to save it in languages folder, and name just the same way your language is defined in WP config file. Open wp-config.php and check define ('WPLANG', '');
if it's for example fr_FR, save your .po file as fr_FR.po

There are 2 default layouts in Chow:


It's easy to create your ownn templates, let's learn how:

  • All core templates are stored in wp-content/plugins/foodiepress/public/templates/

  • To create your template, duplicate the 'recipe1' template as it's good place to start, rename it as you want and put to wp-content/uploads/foodiepress/ - this way it won't be removed after update

  • Inside you'll find file index.tpl, style.css and folder images and partials (partials can be used for repeatable elements, but we probably won't need it)

  • index.tpl is nothing more than html file, but it contains tags to display dynamic recipe elements.

  • in style.css keep styles for every elements of the recipe, what's important is to use prefix for each elements with the name of your template. Example: if you've named your template 'Flowers Theme' and folder name is 'flowerstheme', you want to add style for recipe thumbnail, the CSS you'll add will be:

    .flowerstheme .recipe-image { padding: 5px; }

  • The templating engine for recipes is Dwoo.org, you can check how to use, it support simple operation and if statement

  • After creating template you need to add it to list, for this you need to add to your functions.php

    function my_own_themes( $array ){
        $array['flowerstheme'] = array(
                    'name'=>'Flowers Theme',
                    'origin' => 'user'
                    );
        return $array;
    }
    add_filter( 'foodiepress_themes', 'my_own_themes',10);
    

    You need to keep the same names as your templates folder name, if everything went ok, you'll see it on the list of templates in Recipe Editor


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.