How to create my own theme ?

Since the version 2 of Joli Table of Contents, it has been possible to create custom themes.

Custom Table of contents themes gives you total control over the expected output.

How it works

The plugin scans automatically for custom TOC themes present in the site’s theme directory, under the joli-table-of-contents/themes directory (you need to create these folders).

example:

mysiteroot/wp-content/themes/my-theme/joli-table-of-contents/themes/

Create a theme subfolder

In this example, we will create the theme “example-rounded” so we need to create a new folder with this exact same slug “example-rounded”.

Create the required theme files

Here is what the “example-rounded” folder structure should look like :

  • example-rounded [folder of the theme]
    • jtoc-styles.css
    • jtoc-functions.php (optional)
    • example-rounded.json (optional)

Edit the main styles file (jtoc-styles.css)

All the styles should be prefixed with the following where “example-rounded” is the theme’s slug:

.wpj-jtoc.--jtoc-theme-custom-example-rounded

Example theme’s styles file :

.wpj-jtoc.--jtoc-theme-example-rounded {
  /* jtoc css variables */
  --jtoc-header-color: #333;
  --jtoc-header-height: 50px;
  --jtoc-title-label-font-weight: 600;
  --jtoc-background-color: #f4f5f6;
  --jtoc-body-padding: 16px 18px 16px 18px;
  --jtoc-hierarchy-offset: 20px;
  --jtoc-title-font-size: 1em;
  --jtoc-title-label-font-weight: 500;
  --jtoc-link-color: #3175e4;
  --jtoc-link-color-hover: #3175e4;
  --jtoc-link-color-active: #333;
}

.wpj-jtoc.--jtoc-theme-example-rounded .wpj-jtoc--header .wpj-jtoc--header-main .wpj-jtoc--title span.wpj-jtoc--title-label {
  display: block;
  width: 100%;
}

.wpj-jtoc.--jtoc-theme-example-rounded .wpj-jtoc--items li.--jtoc-is-active > .wpj-jtoc--item-content > a {
  font-weight: bold;
}

.wpj-jtoc.--jtoc-theme-example-rounded .wpj-jtoc--items li a {
  text-decoration: none !important;
}

.wpj-jtoc.--jtoc-theme-example-rounded .wpj-jtoc--items li a:hover {
  text-decoration: underline 1px dotted !important;
}

Create the theme details “example-rounded.json” file

The theme’s json file gives extra details on the theme. It is optional but recommanded as it will show the nice name through the interface, not the id.

Here is an example example-rounded.json file :

{
    "id": "example-rounded",
    "name": "Example rounded",
    "author": "WPJoli",
    "url": "https://www.wpjoli.com",
    "version": "1.0.0"
}

Optionally create a the theme’s function jtoc-functions.php file

The main purpose of this file is to add extra functionality compared to a standard theme.

In this file, we will add functions that are linked to the hooks.

For example, we can add a function to automatically add a footer logo, or to prefix the headings with a custom icons, etc…

Was this page helpful?