Prettier PHP Debug Messages continued

Continuation to Prettier PHP Debug Messages. This version is self-styling and also accepts a label parameter.

<?php
if (!function_exists('pp')) { //Pretty Print
  function pp($obj,$label = '') {  
    $data = json_encode(print_r($obj,true));
    ?>
    <style type="text/css">
      #bsdLogger {
      position: absolute;
      top: 0px;
      right: 0px;
      border-left: 4px solid #bbb;
      padding: 6px;
      background: white;
      color: #444;
      z-index: 999;
      font-size: 1.25em;
      width: 400px;
      height: 800px;
      overflow: scroll;
      }
    </style>    
    <script type="text/javascript">
      var doStuff = function(){
        var obj = <?php echo $data; ?>;
        var logger = document.getElementById('bsdLogger');
        if (!logger) {
          logger = document.createElement('div');
          logger.id = 'bsdLogger';
          document.body.appendChild(logger);
        }
        ////console.log(obj);
        var pre = document.createElement('pre');
        var h2 = document.createElement('h2');
        pre.innerHTML = obj;
 
        h2.innerHTML = '<?php echo addslashes($label); ?>';
        logger.appendChild(h2);
        logger.appendChild(pre);      
      };
      window.addEventListener ("DOMContentLoaded", doStuff, false);
 
    </script>
    <?php
  }
}
?>

WP Rotator

A new WordPress plugin I’ve been working on with the help of Bill Erickson. Rotates through featured images of a custom query whose query args are configurable by the administrator. Animates by sliding or cross-fading. Adjustable animation speeds. Hoping to share it soon in the WordPress Plugin Directory.

UPDATE: Here it is in the Plugin Directory

Prettier PHP Debug Messages

(prettier than what I’ve been doing, at least)

Hmm, let’s see. Trying to figure out a bug in my WordPress template. I need to know what the current post looks like. So I’ll go to the template and put in

print_r($post);

which produces

That’s helpful, but a little hard to read. So let’s create a Pretty Print function and put some preformat tags around the output.

(in my theme’s functions.php)

if (! function_exists('pp')) {
  function pp($msg) {
  	echo "<" . "pre>" . print_r($msg,true) . "<" . "/pre>";
  }
}

And so now if I call this in my template

  pp($post);

we get

A little better. So that’s been my Pretty Print function for quite a while. But sometimes the debug messages are unreadable due to their position in the template where I call pp(). Maybe there are theme colors hiding the messages, or possibly an overflow: hidden CSS rule blocks some of them.

So I decided to make another version which will collect all of the calls to pp() and put them in one visible spot. It will allow scrolling, and CSS styling.

(in my theme’s functions.php)

<?php
if (!function_exists('pp')) {
  function pp($obj) {  
    $data = json_encode(print_r($obj,true));
    ?>
    <script type="text/javascript">
      var obj = <?php echo $data; ?>;
      var logger = document.getElementById('bsdLogger');
      if (!logger) {
        logger = document.createElement('div');
        logger.id = 'bsdLogger';
        document.body.appendChild(logger);
      }
      ////console.log(obj);
      var pre = document.createElement('pre');
      pre.innerHTML = obj;
      logger.appendChild(pre);
    </script>
    <?php
  }
}

So now in my template, I debug all sorts of nonsense

            <?php the_content(); ?>
            <?php pp(Array('apples','oranges'));
            pp('HAHA');
            ?>
            <table style="border: 2px solid red;">
              <tr><td>What's this?</td><td>a table in the middle of nowhere?</td></tr>
            </table>
            <?php
            pp($post);
            ?>

Mix with some CSS to taste and you get


Notice that even though there’s a random table happening between debug calls, the debug messages still gather into their designated spot.

I think I’ll see how that suits me for a while. True, it obscures part of the content, but if I’m asking for a debug message in the first place, that’s primarily what I want to see. When I remove the pp() calls in the code, the message box goes away again.

If there are better ways of doing this, please let me know.

Relative Site URL on Content Save

Another post for WordPress admins, building on an earlier WordPress Tip: Bloginfo as a Shortcode

Having a shortcode is great, but why not automate the insertion of the shortcode into the content box? That’s what I’ve done here.

(To use this code, add it to your theme’s functions.php file)

function bsdrelative_content_replace_url($content) {  
  return str_replace(get_bloginfo('url'),'[url]',$content);
}
add_filter('content_save_pre','bsdrelative_content_replace_url');
 
function bsdrelative_url_shortcode($atts, $content = null) {
  return get_bloginfo('url'); 
}
add_shortcode("url", "bsdrelative_url_shortcode");

There’s a reason I’m using a shortcode rather just replacing http://site.com/the/link with /the/link and it’s that the latter assumes that the site is installed at the DocumentRoot of the webserver. Not a safe assumption. Often times, I’m developing a new website for a client under a subfolder such as a http://clientsite.com/staging or http://clientsite.com/dev while the current to-be-replaced site remains at the root level.

I’ve also made this available as a WordPress Plugin

WordPress Tip: bloginfo as a shortcode

I often need to help move a client’s redesigned website into WordPress at a new webhost. During this process, the client’s domain must remain pointing to the old website so there is no interruption in traffic. Repointing the domain becomes one of the last steps of the process.

WordPress addresses a potential problem here with a Template tag called bloginfo. Inside my theme’s templates, I use bloginfo(‘url’) rather than hardcoding my site’s URL. The actual URL is maintained in the Dashboard under Settings > General > WordPress address (URL). bloginfo(‘template_url’) adds the current theme path to the URL. Often when programming, computing a value gives you more flexibility than hardcoding a value.

Another area where I would like to have this flexibility is inside the actual content of the post. If I upload an image using the Media Uploader, it immediately computes the URL for the image. But I don’t want to have to come back later after the domain has been repointed to edit the URLs in the post. Can’t I have the same delayed computation that bloginfo(‘url’) provides, but inside the content?

Solution 1: Shortcodes for your URLs

Edit your theme’s functions.php

function my_url($atts, $content = null) {
  return get_bloginfo('url'); 
}
add_shortcode("url", "my_url");  
 
function my_template_url($atts, $content = null) {
  return get_bloginfo('template_url'); 
}
add_shortcode("template_url", "my_template_url");  
 
function my_images_url($atts, $content = null) {
  return get_bloginfo('template_url') . '/images'; 
}
add_shortcode("images_url", "my_images_url");

Using this shortcode, I can upload the image, insert the image into the post, and then modify the URL to use the shortcode. I don’t have to return to edit the URL later.

  <img src="[images_url]/chunky.jpg" />

Solution 2: Shortcode for bloginfo itself

I found this solution at Blue Anvil

function bloginfo_shortcode( $atts ) {
    extract(shortcode_atts(array(
        'key' => '',
    ), $atts));
    return get_bloginfo($key);
}
add_shortcode('bloginfo', 'bloginfo_shortcode');

Demo

That was uploaded with the Media Uploader, and here’s the final markup

<a href="[bloginfo key='url']/wp-content/uploads/2010/02/chunky-e1266723693872.jpg">
<img src="[bloginfo key='url']/wp-content/uploads/2010/02/chunky-e1266723693872-225x300.jpg" 
alt="" title="chunky" width="225" height="300" class="alignnone size-medium wp-image-462" /></a>