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

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

WordPress: Include your featured post image in RSS feeds

If you want to see your featured post image in your feeds, and want them to appear when your share it in social sites, all you need is to include this code in your theme’s functions.php file:

// Featured image in RSS feeds
add_filter('the_excerpt_rss', 'eg_insertthumbnailrss');
add_filter('the_content_feed', 'eg_insertthumbnailrss');
function eg_insertthumbnailrss($content) {
   global $post;
   if ( has_post_thumbnail( $post->ID )) {
    $content = "<p>" . get_the_post_thumbnail ( $post->ID, 'thumbnail' ) . "</p><br />" . $content;
  }
  return $content;
}

If your post has thumbnail pictures, they will appear on the top in paragraph tags. You can change how you want to see it, by manipulation the $content part in the if ( has_post_thumbnail( $post->ID )) statement.

You can also change which post image size you’d like to see. WordPress comes with three sizes by default, and one selection for the full image (thumbnail, medium, large or full). Your theme can also assign its own post thumbnail image sizes. Look for add_image_size('post-image-name'); line in your functions.php, and check the name, if you want to use your theme’s thumbnails.

Create sitemap.xml In WordPress Without Using Any Plugins

Everybody likes plugins, and most of them are really great (in case of WordPress). But some people like me, tend to do the work by themselves.

So, here is a simple code that will re-create a sitemap.xml file, everytime you publish a post or page. Copy the code and paste it to your theme’s functions.php file (wp-content/themes/your_theme_folder/functions.php).

PS. I added <?php … ?> for clean code coloring, you will not need those lines.

<?php
add_action("publish_post", "eg_create_sitemap");
add_action("publish_page", "eg_create_sitemap");

function eg_create_sitemap() {
  $postsForSitemap = get_posts(array(
    'numberposts' => -1,
    'orderby' => 'modified',
    'post_type'  => array('post','page'),
    'order'    => 'DESC'
  ));
  
  $sitemap = '<?xml version="1.0" encoding="UTF-8"?>';
  $sitemap .= '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">';
  
  foreach($postsForSitemap as $post) {
    setup_postdata($post);
    
    $postdate = explode(" ", $post->post_modified);
    
    $sitemap .= '<url>'.
      '<loc>'. get_permalink($post->ID) .'</loc>'.
      '<lastmod>'. $postdate[0] .'</lastmod>'.
      '<changefreq>monthly</changefreq>'.
    '</url>';
  }
  
  $sitemap .= '</urlset>';
  
  $fp = fopen(ABSPATH . "sitemap.xml", 'w');
  fwrite($fp, $sitemap);
  fclose($fp);
}
?>

If you’ve got custom post types, you’ll need to add the registered taxonomy to ‘post_type’ array part of the code.

For a big blog with thousands of posts, creating a sitemap.xml file with every post publish action might not be a good solution, so keep that in mind.