Skip to main content

GET ALL WORDPRESS THEMES - ONLY €59.00 (15 WordPress Pixelemu themes) Read more

PE Cooking Blog WordPress theme manual

A. GENERAL

This documentation is last updated on 23th June 2017.

Thank you for purchasing PE Cooking Blog Theme . If you have any question that is beyond the scope of this documentation, Please feel free to create a support ticket using Our Support Site.

If you like this theme, Please support us by rating this theme with 5 stars.

Before you start please choose if you want :

  • manual import demo content
  • use Quickstart package

If you choose Quickstart option please skip points A2 and A3.

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here



B. THEME OPTIONS

To setup Logo, navigate to Appearance > Theme Options, click on Basic Settings tab and then click on PLUS icon in Logo section.

To setup Favicon, navigate to Appearance > Theme Options, click on Basic Settings tab and then click on PLUS icon in Favicon section.

documentation

Choose if you want Font Sizer - click ON or OFF.

Choose if you want Back to Top button - click ON or OFF.

Choose if you want Sticky Topbar - click ON or OFF.

documentation

Click Save Changes when you are done.

documentation

To setup Static Header Image, navigate to Appearance > Theme Options, click on Static Header tab and then click on PLUS icon in Static Header Image section.

You can select overlay for header area (for slider or static image).

You can choose:

  1. No-overlay: no overlay at all
  2. Topbar overlay: overlay for area with logo, mainmenu and social icons
  3. Topbar and Slider overlay: overlay for whole header

You can also choose opacity for overlay.

documentation

You can change typography for Title For Static Image and Text Description For Static Image.

You can change:

  1. font-color
  2. font-family
  3. font-size
  4. font-style
  5. font-weight
  6. text-decoration
  7. text-transform

documentation

Click Save Changes when you are done.

documentation

To setup Menu Options, navigate to Appearance > Theme Options and click on Menu Options tab.

You can change typography for Main Menu Parent Items, Main Menu Parent Items on Hover, SubMenu Items and Submenu Items on Hover.

You can change:

  1. font-color
  2. font-family
  3. font-size
  4. font-style
  5. font-weight
  6. text-decoration
  7. text-transform

documentation

Click Save Changes when you are done.

documentation

To setup Layout, navigate to Appearance > Theme Options and click on Layout tab.

You can set theme width in pixels and width of Primary Widget Area and Secondary Widget Area.

documentation

You can select number of columns and arrangement of them for frontpage and subpage separately.

You can choose:

  1. Left Sidebar
  2. Right Sidebar
  3. Full width (no sidebar)
  4. Dual Siebar
  5. Left Dual Sidebar
  6. Right Dual Sidebar

documentation

Click Save Changes when you are done.

documentation

To setup Recipe options, navigate to Appearance > Theme Options and click on Recipe tab.

Choose if you want to show Social Icons on recipe page - click ON or OFF.

Choose if you want to show Rating - click ON or OFF.

Enter email address of user that will receive info about new recipes submited form the frontend (Submit Recipe Page).

documentation

Click Save Changes when you are done.

documentation

To setup Default Blog Layout options, navigate to Appearance > Theme Options and click on Default Blog Layout tab.

Now you can select default layout for blog separately for Frontpage and Subpage.

You can select:

  1. 1 column, image centered: 1 recipe in a row
  2. 2 columns: 2 recipes in a row
  3. 3 columns: 3 recipes in a row
  4. 3 columns, with intro post: 3 recipe in a row + 1 intro recipe
  5. 1 column, image aligned left: 1 recipe in a row (image on the left, description on the right)
  6. 1 column, with movie: 1 recipe in a row (Youtube video on the left,description on the right). If recipe doesnt conatain Yotube link, there will be Featured Image displayed.

documentation

You can choose intro description limit and min-height for for boxes in blogs. Separately for 2 and 3 columns.

documentation

Click Save Changes when you are done.

documentation

To setup Team Members options, navigate to Appearance > Theme Options and click on Team Members tab.

Enter ID of user that will be displayed on THE TEAM page as featured user.

Enter ID of user that will be displayed on ABOUT US page as intro.

documentation

To check user ID, navigate to Appearance > Users and look at the last column.

documentation

Click Save Changes when you are done.

documentation

To setup Background Colors, navigate to Appearance > Theme Options and click on Background Colors tab.

You can choose here colors for many areas:

  1. Main Scheme Color: color for buttons, links, pagination etc.
  2. Page Background: main background color
  3. Top Bar: color for area with logo, mainmenu and social icons
  4. Sliders Bullets: color for PE Easy Slider bullets
  5. PE Easy Slider Title Area: background for PE Easy Slider titles
  6. Footer Background: background for footer
  7. Footer Text: color for footer
  8. Box1: background for widget with class box1
  9. Box2: background for widget with class box2

documentation

documentation

Click Save Changes when you are done.

documentation

To setup Fonts, navigate to Appearance > Theme Options and click on Fonts tab.

You can add more fonts by clicking on Add Google Font button and then choose one of many fonts with additional options (font-weight, font-style, character sets)

You can change here typography for Body and Posts and Widgets.

documentation

Click Save Changes when you are done.

documentation

To setup Advanced options, navigate to Appearance > Theme Options and click on Advanced tab.

Paste your Google Analytics (or other) tracking code here. This will be added into the head section of your theme. Please put code inside script tags.

Enter your Addthis Public ID to display social icons. You need to set up Sharing Buttons in your Addthis account. Recommended: small size.

documentation

Click Save Changes when you are done.

documentation



C. HOME VIEWS

You can use for header Static Image with Title and Description or Revolution Slider.

To setup Static Image with Title and Description navigate to Appearance > Widgets and add new Text widget to sidebar Header - static image with text

Add here you title and description like that:

                        <h1>Make Cooking Easier</h1>
                        <p>Best Cooking Blog Ever</p>
                    

Then you should set image for this widget with these instructions.

Go to section Revolution Slider

You can apply different blog view for frontpage. See here.

You can also choose different layout for frontpage. See here.

To setup specific scheme of Revolution Slider on frontpage see here.

If you want to show Revolution Slider only on frontpage see here.



D. PAGES

This page displays webiste authors - users that create pages and recipes. To create that page go to Pages > Add New. Now select template The Team and click Update/Publish.

documentation

This page displays one user as featured item and all recipes. To create that page go to Pages > Add New. Now select template About Us and click Update/Publish.

documentation

Follow steps listed here

This theme has special error 404 page. You must only be sure that server finds your 404 page. See here

This page displays advanced serach page where you can search recipes by name and filter them by cuisine, skill level, cook time etc. To create that page go to Pages > Add New. Now select template Advanced Search Page and click Update/Publish.

documentation

Follow steps listed here

This page displays last 30 recipes and recipe categories. To create that page go to Pages > Add New. Now select template Archives and click Update/Publish.

documentation

This page displays form to add recipe from frontend. To create that page go to Pages > Add New. Now select template Submit Recipe and click Update/Publish.

documentation



E. PLUGINS & WIDGETS

Just add Text widget to sidebar Social. Custom code for displaying social icons uses Awesome Fonts classes. Find more info about Awesome Fonts here http://demo.pixelemu.com/pe-cooking-blog/typography/

documentation

Now enter this:

<a class="facebook" href="#"><i></i></a><a class="twitter" href="#"><i></i></a><a class="google-plus" href="#"><i></i></a><a class="youtube" href="#"><i></i></a>

documentation

and click Save

Follow steps listed here

Follow steps listed here

Add Text widget to sidebar Footer.

documentation

Add here text:

<img class="photo-img" src="http://ml.dev.pax3.eu/cookingblog/wp-content/uploads/2015/02/avatar1-small-min.jpg" alt="photo"><h3>Mary Ann</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed </p><a class="readmore-author" href="/?page_id=274">read more <i></i></a>

documentation

Choose class col-md-3 to display widget on 25% of theme width.

Click Save when you are done.

Very powerful plugin that allows you to create elements like tabs, accordions etc. on your page without coding knowledge. See documentation.

Follow steps listed here

You can create exmaple form like on our demo site by navigating to Contact > Add New. Now go put this code in FORM section:

<div class="name-email clearfix"><p>[text* your-name placeholder "Name"] </p><p>[email* your-email placeholder "E-mail"] </p></div><p>[textarea your-message placeholder "Message"] </p><p class="submit-right">[submit "Send"]</p>

documentation

and click Save.

Now you can copy code in section Copy this code and paste it into your post, page or text widget content. and place it you page.

You can use this plugin to set maintance mode page for you website. Go to Custom Maintenance. Now tick Enable For Maintenance Mode? and choose WP Page as source. Then select page that you want to use in mainatnce mode.

documentation

Click Save when you are done.

To use this plugin you need to get Consumer Key, Consumer Secret, Access Token and Access Token Secret from https://apps.twitter.com/.

To show Really Simple Twitter Feed Widget on your website navigate to Appearance > Widgets and add new Really Simple Twitter Feed Widget to sidebar Primary Widget Area.

documentation

Now enter Consumer Key, Consumer Secret, Access Token, Access Token Secret and Twitter username. Rest of options is optional.

documentation

Click Save when you are done.

To show Responsive Google MAP on your website navigate to Appearance > Widgets and add new Responsive Google MAP to sidebar Map.

documentation

Then enter code like this:

[om_gmap zoom="9" lat="51.520311" lng="-0.131124" infowindow=""]

documentation

zoom: zoom level

lat: latitude

lng: longitude

Click Save when you are done.

To show Subscriber on your website navigate to Appearance > Widgets and add new Subscriber Form Registration to sidebar Content-Top.

documentation

Enter any text values in widget options.

Important is to choose class newsletter to display widget like on our demo site.

documentation

Click Save when you are done.

Follow steps listed here

Follow steps listed here

Simple plugin that allows to remove widget title by enetring ! before widget title.

documentation

To import classes go to Plugins and then click Settings below Widget CSS Classes.

Now go to tab Import/Export, choose file widget-css-classes-settings.txt from package and click Import Settings.

documentation

At the bottom of widgets you can apply special class.

documentation

There are standard classes from Bootstrap, ex. col-md-3 (widget has width: 3/12), col-md-5 (widget has width: 5/12). There are also classes for Subscriber and box1, box2 (see Custom Pages > Typography on demo site).

The theme is compatibile with Yoast plugin. See documentation.

Plugin that adds extra option in quick menu. You can duplicate posts and recipes.

documentation

Plugin that displays impressive mobile menu with many options. If you want to get menu look like in our demo plese import JSON file. Navigate to Responsive Menu and click on tab Import/Export.

documentation

Now choose responsive-menu.json and click Import Options.

documentation

Built-in widget which allows you to display social icons.

documentation

documentation

On demo page, widget is visible in the 'social' sidebar.

We have also a video tutorial on how to configure the PE Social widget:



F. ADDING CONTENT

Follow steps listed here

Navigate to Recipes > Add New. Enter title, description and click Publish. Optionally you can choose options like recipe category, cuisine, skill level etc.

documentation

To get recipe layout like on our demo site you should create tabs following this and then create structure based on DIV elements with shortcodes. The best option for begginers is to place ready example code in text editor.

If you are not in Classic Mode click Classic Mode button to change it (you will see Backend Editor instead). Then click tab Text and paste example code.

documentation

[vc_row][vc_column width="1/1"][vc_tabs][vc_tab title="Ingredients" tab_id="1422280384106-1-7"][vc_column_text]
<div class="pe-recipe-table cols3">
<div class="pe-recipe-table-column">
<div>Servings: [servings_number] people</div>
<div>[ingredients]</div>
</div>
<div class="pe-recipe-table-column">
<div>Nutrition Info</div>
<div>[nutrition]</div>
</div>
<div class="pe-recipe-table-column">
<div>Scan Your Shopping List</div>
<div>[shopping_list]</div>
</div>
</div>
[/vc_column_text][/vc_tab][vc_tab title="Recipe" tab_id="1413888733-2-47"][vc_column_text][steps][/vc_column_text][/vc_tab][/vc_tabs][/vc_column][/vc_row]

and then enter info needed by used shortcodes in tab Tab Fields. You can add or remove fields by using buttons + or -.

documentation

You can also add info without using Tab Fields and shortcodes. Just enter all info in code:

[vc_row][vc_column width="1/1"][vc_tabs][vc_tab title="Ingredients" tab_id="1413888733-1-24"][vc_column_text]
<div class="pe-recipe-table cols3">
<div class="pe-recipe-table-column">
<div>Servings: 2 people</div>
<div>
<ul>
    <li>large handful cavolo nero, or kale</li>
    <li>100ml/3½fl oz olive oil</li>
    <li>2 lemons, zest only</li>
    <li>½ lemon, juice only</li>
    <l>200g/7oz cooked chickpeas</li>
    <li>500g/1lb 2oz fresh tagliatelle pasta, or similar</li>
    <li>salt</li>
    <li>freshly ground black pepper</li>
    <li>100g/3½oz pecorino or other hard cheese, finely grated</li>
</ul>
</div>
</div>
<div class="pe-recipe-table-column">
<div>Nutrition Info</div>
<div>
<ul class="dott">
    <li>Calories <code>251</code></li>
    <li>Sugar <code>11g</code></li>
    <li>Fat <code>12g</code></li>
    <li>Saturates <code>45g</code></li>
    <li>Salt <code>0.6g</code></li>
</ul>
</div>
</div>
<div class="pe-recipe-table-column">
<div>Scan Your Shopping List</div>
<div><img src="http://ml.dev.pax3.eu/cookingblog/wp-content/uploads/2014/10/qr-example.png" alt="qr" /></div>
</div>
</div>
[/vc_column_text][/vc_tab][vc_tab title="Recipe" tab_id="1413888733-2-47"][vc_column_text]
<h2>Step 1</h2>
Bring a deep saucepan of water to a rolling boil and blanch the cavolo nero for one minute. Drain, and when cool enough to handle, chop finely.
<h2>Step 2</h2>
Heat the olive oil in a wide pan and fry the cavolo nero in it for a few minutes, over a moderately high heat, stirring constantly.
<h2>Step 3</h2>
At the same time, bring a pot of water to a boil and drop in the pasta to cook for two or three minutes until just tender.
<h2>Step 4</h2>
Drain the pasta and stir it into the kale with the lemon zest and juice, the chickpeas and half of the grated pecorino. Season, to taste, with salt and freshly ground black pepper.
<h2>Step 5</h2>
Serve the pasta in deep bowls with more cheese scattered over.
[/vc_column_text][/vc_tab][/vc_tabs][/vc_column][/vc_row]   


G. RECIPE OPTIONS

Navigate to Recipes > Recipe Categories. Now choose name of the category, blog layout and click Add new recipe category.

documentation

You can choose how to display recipes in blog. Select one of them:

  1. blog-standard: 1 column, image centered
  2. blog-2cols: 2 columns
  3. blog-3cols: 3 columns
  4. blog-intro-3cols: 3 columns, with intro post
  5. blog-image-left: 1 column, image aligned left
  6. blog-video: 1 column, with movie

documentation

This is special field in recipe that allow you to display Youtube Video instead of Featured Image.

documentation

If you want to display Youtube Video instead of Featured Image change Header Type to video.

documentation

Tags for recipes only.

documentation

You can add more tags by go to Recipes > Recipe Tags.

Special taxonomy for cusine, ex. american, european.

documentation

You can add more tags by go to Recipes > Cuisine.

Special taxonomy for recipe types, ex. breakfast, lunch, dinner.

documentation

You can add more tags by go to Recipes > Recipe Type.

Special taxonomy for ingredients, ex. salt, chicken, pepper.

documentation

You can add more tags by go to Recipes > Ingredients.

This taxonomy is used in page Advanced Search.

Special taxonomy for serves, ex. 1,2,3,4.

documentation

You can add more tags by go to Recipes > Serves.

Special taxonomy for skill level, ex. easy, hard.

documentation

You can add more tags by go to Recipes > Skill Level.

Special taxonomy for cook time, ex. 0:10h, 0:20h.

documentation

You can add more tags by go to Recipes > Cook Time.

Special taxonomy for prep time, ex. 0:10h, 0:20h.

documentation

You can add more tags by go to Recipes > Prep Time.

Special taxonomy for ready in, ex. 0:10h, 0:20h.

documentation

You can add more tags by go to Recipes > Ready In.

If you want to display Youtube Video instead of Featured Image change Header Type to video.

If you want to display Featured Image choose image. When you don't select anything Featured Image will be displayed.

documentation



H. WPML

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here

Follow steps listed here



I. OTHER

If you want to style certain page, post or recipe you can add special class.

documentation

Class will be added here:

documentation

Follow steps listed here

Follow steps listed here



J. OPTIMIZE YOUR SITE



K. SOURCES AND CREDITS

  1. Homepage Image http://www.dreamstime.com/royalty-free-stock-photos-young-couple-enjoying-meal-image6880508
  2. All-in-One WP Migration (Migration tool for all your blog data. Import or Export your blog content with a single click.) https://servmask.com/
  3. Contact Form 7 (Just another contact form plugin. Simple but flexible.) https://ideasilo.wordpress.com/
  4. Custom Maintenance Mode (You can easily create a maintenance mode) http://www.wpsuperplugin.com/
  5. Display Widgets (Adds checkboxes to each widget to show or hide on site pages.) http://strategy11.com/
  6. Duplicate Post (Clone posts and pages.) http://lopo.it/
  7. W3 Total Cache http://www.linkedin.com/in/w3edge
  8. jonradio Multiple Themes (Select different Themes for one or more WordPress Pages, Posts or other non-Admin pages. Or Site Home.) http://jonradio.com/plugins
  9. Meta Box (Create meta box for editing pages in WordPress. Compatible with custom post types since WP 3.0) http://www.deluxeblogtips.com/
  10. Really Simple Twitter Feed Widget (Displays your public Twitter messages in the sidbar of your blog. Simply add your username and all your visitors can see your tweets!) http://www.whiletrue.it/
  11. Remove Widget Titles (Removes the title from any widget that has a title starting with the "!" character.) http://www.scratch99.com/
  12. Responsive Google MAP (Responsive Google MAP, Anywhere.) http://webomnizz.com/blog
  13. Revolution Slider (Revolution Slider - Premium responsive slider) http://themepunch.com/
  14. Subscriber by BestWebSoft (This plugin allows you to subscribe users on newsletter from your website.) http://bestwebsoft.com/
  15. Widget CSS Classes (Add custom, first, last, even, odd, and numbered classes to your widgets.) http://cleverness.org/
  16. WordPress SEO (The first true all-in-one SEO solution for WordPress, including on-page content analysis, XML sitemaps and much more.) https://yoast.com/
  17. WPBakery Visual Composer (Drag and drop page builder for WordPress. Take full control over your WordPress site, build any layout you can imagine – no programming knowledge required.) http://wpbakery.com/
  18. WP User Avatar (Use any image from your WordPress Media Library as a custom user avatar. Add your own Default Avatar.) http://www.flippercode.com/
  19. WordPress Importer https://profiles.wordpress.org/wordpressdotorg/
  20. Responsive Menu http://www.peterfeatherstone.com/wordpress/responsive-menu/
  21. OptionTree https://github.com/valendesigns/option-tree-theme

Połączmy się:

INDICO S.C.

ul. Przyjaźni 9, 84-215 Gowino, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2021 Pixelemu.com All rights reserved.