Earlier, we gave you tips to style posts in thesis wordpress theme. Be it thesis or any other theme if you place tags before and after text manually every time, it’s a painful procedure. So instead, if you add buttons to perform actions which you need for formatting posts very often, it will save a lot of time and energy.
Let’s use a specific example now to explain things the easy way. Here’s the normal procedure to format some text as a “Note” in thesis theme
<p class="note">Testing for Notes</p>
Here’s the result of the above:
Testing for Notes
Now, suppose you have to repeat it five times in the post it becomes hectic typing it again or even copy pasting the tags. So, why not add a button to the editor itself. Here’s a screenshot of the default set of buttons available in WordPress HTML editor.
Most of us don’t know that buttons can both be added and removed from this panel. Here’s how:
First, create a backup copy of the quicktags.dev.js and quicktags.js files for safety reasons. These files are located in the wp-includes/js/ folder.
Now edit the quicktags.dev.js file. Once you open the file you’ll notice separate code for each button similar to the following.
edButtons[edButtons.length] = new edButton('ed_strong' ,'b' ,'<strong>' ,'</strong>' ,'b' );
So, all you now need to do is recreate a similar piece of code for every button you want and place it there. You may also delete a button by removing the code from this file. Now, let’s understand what each element in the code means and how to create a new button. We’ll be creating a new button which lets us create a “Note.”
First two lines identify the button. Third line is the display name for the button. Fourth and Fifth lines have the opening and closing HTML tags for the button. This is what the button will primarily do. When you first click the button the opening tag will be inserted and on next click the closing tag. Alternatively, if you select the text before clicking the button both the tags will be applied before and after text. Last line of code provides internal name for the button. So, here’s our code for the “Note” button.
edButtons[edButtons.length] = new edButton('ed_note' ,'note' ,'<p class="note">' ,'</p>' ,'note' );
Once the above code is inserted save the file. Delete the old quicktags.js file and rename the quicktags.dev.js to quicktags.js And you’re done.
There is no limit to the amount of customization we can do in WordPress, in order to assist us in our tasks and save time while doing them. Let us know via comments if this post helped you enhance your blogging skills.
Post image Credit.