Make The Code Editors Taller
One of the things that annoys me every time I am adding or editing code in Divi is the short height of the Custom CSS editor or the integration code editors in the Divi Theme Options. It simply is not efficient and practical, so I came up with the solution for you! In this tutorial, I will show you how to modify the Divi CSS and integration code editors to increase the minimum height and make the height draggable.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Assistant!
Why work so hard? You can do this easily with a setting in our Divi Assistant plugin!
How To Increase The Height Of The Divi Code Editors Using…Code!
If you do not have our Divi Assistant plugin or are not a member of our Divi Adventure Club membership, you can increase the height of the Divi and Extra theme code editors by incorporating specific PHP snippets into your theme files. Below, we provide two separate PHP code snippets, one for each theme, to help you adjust the editor height.
The code does two things. First, it adds a draggable height feature to the code editors in the Divi Theme Options for custom CSS. Secondly, it sets a minimum height by default of 400px. You can change that 400px value in the code if you prefer a different height.
Keep in mind, the custom code method is for those who are more experienced, so just please be careful when adding PHP code to your site, as even small errors can very easily crash your site. We have links to instructions here about where to add the code for your convenience.
Where To Paste The PHP Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the PHP tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the functions.php file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Code Snippet Plugins
Otherwise, install a dedicated code snippet plugin, create a new snippet, and paste this code into the PHP code editor.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom PHP code snippets in Divi.
Divi Theme
add_action( 'init', function() {
add_action('admin_enqueue_scripts', 'pac_divi_code_editor_resize_and_min_height');
});
function pac_divi_code_editor_resize_and_min_height()
{
$css_admin_side = "";
// For Custom CSS code editor in Divi Theme Options
$css_admin_side .= "#divi_custom_css + .CodeMirror-wrap { min-height:400px;resize: vertical;}";
// For Integration code editor in Divi Theme Options
$css_admin_side .= "#divi_integration_head + .CodeMirror-wrap, #divi_integration_body + .CodeMirror-wrap, #divi_integration_single_top + .CodeMirror-wrap, #divi_integration_single_bottom + .CodeMirror-wrap { min-height:400px;resize: vertical;}";
// Register Inline CSS
wp_register_style('pac-divi-code-editor-resize-and-min-height', false, [], '1.0.0');
wp_enqueue_style('pac-divi-code-editor-resize-and-min-height');
wp_add_inline_style('pac-divi-code-editor-resize-and-min-height', $css_admin_side);
}Extra Theme
add_action( 'init', function() {
add_action('admin_enqueue_scripts', 'pac_extra_code_editor_resize_and_min_height');
});
function pac_extra_code_editor_resize_and_min_height()
{
$css_admin_side = "";
// For Custom CSS code editor in Extra Theme Options
$css_admin_side .= "#extra_custom_css + .CodeMirror-wrap { min-height:400px;resize: vertical;}";
// For Integration code editor in Extra Theme Options
$css_admin_side .= "#extra_integration_head + .CodeMirror-wrap, #extra_integration_body + .CodeMirror-wrap, #extra_integration_single_top + .CodeMirror-wrap, #extra_integration_single_bottom + .CodeMirror-wrap { min-height:400px;resize: vertical;}";
// Register Inline CSS
wp_register_style('pac-extra-code-editor-resize-and-min-height', false, [], '1.0.0');
wp_enqueue_style('pac-extra-code-editor-resize-and-min-height');
wp_add_inline_style('pac-extra-code-editor-resize-and-min-height', $css_admin_side);
}How To Increase The Height Of The Divi Code Editors Using Divi Assistant
Here are the simple steps to increase the height of the Divi code editors using our popular Divi Assistant plugin:
- Install and activate the Divi Assistant plugin
- Click on the Code Helper tab and the Settings subtab
- Enable the settings
I hope that is easy enough for you! 😉
Learn More About Divi Assistant!
Our flagship "helper" plugin has (141) main features to make your life easier when working with Divi!
0 Comments