How to see if a class was added to an element using JavaScript

If you need to see if a class has been added to an element the easiest way is to trigger a new event when you add the class.


The problem with this solution is what happens if you do not have control over the function where this happens. Like if it happens in the WordPress core, and you know that you should never ever change code in the core.

I needed this for a plugin I was buidling. I know that when I click on something an ajax call is fired, and I want to do something when the response comes back. The ajax call is encapsulated so I can’t hook into it, but when the response comes back it adds a class to an element.

This is what I did:

checkForAddedClass = function (observedElement, className, callback) {
    var count = 0;
    const observer = setInterval(function () {
        if (500 < count || $(observedElement).hasClass(className)) {
    }, 10);

When I click on that something, I call this function. It sets an interval that watches the observedElement selector to see if the className was added. If it gets added, or 5 seconds goes by, it runs the callback.

This is how it would be implemented:

checkForAddedClass('.attachment-details', 'save-ready', getUpdatedSettings);

Hope this helps if you’re dealing with a similar issue.

Add Classes to Menu Items in WordPress

Let’s say you want to style each category differently across your site. Go rainbow.

How do you target the menu items? If you try targeting them specifically, menu-item-641 might change. What if you’d like to sell your theme? You can’t know in advance that menu-item-641 is going to be “Musings”.

So, this is how you do it:

Just pop the following code into your functions.php and it will put unique classes on the menus based on the menu names.


Keeping WordPress Safe, and Updatable

After setting up a WordPress install, there are three magic lines I run from the newly installed WordPress working directory.

The first two set the file and folder permissions to the recommended settings for WordPress.

The second sets ownership of the files to apache, so that WordPress will be able to update itself.

Thought I’d leave these here for anyone who might be digging.

IMPORTANT: Do not run these from just any old directory, you can break your server. ONLY run these commands from the directory in which you’ve installed WordPress. Unless you know what you’re doing.

Form Input “Placeholder” Attribute Polyfill

This is a jQuery-dependent polyfill for the placeholder input attribute. If you’re relying on “placeholder” pop this code in your page and you don’t have to let IE users hanging in the breeze.

function activatePlaceholders() {
    var detect = navigator.userAgent.toLowerCase(); 
    if ("msie") > 0 ) {
        $('input[type=text],input[type=email]').each(function(ind,elem) {
            if ($(elem).attr('placeholder') != ""){
                $(elem).click(function() {
                    if ($(this).val() == $(this).attr("placeholder")) {
                $(elem).blur(function() {
                    if ($(this).val() == "") {

Add a GitHub Gist to your WordPress site with this nifty Shortcode

Update: This no longer works. There’s a better way now. WordPress embeds allows you to simply copy the gist url into your post, and it will do the rest

I find that I tend, with the nature of what I blog about, to need to post code into my blogposts. Unfortunately this is one area where the WordPress wysiwyg is lacking. The code tags don’t always work, especially without the pre tags, and sometimes it still strips out important pieces. When you’re blogging about code, you don’t want your code to be messed up.

Github offers a fun feature called gists. It’s not a full git repository, just a way to host a single file or a few lines of code. In addition they offer a script to embed your gist into your site. The only problem is that if you toggle in between the “Visual” and HTML tabs on the WordPress wysiwyg it will probably strip out your script. So, back to the drawing board, right? No.

Add the following code to your theme’s functions.php file and you’re good to go.

I did find a plugin that offers this functionality; however, when I downloaded it and opened it up it had WAY too many lines of code. I appreciate extra functionality and maybe a plugin is the way to go for you if that’s what you need.

But if you just need the shortcode… The above solution is lean and mean.

How to Add META Tags – ROBOTS NOFOLLOW,NOINDEX – to Your MediaWiki Site Head

I spent too much time today hunting down how to do this, so I thought I’d spell it out clearly.

Add the following snippet to your LocalSettings.php OR includes/OutputPage.php file and it will insert the META tag ROBOTS NOINDEX, NOFOLLOW into the header.

As you know, the ROBOTS NOINDEX, NOFOLLOW tag will tell search engines not to index your site.

## Adds global NOINDEX,NOFOLLOW  meta to site headers
$wgExtensionFunctions[] = 'globalNoIndex';
function globalNoIndex(){
   global $wgOut;
   $wgOut->addMeta ( 'ROBOTS' , 'NOINDEX,NOFOLLOW') ;                                                                                                                                        

Why would you want that? Any number of reasons: you’re still developing it, it’s a private wiki for just you or a small group of people or maybe you want to block search engines to just to spite them.

The above snippet can be modified and used to insert any meta tag into the header of your mediawiki site.

I placed the code after defining the theme in my LocalSettings.php page and it worked beautifully. Not sure where specifically it should go. Please comment below if you know of a “best placement” for the code.

Function Reference/plugin basename « WordPress Codex

When building a WordPress plugin it’s important to know where your plugin sits. An early plugin I release relied heavily on several files inside the plugin directory. Nothing wrong with that, only that at the end of the day, the plugin directory didn’t end up being the plugin directory I thought it would be.

Ouch! I had to redeploy the plugin with the correct path.

But not anymore! Since those early days I discovered this neat line of code hidden in the all-knowing WordPress Codex.

$pluginBase = WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__));

via Function Reference/plugin basename « WordPress Codex.

pop that line into your plugin at the top and you won’t have to worry about where anything is.

Global $post

I’m always referring back to what’s in the WordPress global $post variable. It’s useful to know what’s inside when doing pretty much anything from building a plugin to a theme… Now I won’t have to var_dump-ing it every time I need to check.