Hooks: Actions and Filters
Please note that this is a Developer level document and is for reference/guidance only. We cannot guarantee that they will always work as expected. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for consulting. Our support policy does not cover assistance with modifying or debugging code from any code examples included in our developer level documentation, and they may be changed or removed if we find they no longer work due to changes in our plugins.
Sensei comes with several hooks that can be used to change the way it behaves. These hooks can in turn be separated into two categories:
- Actions
- Filters
If you are not familiar with how actions and filters work in WordPress, this guide can bring you up to speed.
A current list of all action and filter hooks can be found in our Sensei Developer Reference docs.
Code Examples
Here are some code examples using some of the Sensei filter hooks. The code in these examples can be added to your theme’s functions.php file, or loaded via a third-party plugin like Functionality.
Disable the default Sensei styles
| add_filter( ‘sensei_disable_styles’, ‘__return_true’ ); |
view rawfunctions.php hosted with ❤ by GitHub
CSS Structure
Inside the assets/css/ directory you will find the stylesheets responsible for the default Sensei frontend styles. The files to look for are frontend.scss and frontend.css.
frontend.css is the minified stylesheet. This file is referenced by the plugin and declares all Sensei styles. frontend.scss is not used by the plugin. It contains the raw CSS and can be compiled using Sass, a CSS preprocessor. We use this file to author the plugin CSS.
The CSS is written to make the default styles compatible with as many themes as possible. It is however more than likely that you will want to make your own adjustments.
Modifications
To avoid upgrade issues it is advised that you do not edit these files directly. Rather you should use them as a point of reference.
If you just want to make a few changes we’d recommend simply adding some overriding styles to your theme’s stylesheet. For example add the following to your theme stylesheet to make Sensei progress bars black instead of the default color:
.meter > span {background: #000;}
Sensei also outputs “sensei” as a class on the body tag of Sensei pages, which can be useful for overriding styles on Sensei pages only.
Disabling Sensei Styles
If you plan to make major changes then you might prefer your theme not to reference the Sensei frontend stylesheet at all. You can tell Sensei not to use frontend.css in Sensei > Settings. But a better solution is to simply add the following line of code to your theme’s functions.php file:
add_filter( 'sensei_disable_styles', '__return_true' );
With this definition in place your theme will no longer use the Sensei frontend stylesheet, giving you a blank canvas upon which you can build your own desired layout / style.