Markdown QuickTags, my WordPress plugin which adds a massive number of Markdown-editing features to the built-in post/page editor had broken with the release of WordPress 3.3. Basically, the quicktags.js file which generates the buttons in the HTML editor changed completely. For the better, of course, but that’s what Markdown QuickTags (hackishly) overrides to work its magic, and the change pulled the rug out from under the plugin. I had to rewrite a good portion of the JavaScript, and it took me a while just to figure out what was going on, but it’s back in action. I’m writing this post with it right now.

I added some new font options (served via Google Fonts), more size choices and a live editor preview from the settings page. I’m working on adding a few “themes” to the editor and making it a little more customizable, but it’s lower on my list than things like, um, working.

Eventually I’ll make a video of it in action, I think I’ve probably snuck in a few features that I’ve done a poor job of documenting, anyway. I revamped the look this time, too (much more Byword–esque) so a screenshot refresh is in order as well. But that’s for after Christmas.

Happy Holidays, hope you’re all having great times.

If you write in Markdown and use WordPress, you’d be insane not to try this out. Version 0.8 just became available in the WordPress Plugin Repository.

Related posts:

1. Markdown QuickTags: WordPress plugin for Markdown lovers
2. Markdown QuickTags 0.7
3. Markdown QuickTags makes 1000 people happier and more attractive

Originally posted on BrettTerpstra.com at Markdown QuickTags 0.8 for Christmas

Exporting from WordPress to Jekyll took a good, I don’t know, five minutes. Since I stored all of my posts in Markdown in the WordPress database, it was basically a few minutes of scripting to add YAML headers and get things rolling. The biggest issue is WordPress-specific markup and custom shortcodes that I need to clean up. I spent way too long tweaking the design, though, and my weekend got away from me. In the meantime…

It’s up as a temporary test site on GitHub. It’s really, really rough; it’s very much still a work in progress, but I know you’ll be forgiving. nvALT 2.1 should be out very soon, and I have secret project keeping me busy right now, so I’m not giving any ETA’s on the final product. In the meantime, I’d love to hear everyone’s thoughts on Jekyll and other blog-related nerdery.

Related posts:

1. Markdown QuickTags: WordPress plugin for Markdown lovers
2. Marked 1.3 drawing winners
3. Markdown QuickTags makes 1000 people happier and more attractive

Originally posted on BrettTerpstra.com at I think I’m switching to Jekyll…

I’ve handled almost all of the bug reports for the plugin and it’s a smooth-running machine for me now. If you like Markdown and use WordPress, you really should check it out. I’m not making any money on it, but it makes my insides feel gooey to know I made your life that much easier. You’re totally worth it.

Here’s a quick breakdown, if you’ve previously never heard of Markdown QuickTags:

Click for big.

It’s a plugin with a powerful Markdown editor that replaces the WordPress HTML view. It provides auto-pairing, wrapping, link detection, smart list continuation, reference link title completion and much more.

Auto-pairing and wrapping are my favorite features; select text and type the left character of a double or single quote, square, curly or angle brackets or a backtick and the appropriate pairing will surround your selection. If you type the left character without a selection, it will create the pair and place your cursor in the middle. If you finish typing and your cursor is to the immediate left of the right character in the pair, typing the right character will jump you out of the scope and not double the quote/bracket.

If you have some reference-format links in your post ([link title]: http://link.com) and you select some text and hit the left square bracket twice, it will create a reference link ([linked text][]) and go into autocomplete mode with the list of all your reference titles ready to fill in as you type the first couple of characters. Pressing [( with text selected will start an inline link and fill in the “http://” for you, leaving it selected so you can just paste over it if you like. There’s even a button that pops up a text field where you can paste any text containing links, even the full source code for a page, and it will parse them out, give them titles and insert a list of reference links into your post for you to work with.

You can save your post as Markdown if you have a plugin installed to render it on the front end (like this one), or you can use the built-in Markdown (Extra) converter to turn it into clean HTML and switch back the the visual view. You can also go the other way, turning existing HTML posts into Markdown for editing using the Markdownify button at the bottom. It works just like Marky. There’s also an overlay preview system (which can take custom styles) and a full-screen editing mode with customizable background color and transparency. You can even customize the font in the editor with built-in Google fonts. Whew.

I could go on for a long, long time, but I just wanted to let people know that Markdown QuickTags is alive and kicking, and making some new strides soon. It’s not perfect, but it definitely makes my life easier. Check it out at the WordPress Plugins site.

Related posts:

1. Markdown QuickTags: WordPress plugin for Markdown lovers
2. Markdown QuickTags 0.7
3. Markdown QuickTags 0.8 for Christmas

Originally posted on BrettTerpstra.com at Markdown QuickTags makes 1000 people happier and more attractive

Thinking about it for a minute, I realized I really did miss the functionality that AutoTag had given me. While I’ve toyed around with blogging from Vim, I still primarily use TextMate, not least because of the Blogsmith Blogging Bundle. Until that kind of functionality is ported to Vim, I’m happy right here. Thus, I spent my Sunday afternoon reviving the AutoTag bundle.

If you use TextMate to blog on a WordPress site, you’ll want to see this.

There are two parts to this: a WordPress plugin that adds an XML-RPC call for getting all of the tags in use on the blog, and a small TextMate bundle for making good use of it. The TextMate bundle cribs off of my previous AutoTag project, and borrows most of the remote functionality from the original TextMate blogging bundle. Why reinvent the wheel? I’m bundling both together in the download, so if you want to use the WordPress plugin to port the functionality elsewhere (say, Vim?), you can just pull out the parts you need.

[Skip to download]

AutoTagging in TextMate

What the bundle does (short version) is find the most appropriate tags for your content based on tags you’ve already used before. This helps you easily keep your tag collection trim and useful. No disparate tags because of inconsistent capitalization, plurals or conjugation. Things that are related stay related. This can be especially difficult blogging from TextMate because you can’t quickly see “all tags” the way you can from the WordPress editor. This solves the problem.

Install the WordPress plugin

Standard install, like any other (manually-installed) plugin:

• Upload the gettags-rpc folder from the zip download to your wp-content/plugins folder on your server.
• Open your admin page and go to the Plugins panel.
• Activate the GetTags-RPC plugin in the plugin list.

If the plugin activates without error, you should be ready to go. It’s a very simple plugin without a lot of error checking, so let me know if you have any trouble with it.

Install the AutoTag bundle

To install AutoTag in TextMate, double click on the bundle in the download zip file. It should open TextMate, pop up the Bundle Editor and show you the installed bundle and its commands. Done.

Assuming you have AutoTag installed in TextMate and the GetTags-RPC plugin installed in WordPress, you’re ready to go. Well, you’ll need to have your blog set up (Bundles > Blogging > Setup Blogs) in TextMate, but we’ll assume you’ve done that by now.

Using the commands

The AutoTag commands can be triggered in two ways. First, you can just put your cursor one space after the colon in the “Keywords:” line of the template headers. If you don’t have that line in your template, you can just type “Keywords: ” on a line before the end of the headers, or add it permanently by editing the template in the Bundle Editor. Hit tab from there and you’ll get a menu of the three commands in the bundle. You can trigger that from the same point even if you already have tags on the line; it will add appropriate commas automatically. Second, you can use Control-Option-T to get the same menu at any point in the file, although I’m not sure why you’d call it from anywhere other than the “Keywords” line.

Commands

AutoTag: This is the primary command, or at least my favorite in the bundle. It’s only good when you run it after you write your post; it doesn’t have anything to work with on a blank template. Finish your post (or open an existing one) and trigger the command. It will grab all existing tags on your blog and compare them to your text, resulting in a dialog with a list of the best matches ranked by relevance. If you’re curious, here’s what it does when processing:

• Strips out all punctuation from the content of your post and creates an array of words
• Uses the Porter Stemming algorithm to get the stem of each word. This makes plurals, adjective, adverb and verb forms all represent the same word.
• Compares the list of stemmed words to the stems of each tag returned by your blog, keeping matches.
• Measures the frequency of each match in the content and sorts the list accordingly.

Common Words: This command ignores the tags on your blog and just gives you the most common words from your post for selection as tags. It’s a good way to figure out what new tags might be worth adding. Again, it’s not very useful if you don’t have your content written yet.

All Tags: If you’re not finding the AutoTag results satisfactory on a given post, or you want to tag before you have any content, this command will simply return your entire list of available tags. You can use it to check what form or casing you used on an existing tag, and it can be run at any time.

That’s it. If you use WordPress and TextMate together, I know you’re going to love this. Let me know how it goes! By the way, I’ll probably (eventually) build similar functionality right into the WordPress editor, and I’d love to see this ported to Vim, too. Any Vim plugin writers want a challenge?

Download

Related posts:

1. Markdown QuickTags: WordPress plugin for Markdown lovers
2. TextMate as WriteRoom, for free
3. Getting back into real TextMate blogging

Originally posted on BrettTerpstra.com at AutoTag2: smarter tagging for TextMate and WordPress

The custom post part is easy, and if you’re working with XML-RPC, you’ve probably already figured it out. Just set your ‘post_type’ to your registered custom post type when you pass the construct to create a new post.

Then it got sticky for me. I ended up finding a nearly 2-year-old patch to the xmlrpc.php file with the answer, and I was pleasantly surprised to see it had already been applied in current versions. So much for documentation. The construct just needs an element called mt_taxonomy, and it takes an associative array with two keys: tags and taxonomy. tags holds the terms you want to apply, either as another array or in a comma-separated list, and taxonomy is the name of the custom taxonomy they’re assigned/available to.

I ended up adding my own methods to the MetaWeblog interface for handling my specific post types. Quick example:

add_filter('xmlrpc_methods', 'bt_xmlrpc_methods');
function bt_xmlrpc_methods($methods)
{
	$methods['metaWeblog.addHowTo'] = 'bt_add_howto';
	return $methods;
}

Then a function called bt_add_howto receives the $args, which will generally be:

$post_ID         = (int) $args[0];
$username        = $args[1];
$password        = $args[2];
$content_struct = $args[3];
$publish         = $args[4];

At this point, I think I’m just taking notes for myself. Hopefully this pointer will be enough to help someone else not spend an hour banging their head against the desk. Custom post types are fun, and growing more flexible, but there are a lot of walls you can run into right now.

Related posts:

1. Adding a TinyMCE button to WordPress
2. Edit your WordPress QuickTags the right way
3. Evernote Site Memory tagger for WordPress

Originally posted on BrettTerpstra.com at WordPress, custom taxonomy, and XML-RPC

The latest version has too many new features to list, but you can get an overview on the plugin page. One of the coolest new features is reference link auto-completion. If you surround some text in square brackets (which you can do just by highlighting the text and hitting the left square bracket key), and then follow it immediately with another pair of square brackets, typing the first letter or two of a reference that already exists in your document will autocomplete the title for you. Square brackets, of course, are auto-paired, so when you type the left bracket, the right one is automatically added and your cursor is placed between them. It’s fast.

There are improvements to the undo stack, which now records 100 screen states and lets you step forward and back through them using [Shift]-Command/Control-Z. There have been lots of text-editing improvements, and new dialog boxes for pasting bunches of links as references. Note that it will parse links out of any text format, so any list of links–even with other text in the paste–will turn into a nicely formatted list with automatic titles based on the domain.

The plugin has been submitted for approval in the official WordPress Plugin Repository, so hopefully you’ll be able to grab it there and get automatic updates shortly. For now, grab it on the plugin’s project page.

Related posts:

1. Markdown QuickTags makes 1000 people happier and more attractive
2. Markdown QuickTags: WordPress plugin for Markdown lovers
3. Markdown QuickTags 0.8 for Christmas

Originally posted on BrettTerpstra.com at Markdown QuickTags 0.7

It replaces the default QuickTags in the WordPress HTML editor with a set of Markdown-optimized tags, with plenty of extra features. I had mentioned discovering a non-intrusive way to edit the WordPress QuickTags the other day, and then my insomnia took it to this level. I basically put most of my favorite features of TextMate into a textarea. Auto pairing and selection wrapping, list generation from multipe lines, indentation preservation, parsing multiple urls from pasted text, and more. The buttons are really just the beginning.

Note that this plugin in BETA. It has a ways to go, and you’ll probably find glitches. Please give it a try, though, and let me know what you think, either in the comments here, or contact me directly.

Once I feel like this is stable, I’ll add it to the WordPress plugin repository (check it out in the WordPress plugins) and you’ll be able to get automatic updates. For now, please check back to get the latest versions. The download link will always be up to date throughout the blog, and when I push the next tagged release, I’ll start a changelog on the project page.

The next step is to modify this into a Safari Extension which will allow any text field to become a Markdown Editor. The basic editing features will probably also turn into a jQuery plugin. For now, WordPress users who love Markdown should go get it!

Related posts:

1. Markdown QuickTags 0.8 for Christmas
2. Markdown QuickTags 0.7
3. Edit your WordPress QuickTags the right way

Originally posted on BrettTerpstra.com at Markdown QuickTags: WordPress plugin for Markdown lovers

There are some perfectly capable plugins for adding new buttons, too. This morning I wanted to change the behavior of existing buttons, though, so it came down to this.

This post is directed toward people who are at least moderately comfortable editing php and javascript. I’m not going to go into a lot of detail on the actual edits, but will get you started on modifying your QuickTags and provide some source code.

The quicktags.js file

Go into the /wp-includes/js folder and find quicktags.dev.js. Copy it to your template folder (or any subfolder) and rename it quicktags.js.

Edit the file. The code has some localization in it which we’re about to break, so search for quicktagsL10n and replace every instance with an appropriate, quoted string. For example, you’ll find quicktagsL10n.enterURL, which should be replaced with something like ‘Enter the URL’. You can find all of the original strings in /wp-includes/script-loader.php, if you like.

Now you can edit the buttons and functions as you see fit. There’s a pretty good overview at Tamba2. You’ll notice that some buttons have functions associated with them, such as the “link” and “img” buttons, so be sure to edit those as well if you’re modifying those buttons.

Overriding the original

Now we just need to change which script gets called when you’re in the post editor. Add the following to your theme’s functions.php file:

function bt_load_admin_scripts()
{
  if ( is_admin() ) {
    wp_deregister_script('quicktags');
    wp_register_script('quicktags', ("/path/to/your/quicktags.js"), false, '', true);
  }
}
 
if (is_admin()) {
  add_action('init', bt_load_admin_scripts);
}

Modify the path in wp_register_script to point to the location where you put your quicktags.js file. This will tell WordPress to load your file instead of its own.

Now, edit a new post (in the HTML editor, not the Visual editor) to test out your changes. If everything is correct, modified and new buttons should show up and function the way you want. Your changes will persist, even after a WordPress upgrade!

Here’s my copy of quicktags.js, modified to turn it into a Markdown editor.

Related posts:

1. Markdown QuickTags: WordPress plugin for Markdown lovers
2. Markdown QuickTags 0.8 for Christmas
3. Markdown QuickTags 0.7

Originally posted on BrettTerpstra.com at Edit your WordPress QuickTags the right way

I know some people have been moving away from WordPress and toward blogging solutions like Tumblr. The number one reason I hear for making this move is that WordPress gets to complicated once you start customizing. Distractingly so. I don’t disagree.

I love tweaking WordPress websites, though, and have built quite a few of them. The plugin community is part of what makes it so much fun. I’m constantly amazed by the creativity and craftsmanship I see go into these projects. Most of them don’t make any money, but I thought I’d show you a few I’ve been more than happy to donate to.

There are a few bedrock plugins that I think everyone should have, and as such I’m only going to mention them in passing: W3 Total Cache, Markdown Extra, and of course, Akismet. There are others, though, that I hadn’t heard much about before, yet they’ve become integral to my current blog. Here are my plugin crushes right now…

Updraft

I’ve tried quite a few plugins for backing up my blog, but all have eventually failed me, with the exception of Updraft. I think its simplicity is its saving grace; it doesn’t try to be anything more than a hassle-free way to back up your entire WordPress blog, including uploads, themes and database. I’m using it to back up to my Amazon S3 account, and it also works with Rackspace, your own FTP server, or, if you really want to, it can email your backups to you. It can purge older backups, and the restore feature is as fast as your storage system of choice.

Fluency Admin

This one is just wicked. It’s a theme for the admin panel which not only looks amazing, it adds extensive keyboard navigation to the back end. If you know me, you know that makes me happy.

Postalicious

I’ve been toying a lot with how to share my bookmarks and web trails lately. Postalicious came along and made it easy to post groups of links to my blog automatically, and with complete control over formatting. Right now I have it pulling from Delicious, waiting until there are at least 4 new bookmarks (and not more than 6) with the tag “blogit,” and publishing the list with links and my notes, and the date in the title. All I have to do is pop up Delibar once in a while and bookmark something I think is worth sharing. Postalicious also works with ma.gnolia, Google Reader, Reddit, Yahoo Pipes and Jumptags.

WP-Syntax Download Extension

WP-Syntax is a great solution for code highlighting. It’s taken me a lot of tweaking to get it running, and I hadn’t liked the idea of offering syntax-highlighted code without a raw backup. This extension, used in combination with WP-Syntax, allows users to grab the raw source or force a download of a file. It’s rather ingenious once you dig into the code, if not a bit of a hack (I mean that in a good way, I’m intrigued). But it works, and it solves a few of my concerns!

If you’re a WordPress user and you haven’t tried some of these out, give them a shot. None of the plugins above add anything to the front end which would slow your site down for end users, so go ahead and play!

Related posts:

1. Markdown QuickTags: WordPress plugin for Markdown lovers
2. I think I’m switching to Jekyll…
3. AutoTag2: smarter tagging for TextMate and WordPress

Originally posted on BrettTerpstra.com at Four WordPress Plugins I love

Evernote introduced Site Memory today, providing an easy way to help people clip to Evernote from your site while maintaining control over how your content appears and is attributed. While some instructions are provided for WordPress, some of us will obviously want to customize things a little further.

Brett Kelly posted a quick PHP script on the Evernote WordPress docs to include the first three tags from your post as suggested tags in the clipper. I wanted to weight these, though, so here’s my version…

<a href="javascript:void()" title="Clip to Evernote" class="evernoteclip" 
  onclick="Evernote.doClip({ title: '<?php the_title_attribute(); ?>',
    providerName: 'Brett Terpstra',
    url: '<?php the_permalink(); ?>',
    contentId: 'post-<?php the_ID(); ?>-clip',
    suggestTags: '<?php
    if (get_post_meta($post->ID, 'evernoteTags', true)) {
      echo get_post_meta($post->ID, 'evernoteTags', true);
    } else {
      $posttags = get_the_tags();
      $out = array();
      if ($posttags) {
        foreach($posttags as $tag) {
          $out[trim($tag->name)] = intval($tag->count); 
        }
        ksort($out,SORT_NUMERIC);
        echo implode(array_keys(array_slice($out, 0, 3)),',');
      }
    }?>'});return false;">
<img src="<?php bloginfo('template_url'); ?>/images/evernoteclipper.png" alt="Evernote Clipper Icon"/>
</a>

It first checks for a custom field called “evernoteTags,” so you can override the whole thing by specifying up to three tags in a custom field in the post editor. The tags should be separated by commas, spaces aren’t important: “tag1,tag2,tag3”, no quotes. Moving on…

The rest of the code grabs all of the tags for the post and their use counts on your site, sorts by the use count and outputs the tag names. Pretty simple.

I should also note that the JavaScript library for the clipper weighs in at 33k compressed, so it’s not a lightweight addition to your blog. I grabbed the online source, minified it and am serving it from a CDN, so the hit was minimized, but still there. I’m also loading the clipper image from my CDN, just to avoid the extra offsite hit. I may eventually attempt to lazy load the script only when the link is clicked, but this works for now.

Related posts:

1. Antique Safari Reader hack update with Evernote goodness
2. A better System Service for Evernote clipping — with MultiMarkdown
3. Taking the Markdown to Evernote service further

Originally posted on BrettTerpstra.com at Evernote Site Memory tagger for WordPress

NOTE: Be sure to read through the comments, there’s a lot of additional and very useful information in there. I’ll compile the notes as soon as I’m able and add them to the main post.

First, the hack described here is not MediaTemple’s fault, nor an exploit of their security system. It’s a reminder to all of us that checking permissions and updating software are the bare minimum we can do to avoid a lot of headache and potential security issues. MediaTemple was apparently just targeted because of their size, the responsibility for the hacked sites lies with the site’s owner/webmaster.¹

Second, it doesn’t just affect WordPress. I found bits of the exploit in MODx files, static files, and even some sites that weren’t accessible through the internet.

Lastly, to the perpetrators: thanks for the security reminder, but curses upon you and your families. May you spend eternity grepping for obscure lines of code while every client you have calls you to tell you their business is going to fail because their site is throwing security warnings.

What follows is not a full-fledged guide to cleaning up a hacked server, just some notes from my experience with this round.

Have you been hacked?

The exploit is a little difficult to notice. It inserts percent-escaped lines of code into JavaScript files you’re already including on your page, which then use document.write to add redirect code to the rendered page. This means that viewing source won’t show it, you have to see the rendered source, ala Firebug, Safari Web Inspector, or one of various plugins that show the actual source after the DOM has loaded.

What you’ll find in the rendered source is a little function that uses an array of colors and urls to generate somewhat random redirects. A url called ‘edisonsnightclub’ is always in the mix, so that’s what I search for. The redirect has the side-effect of triggering Firefox’s security warnings, which is a fair sight better than just sending clients off to malicious sites. However, it appears to only execute the code for search engine bots, so it could potentially go unnoticed on your site for quite some time.

Cleanup

I did my cleanup job hastily, and didn’t track everything as well as I should have. There were lines inserted into main template PHP files which I just quickly deleted. These always began with $o=, so that became my server-wide search pattern (more on that in a second). This didn’t only affect WordPress, it also hit my MODx sites and the exploit would probably hit static sites or any other CMS just fine, so check everything.

Once the PHP files were cleaned up, I realized that the most insidious part of the hack was that it picked random script files from your page to insert itself into. Tracking it down got interesting. One thing to note: you can tell what file it’s in when you view the rendered source by looking at the script tag right before the exploit code. The included script is where you’ll find the document.write line.

The point of entry on my GridServer turned out to be a single directory in a single WordPress install, from which a rootkit (identifiable by the existence of an is_writable.php file) was able to gain write access to 20+ sites that I host there. The rootkit was found in the img directory of a TinyMCE theme within a WordPress install.

The exploit doesn’t even change the mod dates on the files, so it’s hard to filter out the infected scripts. What I did was SSH in and cd to the domains directory, where I ran a grep for the patterns I’d found so far. The line within the javascript file looks like this (truncated):

var st1 = 0;document.write(unescape('%3C%73%63...%74%3E'));var gr0=0;

So I set up a grep command like this:

find ./ -name "*.js" -exec grep -l "gr0=0" {} \;

That gives me just the name and path of any file which contains a match to the string “gr0=0,” which is unique enough to narrow things down. I ran a similar grep for the PHP files:

find ./ -name "*.php" -exec grep -l '$o=' {} \;

That one yields some false positives, I need to find a more specific search criteria. It gets the job done, though. Then it’s just a matter of manually cleaning out the inserted lines. Be careful not to delete anything in your JavaScript files after the gr0=0;, such as the opening of a comment block or the first line of a jQuery plugin. Just delete up to the semicolon and you’ll be fine.

You’ll also want to check all of your databases. First look for extra admin users (JohnnyA is what they were always called in mine), then check for lines in your content tables as mentioned on the MediaTemple wiki.

Check that your permissions are secure² and make sure you find the rootkit and remove it. That will be several PHP files in a random directory, and they’ll have recent modification timestamps. As I mentioned, one of them should be called is_writeable.php, which you can use in a find statement as well.

Best of luck, and please add any additional notes or corrections in the comments!

Related posts:

1. Quick notes on cross-browser HTML5 video
2. HomeControl: Local Mac control for iPhone
3. Meet Marky, the Markdownifier

Originally posted on BrettTerpstra.com at Notes on cleaning up the MediaTemple hack (JohnnyA)

I have an admin username (it’s not admin) which I use to manage my WordPress blog, and an editor user with which I write posts and leave comments. Sometimes, though, I get confused, lazy or both, and end up leaving comments as my admin user. This rather defeats the purpose of using a non-default admin username, which is generally done for security purposes (if they can’t guess the admin’s username, it makes it that much harder to hack the admin account).

More out of laziness than anything else (we can call it efficiency, right?), I dropped the functions below into my functions.php file. They filter my admin username out of any comments I leave. WordPress also adds the user’s name in a class for the list item of the comment, so I needed to remove that as well. If you’re in a similar situation, feel free to grab the code and place it in your own theme’s functions.php file, replacing the adminuser and regularuser placeholders with your own admin and editor usernames. The comment class code is modified from a hack found at WPRecipes.

// change the class that wordpress assigns to the comment
function change_comment_author_class( $classes ) {
    foreach( $classes as $key => $class ) {
        // change adminuser to your admin username
        if(strstr($class, "comment-author-adminuser")) {
            // change regularuser to the user you comment with
            $classes[$key] = 'comment-author-regularuser';
        }
    }
    return $classes;
}
// substitute a user name for the admin name
function change_comment_author($author)
{
    // change this to the admin username
    if(strstr($author,"adminuser")) { 
        // change this to the name of the user you comment with
        return "regularuser"; 
    }
    return $author;
}
// apply the filters
add_filter( 'comment_class' , 'change_comment_author_class' );
add_filter( 'get_comment_author' , 'change_comment_author' );

Related posts:

1. Four WordPress Plugins I love
2. Adding a TinyMCE button to WordPress
3. GVoice command line SMS revisited

Originally posted on BrettTerpstra.com at Better WordPress security through comment filters

I’m not a big fan of directly modifying plugins, primarily because it means that my changes will be scrapped if I ever automatically update the plugin. Since all I’m doing is adding a little jQuery to apply the effect to some additional selectors, I’ve just added it into an external Javascript file that I was already loading. Here’s what I did…

The extra jQuery to run the lightbox effect on every link whose target ends with “jpg” is very simple:

// Auto-handle direct jpeg links
$('a[href$="jpg"]').not('.gallery a').each(function() {
    $(this).lightbox();
});

It selects any link whose href value ends with ‘jpg’. I added a .not() selector to exclude the WordPress gallery links that the plugin already does a nice job of handling and turning into navigable lightbox galleries. This little bit of code will work with any flavor of the jQuery Lightbox plugin that uses “lightbox()” as its main function. Next I put this snippet into my js file, in the function that executes when the document is ready:

jQuery(document).ready(function($) {
    // Auto-handle direct jpeg links
    $('a[href$="jpg"]').not('.gallery a').each(function() {
        $(this).lightbox();
    });
});

The “$” inside of the function’s parameters (function($)) lets us use the standard jQuery “$” inside of the function, instead of the no-conflict “jQuery.” Just a convenience, but if you don’t do this, and you have the default jQuery library loaded in WordPress, you’ll need to replace all of the “$” in the original snippet with “jQuery” to get it to work.

I add the external javascript to the queue in my theme’s functions.php file like this:

function bt_load_scripts() {
    wp_enqueue_script('brettterpstra',TEMPLATEPATH.'/js/brettterpstra.js',array('jquery'),false,true);
}    

if (!is_admin()) {
    add_action('init', bt_load_scripts);
}

That did the trick, and any JPEG image I link to directly now gets the lightbox treatment. I haven’t run into any conflicts yet, but I’ll keep my eyes peeled and refine the selector if I need to.

Related posts:

1. Markdown QuickTags 0.7
2. Auto-convert your inline Markdown links to references
3. Markdown QuickTags: WordPress plugin for Markdown lovers

Originally posted on BrettTerpstra.com at Auto-lightboxing image links

Then, I thought I’d just add a quick button to WordPress’ TinyMCE editor to make adding the shortcode even easier. That turned out to be a real pain, at least the first time around, so I thought I’d detail how I ended up pulling it off. Read on for a step-by-step as I add a button to the built-in visual editor that will request an ID (or a full url) and insert a custom shortcode to play the video. You can see the end results here. I’m positive there are plugins that do just this, but I wanted to figure it out for myself…

Note that these instructions are for WordPress 2.5+.

Want to just download the skeleton files and go for it? YourYouTubeButton.zip

First, the shortcode. Because the shadowbox plugin just needs a YouTube link to do it’s job, all the shortcode is going to do is take an id and turn it into a properly formatted link, inserting the necessary markup for shadowbox to do its job. In your functions.php (or custom/custom_functions.php if you’re using Thesis), add this code:

// add the shortcode handler for YouTube videos
function addYouTube($atts, $content = null) {
        extract(shortcode_atts(array( "id" => '' ), $atts));
        return '<p style="text-align:center"> \
        <a href="http://www.youtube.com/v/'.$id.'"> \
        <img src="http://img.youtube.com/vi/'.$id.'/0.jpg" width="400" height="300" class="aligncenter" /> \
        <span>Watch the video</span></a></p>';
}
add_shortcode('youtube', 'addYouTube');

This lets you use a shortcode in your post that looks like [youtube id="xxxxx"] and have that turned into a centered paragraph containing a preview image and a link to the video. If you’re running the shadowbox plugin, or any plugin that detects YouTube links and handles them, clicking the link in your post will load the destination video in a hovering box, without leaving the page. Otherwise, it will go to the YouTube page for the video. The screenshot is pulled straight from YouTube, and (poorly) resized using HTML. I needed a 400x300 image to fit into the template, and since it wasn’t a huge change, it was easiest to just hardcode the size into the tag and let the browser handle it. For reference, you can get a YouTube-generated screenshot by inserting the video’s id into a string like this: http://img.youtube.com/vi/ /0.jpg. Use that inside of an image tag, as shown in the script, and you’ve got a preview image, ready to go.

Adding a button to the “quick tags” in the HTML editor is a cinch, but we’ll skip that since anyone using that editor can probably handle writing out a shortcode. It’s my wife and clients using the Visual editor that I want to save the trouble. So now, in your functions.php or custom_functions.php, we’ll first add the function that will insert the button:

function add_youtube_button() {
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;
   if ( get_user_option('rich_editing') == 'true') {
     add_filter('mce_external_plugins', 'add_youtube_tinymce_plugin');
     add_filter('mce_buttons', 'register_youtube_button');
   }
}

add_action('init', 'add_youtube_button');

The first thing the above code does is check to make sure the current user has permission to edit, otherwise there’s no point in loading this code. Next, it checks that we’re in Rich Text (Visual) mode, and then adds filters that are executed at the time that the editor loads its plugins, and when it loads its buttons. Lastly, the add_action call tells it to run the function when we load the page.

The functions that it calls, add_youtube_tinymce_plugin and register_youtube_button are custom functions that we’ll create underneath it in the same file:

function register_youtube_button($buttons) {
   array_push($buttons, "|", "brettsyoutube");
   return $buttons;
}

function add_youtube_tinymce_plugin($plugin_array) {
   $plugin_array['brettsyoutube'] = get_bloginfo('template_url').'/custom/editor_plugin.js';
   return $plugin_array;
}

The first function tells the editor to add a divider and the button, in my case brettsyoutube, to the array of buttons. The second function tells it what that button’s going to do, which, in this case, is execute a statement found in an external Javascript file in the “custom” directory of my template.

The last thing we need to do before we get into the Javascript portion is to work a little magic on the TinyMCE version check. TinyMCE defaults to caching everything, so in order for our changes to show up, we have to trick it into thinking its version number has changed:

function my_refresh_mce($ver) {
  $ver += 3;
  return $ver;
}

add_filter( 'tiny_mce_version', 'my_refresh_mce');

This will intercept the version check and increment the current version number by 3. It’s the quick and dirty way to do it without messing with the settings directly, but if you’re curious, read more on the WordPress Codex.

Now that we’ve got the necessary pieces in our functions file, it’s time to add the Javascript that the button’s going to need to function. I’ve located mine in the same folder as my functions file (custom/), but if you want to be tidier about it, make a subfolder. Just make sure that the add_youtube_tinymce_plugin function knows where to look for it. Here’s what’s in my editor_plugin.js file:

(function() {
    tinymce.create('tinymce.plugins.BrettsYouTube', {
        init : function(ed, url) {
            ed.addButton('brettsyoutube', {
                title : 'brettsyoutube.youtube',
                image : url+'/youtube.png',
                onclick : function() {
                    idPattern = /(?:(?:[^v]+)+v.)?([^&=]{11})(?=&|$)/;
                    var vidId = prompt("YouTube Video", "Enter the id or url for your video");
                    var m = idPattern.exec(vidId);
                    if (m != null && m != 'undefined')
                        ed.execCommand('mceInsertContent', false, '[youtube id="'+m[1]+'"]');
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
        getInfo : function() {
            return {
                longname : "Brett's YouTube Shortcode",
                author : 'Brett Terpstra',
                authorurl : 'http://brettterpstra.com/',
                infourl : 'http://brettterpstra.com/',
                version : "1.0"
            };
        }
    });
    tinymce.PluginManager.add('brettsyoutube', tinymce.plugins.BrettsYouTube);
})();

This function initializes the plugin, sets up what it’s going to accomplish, adds an array of info about the plugin, and then adds the plugin to the existing TinyMCE plugin list. The lines that contain brettsyoutube are referenced by the previous functions, so if you change the name of the plugin in one place, make sure to match it up in both the PHP and the Javascript portions. In the onclick handler inside the addButton call, you’ll find a function that prompts for a string (YouTube ID or URL), runs it against a regular expression to extract the ID (if necessary) and then inserts the shortcode as defined in our earlier functions. The last line of the main function does the actual adding of the plugin with the name brettsyoutube, so that it can be found by the editor when needed.

Note that the plugin references a youtube.png file in the same directory as the plugin. I lifted mine from Viper’s Video Quicktags, but you can use any 20px by 20px image, adjusting the name (and, if desired, location) in the above code appropriately.

Now I have a button in the visual editor that makes life that much easier for my wife. I can add more now, any time I like, and with a lot less effort than this first one turned out to be. I expect to be using this fairly frequently on client sites, as well.

References:

• TinyMCE Custom Buttons on the WordPress Codex
• Viper’s Video Quicktags plugin

Related posts:

1. Auto-lightboxing image links
2. Better WordPress security through comment filters
3. Edit your WordPress QuickTags the right way

Originally posted on BrettTerpstra.com at Adding a TinyMCE button to WordPress