Home » Theme Documentation » For Developers

For Developers

Hooks and Filters

Developers can extend and modify Lito theme using hooks (actions and filters). Here are some key points:

  • Action Hooks: Actions in Lito theme allow you to insert custom code at various points in the theme’s execution.
    • Example: do_action('lito_before_header'); allows adding content before the header.
  • Filter Hooks: Filters in Lito theme allow you to modify specific aspects of the theme such as content or settings.
    • Example: apply_filters('lito_post_classes', $classes); allows modifying post CSS classes.

For a complete list of available hooks and filters, please inspect the theme’s code files.

Modifying Settings for Gutenberg Blocks

Gutenberg block settings can be customized through the theme.json file, which allows you to configure various aspects of block styles and settings globally across your theme.

For the detailed documentation about the structure of the theme.json file, please visit the following links:

Introduction to theme.json
Exercise: Creating theme.json

Modifying Default CSS Variables

Default CSS variables can be customized via the
wp-content/themes/lito/assets/css/vars.css file.
These variables allow you to define and reuse common styles throughout your theme.

1. Understanding vars.css

The vars.css file is a CSS file that contains custom properties (variables) which can be used to define common values for colors, typography, spacing, and other design tokens.

2. Customizing CSS Variables

To customize the default CSS variables, add or modify the relevant custom properties within the :root selector in your child theme stylesheet file.

DO NOT MODIFY EXISTING vars.css FILE!

Example: Customizing Layout Sizes

:root {
  --lito-min-width-col: 20rem;    
  --lito-min-width-side-post: 35rem;    
  --lito-min-width-submenu: 20rem;    
  --lito-min-width-footer-col: 15rem;    
  --lito-min-height-cover-media: 20rem;
}

3. Using CSS Variables in Your Theme

Once you have defined your CSS variables, they will override the default values and you will see the results on your website.