Many shortcodes have the option to set an ID (e.g. in HTML it is id=”id-name”, targeted in CSS using #id-name). These are some best practices for creating and using those IDs.
- IDs must start with a letter. Don’t start an ID with a number or special character.
- Use dashes as separators. Don’t include spaces in an ID.
- All IDs on a page must be unique, and should be short and descriptive
Specific shortcode behavior & tips for usage
Some of our shortcodes have additional behavior related to their IDs that you may find helpful.
Accordions
- If you do not include an id or a name or title attribute on the accordion shortcode, a unique ID will be created for you. If you only include the name or title without an id, an ID will be generated using the text of the name/title with dashes between each word.
- Accordion section shortcodes do not have automatically generated IDs.
- Setting an ID on an accordion section allows you to directly link to the section and automatically open it.
Example: An accordion section has id=”harrypotter”, the link https://your-site.com/page-with-accordion/#harrypotter would go to that page, automatically open the harrypotter accordion section and, depending on your browser, jump down the page to the open section.
Modals
- If multiple modals are included on a page and an ID for each is not set manually, a unique ID will be generated for each.
Tabs
- If you do not set an id manually, an ID will be generated automatically.
- If multiple tabs/tours are on included on a page without specifying a unique ID for each, unique IDs will be generated.
Blockquotes, Buttons, Cards, Grids (both row and col) and Jumbtrons
- All have optional IDs that will be used if provided.