![\"TinyMCE](\"https:\/\/kwwd.co.uk\/blog\/wp-content\/uploads\/2024\/02\/firefox_Q0Axs2g51n.png\")
<\/p>\nIf you want to add custom formatting to your content but don’t want to have to go into the HTML view and manually type it each time, this code snippet is for you!<\/p>\n
<\/p>\n
Using the following code snippets you’ll be able to create your own button for the TinyMCE editor and add your <pre><code> tags including associated classes to style for the language of your choice<\/p>\n
![\"Code](\"https:\/\/kwwd.co.uk\/blog\/wp-content\/uploads\/2024\/02\/firefox_8uu4SwaIYR.png\")
<\/p>\n
Choosing the above “PHP with Line Numbers” will insert the following code where your cursor is:<\/p>\n
<pre><code class=\"language-php line-numbers\">\/\/ Code<\/code><\/pre><\/code><\/pre>\nYou can then replace the “\/\/code” text with your own custom code.<\/p>\n
So, how do we achieve this?<\/p>\n
In your functions.php file add the following code which will create a new TinyMCE button with an id of “codeinsert”<\/p>\n
\r\n\/** TINYMCE STUFF **\/\r\n\r\nadd_action( 'init', 'my_custom_tinymce_init' );\r\n\r\n\/\/ Only Run This If We' have a user with a role that can edit posts\r\nfunction my_custom_tinymce_init() {\r\n if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {\r\n return;\r\n }\r\n\r\n add_filter( 'mce_external_plugins', 'my_custom_tinymce_plugins' );\r\n add_filter( 'mce_buttons', 'my_custom_tinymce_buttons' );\r\n}\r\n\r\n\/\/initialise our javascript code and load it\r\nfunction my_custom_tinymce_plugins( $plugins ) {\r\n $plugins['codeinsert'] = esc_url(get_stylesheet_directory_uri()) . '\/js\/my-tinymce.js'; \/\/ Replace with your JS file path\r\n return $plugins;\r\n}\r\n\r\n\/\/ Add the button to the beginning of the toolbar\r\nfunction my_custom_tinymce_buttons( $buttons ) {\r\n array_unshift( $buttons, 'codeinsert' ); \r\n return $buttons;\r\n}\r\n\/** END TinyMCE Code **\/\r\n<\/code><\/pre>\nWe then need to create the code that will create the dropdown menu. In the above example, our child theme has a folder called “js” which contains a javascript file called “my-tinymce.js”. This JavaScript file contains all of the styles we will insert from the dropdown:<\/p>\n
(function () {\r\ntinymce.PluginManager.add('codeinsert', function (editor) {\r\neditor.addButton('codeinsert', {\r\ntype: 'listbox',\r\ntext: 'Insert Code',\r\nicon: false,\r\nonselect: function (e) {\r\neditor.insertContent(this.value());\r\n},\r\nvalues: [\r\n{ text: 'PHP with Line Numbers', value: '<pre><code class=\"language-php line-numbers\">\/\/ Code<\/code><\/pre>' },\r\n{ text: 'CSS with Line Numbers', value: '<pre><code class=\"language-css line-numbers\">\/\/ Code<\/code><\/pre>' },\r\n{ text: 'SQL with Line Numbers', value: '<pre><code class=\"language-sql line-numbers\">\/\/ Code<\/code><\/pre>' },\r\n{ text: 'HTML with Line Numbers', value: '<pre><code class=\"language-html line-numbers\">\/\/ Code<\/code><\/pre>' },\r\n{ text: 'Plain PHP', value: '<pre><code class=\"language-php\">\/\/ Code<\/code><\/pre>' },\r\n{ text: 'Plain CSS', value: '<pre><code class=\"language-css\">\/\/ Code<\/code><\/pre>' },\r\n{ text: 'Plain SQL', value: '<pre><code class=\"language-sql\">\/\/ Code<\/code><\/pre>' },\r\n{ text: 'Plain HTML', value: '<pre><code class=\"language-html\">\/\/ Code<\/code><\/pre>' },\r\n\/\/ Add more code options as needed\r\n]\r\n});\r\n});\r\n})();<\/code><\/pre>\nNote that for the above code to function correctly you MUST have the Classic Editor plugin<\/a> enabled – this will remove all Guttenberg block functionality from the Posts\/Page edit pages.<\/p>\n