Kama Quicktags: Code on your website pages

The initial issue I encountered while creating this website was to insert PHP, CSS, HTML, or other code into a post and, of course, to highlight it. Despite being familiar with WordPress for over half a year, I had never needed to insert codes into posts.

Inserting code doesn't require much effort - it just requires replacing HTML entities with special characters (for example: changing < to &lt; or & to &amp;), which can be easily done using the well-known notepad++. However, constantly converting the code is very inconvenient. I wanted to be able to perform this conversion directly in the WordPress editor.

In order not to reinvent the wheel, I did some googling and found a couple of contenders, but it turned out that they changed characters into special symbols when viewing the page, i.e. when generating the page, they would find <code> </code> or <pre> </pre> tags and transform everything inside. I immediately disliked this approach due to the unnecessary server load and the fact that I couldn't switch to the visual editor without damaging the code.

Enlightened people will say that WordPress itself does such substitution if you insert code into the visual editor and switch to the HTML editor, or simply save the page from the visual editor, and they would be right. However, along with the conversion, WordPress will remove all unnecessary spaces and tabs required for clear code readability. In order to fully preserve the code structure, it needs to be enclosed in the <pre> </pre> tags. However, enclosing text in specific tags can only be done from the HTML editor. If you insert code into the HTML editor, WordPress won't make any character substitutions in the code, and worse - it will remove various tags when switching to the visual editor. It's all quite complicated. If you've tried to insert code, you probably know what I'm talking about.

In short, the only right thing to do was to replace all HTML symbols with special characters in Notepad, insert the resulting code into the WordPress HTML editor, and enclose this code in the <pre> </pre> tags.

I also missed buttons for quickly inserting tags in the HTML editor. At the very least, a button was needed to insert <pre> </pre>.

Quicktags API

WordPress Quicktags API - since version 3.3, WP allows inserting buttons through the API - it's simple. My simple plugin is based on this method.

Download the Plugin

Download: kama-quicktags-v2.2
Converts special characters and adds buttons to the HTML editor.
Downloaded: 16, size: 1.7 KB

Installation:

  1. Upload the folder from the archive (kama-quicktags) to the plugins directory (wp-content/plugins).

  2. Activate the plugin.

    After activating the plugin, various buttons will appear in your HTML editor. To remove or add your own buttons, open the file kamaquicktags.php and add your own according to the description inside the file:

    QTags.addButton( 'identifier' , 'name', '<opening tag>', '</closing tag>', 'v', 'description', position(number) );

    For example, to add an H3 button, insert the following code:

    QTags.addButton( 'h3','H3','<h3>','</h3>', 'p', '', 999 );

--

I'll remind you, the plugin file can be edited directly from the admin panel: Plugins -> Editor

How do you insert code into your blogs?