QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Create a WordPress Post Editor Button to Add Shortcode

Create a WordPress Post Editor Button to Add Shortcode

This post is a part 15 of Creating a WordPress Admin Theme post series.

WordPress provides a post editor to add or edit content of a post or page. WordPress post editor has a lot of buttons attached to it to add or edit text in the editor. This makes adding and editing text in the editor easier as users don’t always have to type the tags and also makes it easier for users who don’t know HTML to create post content.

WordPress comes with two different editors: TinyMCE editor(i.e., visual editor) and Text editor(i.e., HTML editor).

Screen Shot 2015-03-17 at 11.27.35 pm

WordPress also lets you add custom buttons to the visual and text(or HTML) editor. This can be useful in many cases. One such case is while defining a shortcode we can also create a button to add the shortcode tags directly to the editor instead of user always typing the shortcode tags.

To create a button for Text editor we need to use Quicktags API and to add buttons to the TinyMCE editor we have to use JavaScript APIs provided by the TinyMCE library. Here are a couple of tutorials that will help you to learn these APIs.

  • Add Buttons to WordPress Text Editor

    In this tutorial we will see how to add buttons to WordPress text editor. This can be useful while creating a shortcode where you want to add the shor ...Continue Reading

  • Adding Buttons to WordPress Visual Editor

    In this tutorial we will see how to add buttons to the WordPress visual editor. In this tutorial we will create a WordPress plugin which lets you add ...Continue Reading

Mar 18, 2015Narayan Prusty
HTTP/2 Complete Tutorial
Comments: 1
  1. Jean
    7 years ago

    Nice one, thanks for sharing

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

7 years ago 1 Comment WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • WordPress Set Visual Editor as Default
  • WordPress Set HTML Editor as Default
  • Adding Buttons to WordPress Visual Editor
  • Add Buttons to WordPress Text Editor
  • Understanding WordPress User Roles
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license