Skip to content

Tabs

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.

 

A Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
B Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
C Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[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]

 

 

This is a test of tabs
A Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
B Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
C Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[uw_tabs name="This is a test of tabs" style="alt-tab"]

[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]

 

 

A Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
B Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
C Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[uw_tabs tour="true"]
[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.

Learn more

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 controversial 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

Gryffindor symbol
  • Values: Courage, bravery, nerve, chivalry
  • Mascot: Lion
  • Colors: Scarlet red and gold

Learn more

Ravenclaw

Ravenclaw symbol
  • Values: Intelligence, learning, wisdom, wit
  • Mascot: Eagle
  • Colors: Blue and bronze

Learn more

Hufflepuff

Hufflepuff symbol
  • Values: Hard work, patience, justice, loyalty
  • Mascot: Badger
  • Colors: Canary yellow and black

Learn more

Slytherin

Slytherin symbol
  • Values: Ambition, cunning, leadership, resourcefulness
  • Mascot: Serpent
  • Colors: Green and silver

Learn more

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

Watch the Trailer

Fantastic Beasts Films

Spin-off from original series going back in time to tell the story of Newt Scamandar

Watch the Trailer

 

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:

Insert Content Here A
Insert Content Here B
Insert Content Here C

 

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.