Have you ever wanted to create a custome button for the WordPress Editor? (which you use to create posts)
Well I have, so I started searching around the web for a way to do that and I found this.
You can either go look at that site or you can just keep reading because I will be explaining the same stuff in this post.
On your server go to where you keep all your WordPress files and go to
/wp-includes/js/quicktags.js
In there you should find a lot of pieces of code that are similar to this one:
-
edButtons[edButtons.length] =
-
new edButton(‘ed_del’
-
,‘del’
-
,‘<del datetime="’ + datetime + ‘">’
-
,‘</del>’
-
,‘d’
-
);
That is the source code of how to create a button.
Now I’ll explain it.
-
edButtons[edButtons.length] =
-
new edButton(‘ed_del’
This simply says that we will now start making a new button.
-
,‘del’
Is the text displayed on the button.
-
,‘<del datetime="’ + datetime + ‘">’
This is the starting tag of the code you want to be inserted.
-
,‘</del>’
This is the closing tag of the code.
-
,‘d’
-
);
This is just closing down the button. I realy don’t know why the ,’d’ is there but I quote from the site I gave the url to earlier:
This is the back end name of the button.
In some cases in the default JavaScript code you will find this at the end of the buttons:
-
,-1
-
);
The ,-1 at the end of the code os just added if the code that is added to the editor dosen’t need to be closed (Start tag — Closing Tag)
Now I’ll show you an example of how you could create a new button.
This one will make any text that is inside the tags be highlighted.
First you can go to the Design button on your WordPress interface and go to ‘Theme Editor’
and start editing the Stylesheet of your template. (In my template its called stylesheet.css)
Somewhere in there add this code:
-
.highlight{
-
text-align:center;
-
color:#FFFFFF;
-
background:#0066FF;
-
}
Line 2: aligns the text to the center.
Line 3: Sets the color ofthe text to white.
Line 4: Sets the background color to blue
Then go back to the JavaScript file with the button code and add this somewhere under the other button code:
-
-
edButtons[edButtons.length] =
-
new edButton(‘ed_highlight’
-
,‘HighLight’
-
,‘<p class="highlight">’
-
,‘</p>’
-
,‘hl’
-
);
This code will create a button called HighLight that will make any text inside the tags look like this:
This is some highlighted text! It is very easy to change the background and text color from inside the CSS file.
You can even ad some borders by putting in this code in the css:
-
border-color:#333333;
-
border:solid;
Hope you found this tutorial helpfull!
If you liked this post, please donate!
Leave a comment