Kale

1.Most frequently asked questions #

1.1.How to remove the sample images that are showing up throughout the website? #

The theme shows default / sample images for the posts that do not have their own featured images defined. You can turn these off by going to Appearance > Customize > General Settings and turning off the “Example Content” toggle.

 

However, please note, your blog/website will look uneven / unfinished if all the posts do not have featured images defined. So please make sure you upload a featured image for all your posts.

More information on how to upload featured images:
https://en.support.wordpress.com/featured-images/
http://www.wpbeginner.com/beginners-guide/how-to-add-featured-image-or-post-thumbnails-in-wordpress/

1.2.What is the ideal image size to upload for posts and pages? #

Kale will automatically create the best images for each spot in the theme. However, it expects an image size of at least 1200 x 800 to be supplied as the featured image for posts and pages to be able to create the best looking images.

1.3.How to remove the sample sidebar widgets? #

The theme shows default / sample widgets in the “Sidebar – Default” position. In order to remove the sample widgets, you can assign your own widget to the “Sidebar – Default” position. If you do not want to assign a widget to this location, then alternatively you can turn off the “Example Content” under Appearance > Customize > General Settings. See this screenshot.

 

Please note – when you turn off Example Content, all sample/default images that show up for posts that do not have featured images will also stop being displayed. So please make sure you upload a featured image for all your posts.

More information on how to upload featured images:
https://en.support.wordpress.com/featured-images/
http://www.wpbeginner.com/beginners-guide/how-to-add-featured-image-or-post-thumbnails-in-wordpress/

1.4.Why aren't third level menus showing up? #

Version 1.8+ now supports menus up to level 3.

For up to version 1.7.1: The theme only supports two menu levels: the main level and one dropdown for each. A third level is not available at this time.

The main reason is that the framework being used for the theme, one of the most widely used CSS frameworks on the web today, supports two levels of menus. You can take a look here  http://getbootstrap.com/components/#navbar. We’re looking to expand on this in the near future and allow our users to create a third menu level.

In the meanwhile, we suggest creating dividers to separate out groups of menu items. You can see these in action here on our demo.

In order to set up a divider, go to Appearance > Menus and edit the main menu. Click on “Custom Links” and enter “#” for the URL and anything for the Link Text (screenshot). Click “Add to Menu”. After the item is added, click it open on the right hand side and enter “divider” as the CSS class (screenshot).

1.5.How to replace or remove recent posts from the home page? #

In order to remove the recent posts from your home page, please create a new page (for example “Home”). Now go to Settings > Reading and set this page as the front page. See this for more information.

Once this static page is set up, you will no longer see the recent posts on your home page. The content from the page you just created will be showing up here.

If you wish to remove all the content, simply edit the page and remove all the content from it and update. However, you’ll still be seeing the title of the page (for example “Home”) which you can hide by using this custom CSS in Appearance > Customize > Additional CSS:

.home .entry-page h1.entry-title { display: none; }

1.6.Logo and tagline #

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.

2.2.Setting up the posts slider #

In order to set up the Posts Slider, go to Appearance > Customize > Front Page > Banner / Slider and select Posts Slider.

If this option is selected, you will be presented with a dropdown of category names. Select the category from which the posts will be forming the slider. Now select the number of posts/slides you want to show. The slider will automatically be created from the most recent posts from the chosen category.

Please make sure that there are at least 3 published posts in that category and that the posts have a featured image specified.

2.3.Custom slider (Pro only) #

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.

Use Full Image Size: By default, the slider resizes all photos to 1200×550. If you want to use your own custom image sizes, turn this on. Make sure all the slides are the same size. This only applies to the custom slider.

 

3.Setting up menus #

3.2.Top right menu #

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.

3.4.Main/Parent Node for Dropdown Menus #

By default, “#” is assigned as the link / URL for all parent nodes for dropdown menus. Clicking on the main node opens the sub menu, and does not direct the user away from the page to another URL.

However, in some cases it is desirable to assign a URL to the main node – the dropdown menu will open on hover, and on click the user will be taken to the URL assigned. To enable this behavior, toggle the “Enable Dropdown Menu Parent Nodes” setting on under “General Settings”.

Note: This feature is only available in versions 1.8+ (Pro) / 1.3+ (Free).

4.Main / front page elements #

4.2.Setting up front page 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” under Appearance > Customize > Front Page > Large / Highlight Post and then select the post you want to display.

Pro only: 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.

4.3.Setting up vertical posts / content on the home page (Pro only) #

The theme provides another section to highlight your posts from a specific category here in the Vertical Content section. Go to Appearance > Customize > Front Page > Vertical Content / Posts  and turn this section to “Show”. 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.

4.4.Rearrange / Reorder Sections (Pro only) #

From version 1.8 onward, you will now be able to rearrange the front page sections in any order you wish. Go to Front Page > Order of Sections and then drag and drop them in your desired order.

Please note that this section has an additional option to hide sections as well. Click the “eye” control for each section to toggle the visibility of that section. It is important to know that this value will override the individual section “show/hide” value.

So for example, if you have set the Large / Highlight Post to “Show” but toggle the visibility off here in the “Order of Sections” area, then the Large / Highlight Post will not show up on the front end.

5.Blog feed options, recent posts on home page #

All these options are found under Appearance > Customize > Blog Feed.

5.1.Choose which meta information to display on the blog feed #

You can control the display of your blog feed by choosing whether to display the meta information, such as the date, author, and category for the posts.

The setting in Appearance > Customize > Blog Feed applies to all blog feeds (recent posts, home page posts, posts shown on category pages, archives, etc.)

The setting in Appearance > Customize > Posts applies to the actual post page.

5.2.Set the blog feed display format #

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 the options under Appearance > Customize > Blog Feed.

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 (Pro only):​ 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” 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.

The “Show Share for Full Posts” option controls whether you want to display the Jetpack sharing options for the full format posts.

6.Set up post options #

All the settings for the posts can be found in Appearance > Customize > Posts.

6.1.Customize sidebar, featured image, share icons #

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 (Pro only).

6.3.Video posts (Pro only) #

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.

7.Set up page options #

7.1.Customize sidebar, featured image #

You can control the display of your pages under Appearance > Customize > Pages 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.

8.Choose your own fonts and colors (Pro only) #

8.1.Custom typography / fonts (Pro only) #

Under Appearance > Customize > Custom Typography, you can choose your own fonts. Set “Default or Custom Typography?” to CUSTOM to enable this option. 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.

 

8.2.Choose your own colors (Pro only) #

Under Appearance > Customize > Custom Colors the “Default or Custom Colors?” option needs to be set 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.

9.Monetize your website with the built-in ad options (Pro only) #

9.1.Blog feed, page, and post ads #

Blog Feed Ads:

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.

The ad can be a banner or image and you can specify your own link. Or you can paste in ad code (such as Adsense or Amazon ads). Enter a URL and upload an image, or paste in the ad code. Please note – if both the image and code have been added, the ad code will be ignored.

 

Page and Post Ads:

The theme comes with special page and post widgets areas where ads can be added. You may use any widget for those areas, for example the Text Widget to show Adsense or Amazon ads.

10.Available widgets #

10.2.About Me widget (Pro only) #

Kale Pro comes a special easy to use “About Me” widget that can be assigned on any location. It takes a title, an image, and some text / description and creates an “About” section in the sidebar.

11.Built-in recipe and index features #

11.1.Setting up a Recipe Index (Pro only) #

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 select / 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.

Check mark the categories you would like to show on this Recipe Index template. You can also drag and drop the categories in the order in which you would like to display them.

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.

 

11.2.Adding recipes to your posts (Pro only) #

Kale Pro comes with a built-in Recipe shortcode [lt_recipe] that displays recipes in a Google friendly format. See a demo here. 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.

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

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 andit 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. You can bold some text between two semi-colons to create headings. For example:

ingredient 1;<strong>Toppings</strong>;ingredient 2...

If you’d like to create a link in the ingredients or instructions, make sure that the attributes are enclosed in ‘single quotes’ and not “double quotes”:

<a href='#' target='_blank'>1/2 small red onion</a>

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.

 

12.Kale integrates well with these plugins #

12.1.Show recent posts with thumbnails in the sidebar #

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 (760×400)” 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).

12.2.Show custom Jetpack Share icons matching the theme (Pro only) #

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.

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)

If “Override Jetpack Sharing Style” is set to on under Appearance > Customize > General Settings, it will override the default styling of the Jetpack Share icons. Instead, they will be shown matching the Kale Pro theme/colors.

 

12.3.Add a MailChimp sign up form (Pro only) #

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.

 

<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }<br />/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.<br /> We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */<br /></style>

 

12.4.Add a MailPoet newsletter signup form (Pro only) #

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.

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:

12.5.Set up your Instagram feed as a carousel / slideshow or a list / gallery (Pro only) #

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.

Suggest Edit