New to the community? Start here

Divi Theme Tabs Module. Make Second Tab The Active Tab

I hope this is okay. I think I have seen support question that reference other themes/plugins/items. If not, excuse me and delete this question. Thanks.

Is anyone familiar with the Divi Theme by elegantthemes.com? Love the theme, hate their support!

I am using the Tabs module for this customers schedule section. For some reason, the customer insists that Wednesday (the tabs are Tuesday | Wednesday | Thursday) be the active them on page load. (See ircsummit.wpengine.com – click the scroll dot number 5)

Any chance some guru out there can tell me how to achieve this feat?

Many thanks in advance!

Sat, 19 Dec 2015 13:31:13
  • Adam
    • Support Gorilla

    Hello Derek Brown,

    I hope you’re well today and thank you for your question!

    I hope this is okay. I think I have seen support question that reference other themes/plugins/items. If not, excuse me and delete this question. Thanks.

    I’ll be happy to help as much as possible. We do support pretty much anything that’s WordPress-related and the only limitation is that in some cases we may simply be not able to provide “full” solution as we may e.g. not have access to particular theme or plugin or an amount of custom coding work necessary would be far beyond the scope of support forum.

    That said, don’t worry about it :slight_smile: Anytime you need any help with WordPress-related issues, please ask your questions and either me or my colleagues here – we will do our best to help you!

    As for the issue itself. I think this should be doable either with some theme settings or with some additional JavaScript snippet. I’d start with this:

    function wpmu_divi_tab_activate() {
    
?>
    
<script type="text/javascript">
    
jQuery(function($) {
    
var task = setInterval(function() {
    
$('.et_pb_tab_1').addClass('et_pb_tab_acitve');
    
}, 500);
    
});
    
</script>
    
<?php
    
}
    
add_action('wp_footer', 'wpmu_divi_tab_activate');

    In order to apply this to your site, please add this code to your current theme’s functions.php file (preferably at the very end but before the closing “?>” tag if there is any). I’d strongly suggest adding this by editing file with a “clean text” editor (such as e.g. Notepad++/Win, Sublime/Mac, Kate/Linux or similar) and accessing it via FTP instead of using WP Dashboard’s built-in theme file editor. This will let you revert changes easily in case anything went wrong.

    Would you give it a try? In case it didn’t help, some minor adjustment to the code may be necessary, so just let me know please if it worked for you!

    Best regards,

    Adam

  • RBAdmin
    • The Incredible Code Injector

    Greetings. Thanks so much for trying. That did NOT work. I am an extreme novice at Javascript, but I don’t understand why the action would be wp_footer?

    FYI, I did correct the mispelling in this line $(‘.et_pb_tab_1’:wink:.addClass(‘et_pb_tab_acitve’:wink:;

    – acitve is spelled wrong, so I changed it to active.

    Any suggestions?

  • Adam
    • Support Gorilla

    Hello Derek!

    I’m sorry for that misspelling, that’s great you notice that!

    I am an extreme novice at Javascript, but I don’t understand why the action would be wp_footer?

    That’s the simplest and fastest way to output custom JavaScript to WordPress site. Other than that you could create a separate file with your JS code and then use “wp_enqueue_script()” function to include it with your theme.

    The hook could be of course also “wp_header” or even something different but it’s a good practice to call such scripts in a footer (partially to keep source code in order, partially to avoid conflicts and finally – to make sure that it has been called after elements it aims to alter).

    I’m sorry it didn’t work for you yet, I haven’t had a way to test it unfortunately as I do not have access to Divi theme and since for many of us its weekend there’s no many of my colleagues around at the moment that I could ask.

    However, I’m pretty sure what’s not working well here is not “wp_footer” hook but JS code itself. I’m not quite aware of how those tabs are generated in your theme. I did access your site again though and I can see that:

    – the “Wednesday” tab is active now as expected

    – there’s this code added to the site:

    <script type="text/javascript">
    
jQuery(function($) {
    
var task = setInterval(function() {
    
$( "#fp-agenda-tabs" ).tabs( {active:1});
    
}, 500);
    
});
    
</script>

    I assume then that you were able to tweak my code and make it work, am I right? Let me know please if you still need an assistance!

    Best regards,

    Adam

  • RBAdmin
    • The Incredible Code Injector

    My bad. I thought my code worked., but infact – it did not. I did however finally find the file that handles the DIVI tabs. I thought wrongly that it might be as easy as change the 0 to a 1 in the [], but that did not work. Any suggestions? Here is the code for the Divi Tabs

    if ( $et_pb_tabs.length ) {
    
$et_pb_tabs.et_pb_simple_slider( {
    
use_controls   : false,
    
use_arrows     : false,
    
slide          : '.et_pb_all_tabs > div',
    
tabs_animation : true
    
} ).on('et_hashchange', function( event ){
    
var params = event.params;
    
var $the_tabs = $( '#' + event.target.id );
    
var active_tab = params[0];
    
if ( !$the_tabs.find( '.et_pb_tabs_controls li' ).eq( active_tab ).hasClass('et_pb_tab_active') ) {
    
$the_tabs.find( '.et_pb_tabs_controls li' ).eq( active_tab ).click();
    
}
    
});
    

    
$et_pb_tabs_li.click( function() {
    
var $this_el        = $(this),
    
$tabs_container = $this_el.closest( '.et_pb_tabs' ).data('et_pb_simple_slider');
    

    
if ( $tabs_container.et_animation_running ) return false;
    

    
$this_el.addClass( 'et_pb_tab_active' ).siblings().removeClass( 'et_pb_tab_active' );
    

    
$tabs_container.data('et_pb_simple_slider').et_slider_move_to( $this_el.index() );
    

    
if ( $this_el.closest( '.et_pb_tabs' ).attr('id') ) {
    
var tab_state = [];
    
tab_state.push( $this_el.closest( '.et_pb_tabs' ).attr('id') );
    
tab_state.push( $this_el.index() );
    
tab_state = tab_state.join( et_hash_module_param_seperator );
    
et_set_hash( tab_state );
    
}
    

    
return false;
    
} );
    
}

  • Predrag Dubajic
    • Support

    Hi Derek,

    Since you’re already poking through theme files, can you try editing functions.php, in there search for et_pb_tab_active and et_pb_active_content.

    You should find these two lines of code:

    ( 1 == $i ? ' class="et_pb_tab_active"' : '' ),

    and

    ( 1 === count( $et_pb_tab_titles ) ? ' et_pb_active_content' : '' )

    In both of those try changing 1 to 2 and see if that works.

    Best regards,

    Predrag

  • RBAdmin
    • The Incredible Code Injector

    2.5.9, and no, that line is not in there. A search for pb_tab_active reveals only one place of existence in the functions.php file

    printf(
    
".et_pb_tabs_controls li{ padding: %spx %spx %spx; } .et_pb_tabs_controls li.et_pb_tab_active{ padding: %spx %spx; } .et_pb_all_tabs { padding: %spx %spx; }n",
    
esc_html( $padding_tab_active_top ),
    
esc_html( $value ),
    
esc_html( $padding_tab_active_bottom ),
    
esc_html( $padding_tab_top_bottom ),
    
esc_html( $value ),
    
esc_html( $padding_tab_content ),
    
esc_html( $value )
    
);
    
break;

    File enclosed in text format. thanks.

  • Predrag Dubajic
    • Support

    Hi Derek,

    I was checking on version 2.3.4 and now I managed to get newer version and can see there are quite a few changes in there.

    Can we try with the Adam’s approach again using jQuery but try adding something this now to your functions:

    function wpmu_divi_tab_activate() {
    
?>
    
<script type="text/javascript">
    
jQuery( document ).ready(function() {
    
jQuery( ".et_pb_tabs_controls .et_pb_tab_0" ).removeClass( "et_pb_tab_active" );
    
jQuery( ".et_pb_tabs_controls .et_pb_tab_1" ).addClass( "et_pb_tab_active" );
    
jQuery( ".et_pb_all_tabs .et_pb_tab_0" ).removeClass( "et_pb_active_content" );
    
jQuery( ".et_pb_all_tabs .et_pb_tab_1" ).addClass( "et_pb_active_content" );
    
});
    
</script>
    
<?php
    
}
    
add_action('wp_footer', 'wpmu_divi_tab_activate');

    Best regards,

    Predrag