How to Create Custom Tabs with GenerateBlocks Pro

,
YouTube video

Written By

Jonathan Jernigan

GenerateBlocks Pro is extremely powerful, but there are a few common elements missing such as tabs. In this video, I’ll show you how to create your own custom tabs that use only some basic code I’ll provide for you to make it work.

My new tech stack is going to be Gutenberg with GeneratePress as my primary theme and GenerateBlocks Pro as my block plugin of choice. If you want to see more tutorials like this, please be sure to let me know.

Get GenerateBlocks Pro: https://jonathanjernigan.com/go/generateblocks
Get GeneratePress Pro: https://jonathanjernigan.com/go/generatepress 

Learn more about Taylor Drayson here.

Code used in tutorial below:

Step 1. Add this to functions.php

<style>
    [data-tab-content]{
        display: none;
    }
    [data-tab-content].active{
        display: block;
    }
    [data-tab]{
        cursor: pointer;
    }
    .activeTab{
        background: orange;
		color: white;
    }
    
</style>

<script>
    jQuery( document ).ready(function($) {
        
        $(document).on("click","[data-tab]",function() {
            const element = $(this);
            const tabID = element.data('tab');
            
            const tabContent = $(`[data-tab-content="${tabID}`);
            
            const currentElement = $(`[data-tab].activeTab`);
            const currentTab = $(`[data-tab-content].active`);
            
            
            element.addClass('activeTab');
            currentElement.removeClass('activeTab');
            currentTab.removeClass('active').hide();
            tabContent.addClass('active').show();
            
        });    
    });
    
</script>

Step 2: Add this (if your site doesn’t already have jquery enqueued)

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'jquery' );
} );

Signup for the most inconsistent newsletter this side of the Mississippi

Delivered on a regular-as-I-can basis, I'll share with you the tl;dr of new blog posts and videos, exciting announcements, and other valuable information from around the WordPress ecosphere. You'll never get more than one email per week from me.

"*" indicates required fields

This field is for validation purposes and should be left unchanged.