How to Create Custom Tabs with GenerateBlocks Pro

,
YouTube video

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://permaslug.com/go/generateblocks
Get GeneratePress Pro: https://permaslug.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 summarize the goings on here on Permaslug, share announcements, and other pertinent information. I hate garbage emails as much as you and promise not to contribute anymore to it.

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