How can I create my own recipe theme?

1 person has
this question
+1
Reply
  • Design your recipes

    A Kitchenbug Recipe Theme is a collection of files that are used by the Kitchenbug Wordpress Plugin to render the recipe to the user, allowing them to read and interact with the recipe according to your design. By designing your own Kitchenbug Recipe Theme, you can control the way a recipe is displayed on your blog, as well as how it looks when one of your readers prints the recipe.

    Where are the Recipe Themes located?
    You can find the themes folder inside the Kitchenbug plugin folder. Once the plugin is installed, you will find the theme folder under /wp-content/plugins/kitchenbug/themes

    Inside the recipe theme folder, theme files are arranged into theme folders. Each folder contains a single theme, where the folder name represents the theme’s name.

    Which files does a recipe theme include?
    Each recipe theme holds four files:


    1. style.css - the recipe’s stylesheet, which is used to control the recipes layout and design on the blog’s post page.

    2. style-print.css - the printed recipe’s stylesheet; it is separate from the displayed recipe style.css.

    3. template-recipe.php - the recipe’s template file which is used to display the layout of the recipe inside the blog’s post page.

    4. template-recipe-print.php - the template file used to render a recipe for print.



    A theme needs to hold all of these files to make a proper recipe theme. Please make sure your theme has these four files before you proceed.

    How can I start creating my own new theme?
    The best way to start would be to duplicate one of the stock recipe themes, rename it to your own unique theme name, and use that theme as a starter from which you can build your own design.

    Your Kitchenbug plugin contains a theme called Starter. This is a theme with a basic, simple design, which you can use as a basis on which you can create your own unique look.

    How can Kitchenbug identify my own theme?
    In order for Kitchenbug to list your theme properly inside the Kitchenbug settings page, the theme’s style.css file must contain the theme details. No two Kitchenbug themes are allowed to have the same theme details.

    The details are listed inside the comment header of your theme’s style.css file. The comment header contains the theme’s name, author, URL, version, etc. Here is an example for a theme comment header with the details for the Starter recipe theme:

    /*
    Theme Name: Starter Theme
    Author: the Kitchenbug team
    Author URI: http://www.kitchenbug.com/
    Description: A starter theme for anyone to build on.
    Version: 0.1
    */

    How do I manage my recipe layout and design?
    The recipe template file is a PHP source file used to generate the way the recipe looks inside your blog posts. It uses CSS files to apply your style to the recipe elements.

    There are two sets of page templates and styles:

    1. Webpage template and style, for determining the way the recipe is shown inside the blog post’s page, found inside the style.css and template-recipe.php.

    2. Printer template and style, for the printed layout and design, found inside the style-print.css and template-recipe-print.php.



    The template files are PHP files with HTML tags for the different recipe layout elements. Embedded inside are the recipe details, rendered through PHP code.

    How can I access the recipe details from inside the template?
    In order to render recipe detains inside your template, simple use the echo PHP command along with any of the recipe details’ variables. Here is an example for show the recipe’s name inside the template:

    name ?>

    Each of the recipe’s details can be accessed through the $this object. Following is a list of recipe detail variables contained inside $this:


    • $this->id - the Kitchenbug recipe unique identifier

    • $this->publisherName - the blog’s name

    • $this->publisherURL - the blog’s URL

    • $this->name - the recipe’s name

    • $this->category - the recipe’s category

    • $this->cuisine - the recipe’s cuisine

    • $this->description - the recipe’s description

    • $this->image - the recipe’s image URI

    • $this->minServings - the recipe scaling minimum value

    • $this->maxServings - the recipe scaling maximum value

    • $this->servings - the number of servings for this recipe

    • $this->scale - the recipe’s original scale (‘M’ for Metric, ‘US’ for the US system, and ‘G’ where no system is used)

    • $this->prepTime - the recipe’s prep time

    • $this->cookTime - the recipe’s cook time

    • $this->totalTime - the recipe’s total time (prep plus cook)

    • $this->ingredients - the recipe’s ingredients, arranged inside an array

    • $this->directions - the recipe’s directions, arranged inside an array

    • $this->tips - the recipe’s tips, arranged inside an array



    Are there any special functions that I should use inside my template file?
    There are a few functions that should be called from inside the template file in order to render certain display and functional elements of the recipe. Here are the functions that are available to the recipe theme:

    • $this->showNutHighlight() - this function shows the recipe’s nutrition highlight box, where the reader can check the recipe’s caloric value, protein level, carbs, fat content, and several other nutrition facts. Calling this function renders the nutrition highlight box.

    • $this->showScaleSelect($minServings, $maxServings, $servings) - this function shows the scaling drop-down with the number of servings selected, and the drop-down ranging between the recipe’s minimum and maximum servings.

    • $this->showConvertSelect($scale) - shows the conversion selection drop-down, with the current measure system already selected. The convert selection drop-down is only shown if the recipe is written in either metric or US systems.

    • $this->renderWrappedArray($array, $tag = ‘li’) - this function renders an array inside a specified tag, where the default is a list item tag (‘li’).



    What are the “itemprop” attributes inside the template file? Are they important?
    The itemprop attributes are used by search engines to recognize certain elements inside your recipe. These pieces of information are used by search engines to provide more information about your recipes to people who wish to find them. It is part of what Kitchenbug does to your recipe in order to make it Google Recipe Rich Snippets compatible, making your recipe more findable on Google.

    To ensure that your recipe complies with the Recipe Rich Snippets format, make sure the itemprop attributes are properly located inside the template file. This is why it is recommended to use one of the Kitchenbug stock themes to develop your own theme, as the itemprop attributes are properly located inside the template files.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned happy, confident, thankful, excited kidding, amused, unsure, silly sad, anxious, confused, frustrated