Changing the default ‘Select Page’ text in the centered mobile menu of Divi is handled by functions.php. However, placing functions into your child theme functions.php can be a headache. Fortunately, WP has a way to do it.
View the video here, code below, and description in between.
First, kudos to this page (http://code.tutsplus.com/tutorials/a-guide-to-overriding-parent-theme-functions-in-your-child-theme–cms-22623). Rachel MCollin lays out a clear explanation on how this joker works so check out the full page and follow her on twitter. I just did.
The bottom line is that when you just ‘copy and paste’ a function, it breaks your site because the name already exists. It all hinges on load order and conflicting function names. #coding101
Since ET doesn’t use the Pluggable Function option, the only option we can use is to de-hook the existing function and then create our own.
So, first, in your child theme functions.php, remove the existing function:
/* first remove the parent function */ function child_remove_parent_function() { remove_action( 'et_header_top', 'et_add_mobile_navigation' ); } add_action( 'wp_loaded', 'child_remove_parent_function' );
What we’re doing is creating a new (uniquely named) function which uses the WordPress remove_action function to the et_add_mobile_navigation in the parent functions.php.
With that out of the way, we then create our new function, which is simply the original one with a new name. Check out the code below:
/* first remove the parent function */ function child_remove_parent_function() { remove_action( 'et_header_top', 'et_add_mobile_navigation' ); } add_action( 'wp_loaded', 'child_remove_parent_function' ); /* now load new one with new custom name, to not conflict with parent function name */ function et_add_child_mobile_navigation(){ if ( is_customize_preview() || ( 'slide' !== et_get_option( 'header_style', 'left' ) && 'fullscreen' !== et_get_option( 'header_style', 'left' ) ) ) { printf( '<div id="et_mobile_nav_menu"> <div class="mobile_nav closed"> <span class="select_page">%1$s</span> <span class="mobile_menu_bar mobile_menu_bar_toggle"></span> </div> </div>', esc_html__( 'Menu', 'Divi' ) ); } } add_action( 'et_header_top', 'et_add_child_mobile_navigation' );
Build Beautiful.
Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.
Hi logan, is there a way to apply these changes to the divi theme without using a child theme?
Yes! The easiest would be to add the code to Divi’s Custom CSS section (Divi –> Theme Options) or install a plugin, like Simple Custom CSS (https://wordpress.org/plugins/simple-custom-css/). I have used both with success on non child-theme installations.
That’s great, kindly help me with the code for non-child theme installations?