“Kayla” Documentation by “Whoathemes” v1.0


“Kayla”

Created: 27/05/2013
By: WhoaThemes
Email: randf_projects@yahoo.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. You find me on twitter or facebook to get the updates. Thanks so much!


Table of Contents

  1. A. Installation
  2. A-1. Quick Setup
  3. B. Navigation
  4. C. Add Portfolio Item
  5. D. Add Galleries Item
  6. E. General Options
  7. F. Intro Header Options
  8. G. Blog Options
  1. H. Portfolio Options
  2. I. Slideshow Options
  3. J. Media Options
  4. K. Font Options
  5. L. Background Options
  6. M. Color Options
  7. N. Sidebar Options
  1. O. Footer Options
  2. P. Shortcodes
  3. Q. Widgets
  4. R. Template Pages
  5. S. Create Pages
  6. T. Translation
  7. U. Sources and Credits

A) Installation - top

IMPORTANT: Make sure you unzip the downloaded file from Themeforest first (DON'T upload it to your server yet). The content of this file contains the actual theme zip file called "Kayla.zip". This is the theme file. Now, to install the theme follow one of the following two methods:

  1. Unzip the Kayla.zip and upload the Kayla/ folder to <wordpress install directory>/wp-content/themes/ with your favorite FTP client.
  2. Method 2, Upload the Kayla.zip file through the WordPress admin backend (This will ONLY work if the server that hosts your website allows upload limits greater than 6 MB. Please note, most hosting providers have only up to 2MB file upload limit):
Kayla-Upload

Once the upload is complete go to the WordPress administrator backend and activate the theme (the theme should appear now under Appearances → Themes)

activate


The theme's options page should appear above Appearence Tab under the name: Whoathemes:

Kayla-Options

Trouble Shooting Tips if you are using TimThumb

If you need help installing Wordpress see the link below:
http://codex.wordpress.org/Installing_WordPress


A-1) Quick theme setup - top

  1. After theme activation go to "Whoathemes -> General -> Homepage" and set home page.
  2. If you are using our demo.xml you need to activate the navigation menu.
  3. Go to "Whoathemes -> Top Widget and set it ON and make sure that you have 2 columns layout.
  4. See what widgets I've used here

If you use version 3.0+ of WordPress, you can setup custom menus to use with our theme. "Kayla" comes with 1 custom menu location. "Main Navigation" is used for the site's main navigation.

As shown above, I named the menu "Main Navigation" but you can call it as you prefer. The important thing is to select it in the "Template Locations" box:

Theme Location


C) Add Portfolio Item - top

  1. Firstly go to Portfolio Items → Add New.
  2. Portfolio Add New

  3. Give the Portfolio a title
  4. Go to Featured Image module and click the Set featured image link
  5. Feature Image

  6. Once the image has successfully been uploaded, click on the Use as featured image link:
  7. Feature Image

  8. Add the detail of portfolio to the content editor. You can also add the description to the Excerpt textarea for display in the portfolio page.
  9. Click Publish button and that's all.

Click to Learn how to Creating A Portfolio Page


D) Add Galleries Item - top

  1. Firstly go to Galleries → Add New.
  2. Before adding gallery items you need to Publish the gallery name
  3. Then Click Add New Gallery Item in the Gallery Manager panel.
  4. When uploading an image, afterwards click Insert Into Post on the image you want in order to complete the process. You can always use old images from the Media Library that you uploaded earlier. Or you can type the link yourself.
  5. Once you have added more than one image you can drag them around. Just click and hold then drag the items you want into the place you want.
  6. To edit an item click the tool icon which is shown when you rollover an item.
  7. To delete an item click the red cross icon which is shown when you rollover an item.
  8. If you have modified a gallery in any way you will to click Update in order to save those changes.

Click to Learn how to Creating A Gallery Page


E) General Options - top

In Whaothemes -> General you will find 5 tabs:

General
  1. Enable Responsive - Set ON to enable responsive
  2. Custom Logo - Enter the full URL of your logo image: e.g http://www.site.com/logo.png
  3. Display Custom Logo - Set OFF if you want to use plain logo
  4. Enter Plain Text Logo - Please insert a text here to use a plain text logo rather than an image.
  5. Display Site Description - This enables site description, only if you disable custom logo.
  6. Choose Your Layout Style - Set you Layout: Wide or Boxed.
  7. Skin Type - Set skin. You can choose from 10 predefined skins: Cyan, Green, Red, Blue, Brown, Magenta, Orange, Pink, Grey or Black.
  8. Custom Skin - Create your own skin. This option creates skins which affects only colors, background colors and border colors. Unfortunatelly for images/background images doesn't work. So you need to edit the images with your own color skin and paste them in 'img' folder from theme root with the same names as the older ones. You can keep the older ones under different names.
  9. Site Alignment - Specify the aligment of the site: left, right or center
  10. Sidebar Position - Here you'll define on which side would you like your sidebar.
  11. Menu Position - Which side would you like your menu?
  12. Sticky Header - This option enables the sticky header when scrolling down.
  13. Disable Breadcrumbs - By selecting this option, you will globally disable your website's breadcrumb navigation
  14. Top Link Animation - From this option you can choose which animation type do you want for Top Link.
  15. Top Link Speed - Define the Speed of the scroll to top animation.
  16. Scroll to Top - This option enables a scroll to top button at the right bottom corner of site pages.
  17. WooCommerce - Set ON if you want to use WooCommerce.
  18. Timthumb - Set ON if you want to use Timthumb.

Screenshot here

Homepage
  1. Home Page - First you should create a blank page with the name of your choice. Then go to Blog Options page, assign the Home Page option with the page you created.
  2. Layout - Choose homepage layout: left sideber, right sidebar or full width.
  3. Intro Text Leave empty if you don't want to have intro text.

Screenshot here

Custom Favicons
  1. Favicon - Enter the full URL of your favicon: e.g http://www.site.com/favicon.ico
  2. Apple Touch Icon 57x57 - Enter the full URL of your favicon: e.g http://www.site.com/favicon_57.png
  3. Apple Touch Icon 72x72 - Enter the full URL of your favicon: e.g http://www.site.com/favicon_72.png
  4. Apple Touch Icon 114x114 - Enter the full URL of your favicon: e.g http://www.site.com/favicon_114.png
  5. Apple Touch Icon 144x144 - Enter the full URL of your favicon: e.g http://www.site.com/favicon_144.png

Screenshot here

Google Analytics
  1. Google Analytics Code - Paste your analytics code here and it will be applied to each page.

Screenshot here

Custom CSS
  1. Custom Css - If you want to make changes on css please paste here the code.

Screenshot here


F) Intro Header Options - top

Slideshow
  1. SlideShow Type - Select which type of slidershow you want to use. Unfortunately, Anything Slider is not RESPONSIVE..., yet.
  2. Enable Slideshow Everywhere - If the button is ON then the Slideshow will be enabled on all pages/posts unless is overridden by custom pages/posts 'Page Intro Area Type' options. Static Image Everywhere button should be OFF.

Screenshot here

Static Image
  1. Static Image - You can paste the full URL (including http://) of the image to be used as a 'Static Image for the Intro Header Area' or you can simply upload it using the button. This image is overridden by every page/post Featured Image.
  2. Height - The height of the static image.
  3. Adaptive Height - If the button is set to ON then the Static Image height depends on the original image.
  4. Enable Lightbox - If the button is ON then the Static Image will be wrapped by a link that opens the image in lightbox.
  5. Enable Static Image Everywhere - If the button is ON then the Static Image will be enabled on all pages/posts unless is overridden by custom pages/posts 'Page Intro Area Type' options.

Screenshot here


G) Blog Options - top

Blog Page
  1. The first option is the "Blog Page" drop down box. The Page you choose here will display your blog. Best practice is to first create a blank page with the name of your choice.
  2. The second option is the "Layout". You have 3 options: "Full Width", "Right Sidebar" and "Left Sidebar".
  3. The third options is the "Featured Image Type". You have 2 options: "Full Width" and "Float Left".
  4. The forth options is the "Display Full Blog Posts". If the options is set to OFF, the blog post will be full displayed on the blog page.
  5. The fifth option is the "Exclude Categories" checkboxes. The blog Page usually displays all Categories, but if you want to exclude some of these categories (for example portfolio entries), you can exclude multiple categories here.
  6. The sixth option is the "Gap Between Posts". Here you can set the distance between the blog posts.

Screenshot here

Single Blog Page
  1. The first option is the "Layout". You have 3 options: "Full Width", "Right Sidebar" and "Left Sidebar".
  2. The second option is the "Featured Post Entry". If the button is set to ON then the Featured Image/Slideshow/Mp3/Video will be displayed on the Single Blog post.
  3. The third options is the "Featured Post Entry Type". You have 2 options: "Full Width" and "Float Left".
  4. The forth options is the "Featured Image for Lightbox". If the button is set to ON then the full image will be opened in the lightbox when you click on Featured Post Entry of the Blog Single Post page.
  5. The fifth option is the "Show in Header Area". If the button is set to ON then the blog title and blog meta informations will be displayed in the page description area.
  6. The sixth option is the "About Author Box". If the button is set to ON then the About Author Box will be displayed in the Blog Single Post page.
  7. The seventh option is the "Related & Popular Post Module". If the button is set to ON then the Related & Popular Post Module will be displayed in the Blog Single Post page.
  8. The eighth option is the "Previous & Next Navigation". Display pagination for the posts.

Screenshot here

Meta Informations for Blog Page and for Single Blog Page

You can choose to activate or dezactivate meta information for: Date, Author, Categories, Tags and Comments

Screenshot here

Featured Entry
  1. Blog Adaptive Height - If the button is set to ON then the Featured Image height depends on the original image.
  2. Single Adaptive Height - If the button is set to ON then the Featured Image height depends on the original image.
  3. "Full Layout" - Featured Image Height - You can set the Featured Image Entry height for full width layouts. ( Adaptive height option above should be OFF ). Default height is 350px.
  4. "Full Layout" - Featured Slide Height - You can set the Featured Slide Entry height for full width layouts. Default height is 550px.
  5. "Sidebar Layout" - Featured Image Height - You can set the Featured Image Entry height for layouts with sidebar. ( Adaptive height option above should be OFF ). Default height is 250px.
  6. "Sidebar Layout" - Featured Slide Height - You can set the Featured Slide Entry height for layouts with sidebar. Default height is 400px.

Screenshot here


H) Portfolio Options - top

Portfolio General

Set if you want to diaplay title, description or more button for portfolio page. Also you can change the text for "Read more" button.

Screenshot here

Single Portfolio Item
  1. "Layout" - You have 3 options: "Full Width", "Right Sidebar" and "Left Sidebar".
  2. "Previous & Next Navigation" - Displays the Previous & Next Navigation.
  3. "Previous & Next Navigation Order" - You have 2 options to choose from: "Post Data" or "Menu Order".
  4. "Document Type Navigation" - If the button is set to ON then Previous & Next Navigation will be applied just for Portfolio Document Type.
  5. "Enable Comments" - If the button is set to ON then you enable comments on the Single Portfolio Item.

Screenshot here

Featured Image
  1. "Featured Image" - If the button is set to ON then the Featured Image will be diplayed in Portfolio Item page.
  2. "Featured Image for Lightbox" - If the button is set to ON then when you click on the Featured Image from Portfolio Item page, the full image will be opened in a lightbox.
  3. "Adaptive Height" - If the button is set to ON then the Featured Image height depends on the original image.
  4. "Fixed Height" - You can set a fixed height for the Featured Image only if the "Adaptive Height" is set to OFF.

Screenshot here


I) Slideshow Options - top

Here you can set the options for all slideshows. After that you can set the type of slideshow to be displayed in Intro Header Area from Intro Header Option

Screenshot Flex Slider
Screenshot Flex Options

Screenshot Cycle Slider
Screenshot Cycle Options

Screenshot Nivo Slider
Screenshot Nivo Options

Screenshot Anything Slider
Screenshot Anything Options

Revolution Slider - Be sure that you have activated the revolution slider plugin first and you had created a new slider from Revolution Slider tab(it's below the Settings Tab).

Layer Slider - Be sure that you have activated the layer slider plugin first and you had created a new slider from Layer Slider tab(it's below the Settings Tab).


J) Media Options - top

From here you can select media type: videos or audios.

Screenshot Html5 Video
Screenshot YouTube
Screenshot Vimeo
Screenshot Dailymotion
Screenshot Metacafe
Screenshot Blip Tv
Screenshot Flash

Screenshot Html5 Audio


K) Font Options - top

Font Size

From this option you can change the font size for: body text, all headers, h1, h2, h3, h4, h5, h6, logo, logo description, Top Level Menu Text Size, Sub Level Menu Text Size, Sidebar Widget Title, Intro Header Title Size, Intro Header Text Size, Footer Text, Footer Widget Title, Copyright Text Size, Footer Menu Text Size, Footer Bottom Menu Text Size.

Screenshot Here


Google Fonts
  1. Enable Google Fonts
  2. Google Fonts - I'm using Droid Sans and Open Sans Regular.
  3. Google Fonts Custom CSS - This is what I'm usng on my site:
    #intro p, #copyright p, #logo, .dropcap1, .dropcap2, .dropcap3, .custom_links span, .pp_description, #nav a.level-1-a {
        font-family: Open Sans;
    }
    h1, h2, h3, h4, h5, h6 {
        font-family: Droid Serif;
    }

Screenshot Here

Font Face

This options allows you to use "FontFace" fonts on your website.To see more information about this script and what it does please click here.

The guys from Font Squirrel released this amazing tool that allows people to edit their OpenType and TrueType fonts and male them compatible with @font-face. The tool offers a series of complements that helps people to edit their fonts the way they prefer to.

The generator will give you a compressed file with several files that will help you to implement the chosen font as @font-face.

  1. Go to http://www.fontsquirrel.com/fontface/generator
  2. Fontface Generate
  3. First create a folder in '/wp-content/themes/sogood/font-faces' with your font name and then extract here the arhive downloaded when you generated the font. You can delete the specimen_files folder, generator_config.txt and the .html file.
  4. You need to refresh the Font Face page to see the font listed there.

To use your font Turn on t's button and turn off the other's. After you click "Save Changes", you will see the effect.

Also if you want to replace anothers elements or use more than one fonts, you should fill fontface code into "@font-face Custom CSS" option textarea, and turn on the toggle button of fonts you used in the scripts.

Example:

Font Face Code


Screenshot Here

Cufon Fonts

This options allows you to use "cufón" font replacing script on your website.To see more information about this script and what it does please click here.

  1. Go to http://cufon.shoqolate.com/generate
  2. Color Generate
  3. upload the generated Font.js file to '/wp-content/themes/sogood/fonts' folder through your FTP Client.
  4. You need to refresh the Cufon page to see the font listed there.

To use your font Turn on t's button and turn off the other's. After you click "Save Changes", you will see the effect.

Also if you want to replace anothers elements or use more than one fonts, you should fill cufon replace scripts into "Cufon code" option textarea, and turn on the toggle button of fonts you used in the scripts.

Example:

Color Code

Screenshot Here


L) Background Options - top

You can replace Background Image, Background Position, Background Repeat and Background Color for Page, Header, Navigation, Intro, Content, Container and footer.


M) Color Options - top

From this option you can change the colors for: body text, all headers, h1, h2, h3, h4, h5, h6, links, links active, logo, logo descriptions, top menu, top menu hover, top menu active, submenu, submenu hover, submenu active, breadcrumbs, footer widgets, footer links, footer menu, copyright text.

Screenshot Here


The first option you will see is the "Add Sidebar" text field. Enter the name of the new custom sidebar you would like add and click on the "Save Changes" button at the bottom left of the options page.

You will now see your newly created custom widget available by clicking on Appearance → Widgets on your WordPress administration menu.

You can use your newly created sidebar on a Post Item, Portfolio Single Page Item or Page Item as shown below:

Sidebar Options

Screenshot Here


Footer it's split in 3 parts "Footer Top Area", "Footer Area" and "Footer Bottom Area" and you have the option to use one of them, all or disable footer.

Footer Area

"Kayla" has 18 layouts for the footer. See picture below. Click on the layout you want and click "Save Changes" button.

Footer Layout

Then you need to go to Appearance → Widgets on your WordPress administration menu and choose what widget do you want to use for footer.

Footer Widgets


Footer Top Area

  1. Footer Menu - go to Appearance → Menu and create Footer Menu. Then go to Appearance → Widgets, drag custom menu widget in Sub Footer Widget Area and choose Footer Menu. See picture below:
  2. Footer Top Menu


Footer Bottom Area

  1. Social Networks - go to Appearance → Widgets, drag Randf Social Icon widget in Sub Footer Widget Area
  2. Copyright Text - change text from Footer Options.
  3. Copyright

Screenshot Here

Top Widget Area

"Kayla" has 18 layouts for the Top Widget. See the picture above from footer because are the same layouts.


P) Shortcodes - top

"Kayla" comes with over 100 custom style shortcodes that allow you to add custom styles to your post or page content. Choose the shortcode you want and "Send Shortcode to Editor".

Shortcode

Fit Boxes

First step when you’ll use fit boxes is to create a container with this class attribute (“isotope”). If there is no container with this class then the isotop shortcode won’t work. It’s very easy to create a container… Just go to shortcode generator, choose tag shortcode and type in the class field the word “isotope”. Send it to editor and that’s it. Now you can add box elements with isotop shortcode. You can add as many elements as you want.


Q) Custom Widgets - top

  1. Advertisement 125 - Displays a list of advertisement
  2. Contact Form - Displays a email contact form.
  3. Contact Info - Displays a list of contact info.
  4. Custom Links - Displays a list of custom links with images.
  5. Flickr - Displays photos from a Flickr ID
  6. Popular Post - Displays the posts with most comments from your site.
  7. Recent Posts - Displays the recent posts on your site.
  8. Related Posts - Displays the posts with the same tags on your site.
  9. Most Read Posts - Displays the posts with most visites on your site.
  10. Popular Portfolio Posts - Displays the posts with most comments from your site.
  11. Recent Portfolio Posts - Displays most recent portfolio posts.
  12. Social Icon - Displays a list of social media icons.
  13. Sub Navigation - Displays a list of SubPages.
  14. Twitter - Displays a list of twitter feeds.

Here is how I've setup the widgets on my site:

  1. Homepage
  2. Page
  3. Blog
  4. Portfolio
  5. Top Area
  6. Footer
  7. Header

R) Template Pages - top

Templates

  1. Default Template -Sidebar on the right side of the page.
  2. Full Width Template - Disables your sidebar.
  3. Blog with zoom and slide
  4. Gallery 2 colums - Displays gallery on 2 columns.
  5. Gallery 3 colums - Displays gallery on 3 columns.
  6. Gallery 4 colums - Displays gallery on 4 columns.
  7. Gallery Responsive - Displays responsive gallery.
  8. Left Sidebar Template - Sidebar on the left side of the page.
  9. Right Sidebar Template - Sidebar on the right side of the page.
  10. Sitemap Template - Creates a page that lists all of your sites internal "Pages", "Categories", "Blog Posts" and "Portfolio Post".

To activate one of your themeʼs page templates simply select it from the drop-down box and then click the "Publish" or "Update" button.

S) Create Pages - top

Homepage

  1. Go to Pages >> Add New in your backend to create a new page.
  2. Give a title and input some content, then save it.
  3. Go to WhoathemesGeneralHomepage Settings.
  4. Set Home Page option to the page you just created.
  5. Choose layout and then click the Save changes button.

Homepage Rev Slider #2

This is the code for Homepage Rev Slider #2 Page:

Homepage Rev Slider #3

This is the code for Homepage Rev Slider #3 Page:

Homepage Rev Slider #4

This is the code for Homepage Rev Slider #4 Page:

Homepage Rev Slider #5

This is the code for Homepage Rev Slider #5 Page:

Homepage Rev Slider #6

This is the code for Homepage Rev Slider #6 Page:

Homepage Rev Slider #7

This is the code for Homepage Rev Slider #7 Page:

Homepage Flex Slider

This is the code for Homepage Flex Slider Page:

Homepage Cycle Slider

This is the code for Homepage Cycle Slider Page:

Homepage Nivo Slider

This is the code for Homepage Nivo Slider Page:

Homepage No Slider

This is the code for Homepage No Slider Page:

Homepage With Blog

This is the code for Homepage With Blog Page:

Blog Page

  1. Go to PagesAdd New in your backend to create a new page.
  2. Give a title, then save it.
  3. Go to Whoathemes → BlogBlog Settings.
  4. Set Blog Page option to the page you just created.
  5. Choose layout and then click the Save changes button.

Blog Page with Full width

  1. Go to Whoathemes → BlogBlog Settings.
  2. Set Blog Page option to the page you just created.
  3. Set layout to "Full width".
  4. Or you can create a page, choose Full Width template and use the following code:

Blog Page with Left Layout

  1. Go toWhoathemes → BlogBlog Settings.
  2. Set Blog Page option to the page you just created.
  3. Set layout to "Left Layout".

Blog Page with Right Layout

  1. Go to Whoathemes → BlogBlog Settings.
  2. Set Blog Page option to the page you just created.
  3. Set layout to "Right Layout".

Blog Page with 2 Columns

This is the code for blog 2 columns Blog:

Blog Page with 3 Columns

This is the code for blog on 3 columns:

Blog Page with Carousel

This is the code for blog with Carousel:

Blog Page with Columns & Isotope

This is the code for blog with Columns & Isotope:

Blog With Sidebar & Full Entry

This is the code for blog Blog With Sidebar & Full Entry:

Contact Page

This is the code for Contact Page: This is the code for Contact Page 2:

About page

This is the code for About Page: This is the code for About page 2:

Services

This is the code for Services Page: This is the code for Services Page 2:

Faq page

This is the code for Faq page: This is the code for Faq Page 2:

Testimonials page

This is the code for Testimonials page:

Gallery Page

  1. Go to PagesAdd New in your backend to create a new page.
  2. Choose one of the gallery page templates you require.
  3. Publish/Update the page. Now you have a gallery page!

Gallery Set

Portfolio Page

  1. Go to Pages → Add New.
  2. Then change the page template to "Full width".
  3. Full width

  4. Use shortcode to generate the posts
  5. Portfolio Shortcode

  6. Click Send Shortcode to editor button.
  7. Then Publish page and that's all.

T) Translation - top

The files that are involved in translation are default.po and default.mo, they can be found within theme folder at the same level as template files.

We will need a gettext file editor to open up default.po and type in the translation to your language and save in the correct language .po file. The .mo file will be auto generated in the process. I use Poedit for editing default.po, you can download it from here.

The naming convention is based on the language code (e.g. zh for Chinese) followed by the country code (e.g. _CN for China). So, the Chinese file would be called zh_CN.po and zh_CN.mo. See the complete list of language codes and country codes to find your exact locale.Please note that if you name the file wrongly, WordPress will not pick up the translated strings.

You will also need to make a change to your WordPress wp-config.php file (located in your WP root directory) with the correct language codes like the example below. If you don't have a WPLANG entry then create one.
define ('WPLANG', 'zh_CN');
This language define in wp-config.php will tell WordPress to load your language files. The above example, will tell WordPress that this is a Chinese WordPress site and should load the Chinese zh_CN.po from the theme files.

Steps

  1. Download and install Poedit. There are versions for Windows and Mac
  2. Launch Poedit
  3. At the toolbar of Poedit, click on File > Open and Browse to your theme folder and select default.po to open it.
  4. The top part of the file contains the entire list of text that needs to be translated. Each line represents a place within the theme that stores the text. If you click on different lines, you'll notice the section below displays that exact line of text. You'll need to click on the words which should be translated.
  5. Do the translation for all the string and "save as" into the file name that you need. In this example, we will save as zh_CN.po. You will find zh_CN.mo being automatically created by Poedit.
  6. You can upload the newly created language files to your theme folder on your server. In this case we will upload zh_CN.po and zh_CN.mo
  7. Clear your browser cache and re visit your site and the theme strings should be in your language.

U) Sources and Credits - top

Thank a lot to the next authors for their awesome work

Open Source Projects

Fonts

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

Whoathemes

Go To Table of Contents