kadence pro theme settings

How To Customize Initial Kadence Pro Theme Settings

This document aids when setting (or resetting) Kadence Pro theme settings and for recreating on a new web host. Also, this article is listed in our “Create Blog Website” main topic and our overview topic of “How Do You Start A Blog?” And it’s a part of the “Designing & Creating Site” category.

Overview of Customizing Starting Kadence Pro Theme Settings

There are important notes and settings to consider, e.g., knowing that not all settings are saved when exporting theme settings. Keep reading to learn more.

Extremely Important When Changing a Theme Setting

These theme settings will have significant impact on image sizes that have been tested to use.

  1. “Content Max Width”
  2. Default Page Layout
  3. Default Post Layout

So, if ever planning on changing one of those theme settings, take consideration into planning to redefine the image settings and reoptimizing all images.

Current Pre-requisites

These settings are based on settings within WP as well as other plugins. Here are notes regarding this.

  • WordPress | Settings | Media
    • These default settings here are to be changed and are not listed here.  Apply them based on the file named like “Site Image Settings to Use …”.
  • WordPress | Appearance | Customize | General | Performance
    • These settings were changed away from the default after much testing.  It is based on the current caching system and if LiteSpeed is used, for example.
  • Read our complete article on “WordPress Setup: Beginner Complete Tutorial

Appearance | Themes

  • Installations:  Only after Kadence is active theme, install and activate these in order.
    1. Free Plugin via WP – “Kadence Starter Templates”: A location for it is also via Appearance | Kadence | Starter Templates.
    2. Plugin – “Kadence Pro – Premium Add-on for the Kadence Theme”
    3. Free Plugin via WP – “Kadence Blocks – Gutenberg Blocks for Page Builder Features”
    4. Plugin – “Kadence Blocks – Pro Extension”

Appearance | Kadence: Kadence Features Enabled: 

  • After Kadence Pro has become fully activated, enable these options.
    • Dashboard Tab: Pro Addons (Group Heading)
      • Header Addons
      • Ultimate Menu
      • Header/Footer Scripts (also used for advertisement and google analytics code scripting insertion)

Kadence Initial Starting Settings:  Appearance | Customize

Colors & Fonts

  • Colors:  Content Links
    • Link Style: “Standard (underline)” is default
    • Links Color:  MUST swap the 2 colors.  One represents before a link is tapped; the other shows after being tapped.  Checking both mobile and desktop for PSI, this will resolve that specific PSI Accessibility issue of “Background and foreground colors do not have a sufficient contrast ratio.”.
  • Buttons
  • Typography:  Staying with “System Default” for fonts will enhance performance everywhere.  This will use the user’s fonts based on their browser or system used.  You won’t need to localize nor optimize Google fonts, etc.
    • To avoid a specific PSI SEO metric issue of “tap targets not sized properly”, a setting for mobile must be changed. The “Line Height” must be changed from 1.6 to 1.7. This is done via clicking on: Colors & Fonts | Base Font: tap on the font size, e.g., 17px. It will reveal more than just font size options. Tape the mobile icon and change the “Line Height” to be “1.7”.
kadence pro theme settings customization
kadence pro theme settings customization

Site Identity

  • Site Icon
    • Upload a square image (at least 512×512)
  • Site Title and Logo Control
    • General Tab | Site Identity | Site Title & Logo Control
      • Upload a Logo image
      • Logo Max Width (default 200); see images doc for best sizing
        • Note: Must select mobile icon here to reveal an option if a “Different Logo for Mobile” is desired.
      • Logo Layout: Logo Title & Tagline
      • Site Title (copy-and-paste): DarnGoodRecipes.com™
      • Tagline (copy-and-paste): Southern, Easy, Tasty
      • Publish Theme Changes & Close customizer
kadence pro theme settings site identity
kadence pro theme settings site identity

Appearance | Menus

Assign and/or create any needed menus.  Here are some suggestions for Menu Names and assignments to their Theme Locations.

  • Manage Locations tab
    • Primary:  Primary Menu
    • Mobile: Primary Menu
    • Footer:  Footer Menu
kadence pro theme settings primary menu customizing
kadence pro theme settings primary menu customizing

Appearance | Customize

Header

  • DESKTOP Tab
    • Top Row: Logo (left), Search Bar (right)
    • Middle Row: Primary Navigation (left)
    • Bottom Row: empty
  • TABLET/MOBILE Tab
    • OFF CANVAS: empty
    • Top Row: Logo (left)
    • Middle Row: Search Bar (middle)
    • Bottom Row: Mobile Navigation

Footer

  • Top Row: Drag n’ Drop “Social” to Left column
  • Middle Row (make 1 column): Drag n’ Drop “Footer Navigation”
    • Footer Navigation Configure | General tab: Content Align (Left)
    • Footer Navigation Configure | Design tab: Items Top and Bottom Padding: 0.3 em
  • Bottom Row: edit Copyright (middle column)
    • Copyright Configure | General tab: copy-and-paste below text to replace default text:

{copyright} 2021-{year} DarnGoodRecipes.com™. All rights reserved.

kadence pro theme settings footer
kadence pro theme settings footer

General

  • Layout
    • Content Max Width: 1290 (default)
    • Content Top and Bottom Spacing: 5,3,2 (default = 5,3,2 for desk, tablet, mobile)
    • Narrow Layout Content Max Width: 842 (default = 842)
  • Sidebar
  • Scroll To Top
    • General tab
      • Enable Scroll to Top: disabled (there are random issues w/LiteSpeed cache settings of it being an excessively large screen section on some posts, visible and hidden)
      • Settings only if enabled
        • Align: Right
        • Visibility: add tablet & mobile to “Visibility”
        • Check the sizes and padding/border for tablet and mobile
  • 404 Page Layout
  • Comments
    • Move comment input above comments: enabled
    • Remove website URL: enabled
  • Breadcrumbs
    • Select: “Default”
    • Change font size to be 18
  • Social Links
    • Facebook: https://www.facebook.com/darngoodrecipes/
    • Twitter: https://twitter.com/darngoodrecipes
    • Instagram: https://instagram.com/darngoodrecipes/
    • Pinterest: https://www.pinterest.com/DarnGoodRecipes
    • LinkedIn: https://linkedin.com/in/darngoodrecipes/
    • Email: darngoodrecipes@gmail.com
  • Performance
    • Enable Scroll to ID (default enabled): enabled
    • Load Google Fonts Locally, Preload Local Fonts: disabled (system fonts are used so, it’s not needed; also, if used, FlyingPress or LiteSpeed settings can handle fonts.
    • Enable CSS preload: disabled (default = disabled if using Flying Press or LiteSpeed (they handle CSS). Enabling this often adds to unused CSS performance lag if it’s handled also by another source.
  • Publish Theme Changes & Close customizer.

Appearance | Customize | Posts/Pages Layout

Page Layout

  • General tab
    • Page Title
      • Show Page Title: enabled (default is enabled)
      • Page Title Layout: Above Content
      • Title Container Width: Standard
      • Page Title Align: (default is none selected)
      • Title Container Min Height:
        • Desktop: 100 (default=200)
        • Tablet: reset to use default
        • Mobile: reset to use default
    • Title Elements
      • Show only (tap “Toggle Item Visibility”: Title
    • Default Page Layout
      • Default Page Layout: Normal (default)
      • Page Default Sidebar: Sidebar 1
      • Content Style: Boxed (default)
      • Content Vertical Padding: Top Only (default = Enable)
      • Show Featured Image? Enabled
      • Featured Image Position: Above
      • Featured Image Ratio: 16:9 (default is 3:2)
      • Show Comments: disabled
  • Design tab
    • Page Title Font: Yellow, Dancing Scripts, 700, 50 px
    • Page Title Background: Gradient (Linear-180, Top-Black, Bottom-Red)

Single Post Layout

  • General tab
    • Post Title
      • Show Post Title? Enabled
      • Post Title Layout: In Content (default); note: “In Content” is needed for image to show in Google Search Results (mobile).
      • Post Title Align: (default is none selected)
      • Title Elements: Item visibility enabled for all except Categories & Excerpt.
        • Meta items enabled: show author, enable author link, author label: “by”, show date, show last updated date, show only if different from published date, updated date label: “updated on”, show comments, show only if post has at least 1 comment
    • Default Post Layout
      • Default Post Layout: Narrow (default)
      • Post Default Sidebar: Sidebar 1
      • Content Style: Boxed
      • Content Vertical Padding: Top Only (default = Enable)
      • Show Featured Image? Enabled
      • Featured Image Position: Above
      • Show Featured Image Caption? Disabled
      • Featured Image Ratio: 16:9 (default was 3:2)
      • Show Post Tags? disabled
      • Show Footer Area in Boxed Mode? disabled
      • Show Post Author Box? disabled
      • Show Post Navigation? disabled
      • Show Related Posts? disabled (removes about 202 DOM objects)
      • Show Comments? enabled
      • Show Comment Date? enabled
    • Design
      • No changes

Archive Layout

  • General tab
    • Archive Title
      • Show Archive Title? Enabled
      • Archive Title Layout: Above Content
      • Container Width: Standard
      • Post Archive Title Align: default is no selection
      • Container Min Height: default
      • Title Elements: show Breadcrumb, Title
    • Archive Layout
      • Archive Layout: Normal
      • Post Archive Default Sidebar: Sidebar 1
      • Content Style: Boxed (default)
      • Post Archive Columns: 1 (default is 3), if using Content Views Pro plugin to assign itself to archives
      • Item Image Placement: above
    • Post Item Layout
      • Post Item Elements: Toggle item visibility for Feature, Title
  • Design
    • Breadcrumb Colors: 1st color – white
    • Archive Title Background (all devices): Gradient, 180, black (top) – white (bottom)
  • Publish Theme Changes & Close customizer

Appearance | Customize | Search Results

  • General tab
    • Search Results Title
      • Show Search Results Title: enabled
      • Search Results Title Layout: In Content (default)
      • Search Results Title Align: default is none are selected
    • Archive Layout
      • Archive Layout: Normal
      • Post Archive Default Sidebar: Sidebar 1
      • Content Style: Boxed
      • Search Result Columns: 1, if using Content Views Pro plugin and assigned to Search layout (default is 3)
      • Item Image Placement: Above
    • Search Item Layout
      • Search Item Elements: Toggle item visibility for Feature, Title
  • Design
    • No changes
  • Publish Theme Changes & Close customizer.

Menus

  • This item was already covered during the starting steps at the beginning

Widgets

  • None are being used

Homepage Settings

  • Your homepage displays:  A static page
  • Homepage:  select the page “Darn Good Recipes”
  • Posts page:  empty (“—Select –“)

Additional CSS

  • Copy this custom script here to fix an accessibility issue (insufficient color contrast) with the Kadence native Comment Form, reported by Google PSI metrics when Kadence setting enables to allow comments:

div#respond > form#commentform > p.comment-form-comment > label.float-label,
div#respond > form#commentform > p.comment-form-comment > textarea#comment,
form#commentform > div.comment-input-wrap > p.comment-form-author > label.float-label,
form#commentform > div.comment-input-wrap > p.comment-form-email > label.float-label,
form#commentform > div.comment-input-wrap > p.comment-form-cookies-consent > label,
form#commentform > div.comment-input-wrap > p.form-submit > input#submit{
color: #000;
}
div#respond > form#commentform > p.form-submit > input#submit {
background: #225891;
}

Custom Scripts

Important Note: Regarding Google Tag script, you can use it in either the Kadence Theme, as defined here, or via your SEO Plugin. Both locations aren’t needed. For AIOSEO plugin, it’s in AIOSEO menu under “General Settings | Webmaster Tools | miscellaneous verification”.

  • Add Google tag script under >> Appearance | Customize | Custom Scripts | Add scripts into your header:

——start of copy text (below) for adding in Google Analytics ——–

<!– Google tag (gtag.js) –> YOU WILL HAVE YOUR OWN SCRIPT OF SEVERAL LINES TO HAVE </script>

—— end text copy (above) ——

  • Publish Theme Changes & Close customizer.

Table of Contents Block Custom Default Settings

In order to ensure Google PSI metric for SEO is satisfactory, the Kadence Table of Contents Block must have a setting changed. Here are also some added minimal settings for establishing some default settings for all TOC insertions.

  1. Create a new post (it will be temporary), assign any title, and save it as a DRAFT.
  2. Insert the Kadence block “Table of Contents” into the post, select the block, and ensure you’re viewing the Block Configuration Settings (on the right side).
  3. From these block settings, ensure the tab “General” is selected.
  4. Uncheck all “Allowed Headers” choices except H2.
  5. Scroll up and tap the tab “Style”.
    • Scroll down and tap to expand “Container Settings“. Tap the circle of “Background” and change the “Hex” setting to be the word “beige” or other color of your default choice for future backgrounds for TOC.
    • Important to prevent one issue of the mobile metrics for “SEO” in Google PSI: Scroll up and tap to expand “List Settings“. Tap the Mobile phone icon to reveal mobile seetings only. Change the “List Item Gap” to: 5 px.
  6. Scroll up and tap the tab “Advanced”. Scroll down and tap to expand “Block Defaults. Tap on <Save as default> and respond <Ok> to confirm saving these settings for all future default settings for inserting the Kadence TOC block.

NOTE: Any of these Table of Contents block settings (along with others) can be individually changed when inserting the Kadence TOC block into a Post or Page. For example, at times, you might want different headings to appear such as H3 or H4.

Appearance | Customize | Import/Export

  • Export (it makes a partial backup of settings)
    • Whenever making settings changes, update this document.
    • Make a partial backup using export function.
    • Important:  Settings that don’t get backed up are flagged with “Not exportable”.  Whenever Importing from the backup, refer to the settings in this document to update them since the export file doesn’t carry all settings.

Final Steps

  • If using Redis, purge Redis Object Cache.
  • If using any Object Cache, empty it.
  • Purge any CDN Cache (everything).
  • Specific Cache Systems or Tools:
    • If using Flying Press:  Purge & Preload Cache.
  • Wait about 3-5 minutes and test site and/or metrics.

Conclusion

These are unique Kadence Pro theme settings as a strong example of how to get setup in Kadence. However, it’s recommended that you make your own changed preferences along the way. So, now that you’ve got your Theme settings to your preference, go ahead and see how to format a blog post recipe.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *