The Kitchen Table: Responsive Recipes WP Theme

  1. Support Resources
  2. Plugins
  3. Installation
  4. Theme Options
  5. Header Image
  6. Menu Setup
  7. Home Page
  8. Bookmarks
  9. Page Templates
  10. Number of Posts for Categories
  11. Post Slideshow
  12. Checklists
  13. WordPress Image Gallery
  14. Widgets
  15. Comments
  16. Retina Ready
  17. Image Lightbox
  18. Shortcodes
  19. JavaScript
  20. CSS
  21. Changelog

Support ResourcesTable of Contents ↑

PluginsTable of Contents ↑

InstallationTable of Contents ↑

  1. Download and unzip the folder from ThemeForest.
  2. Upload the theme folder (with the "style.css" file inside) to the themes directory of your blog, which is located within the wp-content directory.
  3. Activate the theme from your admin panel by navigating to "appearance" > "themes".
  4. Options will be accessible from “appearance” > “customize”.

Theme OptionsTable of Contents ↑

Theme options are controlled from the theme customizer panel. Once finished installing the theme, be sure to review the options available by navigating to “Appearance” > “Customize”.

options

The Kitchen Table includes the header background image on the demo site, but you can customize the image if you want to. The header image is controlled from the "appearance" > "header" page in the WordPress dashboard.

NOTE: The theme automatically applies transparency to the image so that the theme accent color shows through the header area. Because of this, it's recommended that you use a black and white header image.

header

To organize your menu tabs, navigate to “Appearance” > “Menus”. For more information and instruction, watch the theme setup video here: http://www.youtube.com/user/themolitor/videos.

NOTE: Sub menus are not supported for the header menu.



Home PageTable of Contents ↑

By default the built-in home page for the theme will display. If you want a different page to display instead, navigate to the "reading settings" page and select the page in the "front page" drop down menu.

BookmarksTable of Contents ↑

The bookmarks feature is achieved using the Favorite Posts plugin. Use the below screenshot to help with configuring the Favorite Posts plugin to function and look like the theme demo. (screenshot has been simplified to help with readability).

Page TemplatesTable of Contents ↑

Page templates are available on the page edit screen inside the "page attributes" box. Page templates are only available for pages and NOT posts.

NOTE: The "bookmarks" page template requires the WP Favorite Posts plugin. For more info about the bookmars feature, please refer to the bookmarks section.

page templates

Number of Posts for CategoriesTable of Contents ↑

To control the number of posts that appear on category sections, navigate to "Settings" > "Reading" and adjust the "Blog pages show at most" number to your liking (see screenshot below).

post_display

Post SlideshowTable of Contents ↑

To add images to the slideshow (see 1st screenshot below), simply upload them to the post. The theme will automatically detect the images you have uploaded/attached to the post. You do NOT need to insert them into the post content area.

To change the order, make sure you select "view images uploaded to post" in the select box of the add media pop-up window and click/drag the images in the position you want (see 2nd screenshot below).

To have images appear in the content of your post, but not in the slideshow, simply upload the images from the media page (not the post edit page). This way the images don't get attached to the post. You can then use the "add media" button and locate the image in your media library.

Post Slideshow Example

slideshow

Changing image order

change_order

ChecklistsTable of Contents ↑

To create an ingredients checklist, simply wrap an UNORDERED (ul) list with the "checklist" shortcode. (see screenshots below).

Ingredients Markup Example

checklist ingredients

Front-end Ingredients Example

ingredients

To create a directions checklist, simply wrap an ORDERED (ol) list with the "checklist" shortcode. (see screenshots below).

Directions Markup Example

checklist directions

Front-end Directions Example

directions

WordPress Image GalleryTable of Contents ↑

To create an image gallery, simply upload images to a page/post. Click "Create Gallery" and select the images you want in the gallery. When finished, click "Create a new gallery" in the lower right. Then click "insert gallery" in the same location.

gallery

WordPress Gallery Example

grid_gallery

WidgetsTable of Contents ↑

The widget sections are controlled from the "widgets" page (under "appearance"). The "Left Column Widgets" appear on the left-hand side and "sticks" to the page when scrolling. The "Right Column Widgets" appear on the right-hand side and has the last widget listed "stick" to the page as well.

CommentsTable of Contents ↑

Retina ReadyTable of Contents ↑

This theme comes retina ready. When you upload images to your WordPress installation, simply upload another image at twice the size and add "@2x" to the end of the name. For example, if you want to use "myimage.jpg" at 100x200, upload "myimage@2x.jpg" at 200x400.

This theme uses PrettyPhoto as a lightbox system for images. You can make images show up with the light box by adding rel=”prettyPhoto” to the links. For more info, check out the PrettyPhoto website: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

ShortcodesTable of Contents ↑

This theme has the below shortcodes built into the theme.

JavaScriptTable of Contents ↑

This theme imports the following JavaScript files:

  1. jQuery: jQuery is a JavaScript library that greatly reduces the amount of code that you must write.
  2. Custom Scripts: The custom.js file provides some custom scripts for jQuery.
  3. PrettyPhoto: PrettyPhoto is a lightbox system for images. You can make images show up with the light box by adding rel=”prettyPhoto” to the links. For more info, check out the PrettyPhoto website: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
  4. Cookies: Allows script to adjust layout settings based on user selections using cookies.
  5. Retina: Looks for images with @2x at the end of the name to serve on devices that have a high resolution display.
  6. Sticky: creates the sticky menu effect when scrolling.
  7. Selectivizr: helps with IE8 supporting CSS3 styling.

CSSTable of Contents ↑

This theme has a "CSS" folder that contains the following CSS files:

  1. demo: contains color information for the color sample feature of the demo site.
  2. ie_fix: addresses issues with internet explorer 8.
  3. kitchen-editor-style: allows control of the WordPress editor box.
  4. print: this is used when users click the print button.
  5. respond: this is used when the width of the browser window is smaller than the width of the content of the site.

ChangelogTable of Contents ↑

v 1.2.4 - May 2015
* Added support for WordPress 4.2 sidebar requirements
* Improved Customizer markup
* General code improvements

v 1.2.3 - Dec 2014
* Fixed popular posts thumbnail URL issue.

v 1.2.2 - Nov 2014
* Fixed popular posts listing error on home page.

v 1.2.1 - Oct 2014
* Fixed recipe submission blank page error.

v 1.2.0 - Mar 2014
* Added image upload feature to recipe submission form

v 1.1.1 - Jan 2014
* Code improvements and minor design updates

v 1.1.0 - Oct 2013
* Added post submission form with validation and email notice + code enhancements

v 1.0.1 - Sept 2013
* Minor code improvements

v 1.0.0 - Sept 2013
* Initial Release