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.
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
- Site Identity
- General Options
- Font Options
- Header Options
- Social Media URLs
- Static Front Page
- 404 Error Page
- SEO Options
- Additional CSS
This is the title of your site. If your site is for a business, it’s usually the name of your business.
This is the tagline for your site. This is usually a short descriptive about what the purpose of site or business is.
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.
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.
These are a number of theme specific items for your site.
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.
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.
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.
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
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
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:
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%.
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 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 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.
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.
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.