layers_customizer_defaults

Since: 1.1 Last Updated: Version: 1.5.3
Back to Main Index

This hook allows you to set custom defaults for each customizer control added by Layers (or Layers extensions such as Layers Pro) such as the header layout, fonts and colors.

Location

/core/customizer/defaults.php

Reference

/core/customizer/config.php

Layers Pro: /includes/controls.php

Usage

 

Line 3: Set a custom callback with a unique name! This is used again on Line 5 where you setup your function.

Your function takes a $defaults array that defines each control from within the various control arrays specified in Layers or other Layers products and sets a new value when the filter is run. We recommend including the full set of defaults in every child theme and using them to declare things like Fonts and colors in preference of hard-coding them in CSS. This allows Layers to maintain its customization features while ensuring Layers and Layers Pro users receive the right look when your theme is activated where Customizer options may already be set.

Here is an example of how your custom defaults array might look:

It is really important to Layers customers and to the project in general that you declare defaults for Layers Pro, even if your theme provides similar customization options such as a header background color control. To avoid conflicts, always ensure your custom controls use unique element names that are not the same as any defined in this document.

You may  set a blank color value to ensure clearing or resetting the options will revert to your CSS. This is important as it keeps the auto-invert from triggering on an element where you are using standard selectors to set dark background colors with light text and allows the user to set custom colors and still have invert work.

Example with blank value

Available Args

Fonts

These controls are found under Site SettingsFonts

 $font_name  represents the proper Google fonts font-family value (check Google Fonts “Use” page for the font if you’re unsure).

Example:

Header Layout

Header controls are found under HeaderStyling

$layout  represents the following values:  layout-boxed  or layout-fullwidth

Example:

Header Menu Layout

'header-menu-layout' => $menu_layout,
$menu_layout  represents the following values:

Logo Left: header-logo-left

Logo Right: header-logo-right

Logo Top Center: header-logo-center-top

Logo Top: header-logo-top

Logo Centered: header-logo-center

Example:

 Sticky Header

'header-sticky' => $value,
$value represents true or false via integer 1  for true or   for false

 

Example of enabling the sticky header:
'header-sticky' => '1',

Sticky Header Scroll Start

This option is available in Layers Pro and allows you to set a default pixel value for where the sticky header (if enabled) should begin sticking on scroll.

Where $value  is a numerical value in pixels up to 500. Defaults to 270

Example

Transparent Header

Determines Transparent Header enabled or not
'header-overlay' => $value,
 

$value represents true or false via integer 1  for true or   for false

Example of enabling the transparent header:
'header-overlay' => '1',

Header Background Color

This control is located under Site SettingsColors in core Layers, and moves to HeaderStyling with Layers Pro active, but takes the same default argument:

$color  represents the HTML HEX color value.

Example:

Note that in Layers core, this color also applies itself to the Title Banner background. In Layers Pro, the Title Banner background has a separate control you can set to blank (will inherit the header color) or a unique color. The following example sets a dark title banner where we may have set a white header.

Title Banner

The Title Banner has separate color controls in Layers Pro, where in Layers core the text will automatically be set to white or black depending on the background color.

$color  represents the HTML HEX color value of the title and excerpt text if shown in the title banner.

Example:

 

 

General Colors

In Layers core we set a single “accent color” that is applied to elements such as the link text, buttons or other colored accents throughout the site. In Layers Pro, this color is de-registered and separate color options are added for more varied control. The body background corresponds to the site wrapper and will change the color on interior pages such as the Blog and single posts.

$color  represents the HTML HEX color value.

Example:

Header Menu Links

These options are added in Layers Pro and are found under HeaderMenu Styling

Menu  Colors

$color  represents the HTML HEX color value.

Example:

Menu Link Text Shadow

This option corresponds to the CSS text-shadow  property and takes the same arguments. You only need to set this default if your theme uses a specific text-shadow declaration on the menu and you want to ensure Pro users maintain that style upon theme activation.

$option  represents the users choice of none  bottom  or top

Example:

Menu Link Text Transform

This option corresponds to the CSS text-transform  property and takes the same arguments. You only need to set this default if your theme uses a specific text-transform on the menu and you want to ensure Pro users maintain that style upon theme activation.

$option  corresponds to the CSS value of text-transform and is set to  normal  by default which will display link labels how the user enters them.

capitalize  displays links with the first letter Capitalized

lowercase  displays links in lowercase

uppercase  displays links in UPPERCASE

Example:

Sidebars

These controls are found under the BlogStyling panels for posts and archives, or WooCommerceSidebars for products and shop.

Sets a sidebar to enabled by default for posts and archives.

By default the right sidebar is enabled and the left disabled for both single posts and archives. If you wanted to reverse this in your theme, you can set the left to true and the right to false where $value  represents true or false via integer 1  for true or   for false

Example:

Sidebar Background

This option is enabled in Layers Pro and should match whatever your background-color  CSS declaration is for the .sidebar .well  class

$colorrepresents the HTML HEX color value.

Example:

Post and Page Colors

These options are enabled in Layers Pro and found under the Blog Styling panel

Post Title

Links in posts/page content

Takes the Accent Color by default if this is not set or present.

Post Meta Color

Comments Background Color

$color represents the HTML HEX color value.

Example:

Post and Page Meta

These options are added with Layers Pro and found under the Blog Styling sections in the customizer. They should be set in preference of hard-coding visibility of meta using CSS.

Each default should be self explanatory and corresponds to the meta type and whether it is for posts or post archives

$option  represents the users choice of yes yes  or no

$word_count  represents a numerical value corresponding to the max number of words to take from the post content when auto-generating excerpts (WordPress default is 55)

Example:

Button Styling

These options are enabled by Layers Pro and located under Site SettingsButtons. (Buttons otherwise take the Site Accent Color default, or your CSS declarations)

There are two sets of button color controls, Primary and Secondary.

  • Primary corresponds to buttons on light backgrounds.
  • Secondary corresponds to buttons given the invert class when Layers detects they are on a dark background.

Even if your theme is setting button styles in CSS or offering button controls in custom widgets, these should be set to mirror your CSS to ensure Layers Pro users get a consistent look when activating your theme when existing options are set.

Button Type

$option  represents the user’s choice of solid  transparent  or gradient

The following example would be used if your theme uses “ghost button” styling where buttons only have a border but no background color:

Button Primary Background Color

Solid Buttons

Used if 'buttons-primary-background-style'  is set to 'solid' :

$color  represents the HTML HEX color value.

Example:

Gradient Buttons

Used if 'buttons-primary-background-style'  is set to 'gradient' :

$color  represents the HTML HEX color value. Each gradient needs two colors to blend together, a start and an end.

Example:

Button Text Color

$color  represents the HTML HEX color value.

Example:

Button Text Shadow

This option corresponds to the CSS text-shadow  property and takes the same arguments. You only need to set this default if your theme uses a specific text-shadow declaration on the buttons and you want to ensure Pro users maintain that style upon theme activation.

$option  represents the users choice of none  bottom  or top

Example:

Button Text Transform

This option corresponds to the CSS text-transform  property and takes the same arguments. You only need to set this default if your theme uses a specific text-transform on the button text and you want to ensure Pro users maintain that style upon theme activation.

$option  corresponds to the CSS value of text-transform and is set to  normal  by default which will display link labels how the user enters them.

capitalize  displays links with the first letter Capitalized

lowercase  displays links in lowercase

uppercase  displays links in UPPERCASE

Example:

Button Border Width

$value  represents a numerical value corresponding to the pixel value of the border-width  property in CSS.

Example:

Button Border Color

$color  represents the HTML HEX color value of the border-colorproperty in CSS.

Example:

Button Border Radius

$value  represents a numerical value corresponding to the pixel value of the border-radius  property in CSS and has a default of 4.

Example:

Button Shadow

You only need to set this default if your theme uses a specific box-shadow  declaration on the buttons and you want to ensure Pro users maintain that style upon theme activation.

$option  represents the users choice of none  small medium  or large where each translate to an increasing pixel value in the inline style.

Example:

 

Footer

Footer controls are found under the FooterStyling panel.

Footer Width

$layout  represents the following values:  layout-boxed  or layout-fullwidth

Example:

Footer Sidebar Count

'footer-sidebar-count' => $value,
Takes a numeric value between 0 (none) and 4 ( four columns).

Example:
'footer-sidebar-count' => '3',

Footer Background Color

$color  represents the HTML HEX color value.

Example:

 

 

Similar to:
layers_customizer_control_defaults