YellowPencil allows you to add CSS, Javascript, or HTML code directly to the editor. If you want to personalize the editor to fit your needs, this available with these tools.

Header Hook

Add the following code to the theme’s function file and type your code inside the function.

function myprefix_header_hook(){
 // Your code here.
}

add_action('yp_editor_header', 'myprefix_header_hook');

Footer Hook

Add the following code to the theme’s function file and type your code inside the function.

function myprefix_footer_hook(){
 // Your code here.
}

add_action('yp_editor_footer', 'myprefix_footer_hook');

Custom Javascript Hook

Don’t add script tag, directly add your javascript code.

function myprefix_javascript_hook() {
 echo "// Your javascript code here.";
}

add_action('yp_js_hook', 'myprefix_javascript_hook');

Custom CSS Example

You can use header or footer hook to add custom CSS code to the editor.

function myprefix_header_hook() {
 
  // this code will make green color the top bar of the right panel.
  echo "<style>
  .yp-select-bar .yp-editor-top{
    background-color:green;
  }
  </style>";

}

add_action('yp_editor_header', 'myprefix_header_hook');

Last updated on June 14, 2021