Question

I want to use this code on my WordPress blog, but it’s not working:

  (function ($) {
    $.fn.extend({
      raw: function (options) {
        this.defaultOptions = {
          className: 'raw-link',
          eventBased: true
        };
        var settings = $.extend({}, this.defaultOptions, options);
        return this.each(function () {
          var $this = $(this),
            data = 'data:;base64,' + unescape(btoa($this.text()));
          if (settings.eventBased) {
            $link = $('<a href="#" class="' + settings.className + '">Raw</a>');
            $this.after($link);
            $link.on('click', function (e) {
              e.preventDefault();
              window.open(data);
            });
          } else {
            $this.after('<a href="' + data + '" target="_blank" class="' +
                          settings.className + '">Raw</a>');
          }
        });
      }
    });
  })(jQuery);
  jQuery(document).ready(function () {
    $('pre').raw();
  });

What it does is append a link after pre selected element that when clicked, will open the raw code of such pre in a new window.

I tried it by adding the code to my existing JavaScript file, in the header.php file, and also by creating a new JS file, but still didn’t work.

The code is correct, I tested it on jsFiddle. Just not working in WordPress.

Can anyone please help me out with this?

Answer 1

WordPress usually loads jQuery in noConflict-mode, jQuery is not accessible via the shortHand $ in this case.

change this:

jQuery(document).ready(function () {
    $('pre').raw();
  });

to

jQuery(document).ready(function () {
    jQuery('pre').raw();
  });

or

jQuery(document).ready(function ($) {
    $('pre').raw();
  });