How to Increase the Editor Height in GeneratePress Hooks

GeneratePress is a fantastic WordPress theme and the GP Elements are one of the most important advantages of its premium version. Hooks are one of several types of Elements. They allow you to insert code into sections of your WordPress website.

The code may be applied to the entire website, or only to certain posts, pages, taxonomy archives or other content types. What kind of code may be inserted in a hook? HTML, CSS, PHP, javascript or shortcodes, the possibilities are enormous. The conditional logic available in GP Hooks make it an extremely useful tool for websites with a complex structure.

What’s wrong with GP Hooks then? Nothing. However, if you have a large, ultra high-resolution monitor, you may find that the height of the editor window is not optimal. The full size of your screen will not be utilized, there will be an area of unused space. The theme must be also convenient to use by people with smaller screens, which means that the developer had to make some compromises. If you’d like to enter a little more code in the hooks, you will need to scroll within the hook editor container. Not a big deal, but we can be optimize it for your screen.

How to change the hook editor height, then? You can easily do that by adding custom CSS for the admin area. The commonly used method for adding additional CSS in the Customizer will not work, as it applies only to the front end. You need to force the CSS to appear the CSS code in the admin area and the following PHP function will achieve that:

add_action('admin_head', 'my_custom_admin_css');

function my_custom_admin_css() {
  echo '<style>
   #generate_premium_elements .element-settings.hook .CodeMirror {
    height: 700px;
    } 
  </style>';
}

If you use a child theme of GeneratePress (which is always a good idea, with no disadvantages) you can simply copy the code and paste it into the functions.php file of your child theme, commonly found at /wp-content/themes/generatepress_child. You will need FTP-software (e.g. WinSCP, Filezilla, Cyberduck, etc.) and a simple text editor. If you haven’t disabled file editing through the WordPress dashboard, you can also simply go to Appearance > Theme File Editor > functions.php.

If you do not use a child theme (though it is a very good idea to always use one), the functions.php file will be overwritten with the next theme update, so adding the code there doesn’t make sense. In this case, you can use a plugin like, for example, the popular Code Snippets. Simply create a new snippet and add the PHP code there.

And that’s it. I have found 700 pixels to be the sweet spot for a 27-inch screen, but your mileage may vary and you might want to adjust the height for your screen.