Enable TinyMCE Code Formatting Buttons In WordPress Visual Editor

In this lesson you will see how to add the Pre and Code buttons on TinyMCE toolbar (with customizable shortcuts) present in WordPress visual editor on ADD NEW/EDIT content screens. 

TinyMCE Code Formatting is the new WordPress plugin that makes this thing possible on WordPress post and post type edit screens.

Start by installing ‘TinyMCE Code Formatting’ plugin in WordPresss

Upon activation, visit your admin area dashboard Settings -> TinyMCE Code Formatting screen and you can either press a key combination (for PRE and CODE buttons) or type it manually in the given fields.

TinyMCE Code Formatting 2

Remember: Some combinations may conflict with the default WordPress editor or browser shortcuts. So before creating any new combination don’t forget to check it on your instance, see this plugin’s download page.

Default shortcuts for the buttons are:

  • Ctrl+Q (Pre)
  • Ctrl+D (Code)

Now visit your admin area dashboard Posts -> Add New screen or open any old post/post type to edit.

TinyMCE Code Formatting 1

You will be noticing the plugin has added two new buttons (PRE & CODE) on the last of first row of TinyMCE toolbar. Use key combinations to check whether its shortcuts are working or not.

Leave a Reply