Last Modified: KB » WP Tocify Pro
CSS / Style Options

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

CSS / 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 Image Icons

Custom Styles (Optional CSS)

There are three CSS selectors worth noting. These allow you to apply custom styles.

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.