Child Theme Authoring: Styling & Fonts

Child Theming

Last Updated: for: 1.2.13 Time to Read: 10 minutes

The first thing you’ll probably want to dive into and test out is the restyling aspect of your child theme. This section provides several tips on rapid restyling techniques, choosing selectors, using fonts and images, and troubleshooting override problems that may occur.

Before you begin, ensure you have checked out how to setup your child theme files.

There are two main parts of your child theme’s styling, the stylesheet (or style.css) and the customizer defaults, which are best stored in your functions.php

A huge part of Layers is allowing users to customize details of their site style such as layouts, typography and colors within the Site Settings and builder widget controls in the Customizer. It is important for your theme to use customizer defaults as a way to override or reset the original Layers or Layers Pro settings  so your child theme loads as intended when activated. Defaults allow your theme to look the way you like, but also allow users to change the fonts or color options and have them work properly. In other words, avoid using CSS to lock users into colors, fonts or other styling that the Customizer options are intended to set. This includes header colors, body fonts etc with overqualified selectors or which us !important. More on this in a minute.

Defaults are set in your child theme functions.php  with a simple filter of the layers_customizer_control_defaults  hook.

In this example, we set the default Header Layout, Heading, Body and Form font, header and footer colors, and default number of footer widget areas to name a few. When someone installs and activates this child theme, these options will be preset in the customizer to aid in helping the user achieve the theme’s demo look as effortlessly as possible.

Let’s break it down:

On line 1, define a unique name for your custom function. Here we simply call it layers_child_customizer_defaults. Yours might be something like “layers_business_customizer_defaults” if your theme is named Layers Business.

On line 3 you can set each Layers customizer control default in the $defaults array.  Each option is added to the array in this way and followed by a comma:

The options are mostly self-explanatory, but you may find a detailed overview of all the options and how to correctly format the value in the  layers_customizer_control_defaults reference.

For options that take a hex color vaue such as site-accent-color, you may set a blank value  so your child theme CSS takes precedent when the option is reset or cleared. Custom colors set by the user will still override your CSS.

Finally on line 17, use add_filter  to hook your $defaults  arguments (layers_child_customizer_defaults) into the original (layers_customizer_control_defaults).

See, not so bad! We will cover hooking and filtering in more detail in the next chapter to help you use custom functions to do things like add custom HTML or widget areas to your theme.

Now that you have the defaults setup, you can move on to more specific tweaking in the child theme style.css . As you begin to build your child theme stylesheet, you have several options for how to go about overriding original styles. The most efficient and effective method is to use the original selectors and properties used.

Do not copy entire Layers stylesheets into your Child Theme or style.css

Layers divides up its styling into several primary stylesheets to make referencing these easier, which are explained below:

framework.css

Contains all of the structural styling – in most cases you should never change any aspect of framework styles beyond padding, as everything built for layers depends on the grids and rules this stylesheet sets forth.

components.css

Contains the styling for widgets and other Layers components. The Customizer allows control over most of the styling in here, so change with caution.

responsive.css

All responsive styling contains all of the media queries for handling layout changes on smaller screens.

woocommerce.css

Custom styling for Layers that covers WooCommerce shop pages, checkout and cart, mainly to support Layers sidebar settings and framework colors.

These links may be used for reference to quickly view the original style in context of its dependent or parent selectors that may come before and after it, but we recommend using your Browser Inspector.

To begin restyling,  start with your blank style.css , or  work from the sample child theme style.css. Never copy the original stylesheets into your child theme, as this not only makes your child theme immune to parent style fixes or updates, but loads a bunch of unnecessary data.

The best practice is to use the same or a more qualified selector as the parent style to override only the properties you wish to change. To do this quickly, the Browser Inspector and an extension like DevKit are your power tools for building the safest override CSS.

Below are some tips for how we quickly build child theme stylesheets using the Browser Inspector:

  1. Equip yourself with a webkit browser with an Inspector you enjoy working with.
  2. Review the CSS Best Practices for styling Layers Child Themes
  3. Use the WordPress customizer to access the DevKit editing panels and easily copy/paste info from the inspector to DevKit or the CSS panel in the Customizer while viewing the changes in the preview pane.
  4. Work from top-down
  5. Test all changes in live editing mode in the inspector or via DevKit and be sure to test all page templates/layouts.
  6. Copy the dominant selector and the properties you can override into the custom css
  7. If using DevKit, deactivate when you are done and copy the contents of the CSS panels into your child theme style.css.

If you are new to using the Browser Inspector in combination with the WordPress Customizer, take a moment to go through CSS Styling Using the Browser Inspector & Customizer, a primer on rapid restyling – it will make your life easier!

Layers does not load any styles in its style.css , but instead uses several stylesheets to organize specific parts of the design. The framework.css  is the main stylesheet controlling the overall layout and should always load first, followed by all of its dependents such as components and responsive CSS. Your child theme, if all styling is in the style.css as it should be, also does not need to enqueue or load anything special.

Layers will already enqueue the child theme stylesheet and its own stylesheets, so you do not need to use style enqueues unless you have additional stylesheets.

Use enqueueing instead of @import!

You may wish to enqueue the parent style.css  for the purpose of easily determining parent version when viewing the source in the browser.

Here is how you would write a style enqueue function:

On line 5 above we begin with hooking wp_enqueue_scripts  with our custom function layers_child_styles  which can be whatever you want, ie layers_mythemename_styles .  This will take the content of our function and process it when wp_enqueue_scripts runs in WordPress on page load.  The function_exists  condition on line 7 simply checks that this function does not already exist somewhere else, which would cause a conflict.

Within wp_enqueue_style  we have two important things going on in lines 13 and 14. The get_template_directory_uri()  hook returns the correct url to the parent theme‘s folder, and the array allows us to set the ID of another stylesheet we want this one to be dependent on.

  • You do not need to enqueue the child theme style.css. This is already done by Layers.
  • You only need to enqueue the parent style.css if you want to be able to easily reference the Layers version when viewing source on customer sites running your child theme (recommended).

Setting the Right Path

There are several different pathing methods in WordPress that you use depending on if the file is in the parent theme folder, your child theme folder, or a plugin. The following explains the difference between all of these similar, confusing tags:

get_template_directory_uri()

Returns a URL path to the parent theme directory without a trailing slash (eg: . Used most often when enqueuing scripts and styles located in the parent theme directory.

get_stylesheet_directory_uri()

Returns a URL path to the child theme directory without a trailing slash (eg: http://www.yoursite.com/wp-content/themes/layers-child) . Used most often when enqueuing scripts and styles located in the child theme directory.

get_stylesheet_directory()

Returns an absolute server path without a trailing slash (eg: /home/user/public_html/wp-content/themes/layers-child). Used most often in CSS when defining image paths.

get_template_directory()

Returns an absolute server path to the parent theme directory without a trailing slash (eg: /home/user/public_html/wp-content/themes/layers). In most cases, this is never used in your child theme.

plugins_url()

Returns the absolute URL to the plugins directory without a trailing slash.

For a more detailed understanding of enqueues and dependencies, see the following:

Setting Dependents

Overrides in your child stylesheet a bit nightmarish if you are not using the exact selectors to override, or have components or plugins loading in your theme that need separate stylesheet enqueues. Setting dependents on your enqueues is the correct way of dealing with this.

This technique is also helpful in situations where a plugin is loading styles after your child theme styles and you need to override them.

To learn more about CSS specificity, see this wonderful article by Smashing Magazine.

The following example shows how a theme might enqueue a special stylesheet that supports a library being used (such as SimplePie)

Now when the page is rendered, these stylesheets will be loaded AFTER the child theme stylesheet, which will come after Layers by default. To ensure they load only if a specific stylesheet loads, we add a dependency for that style’s ID in the array argument on line 14. The Layers parent style ID is always 'layers-framework' and your child is always 'layers-style'

Layers does not use image-based icons or sprites in the front-end theme, so there is no need for replacement, however you may wish to include a different font-icon for use in your own templates and styles. To ensure the fastest load time for your site, font icon libraries should be included in your theme in a sub-directory of the assets folder, for example, but can also be enqueued from a hosted source or using a library already included in WordPress or Layers.

FontAwesome

FontAwesome is now included in the Layers Core and does not need to be included separately. 

If you need to access icon fonts in a beta version of FontAwesome that is newer than the latest Layers verion, you must dequeue the core stylesheet and enqueue yours instead. The dequeue is a safety measure in the event font-awesome is being enqueued from a plugin.

When including an external library in your child theme, you would set the child theme-relative path to the file as normal, or the full url to the hosted file.

Google Fonts

There is no need to add Google fonts or font style enqueues, as Layers already does this. Instead, set the font family in the customizer defaults as described at the beginning of the article. Example with just the font settings:

This method is important, as it saves you a ton of time writing font-replacement CSS while preserving the theme user’s ability to customize their fonts.

Custom Fonts

Custom fonts that are not hosted by a font service may be added to your child theme, along with the appropriate licenses, via @font-face in your style.css, or more efficiently through a standard enqueue.

To enqueue a custom font, create a separate stylesheet to house the @font-face CSS, such as a fonts.css. Then enqueue the stylesheet as a dependent of the parent theme’s typography style to ensure it loads before the child stylesheet:

Fonts should also be enqueued if remotely hosted. The advantage of using a font service is better handling of things like weights, character sets and alternates which, when loaded using @font-face, can reduce performance or encounter rendering bugs.

It is always best to include files in your theme and enqueue them locally rather than link to a file on a 3rd party website. This avoids loading delays that can occur on your site if the other site is experiencing problems or slow performance.

Next, we cover how to include scripts and other PHP libraries.