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.

If you are looking for more information than what is provided here, want customization, troubleshooting, assistance upgrading, etc, then it is available on our consults page.

Recommended Plugins

We recommend these plugins to extend the functionality of Kaya:

• Max Mega Menu
• Fluent Forms

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.

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

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.

Logo Width

Here is where you can set the width of your logo in pixels.

Logo Height

Here is where you can set the height of your logo in pixels.

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.

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.

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
• Menu Text Color
• Menu Text Hover Color

Announcement Bar Section

Allows you to set the colors for the content in horizontal bar at the top of your website’s homepage (or other pages).

• Announcement Bar Background Color
• Announcement Text Color
• Announcement Button Background Color
• Announcement Button Text Color

Main Content

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

• Background Color
• Upload Background Image
• Style of Background Image
• Heading Text Color
• Text Color
• Link Color
• Link Hover Color
• Button Color
• Button Hover Color
• Button Text Color
• Button Hover Text Color

WooCommerce Section

Allows you to set the color options for the WooCommerce portion of your website.

• Woo Button Background Color
• Woo Button Background Hover Color
• Woo Button Text Color
• Woo Button Text Hover Color
• Woo Accent Color

Footer Section

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

• Footer Background Color
• Footer Heading Color
• Footer Text Color
• Footer Link Color
• Footer Copyright Area Background Color
• Lower Footer Text Color
• Lower Footer Link Color
• Lower Footer Link Hover 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 through 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

Social Icons

Set the font size used for the font awesome social media icons. The default size for social icons is 18px.

Paragraph Letter Spacing

Set one size for your paragraphs. The default font size for paragraphs is 16px.

Font Line Height

Set the line heights (in em) for your headings h1 through h6 & paragraph. The default line height is 1.5.

Heading Letter Spacing

Set the spacing for the letters in your heading in pixels.

Paragraph Letter Spacing

Set the spacing for the letters in your paragraph in pixels.

Heading Font

Set the font of your heading, including normal weight, bold and italic. The default font weight is 400.

Regular Text Font

You can set the font of your main content text, including normal weight, bold and italic.

Do not load Google Fonts

Adding Custom Font Weights

If you want other font weights to be loaded, you can use the Google font adder:

• Add your custom Google Fonts URL
• Custom Heading Font Name
• Custom Regular Text Font Name

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.

Apply Grid to Whole Footer

Apply the grid to the entire footer space.

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 (‘).

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”.

Apply Grid to Header:

Apply the grid to the entire header space.

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%.

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)

Do NOT load Nav JS

Check to NOT load Kaya navigation JS, useful when using a third party menu plugin

Announcement Bar

Choose settings for the horizontal bar at the top of your website’s homepage (or other pages).

• Show announcement bar
• Content for Announcement bar
• Show announcement bar button
• Announcement bar URL
• Announcement bar button text

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.

Page Hero Settings

• Page Hero Default Background Color
• Upload Default Page Hero Area Background Image
• Style of Page Hero Background

Default Sidebar Setting for WooCommerce

Enable Cart on Non-WooCommerce pages (used for cart widget in sidebar)

Automatically include your accessibility statement in the default footer

To automatically include your accessibility statement in the default footer, enter the URL here.

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 section of your site.

GA4

Tag Manager

Menus

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

• All Pages
• All Pages Flat
• Empty Menu
• Short
• Social Menu
• Testing Menu

Menu Locations

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.

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.

Social Sharing Settings

Default Social Sharing Setting for Blog Archives

Default Social Sharing Setting for Single Blog Posts

Check the boxes for the social media networks you would like to share on. If you wish to use sharing, the above settings or blog archives and/or single blog posts must be set to before, after, or before and after.

Text before sharing icons:

The default text is “Enjoy the article? Share it: “, if you want different text, you can enter it here.

• Share on Facebook
• Share on X
• Share on Pinterest
• Share on LinkedIn
• Share on Reddit
• Share on Email

Social Media URLs

Here you can enter URLs to your social media pages.

• Facebook
• X
• LinkedIn
• Google Map URL
• Skype
• YouTube
• Vimeo
• Instagram
• Pinterest
• Yelp
• Behance
• RSS
• E-mail Address

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:

• Top Header Left
• Top Header Right
• Header Column 2
• Footer Column 1
• Footer Column 2
• Footer Column 3
• Footer Column 4

This theme has 10 other widget areas, but this particular page does not display them.

You can navigate to other pages on your site while using the Customizer to view and edit the widgets displayed on those pages.

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

Homepage Settings

You can choose what’s displayed on the homepage of your site. It can be posts in reverse chronological order (classic blog), or a fixed/static page. To set a static homepage, you first need to create two Pages. One will become the homepage, and the other will be where your posts are displayed.

Your homepage displays

• Your latest posts
• A static page

Homepage

Here you can select which page you would like to be displayed as your homepage.

Posts Page

Here you can select which page you would like to be displayed as your post page

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

Additional CSS

Add your own CSS code here to customize the appearance and layout of your site. Learn more about CSS

When using a keyboard to navigate:

In the editing area, the Tab key enters a tab character.
To move away from this area, press the Esc key followed by the Tab key.
Screen reader users: when in forms mode, you may need to press the Esc key twice.

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.