Dynamic Blox

A Web Design Resourse

Breadcrumb Section

WordPress Hacks

WordPress Hacks

June, 10, 2015 | HTML,PHP

The WordPress API does some strange things from time to time that can leave you scratching your head. Sometimes you will make an update, preview and save it. Just when you thought it was safe to move on to another task, you double back to make sure everything is in working order, right? Wrong, your code and changes are mangled. Your images, videos and especially the iframes are wrapped in paragraph tags and some strange mark up you have never seen before. Today I have a couple of WordPress hacks that might help you with those issues. Below, you will find a code that you can add to your fuctions.php file at the start of every project to save time. It removes the <p> tag from your images, videos and iframe.

Remove the <p> tags from images and iFrame

function filter_ptags_on_images($content)
{
$content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
return preg_replace('/<p>\s*(<iframe .*>*.<\/iframe>)\s*<\/p>/iU', '\1', $content);
}
add_filter('the_content', 'filter_ptags_on_images');

add_shortcode( 'wp_caption', 'fixed_img_caption_shortcode' );
add_shortcode( 'caption', 'fixed_img_caption_shortcode' );

Fixed width is out, much like flip phones (unless you are Raymond Reddington). The hack for responsive videos was discovered years ago and has been well documented throughout the web (here is a refresher). The problem is that your average client more often than not, knows nothing about HTML and CSS. Regardless, they want to add videos to their website the same way you would for twitter and all of the other social networks. The problem with WordPress is that you never know how the system is going to behave once you drop a video in your post or page. To alleviate all of that inconsistency, how about a code that will automatically wrap your iframe video in a container that will make your video responsive on every platform. Add the code below into your functions.php, your clients will love you for this…

A Responsive container for embeds, and iframes

function db_embed_html( $html ) {
 return '<div class="tube">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'db_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'db_embed_html' );