Get the Official WPSaviour App Now!

BlogTutorials

Adding WordPress Custom QuickTags

The WordPress QuickTags API permits you to add buttons to the WordPress admin textual content material editor. To be honest, the textual content material editor may be a lot much less used than the rich editor, by the best way during which together with quick tags could also be pretty useful when repeating the similar duties pretty sometimes.

Proper right here is the itemizing of default quick tags provided in WordPress:

wordpress-quick-tags

As you may even see you could create quite a few form of buttons, assign an entry key to each of them and description your private personalized code merely.

In order so as to add a quick tag, you need to hook a personalized function to the admin_print_footer_scripts hook. Primarily, the idea is in order so as to add some personalized javascript code all through the admin footer. The brief tags API provides a builtin function known as addButton:

QTags.addButton( id, present, arg1, arg2, access_key, title, priority, event );

This function accepts eight arguments:

  • id: (string) (required) The html id for the button
  • present: (string) (required) The html value for the button
  • arg1: (string) (required) Each a starting tag to be inserted like “<span>” or a callback that is executed when the button is clicked
  • arg2: (string) (optionally obtainable) Ending tag like “</span>”. Depart empty if tag doesn’t should be closed (i.e. “<hr />”)
  • access_key: (string) (optionally obtainable) Shortcut entry key for the button
  • title: (string) (optionally obtainable) The html title value for the button
  • priority: (int) (optionally obtainable) A amount representing the required place of the button throughout the toolbar. 1 – 9 = first, 11 – 19 = second, 21 – 29 = third, and so forth
  • event: (string) (optionally obtainable) Limit the button to a specific event of Quicktags, add to all conditions if not present

This is a full snippet that gives a WPSaviour hyperlink to the editor:

// Add buttons to html editor
add_action('admin_print_footer_scripts','rc_quicktags');
function rc_quicktags() { ?>
	<script language="javascript" type="textual content material/javascript">
		/* Together with Quicktag buttons to the editor WordPress ver. 3.Three and above
		* - Button HTML ID (required)
		* - Button present, value="" attribute (required)
		* - Opening Tag (required)
		* - Closing Tag (required)
		* - Entry key, accesskey="" attribute for the button (optionally obtainable)
		* - Title, title="" attribute (optionally obtainable)
		* - Priority/place on bar, 1-9 = first, 11-19 = second, 21-29 = third, and so forth. (optionally obtainable)
		*/
		QTags.addButton( 'WPsaviourlove', 'WPsaviourlove', '<a href="http://wpsaviour.com" purpose="_blank">', '</a>', 'w' );
	</script>
<?php
}

Proper right here is the result:

wordpress-quicktags-api

To utilize that quick tag, click on on as quickly as on it, it might probably insert the beginning of the <a> tag, add some textual content material, and click on on the button as soon as extra, this may increasingly add the closing </a> tag. That’s it!

Download The WPSaviour App Now

Related posts
Beginner’s GuideBlogShowcase

7 Best Shopify Alternatives in 2020 (Cheaper and More Powerful)

Beginner’s GuideBest WordPress PluginsBlog

14 Best AI Chatbots Software for Your Website (Comparison)

Beginner’s GuideBlogTips

Magento vs WooCommerce – Which one is Better? (Comparison)

Beginner’s GuideBlogTips

12 Best Calculator Plugins for Your WordPress Site

Sign up for our Newsletter and
stay informed

Fear Of Missing Out?

Sign up with your email address to receive WordPress tips and updates
SUBSCRIBE NOW
Terms and Conditions apply
close-link
Click Me