Published on May 23, 2019

How to increase the font size of code in Oxygen’s code editor

Sridhar Katakam

From the “Why didn’t I do this sooner?” series..

Whoever has decided to come up with 13px font size for the code areas in Oxygen must be in their 20s with excellent eyesight.

I am more like this though:

We can bump up the font size of the code text to 18px (or whatever you want it to be) by overriding Oxygen’s CSS using the oxygen_enqueue_ui_scripts action hook.



Step 1

Install and activate My Custom Functionality plugin.

Connect to your hosting account using a FTP client or hosting panel’s file manager and navigate to the site’s



Create a file named say, oxy-editor-custom.css in there having the following code:

/* Bump up the font-size of code in Oxygen's code areas from the default 13px to 18px */
.oxygen-sidebar-code-editor-wrap .CodeMirror {
font-size: 18px !important;

Edit plugin.php and add the following inside the custom_enqueue_files() function:

add_action( 'oxygen_enqueue_ui_scripts', 'custom_oxy_editor_css' );
* Loads CSS in Oxygen editor.
function custom_oxy_editor_css() {
if ( defined( 'SHOW_CT_BUILDER' ) ) {
wp_enqueue_style( 'oxy-editor-custom', plugin_dir_url( __FILE__ ) . 'assets/css/oxy-editor-custom.css' );

That’s it!