Clickable tags for WordPress

Writing posts in WordPress, I got sick of trying to remember what tags I had already created and which ones applied to the post I was writing. Maybe you know the feeling?

I searched around… it looked like the perfect plugin for the job was no longer supported. Simple Tags is also a very good plugin, which I used for a while, but I didn’t want to use quite an extensive plugin for something so small. I was using Simple Tags to add tags to my old posts, the clickable tags in the write panel were a bonus. However, I tagges my old posts for a while, and I have pluginaphobia (fear of using too many plugins that need to be updated and depend on other people for development), so I wanted to find a simpler solution.

I decided that a simple text list of the current tags was enough for me, which I achieved. My husband decided it would be so easy to make them clickable and automatically insert the tags, so he grabbed my computer and started javascripting away!

The result (after I applied a bit of styling) was this:

Screenshot of the tags section in my WP write panel
Screenshot of the tags section in my WP write panel

When you click on one of the tags it adds that tag to the post, just the same as if you’d typed the tag into the box and hit enter.

I would have liked to make it a small plugin, but I haven’t figured it out yet. At the moment I’ve edited one of the core files, wp-admin/edit-form-advanced.php.

The code is,
<?php
$tags = get_tags(array('orderby' => 'name', 'order' => 'ASC'));
echo '<p>Existing tags: ';
foreach ($tags as $tag) {
echo '<a style="margin:3px; line-height:3em; padding:3px 6px; background:#eef; border:1px solid #bbb; text-decoration:none;" href="#" onClick="addTag(\'' . $tag->name . '\'); return false" >' . $tag->name . '</a> ';
}
echo '</p>';
?>
<script type="text/javascript">
function addTag(tag) {
var elt = document.getElementById('newtag');
elt.value = tag;
tag_flush_to_text();
}
</script>

The code goes after the end of <p id="jaxtag"> (line 227, after the whole paragraph that is) and before the start of <div id="tagchecklist">.

There might be a better way to do it, but this works very nicely. Thankyou!

If you know how to make this a plugin this I would appreciate your help! Otherwise, feel free to use this code in your WP setup.

Comments

  1. says

    this looks very good, Kristarella. Well done, both of you.
    If you want to learn how to write a WP plugin, check out Ronald’s series over at Devlounge. He’s really good at explaining things.

    P.S. Ronald is the author of the Ajax Edits plugin that you’ve got installed here ;)

  2. says

    That’s pretty cool.

    Instead of tagging like that, or directly writing articles on my WordPress installations, I use an application called ecto. With ecto I can write articles offline and tag, categorize, etc. and then publish them whenever I go online.

    It’s pretty cool and costs about $20 I think.

  3. says

    Thanks Vivien :)
    I’ve read Ronald’s series. I have written a couple of plugins before. The main problem I’m having with this one is hooking the code into the tag area in the write panel… I think that’s the problem anyway! Anywho, I’ll have another look at it, perhas it will shed some light.

    Cheers dinu, do you find that you wind up with too many tags for them to be useful to anyone. Are you tagging mainly for SEO purposes?

    Hey Matt,
    I tried MarsEdit, but in the end didn’t like it that much, I think it had problems retrieving my categories or something. Does Ecto have any way of knowing what tags you’ve already used? That’s what I mainly wanted this for.

  4. says

    Check out the first 4 images on my flickr, http://www.flickr.com/photos/mpimagery/

    The first is html edit mode where you can hand code if you like.
    The second is WYSIWYG mode where the editor does all the formatting
    The third is the retrieved categories
    The fourth is a list of all the tags you’ve previously used, you enter new ones below it.

  5. says

    Thanks Matt! Those screenshots explain a lot.
    I will look into it more, although I don’t really have a problem writing online. If I write offline I just use a text editor and copy it in later.

  6. says

    Yes, sometimes, too many, but you can remove them with single click :) so no problem ..

    I have a related posts plugin working on my blog which uses tags to to identify possibly related posts :) that is the main use ..

    second, I am too lazy to write tags for every post :P

  7. says

    Nice work!

    To be honest, I’ve never fallen for ‘tags’. They’ve always bugged me, and organising them is a task in itself. As a result, I solely use categories.

  8. says

    Hi,
    Exactly what I was looking for! Thanks. Although “get_tags()” did not seem to work for me, and I had to query the tags from the database directly. However, the tags do not get posted when I click them. I checked the edit-form-advanced.php and found no tag like this . Instead there is . Further, the piece of javascript code that you have suggests that the name of the text input field is “newtag” (re: getElementById(‘newtag’)). In my version of wordpress (2.8.4), the text field is not named ‘newtag’ but ‘new-tag-post_tag’. When I replace the id, the name of the tag is passed to the text box, but is not posted. I placed the code just above the . Am I missing something?

  9. says

    seems like my tags got stripped! Edit: *found no tags like this: [p id="jaxtag"]. Instead there is [div class="jaxtag"].* Further…. *just above the [div class="tagchecklist"]*.. Am I missing something?

  10. says

    bipul — I haven’t used this code for some time (WordPress 2.6 I think) because in WordPress 2.7 they introduced a list of commonly used tags in the tag meta box of the write page anyway. I don’t know how the meta box code might have changed since then.

    I do know that get_tags() still works and gets an array of the tags and their details. I still use that function on my archive page.

    What are you trying to do with this, given that WordPress has its own clicky list of tags on the write page?

  11. says

    Yes, WordPress has its own “most used tags” in the write page. I don’t want “most used”, I want all of my tags to show up there cause I have a specific list of tags and I am trying to build a navigation menu based on these tags. So, I don’t want to add new, but similar, tags (eg. Smart grid, Smart-grid are treated as two different tags) by mistake.

  12. says

    Yes, quite fair enough too. When they were previewing 2.7 at WordCamp they hadn’t decided whether to do most used or recently used, or all of them… I was disappointed with the choice.

    I will investigate how to make this work again. Since the functionality is now partially built in, the method of posting the tags has changed a fair bit, but we should be able to work it.

  13. says

    I have the answer for WordPress 2.8.4! This adds clickable tags for all the tags in your blog. Note, it is completely dependent on javascript to add the links to the page, which should be fine under most circumstances (I can’t imagine many people are using the WP dashboard without javascript). Also, it is a standalone thing, you can essentially ignore the instructions in the post.

    You can put the following code in your theme’s functions.php file. If you’re using Thesis it would be in custom_functions.php. If your theme doesn’t have a functions.php file you can just make one (starting with <?php) and put it in the main directory of your theme. Or you can also create a simple plugin file and activate the code as a plugin.

    function all_post_tags() {
    $tags = get_tags(array('orderby' => 'name', 'order' => 'ASC', 'hide_empty' => 0, 'get' => 'all'));
    	$tag_links = '<p id="alltags-post_tag" class="the-tagcloud"> ';
    	foreach ($tags as $tag)
    		$tag_links .= '<a href="#" rel="tag" class="tag-link-' . $tag->term_id . '">' . $tag->name . '</a> ';
    	$tag_links .= '</p>';
    
    ?>
    <script type="text/javascript">
    	jQuery(function() {
    		jQuery('p.tagcloud-link').after('<p class="alltags-link"><a href="#titlediv" class="alltags-link">Choose from all the Post Tags</a><?php echo addcslashes($tag_links,"'"); ?></p>');
    		jQuery('p#alltags-post_tag').hide();
    		jQuery('a.alltags-link').click(function() {
    			jQuery("p#alltags-post_tag").toggle();
    			return false;
    		});
    		jQuery("p#alltags-post_tag a").click(function() {
    			tag_flush_to_text('post_tag', this);
    			return false;
    		});
    	});
    </script>
    <?php
    }
    add_action('admin_head','all_post_tags');