WordPress Theme development hacks: body height

By , last updated November 26, 2019

I was working with a full width and height slider page for my new WordPress theme and it just didn’t want to give me 100% screen height. While on a desktop computer it would not matter, on mobile devices I wanted the slider to be as easy as swooping to the next page with a finger, just like in a book.

Searching for an answer, I found out that all elements should have height:100%. Also, you need to make sure that the HTML and body are set to 100% height as well. So I made the changes in my main CSS file:

html, body {
   height: 100%;
}

It did the trick, but later I notice the canvas in the WordPress Visual Editor gradually gets bigger when I write a post, or do anything really. With each button or mouse click the whole edit area got bigger and bigger. I thought it was a bug in WordPress version 4.2, but a test of their built-in themes didn’t have the bug. The Visual Editor height increased dynamically only in my installation.

The reason: height:100% on a body tag in combination with add_editor_style function.

add_action( 'init', 'sf_add_editor_styles' );

function sf_add_editor_styles() {
    add_editor_style( get_stylesheet_uri() );
}

This code in my functions.php was meant to give special style to the TinyMCE visual editor. What I didn’t take into consideration was that it damages the Visual Editor functionality as well.

The solution was to remove add_editor_style function and insert admin CSS code in it’s own admin.css and include it as usual with enqueue_script:

add_action('admin_print_styles', 'sf_admin_styles');

if (!function_exists('sf_admin_styles')){
    function sf_admin_styles() {
        if (is_admin()) {
            wp_register_style("admin_css", get_template_directory_uri() . "/css/admin.css", array(), "1.0", "all");
            wp_enqueue_style('admin_css');
        }
    }
}

Senior Software Engineer developing all kinds of stuff.