• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2762

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Premium Access
  • Log in

Add Tabs in Genesis Child Themes

This code enables you to add tabs anywhere in any theme.

Here’s the result with basic styling:

tabs

Once you install the code, all you need to do is paste in the HTML for your tabs.

The above demo was generated by pasting the tabs HTML into a single post.

You can add the HTML in your editor on any Edit Post or Page screen, text widget or hook it in using PHP code.

There’s 4 types of code used to create tabs in WordPress :

  • jQuery
  • PHP
  • CSS
  • HTML

Code Installation – From Download Folder #

There’s 3 steps involved to use the tabs code :

  1. Copy the tabs folder and paste it into your child themes root directory.
  2. Copy the PHP code from the functions.php file and paste it into your child themes functions file.
  3. Paste the HTML for the tabs anywhere in your theme you want to display your tabs.

Here’s the code for logged in members :

Register for full access

HTML

Once you install the code, paste the HTML into any Edit Post/Page or text widget like this.

tabs-html

You can also hook in the HTML using a custom function.

Related Tutorials

  • Display Single Posts In Tabs
  • Genesis Tabs Widget You Can Fully Customize
  • Genesis Tabbed Widgets Template
  • Genesis Tabbed Template With Custom Fields

Tabs

Reader Interactions

Comments

  1. Scot MacDonald says

    September 11, 2018 at 4:10 pm

    Hi

    I’m using this guide and it works fine. I’m seeing an instance where two words in a tab menu item breaks the line. I know this is a css grid issue but wondered if you could assist?

    https://workpei.ca/economic-dashboard/employment/

    Thanks

    Log in to Reply
    • Brad Dalton says

      September 12, 2018 at 12:57 am

      Hello Scot

      Add

      white-space: nowrap;

      like this :

      .tabs-menu a {
          background-color: #f5f5f5;
          border-radius: 6px 6px 0 0;
          display: grid;
          font-size: 20px;
          text-transform: uppercase;
          margin-right: 2px;
          padding: 8px 12px 6px;
          border-bottom: none;
          white-space: nowrap;
      }

      Othwerwise, add it to another class.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
 

Loading Comments...
 

You must be logged in to post a comment.