QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • 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
    5 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`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

6 years ago 1 Comment WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
Related Articles
  • WordPress Set HTML Editor as Default
  • WordPress Set Visual Editor as Default
  • Adding Buttons to WordPress Visual Editor
  • Add Buttons to WordPress Text Editor
  • Understanding WordPress User Roles
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license