kntnt/kntnt-bb-child-theme

Kntnt Child Theme for Beavar Builder Theme

Kntnt Child Theme for Beavar Builder Theme

A WordPress child theme for Beaver Theme.

Description

Kntnt Child Theme for Beavar Builder Theme is an advanced child theme of Beaver Theme, which is included in the Beaver Builder's Pro and Agency packages.

Features

Kntnt Child Theme for Beavar Builder Theme provides many features, including:

• Responsive font sizes.
• Beaver Builder Page Builder's breakpoints are used if present.
• Removes from Customizer everything that can be replaced with Beaver Themer if the plugin is active.

Companion plugins

You should consider using following plugins in conjunction with this theme:

• Kntnt Add Referrer Origin
• Kntnt Fix Colon in Fragments of Relative URLs
• Kntnt Remove Capital P Dangit
• Kntnt Remove WP Generator

You should install them as mu-plugins, although they can also be installed as regular plugins as well.

Follow these steps to install them as mu-plugins:

1. In your wp-content directory, create a mu-plugin directory if not already existing.
2. Download mu-plugin you want to install and unzip it somewhere outside your Wordpress installation.
3. Move or copy the single PHP file inside the unzipped directory into the mu-plugin directory.
4. Delete the downloaded zip-file and the unzipped directory and its content.

For developers

Don't edit style.css or function.php. Edit instead following files. Each are explained below.

• custom/google-fonts.php — add additional Google fonts to download
• custom/functions.php — for your own PHP code
• custom/image-formats.php — for your own image formats
• custom/script.js — add your own JavaScript to be global included
• custom/setting.less — override Less variables used by theme
• custom/style.css — add your own CSS to be global included

custom/google-fonts.php

Here you can add additional fonts from Google Fonts. For each font, add a line similar to following:

<?php $fonts['roboto'] = '300,300i,400,400i,700,700i'; ?>

custom/functions.php

Here you can add any PHP code that you normally would put in functions.php.

custom/image-formats.php

Here you can override and add image formats. Add following code snippets to alter or add an image format:

$image_formats['machine_name'] = [
  'name'   => 'Human name',
  'width'  => 600,
  'height' => 400,
  'crop'   => false
];

Remember to regerante all images. You can do that with Alex Mills plugin Regenerate Thumbnails or with WP-CLI like this:

wp media regenerate --yes

Following image formats are overridden or defined by this theme. You can override any of them.

Image size name	Width	Height	Crop	Machine name
Extra small	180		No	extra_small
Extra small (crop)	180	180	Yes	thumbnail
Small	300		No	small
Small (crop)	300	200	Yes	small_crop
Medium	600		No	medium
Medium (crop)	600	400	Yes	medium_large
Large	900		No	large
Extra large	1920		No	extra_large
Small banner	1920	300	Yes	small_banner
Medium banner	1920	600	Yes	medium_banner
Large banner	1920	900	Yes	large_banner
Extra large banner	1920	1200	Yes	extra_large_banner

Notice that the machine name is outputted as a CSS-class.

Notice that this theme includes following CSS, that targets images conatining _banner in their machine name to make them breakout of their containers and span the full width of the screen.

@media screen { p img[class*="wp-image-"][class*='_banner'], figure.wp-caption img[class*="wp-image-"][class*='_banner'] { max-width: 100vw !important; width: 100vw; margin-left: calc(50% - 50vw); box-shadow: none; } }

Notice that this theme modify WordPress crop to use bleed.

custom/script.js

Here you can add JS code that should be loaded with the theme.

custom/setting.less

This file overrides LESS variables of the theme. Examples:

@text-font: Lora, Georgia, serif;
@heading-font: "Roboto Condensed", Arial, Helvetica, san-serif;
@monospace-font: "Lucida Console", Monaco, monospace;
@service-font: @text-font;
@text-size: 24px;
@small-text-size: 17px;
@monospace-text-size: 14px;
@service-text-size: 14px;
@accent-color: #2C9A43;
@secondary-accent-color: @accent-color-hover;
@black: #080808;
@almost-black: #333;
@dark-gray: #555;
@mid-gray: #ccc;
@light-gray: #eee;
@almost-light-gray: #f5f5f5;
@almost-white: #fdfdfd;
@white: #fff;
@box-shadow: 5px 5px 15px @mid-gray;

custom/style.css

Here you can add CSS code that should be loaded with the theme.