Convert Content of Pre-Tags in HTML-Code

There are two different ways to display a source code instead of executing a source code in a post or page. Depending on preferences which HTML tag is defined in the style sheet and provided with formatting, code fragments are either declared by <code> or <pre>. In some cases, combining the blogger even both tags.

Conversion of special characters

If you want to use the pre Tag, then you have to take care that the code snippets, while parsing, are not executable. HTML-Entity is the solution.

Two options are available: One, manually, such as search and replace before pasting into the editor (HTML-Entities-table). but if you are smart you let WordPress doing the job.

Numerous methods for the simple conversion of the code set between pre-and/or code tags are on the web. But there is one for the direct use in WordPress, which takes over to convert the characters perfectly since WordPress 2.8.

//PHP-Code for functions.php

function pre_esc_html($content) {
  return preg_replace_callback(
    '#(<pre.*?>)(.*?)(</pre>)#imsu',
    create_function(
      '$i',
      'return $i[1].esc_html($i[2]).$i[3];'
    ),
    $content
  );
}

add_filter(
  'the_content',
  'pre_esc_html'
);

Useful links

Guest Post

This post is written by Sergej Müller wpseo.org, who created the popular WordPress Plugin to optimize your SEO.

Thank you very much from our part to Sergej.

If you also like to have your interesting post published on our website, please let us know on our contact page. Of course we will appreciate your contribution!

WordPress Plugin Development: Style Your Message Boxes

Displaying a message to the user after he started an action belongs to a good usability. In the era of Web 2.0 applications, the user is expecting such optical signal after his actions. Also WordPress Plugin developer should give the user a result message, if necessary, provided with further information.

The WordPress admin area often likes to show information at the top of the window. For developers, this has a great benefit: Tools for generating the error and information messages are integrated and can easily be implemented in Plugins - without any self-definitions or changes in the style sheet.

Automatically generated information in WordPress

wp_safe_redirect(
  add_query_arg(
    'updated',
    'true',
    wp_get_referer()
  )
);

Manual and more flexible solution to output a message box

<div id="message" class="updated">
  <p>
    Output
  </p>
</div>

Colorful: The availability of CSS classes

Messages within an application have to communicate different informations. For this purpose WordPress has numerous stylesheet classes available, which suits best to the message.

<div id="message" class="updated">...</div>

<div id="message" class="error">...</div>

<div id="message" class="updated highlight">...</div>

<div id="message" class="updated below-h2">...</div>

Recommendation

Don't use your own format. A common and familiar message box provides trust and increases the potential of perception.

Guest Post

This post is written by Sergej Müller wpseo.org, who created the popular WordPress Plugin to optimize your SEO.

Thank you very much from our part to Sergej.

If you also like to have your interesting post published on our website, please let us know on our contact page. Of course we will appreciate your contribution!

WordPress Developer Hint

With WordPress 3.0 debugging will be easier, whereas one constants gets eliminated and an already existing constant will do their work.

For developers the following 3 constants are important and should exist in every wp-config.php of a development system. Please use it with precaution on a live system!

Add define('WP_DEBUG', true); to wp-config.php to enable
the reporting of notices during development.

Add define('WP_DEBUG_DISPLAY', false); to wp-config.php to
disable the display of errors.

Add define('WP_DEBUG_LOG', true); to wp-config.php to log
eerrors to debug.log in the wp-content directory.
Sets PHP error handling and handles WordPress debug mode.

Recommendation for wp-config.php

/** Debugging WP */
define('WP_DEBUG', true); //enable the reporting of notices during development - E_ALL
define('WP_DEBUG_DISPLAY', true); //use the globally configured setting for display_errors and not force errors to be displayed
define('WP_DEBUG_LOG', true); //error logging to wp-content/debug.log
define('SCRIPT_DEBUG', true); //loads the development (non-minified) versions of all scripts and CSS and disables compression and concatenation,
//define('E_DEPRECATED', true); //E_ALL & ~E_DEPRECATED & ~E_STRICT

A small syntax with huge impact. I recommend this to everyone who is developing with WordPress, especially with Xdebug a fantastic help.