38
KALE PRO Version 1.3 12/30/2016 INSTALLING WORDPRESS DOWNLOADING THE THEME INSTALLING THE THEME Using the Administration Panel Using cPanel Manually Using FTP UPGRADING FROM THE FREE VERSION UPDATING THE THEME INSTALLING DEMO DATA One Click Demo Install Manual Demo Data Installation SOCIAL MEDIA MENU / ICONS MAIN MENU / HEADER MENU TOP RIGHT MENU LOGO AND TAGLINE FRONT PAGE - SLIDESHOW / BANNER Front Page Banner Front Page Posts Slider Front Page Custom Slider FRONT PAGE - FEATURED POSTS FRONT PAGE - LARGE / HIGHLIGHT POST FRONT PAGE - VERTICAL CONTENT / POSTS BLOG FEED Layout More Options POSTS Related Posts Video Posts PAGES CUSTOM TYPOGRAPHY AD OPTIONS ADVANCED

KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

Embed Size (px)

Citation preview

Page 1: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO Version 1.3 12/30/2016

INSTALLING WORDPRESS

DOWNLOADING THE THEME

INSTALLING THE THEME Using the Administration Panel Using cPanel Manually Using FTP

UPGRADING FROM THE FREE VERSION

UPDATING THE THEME

INSTALLING DEMO DATA One Click Demo Install Manual Demo Data Installation

SOCIAL MEDIA MENU / ICONS

MAIN MENU / HEADER MENU

TOP RIGHT MENU

LOGO AND TAGLINE

FRONT PAGE - SLIDESHOW / BANNER Front Page Banner Front Page Posts Slider Front Page Custom Slider

FRONT PAGE - FEATURED POSTS

FRONT PAGE - LARGE / HIGHLIGHT POST

FRONT PAGE - VERTICAL CONTENT / POSTS

BLOG FEED Layout More Options

POSTS Related Posts Video Posts

PAGES

CUSTOM TYPOGRAPHY

AD OPTIONS

ADVANCED

Page 2: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

SIDEBAR WIDGETS About Me Widget

FOOTER Copyright Message Footer Widgets

RECIPE INDEX

RECIPE SHORTCODE

JETPACK SHARING INTEGRATION

WP INSTAGRAM WIDGET INTEGRATION

MAILPOET NEWSLETTERS INTEGRATION

MAILCHIMP NEWSLETTER SIGNUP FORM

RECENT POSTS WIDGET WITH THUMBNAILS INTEGRATION

INSTALLING WORDPRESS

This documentation assumes that you have Wordpress installed. You would either be installing

WordPress on your computer (localhost) or on a hosting account. Please refer to the following

links for any help regarding the installation:

● https://codex.wordpress.org/Installing_WordPress

● https://codex.wordpress.org/Installing_WordPress_in_Your_Language

● http://www.wpbeginner.com/how-to-install-wordpress/

● https://www.siteground.com/tutorials/wordpress/wordpress-installation.htm

DOWNLOADING THE THEME

Please log into https://www.lyrathemes.com/my-account and download the theme. It will come

as a zip file called kale-pro.zip. Store it on your computer. If you extract the zip file, it will

create a folder called kale.

2

Page 3: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

INSTALLING THE THEME

The theme you just purchased comes as a zip file. See below for some ways you can install your

new theme - they are listed easiest-first!

Using the Administration Panel

1. Log in to the WordPress Administration Panel - for example by going to

yourdomain.com/wp-admin

2. Click Appearance, then Themes.

3. Click Add New.

4. Use the Upload link in the top links row to upload a zipped copy of the theme that you

have previously downloaded to your machine.

5. After the theme is installed, go to Appearance and then Themes. A live preview of any

Theme (using your blog's content) can be seen by clicking Live Preview. Click Activate to

activate your newly installed theme.

Using cPanel

If your host offers the cPanel control panel, you can use the following instructions to install the

theme.

1. In cPanel File Manager, navigate to your Themes folder. If your WordPress is installed in

the document root folder of your web server you would navigate to

"public_html/wp-content/themes" and if you have WordPress installed in a

sub-folder called wordpress, you would navigate to

"public_html/wordpress/wp-content/themes".

2. Once you've navigated to the Themes folder in cPanel File Manager, click on Upload file(s)

and upload that .zip file you saved from your LyraThemes account.

3

Page 4: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

3. Once the .zip file is uploaded, click on the name of that file in cPanel, then in the panel to

the right, click on "Extract File Contents", and that .zip file will be uncompressed.

4. Now log in to the WordPress Administration Panel - for example by going to

yourdomain.com/wp-admin

5. Go to Appearance and then Themes. A live preview of any Theme (using your blog's

content) can be seen by clicking Live Preview. Click Activate to activate your newly installed

theme.

Manually Using FTP

You would need an FTP client in order to install the theme via FTP. FileZilla is a free FTP solution

that can be downloaded from https://filezilla-project.org/.

1. Extract the zip file for the theme that you downloaded from your LyraThemes account.

This will create a folder containing all the theme files on your computer.

2. Use your FTP client to connect to your web hosting server. You will need the server

address (such as ftp.yourdomain.com), a username and a password.

3. If your WordPress is installed in the document root folder of your web server you would

navigate to "public_html/wp-content/themes" and if you have WordPress installed in

a sub-folder called wordpress, you would navigate to

"public_html/wordpress/wp-content/themes".

4. Upload the theme folder into the wp-content/themes folder. So your newly uploaded

theme would be in wp-content/themes/kale.

5. Go to Appearance and then Themes. A live preview of any Theme (using your blog's

content) can be seen by clicking Live Preview. Click Activate to activate your newly installed

theme.

4

Page 5: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

UPGRADING FROM THE FREE VERSION

Please read this section carefully if you are upgrading from the free version Kale.

● In order to keep the settings from your free version, make sure that the folder name for

the free version and the pro version are the same. We have made sure of this in our

theme package - but please double-check.

● If your free theme is installed in a folder wp-content/themes/kale then you should

upload the files from the pro package kale-pro.zip into the same folder.

● If you are uploading the pro theme using FTP, simply overwrite the old free theme folder

with the folder from the new pro package.

Tip: We recommend backing up all files and the database before performing the theme

upgrade.

UPDATING THE THEME

For a step by step tutorial on updating the theme - please visit

https://www.lyrathemes.com/updating-your-theme/

After you install the theme and have used it for a few days, you may get a notification on your

dashboard saying that there is a theme update available.

That will happen when we make changes, updates, and fixes to the theme. It is best to update

your theme as soon as possible after you see the update notification. The theme will not

update automatically if you check the theme name and click “Update Themes”. Go to

Appearance > Themes to view the theme update details.

5

Page 6: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

Follow these instructions to update the theme:

1. Download the latest version of the theme by logging into your LyraThemes account. It will

come as a zip file called kale-pro.zip. Store it on your computer. If you extract the zip

file, it will create a folder called kale.

6

Page 7: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

2. Use your FTP client to connect to your web hosting server. If your host offers the cPanel

control panel, you can access the File Manager. If your WordPress is installed in the

document root folder of your web server you would navigate to

"public_html/wp-content/themes" and if you have WordPress installed in a

sub-folder called wordpress, you would navigate to

"public_html/wordpress/wp-content/themes".

3. You should see the current theme folder called kale here.

4. You can either delete this folder (please make a backup!) or rename it to something else

like kale-old.

5. After deleting or renaming the old theme folder, simply upload the latest theme folder

(newly downloaded and extracted on your computer) into the wp-content/themes folder.

So your newly uploaded theme would be in wp-content/themes/kale.

In short - all you need to do is replace the files in your current theme folder with the ones in the

new package. Make sure that the theme folder name remains the same.

Read More: Here is a tutorial that gives more information on this topic

https://premium.wpmudev.org/blog/upgrade-wordpress-themes-even-if-they-are-customized/

INSTALLING DEMO DATA

One Click Demo Install

Kale Pro version 1.3+ supports one click demo data installation. After theme installation, you’ll

be prompted to install the “One Click Demo Import” plugin. After installing the plugin, go to

Appearance > Import Demo Data. Click the “Import Demo Data” button - be patient, it may take a

little while for the process to be complete. Please note: this will import all the widgets,

options/settings, and posts/pages content into your website. If you do not want to import

everything, see below for the manual demo data installation.

7

Page 8: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

Manual Demo Data Installation

Here is how you can install the data and settings shown on our demo site at

http://www.lyrathemes.com/preview/?theme=kale-pro.

1. Download the demo data from

https://www.lyrathemes.com/sample-data/kale-pro-sample-data.zip.

2. You will have two files in the zip file: kalepro.wordpress.*.xml and

kale-pro-export.dat. The XML provides the WordPress import data (all posts, pages,

menus, etc.) and the DAT file gives you a way to import our Customize settings.

3. Now go to Tools > Import and click on WordPress. Read more about this here

https://codex.wordpress.org/Importing_Content#WordPress Import the XML file from the

zip file you just downloaded.

4. Next, you will need to install and activate this plugin:

https://wordpress.org/plugins/customizer-export-import/

5. Go to Appearance > Customize. Scroll down to the last option called Export/Import. Now

import the DAT file here.

6. Go to Appearance > Menus or go to the Menus section in the Customizer. Here you need

to assign the “Main” menu to the “Main Menu” location.

8

Page 9: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

SOCIAL MEDIA MENU / ICONS Appearance > Menus

If you want to show a list of your social media icons, start at Appearance > Menus. Create a new

menu called “Social”. Please note, the name “Social” is important. It has to be exactly the same

spelling, nothing more or less.

Now enter each of your social media URLs as a “Custom Link”. You can enter whatever you like

for the Link Text . It will be automatically replaced by the relevant social media icon.

9

Page 10: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

Once you’ve created this menu, you can assign it to any widget area in order to show the social

media icons in that location. Go to Appearance > Widgets, and assign the “Custom Menu” widget

to any widget area, and select the “Social” menu for the Custom Menu.

In our demo, we’ve assigned the Social menu in the following widget locations:

● Header - Left

● Sidebar - Front Page - Bordered

● Footer - Last

MAIN MENU / HEADER MENU

Appearance > Menus

The theme has one main menu location “Main Menu”. This is the top header menu right under

the logo.

10

Page 11: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

On smaller screens (such as mobile phones and some tablets in portrait mode) the navigation

will collapse into a button that can be clicked to drop down the navigation items.

If you want a search button to show up in the the top navigation, go to Appearance > Customize

> General Settings and toggle on the setting “Search Icon in Main Nav?”.

Read More: For more information on how to create menus, please read

https://codex.wordpress.org/WordPress_Menu_User_Guide

11

Page 12: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

TOP RIGHT MENU

Appearance > Menus

The top two header area widgets called Header - Left and Header - Right are capable of handling

any sort of widget. It can be a Custom Menu or Text; whatever you may want to show in those

areas.

If Custom Menu widget is assigned with a menu called “Social” being displayed, it will

automatically show social media icons - as mentioned above in the “Social Media Menu / Icons”

section.

If it is a menu called anything other than “Social”, it will display as a normal text menu such as

the one displayed in our demo on the top right.

LOGO AND TAGLINE

Appearance > Customize > Site Identity

Go to Appearance > Customize > Site Identity to manage your logo settings. You can choose to

display an image logo or a text logo. You can also specify a site tagline here which would appear

right under the logo.

12

Page 13: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

FRONT PAGE - SLIDESHOW / BANNER

Appearance > Front Page > Banner / Slider

There are three main options for the home page slider area:

● Banner

● Posts Slider

● Custom Slider

Front Page Banner Set up a banner under Appearance > Header Image. You can enter a heading, description, and

URL if you like. This will show up as a banner on the home page.

13

Page 14: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

Front Page Posts Slider

If this option is selected under Front Page > Banner / Slider, you will be presented with a

dropdown of category names. Select a category and the number of posts/slides you want to

show. The slider will automatically be created from the most recent posts from the chosen

category.

14

Page 15: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

Front Page Custom Slider

This is a custom slider where you can specify your own images and captions without being

bound to a category or posts. You can add as many slides as you want!

When this option is selected, a new section with a button saying “Add new row” will be shown.

Click “Add new row” and you will be presented will all the options for a new slide item. Upload an

image, enter a header, description, URL, and a Font Awesome icon class name.

You can rearrange the items to change the order in which the slides appear on the front end.

15

Page 16: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

FRONT PAGE - FEATURED POSTS

Appearance > Customize > Front Page > Featured Posts

Select whether to show “Featured Posts” on the home page. If you select “Show” for this section,

you will be presented with three options where you can select the posts that you want to display

in this area.

FRONT PAGE - LARGE / HIGHLIGHT POST

Appearance > Customize > Front Page > Large / Highlight Post

This theme allows you to select a post to display in a large full format on the home page right

under the recent posts blog feed. If you want to show this, select “Show” here and then select

the post you want to display.

16

Page 17: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

If you want to hide “Share” buttons for this post, toggle off the “Show Share Links”.

The “Jetpack Sharing Integration” section gives details on how to set up the Share links.

FRONT PAGE - VERTICAL CONTENT / POSTS

Appearance > Customize > Front Page > Vertical Content / Posts

The theme provides another section to highlight your posts from a specific category here in the

Vertical Content section. Turn this section to “Show” and then choose the category from which

the posts will be displayed. The front end would show the 5 most recent posts from the selected

category here.

17

Page 18: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

BLOG FEED

Appearance > Customize > Blog Feed

Layout

Whether you are displaying your latest blog posts on the front page or you have a page to show

your blog posts - the blog feed display is controlled via this section.

2 Small Posts, Followed by 1 Full: This is a mixed format display and shows two posts in one

row (side by side) followed by a full format post. So if you have set your settings to show 6 posts

(“Blog pages show at most”) in the blog feed under Settings > Reading, then they would be

shown as: 2 side by side, 1 full, 2 side by side, 1 full.

Large Image Top, Full Content Below: Choosing this will show the full size featured image at

the top and the full post content at the bottom. If you use the “more tag” (see

18

Page 19: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

https://en.support.wordpress.com/more-tag/) you can control how much content is visible in the

blog feed and the user can click “more” to view the complete post.

Small Image and Excerpt, 2 in a Row: This shows the blog feed in a grid format, with 2 posts

per row.

More Options

You can control the display of your blog feed even further by choosing whether to display the

meta information, such as the date, author, and category for the posts.

The “Show Share for Full Posts” option controls whether you want to display the Jetpack sharing

options for the full format posts. Read more about how to set up the sharing options here.

You can also toggle “Show Sidebar on Category Pages” to show or hide the sidebar on category

pages. By default, categories show up as 3 posts in a row with no sidebar.

POSTS

Appearance > Customize > Posts

Control the post layout here by choosing whether you want to show a sidebar, the featured

image at the top, and the post meta information.

You can also choose whether to display share icons on the post - at the beginning and end of the

post.

19

Page 20: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

Related Posts

This theme comes with a built-in Related Posts feature which you can turn on here. Two Related

Posts are shown under each post, if this option is selected. The top two most commented posts

that share the same tags as the post being displayed are considered “related” posts.

20

Page 21: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

Video Posts

Kale Pro 1.3+ supports video format posts. On the post edit screen, choose the “Video” format to

display a special box where you can enter the YouTube video embed link, for example

https://www.youtube.com/embed/ETxOJyuGFgQ.

Make sure this is the embed link and not the main video link.

21

Page 22: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

PAGES

Appearance > Customize > Pages

You can control the display of your pages here by choosing whether to display a sidebar or not

and whether to display the featured image at the top of the page.

Tip: A “Full Width” page template is available for overriding the sidebar selection here, so that

any page can be displayed as a full width page if needed.

CUSTOM TYPOGRAPHY

Appearance > Customize > Custom Typography Custom Typography features are only loaded if this option is turned to “Custom”.

22

Page 23: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

When enabled, you can choose fonts for body, logo, tagline, and headings. And after choosing

the font for Headings, you can enter the font size for each heading size (h1 - h6), making it

extremely simple to setup your custom typography.

CUSTOM COLORS

Appearance > Customize > Custom Colors

This setting needs to be changed to “Custom” to enable custom colors. You can choose colors

for the body/text color and an accent color. An optional background color can also be set.

23

Page 24: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

AD OPTIONS

Appearance > Customize > Ad Options

The theme comes with a simple built-in ad display mechanism. Use the toggle control to enable

or disable ads on the site. When enabled, you can upload as many ad units as you like. When

enabled, these ads will show up after every second post on the blog feed.

Please note: If your posts are set to display as `2 Small Posts, Followed by 1 Full`, then the ad

will be shown after every 2 small posts.

24

Page 25: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

ADVANCED Appearance > Customize > Advanced

This section is mainly used to enter any custom CSS code that you may want to use to alter the

display of the theme in any way.

Please note - if you’re using WordPress version 4.7+ - the custom CSS field will not be shown and

you can use the default included field called “Addition CSS” for this purpose.

You can also set up your Google Analytics code by entering it here.

SIDEBAR WIDGETS

This theme comes with many sidebar widgets which can be used in many multiple ways to

create a unique look for your blog or website.

There are two sidebar blocks (normal and bordered) available for each of the following:

● Front Page

● Posts

● Pages

● Default

The default sidebars will display across the website. So assign any widgets to “Sidebar - Default”

or “Sidebar - Default - Bordered” that you always want to show across all pages. To target the

front page specifically, assign widgets to the front page sidebars. The Front Page sidebars will

not show up on the posts and pages; they will display their own specific sidebars and the default

sidebar. Similarly for the Post and Page specific sidebars.

25

Page 26: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

There are two widget areas in the header: Header - Right and Header - Left. These have been

discussed earlier in detail.

About Me Widget

The “About Me” widget seen in our demo is a simple Text Widget. Here is the content we’re

using:

<img src="http://demo.lyrathemes.com/kale-pro/wp-content/uploads/sites/4/2016/06/about-us.jpg"

class="img-responsive pull-left"> Kale is the perfect food blog theme! Fully featured, beautiful and

elegant, Kale gives the blog author multiple areas to showcase her work. Extremely simple to set up

and work with, Kale is the perfect blog for recipes, lifestyle blogging... just about everything!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare elementum varius. In viverra

pulvinar augue, ac hendrerit enim volutpat ac. Donec imperdiet pellentesque commodo. Proin feugiat

pellentesque laoreet. Suspendisse nec velit ut arcu molestie consectetur non vitae lacus.

26

Page 27: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

The footer widgets are discussed next.

FOOTER

Copyright Message

You can change the copyright message by editing the Copyright Text field under Appearance >

Customize > General Settings.

Footer Widgets

There are three footer sections available in this theme.

Full Width Footer Widget: A full width footer widget that can be used to show any kind of

content. In our demo, we’re showing an Instagram feed in this “Footer - Full Width” area, using

the “WP Instagram Widget” plugin.

27

Page 28: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

Footer Columns: There is a secondary footer available in this theme if you want to display more

information across the bottom of the page. Simply use the Footer Secondary - Col 1 to Footer

Col 5 widgets under Appearance > Widgets to populate the content for the footer columns.

Tip: If you want to show just 2 columns in the footer area, just populate two of the widget areas

and the theme will automatically adjust to display just two equal columns! So you can control

how many columns you want to show and are not restricted to using all 5 columns.

Last Footer: At the very bottom, right above the copyright information, you can use another

widget area to display social media links, a footer navigation, or just some basic information or

disclaimer. Use the “Footer - Last” widget to set up this last footer area.

28

Page 29: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

RECIPE INDEX

This is a special template available in this theme using which you can display an “index” or

collection of recipes belonging to specific categories. See it in action here.

In order to set up a new Recipe Index page, create a new page and select “Recipe Index” as the

page template.

Click “Save” or “Update” for the page to reveal a new set of special options for this page: “Kale -

Recipe Index Options”.

If you enter nothing into the special options for this page (Kale - Recipe Index Options), then the

resulting page will show 3 posts each for all the categories in your blog.

29

Page 30: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

In order to control what categories show up on the index page, select the categories you’d like to

include on this page. To change the default number of posts that will be shown, enter the

number of posts you’d like to show for each category.

Tip: Remember, posts will be shown 3 in a row, so entering a multiple of 3 ensures that the page

looks nice and balanced!

You can have as many Recipe Index pages as you like - create a new one for every set of

categories that you want to display.

Recipe Index Widgets: At the top of the Recipe Index page, there is an option to display more

controls and information through widgets. These are labeled as Recipe Index - 1 to Recipe Index

- 4 under Appearance > Widgets. Widgets assigned here will show up on the Recipe Index page(s)

that you’ve set up.

30

Page 31: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

RECIPE SHORTCODE

Kale Pro comes with a built-in Recipe shortcode [lt_recipe] that displays recipes in a Google

friendly format. Here is a sample usage:

[lt_recipe name="Homemade Pesto Pizza" servings="6" prep_time="10M" cook_time="10M"

difficulty="Super Easy" summary="A great alternative to your regular pizza."

image="http://demo.lyrathemes.com/kale-pro/wp-content/uploads/sites/4/2016/06/kale-food-blog

-pizza2.jpg" ingredients="1 (12 inch) pre-baked pizza crust;1/2 cup pesto;1 ripe tomato,

chopped;1/2 cup green bell pepper, chopped;1 (2 ounce) can chopped black olives, drained;1/2

small red onion, chopped;1 (4 ounce) can artichoke hearts, drained and sliced;1 cup crumbled

feta cheese"]Preheat oven to 450 degrees F (230 degrees C);Spread pesto on pizza crust;Top

with tomatoes, bell peppers, olives, red onions, artichoke hearts and feta cheese.;Bake for

8 to 10 minutes, or until cheese is melted and browned;Source:

http://allrecipes.com/recipe/21528/pesto-pizza/[/lt_recipe]

You can use the built-in shortcode builder to generate the above code. Click on the “carrot” icon

to launch the builder and fill in your values.

31

Page 32: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

That will launch a new popup window that shows a form like this:

32

Page 33: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

Here are all the possible shortcode arguments - you do not have to use all of them. Any fields

that you leave out will not be printed or used.

● name: Enter the name or title of the recipe. For example “Homemade Pesto Pizza”.

● servings: You can enter the servings information such as “4-6 people” or “6-8 medium

slices”.

● prep_time: Enter the preparation time. Use H for hours and M for minutes. So for

example, if the prep time is 1 hour and 30 minutes, use “1H30M”. For just 45 minutes, use

“45M”. Always use prep_time in combination with cook_time.

● cook_time: Same as above. Always use cook_time in combination with prep_time.

● total_time: Same as above. Use total_time or a combination of both cook_time and

prep_time.

● difficulty: You can specify your own text here to give your recipe a bit of character. Is the

recipe “Easy”, “Super Easy”, or “Quick and Simple”? You can use any small phrase here and

it would be used as is. You can also leave this out if you want.

● summary: A few lines giving the user a summary of what the recipe is about.

● image: A link to the recipe image.

● ingredients: This is a semi-colon separated list of ingredients.

The content within the opening [lt_recipe] and closing [/lt_recipe] shortcode tags constitutes the

actual recipe. Separate each step with a semi colon (;) and the shortcode automatically creates

the “Step” labels for each step.

The above example displays as the recipe shown here.

JETPACK SHARING INTEGRATION

Kale Pro integrates in a unique manner with the Jetpack plugin’s Sharing options. In order to set

this up, you will need to install the Jetpack plugin, then go to Jetpack > Settings > Sharing >

Configure.

33

Page 34: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

Select the services you want to show for sharing your posts. For the “Button Style” choose “Icon

only”.

From the theme Customize screen, you can further control where these sharing icons are

displayed:

● Full posts in blog feed (Appearance > Customize > Blog Feed: Show Share for Full Posts )

● Large highlight post on the front page (Appearance > Customize > Front Page > Large /

Highlight Post: Show Share Links )

● Posts (Appearance > Customize > Posts: Share Links at the Top, Share Links at the Bottom )

The sharing links appear customized to the theme layout and design.

34

Page 35: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

WP INSTAGRAM WIDGET INTEGRATION

The theme integrates well with the WP Instagram Widget plugin. Install this plugin and use the

available Instagram widget to set up a feed in the Footer - Full Width widget area.

If the Instagram widget is assigned to any sidebar area, then it will show up as a auto scrolling

carousel.

MAILPOET NEWSLETTERS INTEGRATION

The theme integrates well with the MailPoet Newsletters plugin. Assign the newsletter widget to

any of the sidebars to create a beautiful, custom designed newsletter sign up form.

35

Page 36: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

In our demo, we’ve assigned the “MailPoet Subscription Form” widget to the “Sidebar - Default”

location.

Here is a screenshot of the MailPoet form we’re using:

Please note: The “Name” and “Email” fields are set up to “Display label within input”. You can

change settings for each of the form fields by click on the form field and clicking the “Edit

Display” button.

More details on how to use the MailPoet plugin here: http://docs.mailpoet.com/

36

Page 37: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

MAILCHIMP NEWSLETTER SIGNUP FORM

Mailchimp newsletter signup form can be added as a Text Widget to any sidebar location. To do

this, simply go to your Mailchimp list > Signup Forms > Embedded Forms and copy the embed

code.

Paste the embed code into a Text Widget and assign it to any sidebar location. Remove the

following lines from the top of the embed code to ensure that the theme formatting applies

correctly.

<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">

<style type="text/css">

#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }

/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.

We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

</style>

37

Page 38: KALE PRO - Premium WordPress Themes - LyraThemes · This will create a folder containing all the theme files on your computer. 2. ... kalepro.wordpress.*.xml and kale-pro-export.dat

KALE PRO

RECENT POSTS WIDGET WITH THUMBNAILS INTEGRATION

Kale Pro also integrates with the Recent Posts Widget With Thumbnails plugin. Assign the widget

to any sidebar location to show recent posts from any category (or multiple categories) along

with their featured images. Make sure to select “kale-thumbnail (760x400)” as the image size to

display and also check on the “Use aspect ratios of original images? “ option (which makes sure

that the images are displayed in a responsive fashion).

38