WordChef WordPress Theme Documentation

Thank you for choosing WordChef for your WordPress website. Please follow the instructions below on installing and setting up your theme. If you have any questions not covered in the scope of this document, feel free to contact me here via the contact form, or email support@themefeeder.net. Thanks again!

Download

Step 1 - Log into your ThemeForest account and click your username in the top right corner to access the dropdown. Select the 'Downloads' link.

Step 2 - Find the 'WordChef' theme in the list of items you have bought.

Step 3 - Click the 'download' button and select 'All files & documentation' or 'Installable WordPress file only'.

If you select all files, unzip the package and you will find the the installable WordPress theme 'wordchef.zip'

Install

1.1 Navigate to Themes Page

Step 1 - Log into your WordPress admin page.

Step 2 - Navigate to 'Appearance > Themes'.

Step 3 - Click 'Add New' or 'Add New Theme'.

1.2 Upload Theme

Step 1 - Click 'Upload Theme'.

1.3 Upload Theme

Step 1 - Click the 'Choose File' button.

Step 2 - find and select the 'wordchef.zip' file on your computer.

Step 3 - Click the 'Install Now' button.

1.4 Activate Theme

Step 1 - Click the 'Activate' link.

1.6 Plugin Installation

Step 1 - Select the plugins you want to install.

Step 2 - Select 'Install' from the dropdown menu and click the 'Apply' button.

1.7 Plugin Installation Complete

The recommended plugins have been successfully installed. Next you can activate these plugins.

1.8 Plugin Avtivation

Step 1 - Navigate to 'Plugins' page.

Step 2 - Select the plugins you would like to activate.

Step 3 - Select 'Activate' from the dropdown menu and click 'Apply'.

1.9 Plugin Avtivation Complete

The selected plugins have been successfully Activated.

Well done. WordChef is installed, activated and ready to be customized!

2. Install Theme by FTP

Step 1 - Unzip the 'wordchef.zip' file.

Step 2 - Upload the extracted 'wordchef' theme folder into '/wp-content/themes/' in your wordpress installation.

Step 3 - Log in to your wordpress admin page, navigate to 'Appearance > Themes' and activate the installed theme.

View '1.5 Activation Complete' in the install section for instructions on installing and activating the recommended plugins.

Create New Post

Standard Post - Displays featured image and post content.

Video Post - The first embedded video from the post's content is used as the featured video.

Audio Post - The first embedded audio from the post's content is used as the featured audio.

Gallery Post - The first gallery from the post's content is used as the featured gallery (make sure the gallery settings size is set to full size - Look at the Media section for recommended image sizes).

Add Read More Button

If you want to add a 'Read More' button to your post, insert the <!--more--> quicktag where you want to split your content.

Add Pagination to Post

If you want to split your post content into different pages, insert the <!--nextpage--> quicktag where you want to split your content.

Create New Page

To create a new page, navigte to 'Pages > Add New'

Media

Featured image max width (boxed layout):

  • One Column Layout - 1140px
  • One Column + Sidebar Layout - 750px
  • Two Column Layout - 555px
  • Two Column + Sidebar Layout - 360px
  • Three Column Layout - 360px

Featured Post Slider

For the best results with the featured post slider, use featured images that have a width of 1140px and a height of at least 550px.

Image Lightbox

To enable or disable the lightbox image effect, navigate to 'Appearance > Theme Options > General Settings' and look for the 'Lightbox Images' option button.

To add the lightbox effect to your images, choose 'Link to: Media File' - Demonstrated in the images below.

The image caption will be used as the lightbox description.

Custom URL image: - If you would an image to link to a custom URL rather than open in lightbox, select the image on the post edit page and click the edit button. In the images' Advanced Options section, add the text custom-url to the Link CSS Class input.

Retina Images

To enable the use of retina images, from the admin dashboard, navigate to 'Appearance > Theme Options > General Settings' and look for the 'Retina Images' option button.

When your users load a page, if their device has retina display, retina.js will check each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

Use the @2x suffix on your filename to denote high-resolution image variants on your server.

For example, if you have an image on your page named like this: my_image.png

The script will check your server to see if an alternative image exists named: my_image@2x.png

Add Image Attachment to Post

Step 1 Click 'Add Media' button.

Step 2 - Select an image and add a 'caption' if desired - This will be used as the image description in the lightbox, if no caption is provided, the image title will be used for the lightbox description.

Step 3 - In 'Attachment Display Settings', change the 'Link To' option to 'Media File' - This will make the image use the lightbox effect. Change any other settings to suit your needs.

Step 4 - Click 'Insert into post' button.

Add Image Gallery to Post

Step 1 - Click 'Add Media' button.

Step 2 - Click 'Create Gallery'.

Step 3 - Select an image and add a 'caption' if desired - This will be used as the image description in the lightbox, if no caption is provided, the image title will be used for the lightbox description.

Step 4 - Repeat step 3 until all desired images are selected.

Step 5 - Click 'Create a new gallery'.

Step 6 - In 'Gallery Settings', change the 'Link To' option to 'Media File' - This will make the gallery use the lightbox effect. Change any other settings to suit your needs.

Step 7 - Click 'Insert gallery'.

Create New Menu

Step 1 - To create a new menu, navigte to 'Appearance > Menus'

Step 2 - Enter the name of your menu in the 'Menu Name' field

Step 3 - Click the 'Create Menu' button


To add items to your menu, use the 'Pages, Links and Categories box'.

Use the 'Menu Settings' section to choose where to display your menu. This theme supports the 'Primary Menu' location.

Lastly, click the 'Save Menu' button.

Widgets

To add a widget to the theme, navigate to 'Appearance > Widgets'.

This theme includes 6 custom widgets:

  • WordChef About Me (Image and text about yourself)
  • WordChef Image Banner (Clickable image with a link)
  • WordChef Popular Posts (Popular posts based on views with thumbnail)
  • WordChef Recent Comments (Recent comments with thumbnail
  • WordChef Recent Posts (Recent posts with thumbnail)
  • WordChef Social Media (Icon links to your social media profiles)

Custom Widgets

Shortcodes

This theme recommends the 'Shortcodes Ultimate' plugin.

If you did not choose to install it in section '1.5 Activation Complete. Install Recommended Plugins', you can find and install it by navigating to 'Plugins > Add New' and searching on the top right for 'Shortcodes Ultimate', or download it here.

If you choose to download it, you can upload the zipped package by navigating to 'Plugins > Add New' and clicking the 'Upload Plugin' link.

Import Demo Content

Follow the steps below to install the demo content (posts, pages, comments, menus, post meta, categories, tags, terms, images).

1.1 Import Page

Step 1 - Navigate to 'Tools > Import'.

Step 2 - Click 'WordPress' link.

1.2 WordPress Importer

Step 1 - Click 'Install Now' button.

1.3 Installation Complete

Step 1 - Click 'Activate Plugin & Run Importer' link.

1.4 Upload XML File

Step 1 - Click the 'Choose File' button and navigate to the 'demo-content' folder (wordchef-master/demo-content/).

wordchef-demo-all.xml contains - posts, pages, menus, comments, media, contact form.

wordchef-demo-posts.xml contains - posts, media

wordchef-demo-pages.xml contains - pages, media

wordchef-demo-contact-form.xml contains - WordPress Contact Form 7 settings

Step 2 - Click 'Upload file and import' button.

1.5 Assign Author

Step 1 - Create a new author or select an existing author.

Step 2 - Select 'Download and import file attachments' if you would like the demo images.

Step 3 - Click 'Submit' button.

1.6 Import Complete

You may need to wait a few minutes for the importer to finish.

Theme Options

To change theme options, navigate to 'Appearance > Theme Options'.

General Settings

Option Type Default Description
Logo Upload Image upload - Upload a logo for you site
Logo Spacing - Top Image upload 75 Choose the pixel spacing above the site logo
Logo Spacing - Bottom Image upload 75 Choose the pixel spacing below the site logo
Site Title: Font Family Select Montserrat Select font family for site title
Site Title: Font Style Select Normal Select font style for site title
Site Title: Font Subset Select Latin Select font subset for site title
Site Title: Font Size Integer 50 Select font size for site title
Site Title: Line Height Integer 75 Select line height for site title
Site Title: Font Color Hex Color #222222 Select font color for site title
Site Tagline: Font Family Select Lato Select font family site tagline
Site Tagline: Font Style Select Normal Select font style for site tagline
Site Tagline: Font Subset Select Latin Select font subset for site tagline
Site Tagline: Font Size Integer 12 Select font size for site tagline
Site Tagline: Line Height Integer 18 Select line height for site tagline
Site Tagline: Font Color Hex Color #666666 Select font color for site tagline
Retina Images Button Off Enable or disable retina images for retina devices
Lightbox Images Button On Enable or disable lightbox effect for post images
Page Comments Button Off Turn comments on or off for all pages
Pagination type Button Newer/Older Select the type of pagination for your blog
RTL (Right-to-Left) Language Button Off Choose this option if your blog is rtl

Menu Settings

Option Type Default Description
Fixed Navigation Button On Turn on to fix your navigation to the top of the screen
Main Navigation Background Color Hex Color #ffffff Choose the background color for the main navigation
Main Navigation Font Color:Regular Hex Color #222222 Choose the color for the main navigation font
Main Navigation Font Color:Hover Hex Color #dcb372 Choose the color for the main navigation font on hover
Main Navigation Font: Font Family Select Montserrat Select font family for main navigation font
Main Navigation Font: Font Style Select Normal Select font style for main navigation font
Main Navigation Font: Font Subset Select Latin Select font subset for main navigation font
Main Navigation Font: Font Size Integer 11 Select font size for main navigation font
Sub Menu Navigation Font: Font Family Select Montserrat Select font family for sub menu navigation font
Sub Menu Navigation Font: Font Style Select Normal Select font style for sub menu navigation font
Sub Menu Navigation Font: Font Subset Select Latin Select font subset for sub menu navigation font
Sub Menu Navigation Font: Font Size Integer 10 Select font size for sub menu navigation font
Mobile Menu Toggle Button Color Hex Color #222222 color for mobile menu toggle button
Search Button Button On Turn the navigation search button on or off
Social Button Button On Turn the navigation social button on or off
Buttons Background Color Hex Color #f3f3f7 Choose the background color for the mobile menu, social and search buttons
Buttons Color Hex Color #222222 Select color for the main navigation social and search buttons.
Facebook URL - Enter the url to your Facebook page
Twitter URL - Enter the url to your Twitter page
Pinterest URL - Enter the url to your Pinterest page
Instagram URL - Enter the url to your Instagram page
Tumblr URL - Enter the url to your Tumblr page
Google+ URL - Enter the url to your Google+ page
LinkedIn URL - Enter the url to your LinkedIn page
YouTube URL - Enter the url to your YouTube page
Vimeo URL - Enter the url to your Vimeo page
RSS URL - Enter the url to your RSS
Search button Color: Regular Hex Color #222222 Select color for navigation search button

Slider Settings

Option Type Default Description
Featured Posts Slider Button Blog Page Choose where to display the featured posts slider
Max Number of Featured Posts Slider 6 Choose the maximum number of posts to appear in the featured posts slider
Featured Posts Order Button Latest Choose the order of the featured posts

Layout Options

Option Type Default Description
Layout Type Button Boxed Select the main layout for your site.
Blog Layout Select Full Post + Grid 2 Columns Choose between standard, list, grid 2 or grid 3 column layout
Blog Page Sidebar Select Right Sidebar Choose between left, right or no sidebar for the blog page
Single Post Sidebar Select Right Sidebar Choose between left, right or no sidebar for single blog posts

Post Options

Option Type Default Description
Post Content Button Excerpt Choose whether to display the posts full content or excerpt on homepage
Post Share Options: Facebook Checkbox 1 Enable option to share posts to Facebook
Post Share Options: Twitter Checkbox 1 Enable option to share posts to Twitter
Post Share Options: Pinterest Checkbox 1 Enable option to share posts to Pinterest
Post Share Options: Google+ Checkbox 1 Enable option to share posts to Google+
Post Share Options: Reddit Checkbox 1 Enable option to share posts to Reddit
Post Share Options: Digg Checkbox 1 Enable option to share posts to Digg
Post Share Options: Dilicious Checkbox 1 Enable option to share posts to Dilicious
Post Share Options: StumbleUpon Checkbox 1 Enable option to share posts to StumbleUpon
Post Share Options: LinkedIn Checkbox 1 Enable option to share posts to LinkedIn
Post Share Options: Mail Checkbox 1 Enable option to share posts via email
Single Post tags Button Show Choose to show or hide the tags on single posts
Single Post Author Bio Button Show Choose to show or hide the author bio on single posts
Read More Text String Read More Choose the text that appears on a blog post to continue reading it

Typography

Option Type Default Description
Body Font: Font Family Select Lato Select font family for body font
Body Font: Font Style Select Normal Select font style for body font
Body Font: Font Subset Select Latin Select font subset for body font
Body Font: Font Size Integer 14 Select font size for body font
Body Font: Line Height Integer 24 Select line height for body font
Headings Font: Font Family Select Montserrat Select font family for headings
Headings Font: Font Style Select Normal Select font style for headings
Post Title Font: Font Family Select Montserrat Select font family for post title font
Post Title Font: Font Style Select Normal Select font style for post title font
Post Title Font: Font Subset Select Latin Select font subset for post title font
Post Title Font: Font Size Integer 18 Select font size for post title font
Post Title Font: Line Height Integer 27 Select line height for post title font
Page Title Font: Font Family Select Montserrat Select font family for post title font
Page Title Font: Font Style Select Normal Select font style for post title font
Page Title Font: Font Subset Select Latin Select font subset for post title font
Page Title Font: Font Size Integer 18 Select font size for post title font
Page Title Font: Line Height Integer 27 Select line height for post title font
Widget Title Font: Font Family Select Montserrat Select font family for widget title font
Widget Title Font: Font Style Select Normal Select font style for widget title font
Widget Title Font: Font Subset Select Latin Select font subset for widget title font
Widget Title Font: Font Size Integer 12 Select font size for widget title font
Widget Title Font: Line Height Integer 18 Select line height for widget title font

Styling Options

Option Type Default Description
Body Background Color Hex Color #f4f4f8 Background color for body
Body Text Color Hex Color #82848e Select font color for body font
Header Background Color Hex Color #ffffff Background color for header
Titles Color Hex Color #222222 Select a color for post and page titles
Widget Titles Color Hex Color #222222 Select a color for widget titles
Widget Titles Background Color Hex Color #fafafa Select a background color for widget titles
Links Color Hex Color #dcb372 Color for links
Primary Color Hex Color #dcb372 Select the primary color for your website
CSS Editor CSS Editor - Add your custom CSS code here

Footer Settings

Option Type Default Description
Copyright Bar Background Color Hex Color #222222 Choose the background color for the copyright section
Copyright Text: Font Family Select Lato Select font family for copyright text
Copyright Text: Font Style Select Normal Select font style for copyright text
Copyright Text: Font Subset Select Latin Select font subset for copyright text
Copyright Text: Text Align Select Center Select alignment for copyright text
Copyright Text: Font Size Integer 12 Select font size for copyright text
Copyright Text: Line Height Integer 18 Select line height for copyright text
Copyright Bar Text Editor - Text to appear in the copyright bar
Footer Social Section Background Color Hex Color #ffffff Choose the background color for the footer social section
Footer Social Icon Color Hex Color #888888 Choose the color for the footer social icons
Facebook URL - Enter the url to your Facebook page
Twitter URL - Enter the url to your Twitter page
Pinterest URL - Enter the url to your Pinterest page
Instagram URL - Enter the url to your Instagram page
Tumblr URL - Enter the url to your Tumblr page
Google+ URL - Enter the url to your Google+ page
LinkedIn URL - Enter the url to your LinkedIn page
YouTube URL - Enter the url to your Youtube page
Vimeo URL - Enter the url to your Vimeo page
RSS URL - Enter the url to your RSS

Misc Settings

Option Type Default Description
Scroll To Top Button Button Show Button that when clicked, scrolls to the top of the web page
404 Page Text Text Editor It looks like nothing was found at this location. Maybe searching below will help. Text for your 404 error page

Support

If you have any questions feel free to contact me here via the contact form, or email support@themefeeder.net

Support hours are Monday to Friday, 8:00 - 17:00 (GMT+12). Responses are within 24-48hours of the time and order your email is received.

Support includes

  • Responding to questions and problems related to this theme
  • Fixing bugs and reported issues for this theme
  • Providing updates to ensure compatibility with new software versions

Support does not include

  • Modification, customization or installtion services for this theme
  • Support for 3rd party software and plugins
  • Plugin intergration
  • WordPress general support (please use the WordPress forums)
  • Support for issues caused by user modification of the themes code, styling and functionality

Credits

  • Underscores - I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
  • Bootstrap - Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • Redux - Redux is a simple, truly extensible options framework for WordPress themes and plugins.
  • TGM Plugin Activation by Thomas Griffin - TGM Plugin Activation is a PHP library that allows you to easily and automatically require, recommend and install plugins for your WordPress themes.
  • Font Awesome by Dave Gandy - Font Awesome gives you scalable vector icons that can instantly be customized.
  • Google Fonts - Lato, Source Serif Pro.
  • JQuery lightSlider by sachin choolur- JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation.
  • FitVids.js by Chris Coyier and Paravel - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
  • Magnific Popup by Dmitry Semenov - Magnific Popup is a responsive lightbox and dialog script with focus on performance and providing best experience for user with any device.
  • Contact Form 7 by Takayuki Miyoshi - Just another contact form plugin. Simple but flexible.
  • Shortcodes Ultimate by MadFork and Vladimir Anokhin - Shortcodes Ultimate is WordPress plugin that provides mega pack of shortcodes.
  • Instagram Slider Widget by jetonr - Instagram Slider Widget is a responsive slider widget that shows 20 latest images from a public instagram user.
  • Unsplash - Free (do whatever you want) high-resolution stock photos. Download 10 new free stock photos every 10 days.
© 2015 ThemeFeeder