scriptygoddess

27 Sep, 2009

Adding a block of HTML to a WordPress post

Posted by: Jennifer In: WordPress|WordPress Hacks|WordPress: Lessons Learned

One problem with the WYSIWYG editor in WordPress is that if you are trying to manually add in a block of HTML, the editor may try to translate that block into paragraph format, inserting <p> tags where you didn't intend, possibly (and most likely) ruining what you were intending to do with your HTML code block.

Previously, my way around this had included the use of various plugins that had you wrap certain areas in your post with specific comments that would tell WordPress to leave that block alone and not insert those paragraph tags. There was still some issues doing it this way – as it required you to view these posts in the HTML view. Viewing them in the visual editor would mess everything up.

So, keeping in line with what seems to be a current trend at the moment of solving all my problems with shortcodes, that's how I've decided to solve this problem as of late.

First – (you'll only need to do this once) – add the PHP code so that you can do the shortcode. If you don't already have a functions.php file in your theme directory, create one and add the following code:

function scriptysAddHTML_func($atts) {
global $post;
$id = $atts['id'];
if (empty($id)) return;
return get_post_meta($post->ID, $id, true);
}
add_shortcode('html', 'scriptysAddHTML_func');

Then, in your post when you want to add some custom HTML, paste your block of HTML into the value of a new custom field. For the name of this custom field, give it a unique name with no spaces. (For example: My_HTML_Block)

In your WordPress post, where you want this block to appear, add the shortcode like this:

[html id=My_HTML_Block]

You would add it exactly like the above, except instead of My_HTML_Block, you would change that to be the name you gave your custom field.

Extra Tip If for some reason, you're using more than one shortcode in your post and it doesn't seem like they're working… if you're using them one right after the other, make sure there is a space between them. ie. If you're using my linebreak shortcode, and you were adding more than one linebreak… it might not work if you do this:




You my have to do this:




Little minor thing, but something you might not have thought of… figured I'd mention it. :)

1 Response to "Adding a block of HTML to a WordPress post"

1 | Kelvim

February 19th, 2010 at 1:36 pm

Avatar

Good job man! Thanks for sharing! =D

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements