Function: Similar to accordions, tabs is a type of menu-like device that organizes headers/sections in an effective way. Used to reduce length of a site page and hide content unless the user wants to view it.
Number of options: 3
Step 1: Browse options and copy and paste shortcode
Look through all the options and select the one that will work best. The corresponding shortcode is directly under the tabs feature it creates. Copy and paste your chosen shortcode into the WordPress Editor where you wish it to appear.
*Copy all of the code, including the [ ] on either end.
[tabs_section title="Tab A"] Insert Content Here [/tabs_section]
[tabs_section title="Tab B"] Insert Content Here [/tabs_section]
[tabs_section title="Tab C"] Insert Content Here [/tabs_section]
[/uw_tabs]
[tabs_section title="Tab A"] Insert Content Here[/tabs_section]
[tabs_section title="Tab B"] Insert Content Here[/tabs_section]
[tabs_section title="Tab C"] Insert Content Here[/tabs_section]
[/uw_tabs]
[tabs_section title="Tab A"] Insert Content Here[/tabs_section]
[tabs_section title="Tab B"] Insert Content Here[/tabs_section]
[tabs_section title="Tab C"] Insert Content Here[/tabs_section]
[/uw_tabs]
Step 2: Customize your tab(s)
To change the section titles, simply replace Tab A/B/C with your preferred section title. So if you want the section title to be Go Huskies title=”Tab A” will become title=”Go Huskies”.
*Remember to not delete the quotation marks while modifying the section title.
To insert content into any given tab section, simply replace Insert Content Here with your content. A variety of content can be included in tabs, including but not limited to buttons, cards, headers and copy of course.
*Remember to not delete the end brackets when inserting content.
To add another section, simply copy [tabs_section title="Tab C"] Insert Content Here[/tabs_section] and paste it directly below your last section but before the /uw_tabs end code.
*Be wary of making too many sections for one particular tabs feature. It may be advantageous to create multiple on your page instead, or think about displaying your information in a different way altogether.
Example of a customized tabs feature:
The Books
A Brief Synopsis/Concept Overview: A series of seven fantasy novels that chronicle the lives of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry. The main story arc concerns Herry’s struggle against Lord Voldemort, a dark wizard who intends to become immortal, overthrow the wizard governing body known as the Ministry of Magic and subjugate all wizards and Muggles (non-magic people).
Published: 1997-2007
As of February 2018, the books have sold more than 500 million copies worldwide, making them the best-selling book series in history.
The Series (in order):
Harry Potter and the Philosopher’s/Sorcerer’s Stone
- Published as “Sorcerer’s Stone” for American audiences because they thought we wouldn’t understand
- 3rd best-selling novel of all time
Harry Potter and the Chamber of Secrets
Harry Potter and the Prisoner of Azkaban
Harry Potter and the Goblet of Fire
Harry Potter and the Order of the Phoenix
Harry Potter and the Half-Blood Prince
Harry Potter and the Deathly Hallows
The Author: J.K. Rowling
Born: Joanne Rowling, July 31, 1965
Country of Origin: United Kingdom
Education: University of Exeter
Known for: Harry Potter series, The Casual Vacancy, Cormoran Strike
Quote: “It matters not what someone is born, but what they grow to be.”
*Is a questionable person in society in terms of political and personal beliefs. We don’t need to get into that though.
Hogwarts School of Witchcraft and Wizardry
A British boarding school of magic for students aged 11-18
Founders: Godric Gryffindor, Rowena Ravenclaw, Helga Hufflepuff, Salazar Slytherin
Founding Date: 10th Century
Notable Headmaster: Albus Dumbledore
The Houses
The school is divided intro four houses, named after each of the school’s founders. Each student is sorted into their houses upon arrival.
Gryffindor
- Values: Courage, bravery, nerve, chivalry
- Mascot: Lion
- Colors: Scarlet red and gold
Ravenclaw
- Values: Intelligence, learning, wisdom, wit
- Mascot: Eagle
- Colors: Blue and bronze
Hufflepuff
- Values: Hard work, patience, justice, loyalty
- Mascot: Badger
- Colors: Canary yellow and black
Slytherin
- Values: Ambition, cunning, leadership, resourcefulness
- Mascot: Serpent
- Colors: Green and silver
The Original 8 Movies
Produced: Warner Bros. Pictures
Released: 2001-2011
4th highest-grossing film series
*Last book split into 2 parts which is why there are 8 films
Fantastic Beasts Films
Spin-off from original series going back in time to tell the story of Newt Scamandar
Step 3 (optional): Defaulting a particular tab section open
If you want to have a section of your tab feature already open for external users to see, simply add active=’true’ to any of the sections after the section title attribute. If you do not add this attribute, the tab feature will automatically have the first section open for viewing.
Before
[tabs_section title="Tab B"]After
[tabs_section title="Tab B" active="true"]
Example of this effect:
Step 4 (optional): Assign an id to your tabs
Attributes are the pieces within the shortcode that you modify to customize your shortcode. For tabs, we did this in Step 2 to change the title of the sections. An optional attribute that you can add is an id. IDs are a way to assign a unique identifier to a specific shortcode or section. Some shortcodes have slightly different behaviors with IDs than others, to view those as well as best practices please visit our best practices for IDs page.