Kaya Setup Guide

Kaya Theme Setup Guide

Welcome to the Kaya WordPress theme setup guide. Click on the section below that you’re looking for. If you’re looking for general information about the theme, demos or example of live sites running Kaya, please visit the main Kaya WordPress Theme page.

Recommended Plugins

We recommend the following plugins to enhance your experience with Kaya:

  • GitHub Updater
  • iThemes Security
  • Yoast SEO or Rank Math

We recommend these plugins to extend the functionality of Kaya:

  • Contact Form 7
  • Max Mega Menu
  • myStickymenu
  • Redirection
  • Slider Revolution
  • WPBakery Page Builder

Kaya Child Theme

If you’d like to make customizations to the Kaya theme beyond what is available in the Customizer and Page Settings, please use a child theme. For your convenience, you can download a ready to go child theme for Kaya by clicking here.

For more information on child themes as well as why and how you should use them, click here to read the WordPress developer information.

Installing & Activating Kaya

To add Kaya to your site, use the GitHub Updater plugin and then follow the instructions in the video to the right.

You’ll need to know the GitHub URL for the theme: anphira/kaya

Page Settings

Page specific settings are available on each individual page. The settings entered here will only apply to that specific page.

Accessing the Theme Customizer

All of the general theme settings for Kaya are in the theme customizer. Here is the list of customizer sections and what each of them is for.

  • Site Identity
  • General Options
  • Colors
  • Font Options
  • Header Options
  • Menus
  • Widgets
  • Social Media URLs
  • Static Front Page
  • Footer
  • 404 Error Page
  • SEO Options
  • Additional CSS

Site Identity

Site Title

This is the title of your site. If your site is for a business, it’s usually the name of your business.

Tagline

This is the tagline for your site. This is usually a short descriptive about what the purpose of site or business is.

Upload Logo

Here is where you can upload your logo. Make sure that it is already sized appropriately before uploading. Also, make sure to set the height & width (in pixels) for your logo size.

Display Site Title and Tagline

When this box is checked, the title & tagline will be displayed in the header of the page, unless you have uploaded a logo. If you have uploaded a logo this checkbox is essentially useless.

Site Icon

This is commonly referred to as your favicon. This icon will be displayed in the browser bar for desktop computers and can be used as the icon for phones & tablets.

General Options

These are a number of theme specific items for your site.

Grid Width

If you are applying the grid to your site, this is the width that will be used. 1140px wide is the default. If you would like something besides 1140px wide, enter it here.

Apply Grid to Main Site Content

This applies the grid value specified above to the main content of the site.

Default Sidebar Setting for Pages

This is the default setting for sidebars on Pages. This can be overridden on individual pages.

Default Sidebar Setting for Posts

This is the default setting for sidebars on Posts.

Display Comments on Pages

Check this box if you want to display comments on Pages.

Display Comments on Posts

Check this box if you want to display comments on Posts.

Limit the Blog Excerpts

Enter a value here if you’d like to limit the size of the blog excerpt displayed on blog archives.

Stylesheet Version

The theme automatically revs the stylesheet based on the date & time stamp of when style.css was saved. If you need to change that, you can enter a specific stylesheet version here. Most users will leave this blank.

Google Analytics

Enter your UA number from Google Analytics. The appropriate code for Universal analytics will automatically be added to the <head> section of your site.

Contact Form 7 Redirect URL

If you are using Contact Form 7 and want to redirect people who fill out your contact form to a thank you page URL, enter that URL here.

IMPORTANT: For the below settings on </head>, <body>, and </body> make sure to always use double quotes (“) and NOT single quotes (‘).

Add code before </head>

Enter code here if you need to add content to the <head> section of your website. This is common with tracking codes for various advertising platforms.

Add code just after <body>

Enter code here if you need to add content just after the opening <body> tag of your website. This is common with tracking codes for various advertising platforms.

Add code just before </body>

Enter code here if you need to add content just before the closing </body> tag of your website. This is common with tracking codes for various advertising platforms.

Colors

Heading Section:

Header Background Color

This is the background color of the header section. Note, if in the Header Options section you select “Make Header Transparent” this color will be ignored.

Menu Background Color

This is the background color of the menu area

Main Content Section:

Allows you to set colors for the main content part of the site (everything between the header & footer).

  • Heading Color
  • Text Color
  • Link Color
  • Link Hover Color
  • Button Color
  • Button Hover Color
  • Button Text Color
  • Button Hover Text Color

Footer Section:

Allows you to set color options for the footer. These include:

  • Footer Background Color
  • Footer Heading Color
  • Footer Text Color
  • Footer Copyright Area Background Color
  • Lower Footer Text Color
  • Social Icon Color
  • Social Icon Background Color

Font Options

The font options allow you to load standard web fonts as well as Google fonts.

The first set of options allows you to set the font size in pixels for the following fonts. It’s important to note that Kaya will automatically reduce the size of your heading fonts for mobile, so it’s unlikely you will need to write any custom CSS for mobile.

With headings, you can set your font sizes for h1 thru h6. The default sizes are:

  • h1: 36px
  • h2: 27px
  • h3: 21px
  • h4: 18px
  • h5: 18px
  • h6: 18px

Note: the theme will automatically scale down font sizes for mobile. They are scaled as follows: h1 scaled to 70% of the set size, h2 scaled to 75% of the set size, h3 scaled to 80% of the set size, h4-h6 scaled to 90% of the set size

With paragraphs, you can set one size for your paragraphs. The default font size for paragraphs is 16px.

With social icons, you can set the font size used for the font awesome social media icons. The default size for social icons is 18px.

Under Font Line Height, you can set the line heights (in em) for your headings & paragraph. The default line height is 1.5.

Under Font weight, you can set the default font weight for your headings & paragraphs. The default font weight is 400.

Once you’ve set your sizes and font weights, you can select your fonts. There is a list of a number of common fonts available to choose from. If these common fonts don’t meet your needs, you can use the custom Google Fonts URL to load any font available on Google.

Note: if you use the default font selections and do NOT load from a custom Google URL, then the loaded fonts styles are: 400, 400 with italic, and 700 (bold). If you want to use styles outside of these, you will need to load them with the custom Google Fonts URL.

Loading your own custom fonts

If you want to load your own custom fonts, follow the instructions in this video:

Header Options

The header is composed of your logo (or site title/tagline), your main menu, and up to 3 widget areas depending on how you set the “Number of Header Columns”.

Number of Header Columns: here you should select the appropriate widget area for your desired design. Note that the difference between “Two Columns” and “Logo left, content right” is that in “logo left, content right” the logo has 25% of the width and the content has 75%. Whereas in the “Two Columns” the logo and content both have 50%.

Kaya Setup Guide 1
Kaya Setup Guide 2
Kaya Setup Guide 3
Kaya Setup Guide 4
Kaya Setup Guide 5
Kaya Setup Guide 6

Make Header Transparent: use this setting if you want to have your header have a transparent background (useful for certain PSD to WordPress designs)

Use top header bar: check this box to turn on the top header area. It has a left and right widget area where you can put content.

Hide Mobile Menu: check this box if you are using a third party menu plugin which handles the mobile menu for you (ie: Max Mega Menu or similar)

Menus

Menus are a standard WordPress feature and have no theme added settings.

The included menu display locations are “Primary” and “Footer Menu”. The “Primary” is used for your main menu.

The “Footer Menu” does not have a defined display location. You are free to use this menu in your customized Child theme. It is NOT planned to ever be used in the theme, if a footer located menu is ever displayed on the theme in the future, it will be given a new name to not disrupt your customizations.

Please see the WP Easy Guide for information on how to use WordPress menus.

Widgets

Widgets are a standard WordPress feature. The customizer has no theme added settings.

Kaya includes a theme specific widget: Kaya Social. This widget displays your social media icons set in the Customizer under “Social Media URLs”.

There are a number of widget areas included in Kaya theme:

  • Everywhere Top Sidebar
  • Everywhere Bottom Sidebar
  • Pages Sidebar
  • Post Archives Sidebar
  • Single Post Sidebar
  • WooCommerce Sidebar
  • Top Header Left
  • Top Header Right
  • Header Column 2
  • Header Column 3
  • Header Column 4
  • Footer Column 1
  • Footer Column 2
  • Footer Column 3
  • Footer Column 4
  • Extra Widget Area 1: This is a widget area which has no theme displayed location. The purpose of this widget area is to provide you with a spare widget area which can be used in child theme customization or in page builders.
  • Extra Widget Area 2: This is a widget area which has no theme displayed location. The purpose of this widget area is to provide you with a spare widget area which can be used in child theme customization or in page builders.

Please see the WP Easy Guide for information on how to use WordPress widgets.

Social Media URLs

Here is where you can add social media URLs. These URLs are used when you use the theme included “Kaya Social” widget.

If you want to include your social icons in locations other than the header, footer, and sidebars then I recommend place the “Kaya Social” widget into the Extra Widget areas and using a page builder to include that widget area where you need it for your design.

Note that in version 0.8.1 the “Google Plus” URL was renamed “Google Map URL”. Google Plus has officially been shut down, however, many businesses want to be able to link to their map location. The icon has also been changed from the Google Plus icon to just a Google icon.

Homepage Settings

Homepage settings are a standard WordPress feature and have no theme added settings.

Please see the WP Easy Guide for information on how to use the Homepage Settings.

Footer

The footer has a number of theme-specific options. The default footer is composed of three areas. The footer columns and the lower footer.

Show the Footer Columns: check this box to display the footer columns. If you do not display the footer columns, then the 4 widget areas associated with the footer will not be displayed.

Apply Grid to Footer Columns: applying the grid (grid width is set in General Options) to the footer columns.

Number of Footer Columns: If you have enabled the footer columns, then this setting will determine how they are displayed. One column will have the full width available, two columns both columns will be 50%, three columns all columns will be 33%, and four columns they will be 25% of width each.

Display Social Media Icons in Footer: This will determine if the social media icons are displayed on the left side of the lower footer.

Content for Right side of Lower Footer: This will replace the default content in the lower right of the footer. This is a great place to link to your privacy policy. HTML is supported here, make sure to use double quotes (“) and NOT single quotes (‘).

404 Error Page

The 404 error page has two settings, the heading & content. For many purposes, the default 404 content should be fine.

404 Page Heading: This is the heading to be used on the 404 page.

404 Page Content: This is the content to be displayed on the 404 page. This text area supports basic HTML. Make sure to use double quotes (“) and NOT single quotes (‘) in this area.

The default content for the 404 pages if you don’t input anything on this customizer panel is:

404 Page Heading:

Sorry, we couldn’t find that page

404 Page Content:

You tried to reach a page which could not be found.

Please click here to visit the home page or use the main menu to navigate to your desired location.

Additional CSS

Additional CSS is a standard WordPress feature and have no theme added settings.

Please see the WP Easy Guide for information on how to use the Additional CSS.

Upgrading Kaya to the Latest Version

If you’ve used the GitHub updater to initially install Kaya, updating the theme is very easy to do.