Search Knowledge Base by Keyword
This KB documentation is using Advanced Search, Links Editor and Elegant Layouts add-ons.
Glossary Index Shortcode / Block
Overview
The Glossary Index displays all published glossary terms organized alphabetically. Each term is grouped by its first letter with a navigation bar at the top for quick jumping between sections.
Glossary Index can be displayed:
a) Anywhere using the KB Glossary Index Block
b) Anywhere using the KB Glossary shortcode (see details below)
Glossary Shortcode
Use %crel_bracket_open%epkb-glossary-index%crel_bracket_close% in any page or post.
Shortcode Parameters
- color – Hex color used for active navigation letters, section letter headings, and term names. Default: #1e73be
- toptext – Text shown in the “Back to top” link after each letter section. Default: Back to top
%crel_bracket_open%epkb-glossary-index color="#e74c3c" toptext="Top"%crel_bracket_close%
Glossary Block
How to Add the Glossary Index as a Block (Gutenberg Editor):
1. Open a page in the WordPress editor
2. Add a new block and search for “Glossary Index”
3. Insert the block — it will show a live preview of your glossary terms
Block Settings
– Back to Top Text – Customize the text for the “Back to top” link that appears at the bottom of each letter section
– Full Width – Toggle to make the block span the full width of the page
– Max Width – Set a maximum width for the block
– Accent Color – Change the color used for navigation links, letter headings, and term names (default: blue)
– Custom CSS Class – Add a custom CSS class for additional styling
Additional Customization with CSS
/* =============================================
Glossary Index - Custom CSS Overrides
============================================= */
/* 1. Navigation Bar - Font Size */
.epkb-glossary-index .epkb-glossary-index__nav-item {
font-size: 16px !important;
}
/* 2. Navigation Bar - Background Color */
.epkb-glossary-index .epkb-glossary-index__nav {
background-color: #f5f5f5 !important;
}
/* 3. Section Heading (Aa, Bb, etc.) - Font Size */
.epkb-glossary-index .epkb-glossary-index__section-letter {
font-size: 48px !important;
}
/* 4. Term Name - Font Size */
.epkb-glossary-index .epkb-glossary-index__term-name {
font-size: 15px !important;
}
/* 5. Term Definition - Font Size */
.epkb-glossary-index .epkb-glossary-index__term-definition {
font-size: 13px !important;
}
/* 6. Term Definition - Font Color & Font size */
.epkb-glossary-index .epkb-glossary-index__term-definition {
color: #555555;
font-size: 15px !important;
}
/* 7. Back to Top Link - Font Size */
.epkb-glossary-index .epkb-glossary-index__back-to-top {
font-size: 13px !important;
}
/* 8. Back to Top Link - Font Color */
.epkb-glossary-index .epkb-glossary-index__back-to-top {
color: #888888 !important;
}
/* 9. Section Divider - Border Color */
.epkb-glossary-index .epkb-glossary-index__section {
border-bottom-color: #e0e0e0 !important;
}
/* 10. Section Divider - Border Thickness */
.epkb-glossary-index .epkb-glossary-index__section {
border-bottom-width: 1px !important;
}