To get the Clean Food theme up and running on your site, follow these steps:
Once the theme is activated, you will see a prompt to install recommended plugins. Click on the Begin installing plugins link to continue. (If you close this box, you can access it again via the Appearance – Install Plugins page).
Check any plugins you want to install. Choose the Install option from the Bulk Actions dropdown, and click Apply.
Other than Regenerate Thumbnails which is required once when first setting up the theme (then can be removed), the theme can be used without any of these plugins, but may lack some features. Here are a list of the plugins we recommend, and how they should be set up.
This plugin regenerates thumbnails for any images you’ve uploaded prior to enabling this theme to ensure they display correctly throughout the site.
Before regenerating thumbnails, visit the Settings – Media page, and change the Large size to 640 x 9999. This will ensure you can insert images at full width inside post content.
Once the plugin is activated, visit the Tools – Regen. Thumbnails page, and click on the Regenerate All Thumbnails button.
It may take some time to regenerate thumbnails for all of your images – make sure you don’t close your browser window until the process is complete.
Once all thumbnails have been regenerated, you can deactivate and delete the plugin from the Plugins page – it is no longer needed.
This plugin can be used to set up new taxonomies other than Categories and Tags for categorising your posts (eg Cuisine or Season).
Once activated, visit the CPT UI – Add/Edit Taxonomies page.
Enter a Taxonomy Slug – for example, cuisine.
Under Attach to Post Type, choose Posts.
Under Plural Label, enter the plural taxonomy name – eg Cuisines.
Under Singular Label, enter the singular taxonomy name – eg Cuisine.
Change Hierarchical to true if you want this taxonomy to work similarly to Categories (with subcategories and checkboxes on the admin page), or leave as false if you want it to work similarly to Tags (no subcategories, and an autocomplete text box on the admin page).
Leave the other fields as is and click Add Taxonomy.
You will now see this taxonomy in the Posts menu in WordPress, or when creating/editing posts.
The plugin must be left active to keep the taxonomy in place.
(The Jetpack interface has changed since this video was created, but the details below are accurate).
This plugin provides a wide range of features, but is specifically used by this theme to display related posts, social sharing links, and a popular posts widget.
Once activated, follow the prompt to connect to your WordPress.com account. If you do not have one (it is separate from the login for your own website), it is free to create – you can create one here: https://signup.wordpress.com/signup/?user=1
Once connected, visit the Jetpack – Settings page in WordPress and ensure any modules that you want to use are activated / deactivate any you don’t need. The three this theme directly interacts with are under the Engagement tab:
Site Stats – if you want to use the Clean Food – Popular Posts sidebar widget provided by this theme.
Related Posts – if you want to show related posts in the style provided by this theme.
Sharing – if you want to display social sharing icons in the way provided by this theme. If this module is activated, visit the Settings – Sharing page and drag any services you wish to use to the Enabled Services area. Choose a Button style and choose Posts from the Show buttons on option.
This plugin is not part of the Recommended Plugins list within the admin interface, as it is a premium plugin and must be purchased and installed separately. It can be used to format and display recipes in a special recipe box with a print link, and with code that Google and other recipe sites recognise.
We’ve included custom templates for the plugin that integrate with the themes’s styles nicely. To activate the custom templates, visit the EasyRecipe Plus page in the admin menu, and click on Geeky Stuff. Fill in the Custom styles template directory box as prompted at the top of the screen.
Save the settings, then visit the Display styles and Print styles tabs to select the Clean Food templates.
Note – while the display style will inherit any font customizations made to the theme, Easy Recipe does not provide a way for print styles to do so – the print template will use the default fonts provided by the theme instead.
To set up menus, visit the Appearance – Menus page. There are three types of menu you can create with this theme:
Primary Menu – this is the main header menu and can contain dropdowns. The hierarchy of this menu will be used to display automatically breadcrumbs and subnavigation when viewing any page within the menu.
Footer Menu – this appears next to the copyright statement in the footer, and will not display dropdowns.
Social Links Menu – this is a special menu that controls the social icons in the header and footer. For each of your social sites, create a menu item via the Custom Links box, filling in the URL and name of the social site (eg Facebook). The theme will automatically detect the URL and display an icon for these sites:
Twitter, Facebook, Pinterest, Instagram, YouTube, Flickr, Google+, LinkedIn, StumbleUpon, Tumblr, Periscope, Snapchat, BlogLovin
Icons are also provided for feeds (any URL ending with /feed/) and a direct email link (a URL starting with mailto: ). Any other links you add will display a generic share icon.
Once you’ve created your menus, you can assign them to one of the three theme locations via the Theme locations checkboxes at the bottom of the page.
On the Settings – Reading page, you can change the number of posts displayed per page in archives – this applies to all archives except the homepage and shop, which display in different size grids. Choose a multiple of 6 to ensure grids always display full rows on all devices.
Other than the favicon, fonts and colors which are customized separately, all settings for theme can be managed via the Options page near the bottom of the admin menu. Each section is described below.
Choose between displaying a text logo or an image logo.
If you select Text logo, your site name from the Settings – General page will be shown. The font and color can be customized as described in the Favicon, Fonts and Colors section.
If you select Image logo, the next two fields will appear:
Upload your logo. You do not need to resize it before uploading, as the size is controlled by the next field. To ensure it is crisp on retina devices, it should be uploaded at least twice the intended display size.
Enter the width you want your logo to display, in pixels.
Choose whether you want the logo to appear on the left of the screen beside the social icons / search form / menu, or centered above.
For narrow devices, the menu will collapse to a toggleable Menu button. You can choose what displays alongside based on your priorities. If you choose the search form option, a full search form will be shown, with social icons inside the toggle menu. If you choose the social icons option, your social icons will be shown along with a toggleable search icon.
Checking this option will allow you to display a grid of logos in the footer. Once checked, the following two fields will appear:
Enter a heading for the footer section, such as As Seen In.
To upload logos, click on the Add Row button, and then click Add Image in the Logo column. Upload and select all of the logos you want to use, then click Select. If you want a logo to link somewhere, you can fill in the Link field. Logos can be reordered by dragging the numbers on the left around, or removed by hovering over a row and clicking the minus button on the right. Logos will be automatically scaled to a consistent size of at most 150px wide, though should be uploaded at least twice this size if you want a crisp display on retina devices.
To help you out, we’ve pre-prepared a bunch of retina logos for you:
Checking this will allow to display a 6 column grid of posts in the footer of your site. If checked, the following fields will appear:
Enter a heading you want to display for this section, such as Current Favorites.
Select the logic for which posts should display. You can choose between showing recent posts, recent posts in a category, tag, or custom taxonomy, or choosing posts manually.
If you choose posts in a category or tag, the next field will allow you to choose the term. If you choose posts in a custom taxonomy, you will see fields to fill in the taxonomy slug and term name. If you choose the manual option, the next field will allow you to choose the posts. Search by title and then click on a post on the left to enable it on the right.
This text will appear at the start of the footer menu. Entering %YEAR% will allow it to automatically update to always show the current year.
Any content entered here will display underneath the footer menu – eg, a short disclaimer.
You can enter any custom CSS code here.
Any code entered in these fields will be placed inside <head>, before </body>, and after <body> respectively. These locations are often used for ad scripts, tracking code, etc.
Any ad code entered here will display at the very top of your site in a pale grey background.
Any ad code entered here will appear in the white background section just above the pale grey footer.
Any ad code entered here will display underneath the list of categories/tags for a single post.
This image will be shown where required by any grid layouts if you have not set a featured image for a post.
With individual post templates, some themes automatically add featured images to the top of post content, while others don’t so that you can control its location yourself within the content editor. You can choose whichever of these options best suits your content.
Tip: Make this video full screen and highest quality to be able to read the code which is being copied and pasted.
This theme comes with a subscribe form design that can send submissions to virtually any mailing list system. Enabling it will require taking subscribe form code from your mailing list system, and copying and pasting parts of the code into settings as described below.
If you want to use another method, such as OptinMonster or a dedicated WordPress plugin with their own designs, leave this unchecked.
There are four places a subscribe form can appear. Two of them are enabled elsewhere: the sidebar (see the information on the Clean Food – Subscribe widget), or manually within a static page (see the Subscribe form section under notes on creating content). Here you can choose whether the other two locations are enabled – a popup, and at the bottom of a single post.
If you enable the popup form, the following fields will appear:
The popup will display this number of seconds after a page loads, unless overridden on desktop below.
Desktop computers can enhance popup logic by displaying them on ‘intent to exit’ (when a visitor appears to be leaving the site by moving their mouse out of the window) instead of after a set number of seconds. You can choose to enable this effect, enable it in combination with the loading delay, or disable it.
Once someone has seen the subscribe popup and subscribes, they will never see it again. If they do not subscribe, this field controls how many days before they see it again.
You can use this field to prevent annoying repeat visitors who don’t want to subscribe by disabling the popup permanently after they’ve seen the popup a certain number of times.
The heading to display in the subscribe box.
Copy the action parameter from the form code: <form action=”http://…”
If your form code has a first name field, find the corresponding input tag, and copy the name parameter: First Name: <input name=”aaa”
If your form code has a last name field, find the corresponding input tag, and copy the name parameter: Name: <input name=”aaa”
If your form code has a single name field, find the corresponding input tag, and copy the name parameter: Name: <input name=”aaa”
Find the input tag for the email address, and copy the name parameter: Email: <input name=”aaa”
Enter the button text you want to display, eg Subscribe.
If your form code has any hidden fields, enter all of them here: <input type=”hidden”…
Choose whether or not you want to display author names next to post dates (often unnecessary for single-author sites). If you decide to show it, you can have it link to an author archive, or set it to link to whatever website a user has entered into the Website field in their Profile (by default, this is empty so the author name won’t link anywhere).
Enabling this will a box underneath single posts where you can promote one of your social websites. If enabled, you will see two further fields:
Enter the URL you want the box to link to. If this is one of the major social sites, an icon will automatically appear in the box.
Enter the text you want to display inside the box.
If checked, an About the author box will appear underneath an author’s posts if they have profile information to display. There are three things that can be displayed:
Profile information – this is entered by editing the user’s profile in WordPress and filling in the Biographical Info box.
Profile image – this is handled in WordPress’ standard way via https://en.gravatar.com/.
Social icons for the user. These are controlled by editing the user’s profile in WordPress and scrolling down to the Author bio social links section at the bottom.
If you want a set of social icons unique to the user, fill in the Manual social links box in their profile in the format:
Social site name : http://….
Another site name : http://…
The same set of social sites can be used as described in the menu section.
If you want the social icons to automatically copy what displays in the main menu, check the Repeat from menu checkbox instead.
Most archive pages show 3 columns of posts, with the number per page controlled on the Settings – Reading screen. As the homepage has a larger layout with 2 columns, the number of posts per page can be controlled independently here.
If checked, the most recent post on your site will be shown before the grid, in a format similar the individual post template – showing all content up to the More Tag, following by a Continue Reading link. Leave unchecked to just show the grid.
If checked, you can highlight 3 large posts across the top of the homepage, above the main column and sidebar. If checked, the following fields will appear:
Select the logic for which posts should display. You can choose between showing recent posts, recent posts in a category, tag, or custom taxonomy, or choosing posts manually.
If you choose posts in a category or tag, the next field will allow you to choose the term. If you choose posts in a custom taxonomy, you will see fields to fill in the taxonomy slug and term name. If you choose the manual option, the next field will allow you to choose the posts. Search by title and then click on a post on the left to enable it on the right.
If you have some posts on your site that aren’t recipes and you want to hide these from the homepage, you can do so here. See the option Misc. tab for how it is decided which posts are counted.
If enabled,an excerpt of each post will appear in the grid. This excerpt is the first 20 words of the post by default, but can be customized by filling in the Excerpt box at the bottom of the post edit screen. (If you don’t see it, you may need to enable this Excerpt box by clicking on Screen Options at the top right while editing a post).
Check this if you want to create a shop page for affiliate products. If checked, the following fields will appear:
Enter a title for the Shop page.
Enter a slug for the URL you want the shop to appear at. By default, the shop will appear at http://www.yourwebsite.com/shop/.
Checking this will remove the sidebar and display products in 4 columns spanning the width of the screen, rather than 3.
How many items you want to display per page; pagination will appear once you have more products than this. To ensure full rows for all screen sizes, if the sidebar is showing, enter a multiple of 6; if the sidebar is not showing, enter a multiple of 12.
Any content you enter here will display at the top of the shop page.
Enter any content you want to display on 404 pages.
By default, WordPress’ internal search will be used on the site, with the search results page only including posts in the same style as category archives. We normally recommend using a Google search instead, which allows more accurate and familiar searching of your entire website. To enable Google search, follow these instructions:
By default, all of the categories in WordPress will be considered ‘recipe categories’ and will appear on your Recipe Index page. If you have categories that aren’t recipe related, there are two ways you can exclude them, depending on your category structure.
To set up your sidebar, visit the Appearance – Widgets page. Drag and configure any widgets you like into the sidebar.
Other than the standard WordPress widgets, there are several custom widgets this theme provides.
This widget allows you to highlight certain posts by display a 2 column grid of thumbnails.
Enter a Title, and the Number of posts to display.
In the Type of posts to show box, you can choose between showing recent posts, recent posts in a category, tag, or custom taxonomy, or choosing posts manually.
If you choose posts in a category or tag, the next field will allow you to choose the term. If you choose posts in a custom taxonomy, you will see fields to fill in the taxonomy slug and term name. If you choose the manual option, the next field will allow you to choose the posts. Search by title and then click on a post on the left to enable it on the right.
The More link text and More link fields are optional – you can enter some text and a URL here to display a button underneath linking to a page of your choice. For example, you could show the latest posts in a category with a See all button linking to the category archive; or link to your Recipe Index, etc.
This widget requires the Jetpack plugin to be installed with the Site Stats module enabled. It will look similar to the Clean Food – Featured Posts widget above, but automatically display posts that are being viewed the most times on your site.
Enter a Title and the Number of posts to display.
The How many days in the past to consider field controls how long to count views for. If set to 7, posts will be shown based on how many views they received in the last 7 days.
The More link text and More link fields are optional and work in the same way as above.
This widget allows you to show a grid of your latest Instagram photos.
To enable the widget, you first need to connect to your Instagram account by visiting the Instagram page in the admin menu (underneath Options), and following the instructions on that page.
Once complete, you can return to the Appearance – Widgets page and add the widget to your sidebar, setting a Title and Number of images as desired.
This widget requires the subscribe form to be activated in the theme options – all settings for the subscribe form can be found there. Once that set up is complete, you can drag the widget into your sidebar.
This widget allows you to display your recipe categories or other taxonomies in the sidebar, with similar logic to how they work on the Recipe Index page.
In the taxonomy field, enter either category, post_tag, or the slug for a custom taxonomy. By default, terms will be shown as a list; if you have associating images with a category by editing each category and uploading an image to the Image field, you can check the Show as image grid option to display them in a 2 column grid similar to other widgets.
To upload a favicon or alter the fonts and colors used by the theme, visit the Appearance – Customize page. There are three aspects you may want to customize:
Under Site Identity you can upload a Site Icon to use as a favicon.
Under Fonts, you can alter the fonts used on the site. Content used throughout the site has been placed into four groups:
Body – this is used for all body text throughout the site, like post and page content, or sidebar widgets.
Text logo – this is only used if you have set the theme options to use a text logo rather than an image logo.
Heading – this is used for all large headings on the site – post titles, widget titles, subheadings in content, etc.
Nonbody – this is used for any other nonbody text, such as the menu, buttons, post date, categories/tags list, etc.
For each group, you can use standard fonts, like Georgia, or any webfont available from http://www.google.com/fonts/ .
If using Google fonts, visit http://www.google.com/fonts/ and click the + icon to select each font that you want to use on the site. Once you’ve selected them all, click on the selected families tab at the bottom of the page.
Click on Customize and select any weights you want to use from the checkboxes.
Then, click on Embed. Under the Embed Font heading, copy just the URL inside the href parameter, and paste it into the Google font url box in WordPress.
Go back to the Embed section in Google fonts and scroll down to the Specify in CSS section. Copy the code between font family: and the semicolon, and paste this into the font box for the group you want in WordPress, then select the font weight you want to use.
If using standard fonts, simply type in the name of the font. You can optionally provide a comma separated font stack – fallbacks if a certain font doesn’t exist on someone’s computer – see www.cssfontstack.com/ for examples of common font stacks. Then select the font weight you want to use – most standard fonts only come in two weights; 400 for normal, or 700 for bold.
The first four color settings control the same groups of text as described above.
Main theme color controls the link colour as well as some other backgrounds and borders throughout the theme, such as some buttons, the call to action box background, and the about the author border.
Text color on top of main theme color is used whenever text appears on top of the main theme color used as a background, such as the subscribe form button or call to action box.
Main theme color hover controls the link hover colour as well as some other hover backgrounds such as hovering over a dropdown menu item or buttons.
Text color on top of main theme color is used whenever text appears on top of such a hover background.
Alternate background color is used as an alternative background color for some buttons such as continue reading / ‘more’ links, and the subscribe form background.
Text color on top of alternate background color is used whenever text appears on top of such a background.
Social icon color controls the colour of social icons in the menus.
Use inverted border button is a special option which inverts the color of buttons so they display with a border only, rather than a solid background.
To create a recipe index, simply create a new static page in WordPress.
Within the main content editor, you can use a special shortcode to display grids or columns of categories, tags, or any custom taxonomy. This shortcode can be used multiple times with different parameters – just make sure each version is in its own paragraph.
In each case, you can change type=”category” to type=”post_tag” to show tags, or type=”your_custom_taxonomy_slug” to show any other custom taxonomy created with the Custom Post Type UI plugin.
[categorylist type="category" layout="grid"]
This will display a grid of images of each recipe category. (See the Category structure section if you want to exclude some categories here.) To select the image you want to display for each category, edit the category via Posts – Categories, and upload an image to the Image field. (This works for other types as well).
[categorylist type="category" layout="list"]
This will display all categories as text links in a single column list.
[categorylist type="category" layout="list3"]
This will display all categories as text links in a three column list.
With all of the above options, you can add two optional parameters:
[categorylist .... alpha="true"]
This will separate the list by A-Z, with a sticky menu that allows people to quickly jump to a certain letter.
[categorylist .... count="true"]
This will add a count of how many posts are in that category after the category name.
An example template of how all of these could be used along with subheadings:
<h2>By Category</h2> [categorylist type="category" layout="grid"] <h2>By Season</h2> [categorylist type="season" layout="list"] <h2>By Ingredient</h2> [categorylist type="post_tag" layout="list3" alpha="true" count="true"]
To set up a shop, first enable the shop via the theme options.
You will now see a new Shop menu item appear in the admin (or whatever you have named the shop page in the options), underneath Posts.
Under Shop – Product Categories, you can set up categories for your products in the same way as post categories.
You can add a new product by going to Shop – Add New.
Enter the name of the product in the title field.
Enter the External link you want the product to link to, such as an Amazon URL.
Upload a Featured Image for the product. This will be cropped to a square thumbnail.
Publish the product at the top right.
The product will display on the Shop page, with a Buy Now button linking to the external URL you enter.
The main content editor is not used – unless you leave the external link field blank. In this case, the Shop page will display a Learn More button instead, linking to a permalink that displays the content you enter, where you can manually add your own selling information.
Each post you create should have a Featured Image selected. This will be automatically scaled and cropped to the sizes used by the theme for grids, and optionally shown at the start of the post content if you have selected that option in the theme options. If no featured image is selected, a default image will appear in grids, but that default image will never be inserted at the top of the post.
To add subheadings to post/page content, you can either use the Text editor and enter:
<h2>Subheading</h2>
<h3>Subsubheading</h3>
Or, this can also be done in the Visual editor by selecting the text and choosing Heading 2 or Heading 3 from the dropdown list on the second row of buttons. (If you don’t see the second row, click on the Toolbar Toggle icon near the end of the first row).
If you want to repeat the social icon menu somewhere within a page’s content, you can do so by entering:
[sociallinks]
in a paragraph by itself.
If you want to display the subscribe form somewhere within a page’s content, you can do so by entering:
[subscribeform]
in a paragraph by itself.
If you want to display the search form somewhere within a page’s content, you can do so by entering:
[searchform]
in a paragraph by itself.
If you want to display content in two columns (for wide enough devices only), you can do so by entering:
[twocols type="start"] Content for first column here [twocols type="sep"] Content for second column here [twocols type="end"]
If you want to display some toggleable content where all you see is a heading which can be clicked to expand the content (eg, an FAQ), you can do so by entering:
[togglesection heading="Heading to display"] Content here will be initially hidden [/togglesection]
This can be repeated multiple times – just make sure the code for each shortcode goes on its own paragraph.
If you want to display a link as a button somewhere within content, you can do so by entering the following on a paragraph by itself:
[button url="http://..." text="Text to display"]
to display a ‘green’ (or ‘main theme color’) button, or:
[button url="http://..." text="Text to display" type="alt"]
to display a ‘black’ (or ‘alternate background color’) button.
By default, any page within the Primary Menu will automatically display subnavigation under the page title if that menu item has a dropdown.
On some pages, you may not want the subnavigation to appear because you are linking to the subpages in another way. An example if is the Recipe Index page, where you may create a dropdown with some popular categories – but don’t need subnavigation as they will be in the grid in the content of the page instead.
To disable subnavigation for a page, edit that page – you will see a Hide subnavigation checkbox near the bottom of the page.
A special wide page template has been set up for static pages which can be enabled by editing the page and choosing Wide page from the Template dropdown on the right.
This template removes the sidebar, and has a wider central column.
As well as any normal content, this page allows you to create full-width images that break out of the column. To do so, enter the following:
[wideimage] (insert the image here at any size you like) [/wideimage]
This will display the image at the size you insert – make sure the image is as large as you want it to display.
When you purchase the theme, you will receive a license key which allows free updates for a year. To activate your license key, visit the Appearance – Theme License page. Fill in the license key you received, and click Save Changes.
If we release any updates for the theme, you will see a notification within WordPress and can update the theme in the normal way.
Note that all theme options and font/color options set in the customisztion will be retained when updating the theme. If you edit the theme code directly, however, these changes will be lost. If you want to make such changes, it is advisable to create a Child Theme instead. This is described here:
https://codex.wordpress.org/Child_Themes
However, unlike stated there, you do not need the function in functions.php that is mentioned – our theme will automatically detect the style.css files and enqueue them correctly.
We would love for you to keep our credit in the footer as it’s how we let people know about our work. However, you’re free to remove it if you wish.
Here’s how to do that: in the WordPress backend, go to Appearance then Editor and on the right-hand side select includes then menu.php. Deleting line 43 will remove the credit. Make sure you make a back up first, in case something goes wrong.