By default, WP Tocify uses the #
symbol to denote an anchored heading, both in the article itself and also in a TOC (Table of Contents). However, this symbol and other styles associated with the WP Tocify plugin can be customized further if you'd like.
Dashboard Location
DashboardSettingsWP TocifyCSS / Style Options
Popular Anchor Symbols
We suggest making it easy for your readers to recognize an anchored location; i.e., use symbols commonly used for this purpose: ¶
§
🔗
#
. These are UTF-8 symbols, so you can just copy/paste right from this article. Choose the symbol that you like best and paste it into your WP Tocify configuration.
Using a Custom Image Icon
Or, instead of using a UTF-8 symbol, you can use an image path.
Custom Styles (Optional CSS)
There are three CSS selectors worth noting. These allow you to apply custom styles.
.wp-tocify-heading {
color: blue;
}
.wp-tocify-anchor {
color: green;
}
.wp-tocify-toc:not(.-style-none) {
color: black;
}
Note: In this last example, :not(.-style-none)
covers a scenario where the [toc style="none" /]
Shortcode Attribute is set as a display option; i.e., do not apply styles when the [toc /]
Shortcode has been explicitly configured to display an unstyled Table of Contents. Adding :not(.-style-none)
makes your custom styles consistent with built-in WP Tocify functionality.