WordPress: Disable Auto Paragraphing, wpautop() and clean_pre() Functions

When it comes to paragraphs, we can all say that WordPress is in love with them. After publishing a post every text block turns into a <p> code, every double <br /> disappears. Your so much worked post design gets ruined. Or does it?

With AutoP WordPress tries to correct errors, and makes the posts much more readable. Even though I had my share of problems, I don’t hate the wpautop. But when it comes to my <pre> tags, I had to do something.

While designing my new theme, I looked and tested lots of code highlighters, php, jquery, mootools, pear, etc etc… The one I choose was, Geshi. Not because others were bad in coding, but I already had too many CSS and JS links, I did not want to add a lot more just for the code highlighting. So, in short, I accepted the server side coding path.

My problems started here. Even though Geshi was working great with HTML characters, WordPress’s wpautop() and clean_pre() were changing my php code which included some html. Both these functions are located in wp-includes/formatting.php. But don’t temper the core file, there is a better way.

First there is no way of disabling the clean_pre function single-handedly, as it is called inside wpautop. But wpautop is called in a few WordPress filters, and not as a direct function. So, disabling these actions will remove two functions together. You’ll need to put these lines in your theme’s functions.php file:

// Remove WordPress Auto P
remove_filter( 'the_content', 'wpautop' );
// Auto P is also called in these filters, I'm just adding these lines for your information.
// If you want to disable them, uncomment
// remove_filter( 'the_content', 'wpautop' );
// remove_filter( 'the_excerpt', 'wpautop' );
// remove_filter( 'comment_text', 'wpautop' ); // <-- Be careful with this one

Great, no more auto p… but wait my blog is messed up!

Now, all your double newlines, are double newlines, but not pharagraphs with breaks. If this is what you wanted, then great, mission accomplished. However, you might not be happy with what you are seeing. You can edit and enclose every pharagraph in every post you’ve published, or simply re-initialize a new wpautop function.

I’ll be using the slightly altered wpautop and clean_pre in here, so don’t get frightened by the length of the code.

// Remove WordPress Auto P
remove_filter( 'the_content', 'wpautop' );
// And insert our new Auto P
add_filter( 'the_content', 'eg_wpautop' );
function eg_wpautop($pee, $br = 1) {
  if ( trim($pee) === '' )
    return '';
  $pee = $pee . "\n"; // just to make things a little easier, pad the end
  $pee = preg_replace('|<br />\s*<br />|', "\n\n", $pee);
  // Space things out a little
  $allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|select|option|form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary)';
  $pee = preg_replace('!(<' . $allblocks . '[^>]*>)!', "\n$1", $pee);
  $pee = preg_replace('!(</' . $allblocks . '>)!', "$1\n\n", $pee);
  $pee = str_replace(array("\r\n", "\r"), "\n", $pee); // cross-platform newlines
  if ( strpos($pee, '<object') !== false ) {
    $pee = preg_replace('|\s*<param([^>]*)>\s*|', "<param$1>", $pee); // no pee inside object/embed
    $pee = preg_replace('|\s*</embed>\s*|', '</embed>', $pee);
  }
  $pee = preg_replace("/\n\n+/", "\n\n", $pee); // take care of duplicates
  // make paragraphs, including one at the end
  $pees = preg_split('/\n\s*\n/', $pee, -1, PREG_SPLIT_NO_EMPTY);
  $pee = '';
  foreach ( $pees as $tinkle )
    $pee .= '<p>' . trim($tinkle, "\n") . "</p>\n";
  $pee = preg_replace('|<p>\s*</p>|', '', $pee); // under certain strange conditions it could create a P of entirely whitespace
  $pee = preg_replace('!<p>([^<]+)</(div|address|form)>!', "<p>$1</p></$2>", $pee);
  $pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee); // don't pee all over a tag
  $pee = preg_replace("|<p>(<li.+?)</p>|", "$1", $pee); // problem with nested lists
  $pee = preg_replace('|<p><blockquote([^>]*)>|i', "<blockquote$1><p>", $pee);
  $pee = str_replace('</blockquote></p>', '</p></blockquote>', $pee);
  $pee = preg_replace('!<p>\s*(</?' . $allblocks . '[^>]*>)!', "$1", $pee);
  $pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*</p>!', "$1", $pee);
  if ($br) {
    $pee = preg_replace_callback('/<(script|style).*?<\/\\1>/s', '_autop_newline_preservation_helper', $pee);
    $pee = preg_replace('|(?<!<br />)\s*\n|', "<br />\n", $pee); // optionally make line breaks
    $pee = str_replace('<WPPreserveNewline />', "\n", $pee);
  }
  $pee = preg_replace('!(</?' . $allblocks . '[^>]*>)\s*<br />!', "$1", $pee);
  $pee = preg_replace('!<br />(\s*</?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)[^>]*>)!', '$1', $pee);
  if (strpos($pee, '<pre') !== false)
    $pee = preg_replace_callback('!(<pre[^>]*>)(.*?)</pre>!is', 'eg_clean_pre', $pee );
  $pee = preg_replace( "|\n</p>$|", '</p>', $pee );

  return $pee;
}

function eg_clean_pre($matches) {
  if ( is_array($matches) )
    $text = $matches[1] . $matches[2] . "</pre>";
  else
    $text = $matches;

  $text = str_replace('<br />', '', $text); // I love this line, Geshi adds too many <br /> tags
  // I don't like this one -> $text = str_replace('<p>', "\n", $text);
  // I'm not fond of this one either -> $text = str_replace('</p>', '', $text);

  return $text;
}

Now, I’ve removed the WordPress autop, and defined my own eg_wpautop(). I can change, remove or add new lines to the function.

You can see the clean_pre in work near the end:

  if (strpos($pee, '<pre') !== false)
    $pee = preg_replace_callback('!(<pre[^>]*>)(.*?)</pre>!is', 'eg_clean_pre', $pee );
  $pee = preg_replace( "|\n</p>$|", '</p>', $pee );

If you don’t want your pre tags get messed up, or your inline p and br tags -which even though are part of your code gets truncated- just remove these lines I commented out. You can also remove the pre tag from any preg_replace and $allblocks variable. For clean_pre, another solution is writing your very own function and assigning it to the preg_replace_callback. This was how I solved my code highlighting/Geshi problem.

Remove and change any line(s) you like from now on, experiment and see what difference it makes on your posts. I’m sure that 99% of the code, you’ll be keeping. It is a hell of a well written function

Javascript Libraries Deconstructed

Here is a great site if you want to check what is going on under Jquery, MooTool or Prototype libraries. This site is helping us to understand how the internal code of these libraries are constructed, usage advantages plus disadvantages and problems we might encounter.

JS Libs Deconstructed converts every function, object, block into easily navigatable visual blocks. Clicking a box views the internal code of the library, and the link goes directly to the library’s documentation.

Here are some quotes from the site…

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
Prototype is a JavaScript Framework that aims to ease development of dynamic web applications, featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around.
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

PS. Mootools is not yet deconstructed…

WordPress: How To Show The Featured Image Of Posts In Social Sharing Sites

We all see people sharing links with images attached to them, on Facebook and Friendfeed. Most other sharing sites also support adding an image to your shares automatically.

This is simply done by a meta link tag: <link rel="image_src" href="your_image_url" />

If your WordPress template supports featured images, it is relatively easy to add this meta tag. Open your template’s php file, which sends out the headers (meta tags, link tags, title, etc, everything between the <head> </head> tags). The file you’ll be changing most probably is named header.php. Some themes have headers in index.php. So check these two files out.

Add these three lines of codes inside the head tags:

<?php if ( is_single() and function_exists('has_post_thumbnail') and has_post_thumbnail($post->ID) ) : ?>
<link rel="image_src" href="<?php $thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium'); echo $thumb[0]; ?>" />
<?php endif; ?>

If your image has a post thumbnail (featured image) attached to it, this code will create the link tag. Now when anybody shares this post on social sites, your post thumbnail will appear. You can change the size of the image to thumbnail, medium, large or full. But sharing sites most probably will resize it.

If your theme comes with other thumbnail sizes, you can find them in functions.php file of your theme. Look for a line starting with add_image_size() wp function, and you can find the name of the attachment.

But my theme does not support featured images?

Then you have two solutions for the problem. First, you can force your theme to support post thumbnails. You’ll be able to add an image to your posts, but you’ll not be able to see it when you publish the post. However, the attachment will be made, and link tag will be created for you.

To enable the thumbnail support, open your theme’s functions.php file, and add these lines at the beginning.

add_theme_support('post-thumbnails', array( 'post' ));
add_image_size('link-thumbnail', 200, 200, true)

Now you have thumbnail support. Plus, the second line adds a new kind of image size called “link-thumbnail” with size of 200px width and height, which you can use in the link tag creation. You can change the “true” part at the end, if you do not want to smart-crop your images.

Remember, you’ll also need to insert the first code I gave into your header.php (or again to index.php depending on your theme) file.

Don’t need thumbnail support, what is the second solution?

Well, you can check for images in the post content, and use the first image as a link tag. Again in the head section of your theme (either in your theme’s header.php or index.php as I mentioned earlier) you’ll need to add these lines of code:

<?php
if ( is_single() ) :
  $postimages = array();
  preg_match_all('@<img.+src="(.*)".*>@Uims' , $post->post_content, $postimages);
  $image = end($postimages);
?>
<?php if($image): ?>
<link rel="image_src" href="<?php echo $image[0]; ?>" />
<?php endif;
endif;
?>

This will get the post’s attachments, and create the link tag from the first one.

An addition for those who have the post thumbnails support

You can also add the last code I gave here. Even if you did not attach any post thumbnails but included some images in your posts, your post will be shared with an image.

And the end…

It is possible to have more than one link image tag in your posts. You can alter the last code to include all your images (you might have seen how on Facebook some links come with more than one thumbnails while you are adding a link). To accomplish this, the last code I gave you becomes:

<?php
if ( is_single() ):
  $postimages = array();
  preg_match_all('@<img.+src="(.*)".*>@Uims', $post->post_content, $postimages);
?>
<?php foreach($postimages[1] as $image): ?>
<link rel="image_src" href="<?php echo $image; ?>" />
<?php endforeach;
endif;
?>

After you arranged your files with the new code, try sharing one of your posts on Facebook, Friendfeed or some other site that supports images with links. If it is not working for you, you might be doing something wrong, leave a comment.

Have fun

Take 2 on UTF8 BOM : Remove BOM with PHP

Some people asked me about my UTF8 BOM problems in PHP and XML post. They were wondering if it was possible to remove the BOM from the files, without damaging it. And if PHP could do this. They had hundreds of files with UTF8 BOM in them and it would be time consuming to remove by hand, if they weren’t able to find a solution.

My answer was, “of course”. PHP can read and remove BOM from every file. As we encounter this problem only in text based files, a string remover will do the trick. Applause for substr().

At the end of the post, you can find my old BOM php code tweaked a little. This time it finds plus removes the UTF8 BOM problems out of your life.

Remember

GET A COMPLETE BACKUP OF YOUR FILES BEFORE YOU RUN THIS SCRIPT. Some files and software depend on the BOM to understand the content encoding. I won’t accept any responsibilities on how you used the code or what happened with it. So, be careful.

After this paranoid paragraph, here is the refurbished code. Just copy paste it to a text file, save as .php and run. Don’t use notepad. Oh what the hell, use it if you like, this baby will remove BOM from itself too

<?php 
// Tell me the root folder path.
// You can also try this one
// $HOME = $_SERVER["DOCUMENT_ROOT"];
// Or this
// dirname(__FILE__)
$HOME = dirname(__FILE__);

// Is this a Windows host ? If it is, change this line to $WIN = 1;
$WIN = 0;

// That's all I need
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UTF8 BOM FINDER and REMOVER</title>
<style>
body { font-size: 10px; font-family: Arial, Helvetica, sans-serif; background: #FFF; color: #000; }
.FOUND { color: #F30; font-size: 14px; font-weight: bold; }
</style>
</head>
<body>
<?php
$BOMBED = array();
RecursiveFolder($HOME);
echo '<h2>These files had UTF8 BOM, but i cleaned them:</h2><p class="FOUND">';
foreach ($BOMBED as $utf) { echo $utf ."<br />\n"; }
echo '</p>';

// Recursive finder
function RecursiveFolder($sHOME) {
  global $BOMBED, $WIN;
  
  $win32 = ($WIN == 1) ? "\\" : "/";
  
  $folder = dir($sHOME);
  
  $foundfolders = array();
  while ($file = $folder->read()) {
    if($file != "." and $file != "..") {
      if(filetype($sHOME . $win32 . $file) == "dir"){
        $foundfolders[count($foundfolders)] = $sHOME . $win32 . $file;
      } else {
        $content = file_get_contents($sHOME . $win32 . $file);
        $BOM = SearchBOM($content);
        if ($BOM) {
          $BOMBED[count($BOMBED)] = $sHOME . $win32 . $file;
          
          // Remove first three chars from the file
          $content = substr($content,3);
          // Write to file 
          file_put_contents($sHOME . $win32 . $file, $content);
        }
      }
    }
  }
  $folder->close();
  
  if(count($foundfolders) > 0) {
    foreach ($foundfolders as $folder) {
      RecursiveFolder($folder, $win32);
    }
  }
}

// Searching for BOM in files
function SearchBOM($string) { 
    if(substr($string,0,3) == pack("CCC",0xef,0xbb,0xbf)) return true;
    return false; 
}
?>
</body>
</html>