Implement Custom HTML & CSS with the Click of a Button – Introducing AddQuicktag

Implement Custom HTML & CSS with the Click of a Button – Introducing AddQuicktag

Implement Custom HTML & CSS with the Click of a Button - Introducing AddQuicktagI use custom CSS and HTML that is not featured in the Visual Editor for a few different reasons. For example, I apply CSS to image attributions, blocks of text, and so on. And you know what? I’m just plain lazy. Going into the HTML editor and manually typing in code is just a step too far for me.

So for some time I have been searching for a plugin that will facilitate my laziness. A quicktags plugin that works with the Visual Editor as well as the HTML editor. I finally found one – and it works a treat.

AddQuicktag

Some of the best things in life are simple, and this is no exception. In a nutshell, AddQuicktag allows you to wrap text with, well, anything:

AddQuicktags
Using AddQuicktags to set up one-click custom CSS styling.
AddQuicktags
Implementing the CSS styling with the click of a button.

Although the plugin’s obvious application is to facilitate the easy implementation of custom CSS stylings or HTML tags that do not feature in the Visual Editor, you are really only limited by your imagination in what you can do. For instance, I often like to embed tweets on my personal blog posts, like this:

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

Embedded Tweet

Before I found AddQuicktag, embedding these tweets was a pain. This was the code:

{code type=html}

(<a title=”Tweet This Quote” href=”https://twitter.com/intent/tweet?text=yourtweethere” rel=”nofollow” target=”_blank”>tweet this</a>).

I’d find the code from the last post I’d used an embedded tweet, paste it into the new post, and replace the tweet text. But now I have set up a shortcut via AddQuicktag:

Embedded Tweet

All I do now when I want to embed a tweet is switch to the HTML editor, hit my new “Embedded Tweet” button, enter the contents of the tweet itself, then hit the button again to close off the tag. Simple!

Download AddQuicktag here.

What Will YOU Use AddQuicktag For?

As I said above, there are multiple potential applications for this plugin, and you could no doubt do plenty of other time saving things with it. If you like the plugin and will be using it, let us know how!

Creative Commons photo courtesy of Jesper Rønn-Jensen

Tags: