<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).