Own buttons (HTML view – Wordpress)

As I have little “break-in“ to my web-page/blog, certain posts are really big/long and they require many different, personal (own) tags. This relates, for example, to Titles (which have a dashed line at top and bottom and a bigger font), pictures, lists, font colour and similar. From the beginning of my web-site I have tried to be precise and pedantic (as befits my general manner, maybe a little excessively :)) and all my posts are written “by hand“ in HTM view in Wordpress. What do I mean “by hand“? For example, if I want to add a picture to my post, I must add the following code and change it’s picture location, for each and every single picture, particulary.

<p style="text-align: center"><a href="http://www.svebee.com/images/phpmysql_2/original/15.jpg"><img style="margin: 5px" src="http://www.svebee.com/images/phpmysql_2/15_thumb.jpg" alt="PHP & MySQL vodič - osnove" /></a></p>

This is one of the Titles in PHP guide.

<a name=skupovi_znakova_strings><p style="font-size: 1.5em; border-top:1px dashed black; border-bottom:1px dashed black">Skupovi znakova (eng. strings) | <strong><a href="#"><font color=blue>strings.php</font></a></strong></p></a>

And so on, they are long and they require very much patience and I need them, for the “unique“ look of my website, to all be in the same style, all titles are the identical, all commands are equal, the same colour and so on. If you write in “Visual” layout, Wordpress will automatically add many codse for nothing. Also, I like to have everything under “my control“ so I can directly edit every part of my post, font colour or some picture description. The advantage of this is, as I have said, precise control of and valid web-pages (with the presumption you know how to write valid HTML/CSS code).

The disadvantage of this way, is that the time taken to write every single post is very long. As I wanted to speed it up a little bit, I have copied all the more important tags into one .txt document at my Desktop, so I could easily copy/paste it into my posts, and then I just change my Title, picture location/descirption and similar. However, that was also a little too slow because of constant “jumping“ from one window to another, selecting, copying and so on. I was looking for some solution, so I could add my own buttons in HTML view in Wordpress, for example, the Title open/start tag would be:

<a name=anchor><p style="font-size: 1.5em; border-top:1px dashed black; border-bottom:1px dashed black">

and end/closed tag would be:

</p></a>

just like this, for example, bold, italic tag and similar which are built-into Wordpress. After a little searching (with Google, of course), I have found it. You need to edit a JavaScript file in wp-includes/js/quicktags.js and copy the 7 lines of code for “add your own button”. Since there are already some buttons, it’s enough to copy them and adapt them for your own needs, they’ll be automatically added in HTML layout in Wordpress. So we have:

1
2
3
4
5
6
7

edButtons[edButtons.length] =
new edButton('ed_code'
,'code'
,'<code>'
,'</code>'
,'c'
);

We copy the following part, and paste it underneath and change it to suit your own needs.
Line 1 and 2, leave as they are, you can just change extension after “ed_“ in something meaingful, for example for “spoiler alert“ I put just “spoiler“.
Line 3 is the name of that button – what will write in HTML view in Wordpress on it.
Line 4 is start tag (open tag).
Line 5 is end tag (closed tag).
Line 6 you can adjust for your own convenience, for example, beginning letter of the tag.

1
2
3
4
5
6
7

edButtons[edButtons.length] =
new edButton('ed_spoiler'
,'spoiler'
,'[spoiler name=""]'
,'[/spoiler]'
,'sp'
);

The code, which I put, is my button for insert a “spoiler alert” (a spoiler is the content which mustn’t be seen at first view, for example, the end of some movie/game) in my post, I select my text and press my button named “spoiler“ and then the tags are automatically added around it (the text).

If you are interested in colon cleanse, you may want to check out this colon cleanse information page which will have all the free information you'll need about colon cleanse.