Wordpress & Web Development

Make Your Own Shortcodes And More, With These 7 WordPress Hacks

James Bruce 09-05-2014

Plugins bother me – seeing a long list of them, each registering it’s own hooks and filters and … eugh. Sometimes a simple solution can be found with just a few lines in your functions.php file. Here are 10 of our favourites.


Note that functions.php is a part of your theme, and as such any hacks that you place in there will be lost when you change theme. You’ll need to copy those you want to keep over to the new theme – it’s not difficult by any means, but something to bear in mind in case your site suddenly breaks and can’t figure out why. If you make a mistake with coding these, you’ll be faced with a blank page (the ultimate guide to dealing with 500 server errors and blank pages in WordPress The Ultimate Guide to Solving 500 Internal Server Errors and Blank White Pages in WordPress Having trouble with 500 Internal Server Errors and blank pages in WordPress? Here's how to fix them right away. Read More will tell you some of the other ways this can happen) – so do be careful. Knowledge of PHP is also helpful (here’s our beginners guide to PHP Learn To Build With PHP: A Crash Course PHP is the language that Facebook and Wikipedia use to serve billions of requests daily; the de-facto language used for teaching people web programming. It’s beautifully simple, but brilliantly powerful. Read More ).

Add Thumbnails To The Admin Area

If you’re just getting around to adding post thumbnails The Complete Guide to Featured Thumbnails and Image Sizes in WordPress Here's everything you need to know about image sizes in WordPress and managing featured images. Read More , it can be immensely helpful to see at a glance which posts have yet to include a thumbnail – this snippet will add a new column to your admin screen when viewing All Posts. You can change the size by adjusting the variables in array (100,200), which specifies maximum width and height.

add_filter('manage_posts_columns', 'posts_columns', 5);
add_action('manage_posts_custom_column', 'posts_custom_columns', 5, 2);
function posts_columns($defaults){
	$defaults['post_thumbs'] = __('Thumbs');
	return $defaults;
function posts_custom_columns($column_name, $id){
	if($column_name === 'post_thumbs'){
		echo the_post_thumbnail( array(100,200) );

You should end up with something like this:


Make Your Own Shortcode For JS Snippets

Embedding JavaScript directly into post content can be problematic (but is possible, see the TinyMCE hack later in the article), particularly when those snippets are prone to changing often – thereby rendering all current posts broken. If the JavaScript you’re embedding includes a size attribute, you can also have problems when the theme changes and suddenly nothing fits anymore. Or perhaps you’ll just get tired of having to embed the same thing over and over again. Either way, a shortcode can help immensely.


Here’s the snippet for one I made to embed the weekly chatroom, which relies on the free tlk.io service. Using the shortcode chat, and given a single attribute of room, it embeds the relevant code pointing to the correct chatroom address – or in this case defaults to a generic “technophilia” room.

function chatroom($atts){
		'room' => 'technophilia'  
	), $atts));
	return '<div id="tlkio" data-channel="'.$room.'" style="width:100%;height:600px;"></div><script async src="http://tlk.io/embed.js" type="text/javascript"></script>';

Kill a Shortcode

If you no longer want to use a short code, you may find them littered in the output. This simple code will remove them, a short code “cleaner” if you will – though it doesn’t act on the database, only on the output of the post content.

function shortcode_cleaner() {
	remove_shortcode( 'chat' );
	add_shortcode( 'chat', 'my_remove_shortcode' );
add_action( 'init', 'shortcode_cleaner' );

function my_remove_shortcode(){
	return '';

Extract a YouTube Video From a Post

Featured images were introduced in version 2.9 to give each post one central representative image, but what if your post is more about the video? You could take a screen capture and use that as the featured image, or you could extract the video and embed it in place of a featured image instead. Call this function from within the loop to get a YouTube URL returned to do with as you wish.

function video_from_post() {
	global $post;
	$return = array();
	preg_match('|http://www.youtube.com/watch\?v=([a-zA-Z0-9_\-]+)|', $post->post_content, $matches);
	$v = $matches[1];
	$return[0] = $post;
	$return[1] = $v;
	return $return;

You may also want to make use of the following snippet which filters posts to remove YouTube URLs (since you’ll be using them elsewhere).


function remove_youtube ($content) {
	$search = '/http:\/\/www\.youtube\.com\/watch\?(.*?)v=([a-zA-Z0-9_\-]+)(\S*)/i';
	$content = preg_replace($search, "", $content, 1);
	return $content;
add_filter('the_content', 'remove_youtube');

Stop The Visual Editor Stripping HTML

The WordPress visual editor – TinyMCE – is great for most users, and can be extended to do even more with the TinyMCE Advanced plugin Take Control Of The WordPress Editor With TinyMCE Advanced Read More . For those who want a little less babysitting of their code though, this little snippet will stop TinyMCE from stripping out tags by expanding the list of valid elements, allowing you to embed things like iFrames or specify classes on elements.

function fb_change_mce_options($initArray) {
	// Comma separated string of extended tags
	$ext = 'pre[id|name|class|style|lang|escaped],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';
	if ( isset( $initArray['extended_valid_elements'] ) ) {
		$initArray['extended_valid_elements'] .= ',' . $ext;
	} else {
		$initArray['extended_valid_elements'] = $ext;
	$initArray['verify_html'] = false;
	return $initArray;
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

Finally, this one stops JavaScript from being stripped, but do bear in mind this opens up a big security hole in multi-author environments.

function disable_kses_content() {
	remove_filter('content_save_pre', 'wp_filter_post_kses');

Free Website Thumbnailer

WordPress.com offers a little known website thumbnailing service – that is, you can tell it the URL of a webpage, and it will generate and serve a thumbnail image of that website. Add the following snippet to create a “webthumb” short code, and use it by surrounding a URL like [webthumb]//www.makeuseof.com[/webthumb]. Use attributes to override width or height, and adjust the HTML output as you require. Thumbnails are cached, but it may take a little while to generate initially.

function websitethumbnails($atts, $content = null) {
		"snap" => 'http://s.wordpress.com/mshots/v1/',
		"alt" => 'My image',
		"w" => '600', // width
		"h" => '350' // height
	), $atts));

	$img = '<img class="shadowed" style="margin:10px;width:600px;height:350px" src="' . $snap . '' . urlencode($content) . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '"/>';
	return $img;
add_shortcode("webthumb", "websitethumbnails");

Add Featured Thumbnails to RSS Feeds

The following code will adjust both an excerpt or full RSS feed to include the featured thumbnail. You can also see how we’ve added a default link at the end of each item, linking back to the full post. You can of course change this to anything you want, such as including some share buttons.


function excerpt_thumbnail_feeds($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {  
		$content = '<div>' . get_the_post_thumbnail($post->ID,'featured') . '</div>' . rss_the_excerpt($post->ID,100);
	$content .= "<p>Read the full article: <a href='".get_permalink($post->ID)."'>".get_the_title($post->ID)."</a></p>";
	return $content;
add_filter("the_excerpt_rss", "excerpt_thumbnail_feeds");

// show post thumbnails in feeds
function full_thumbnail_feeds($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {  
		$content = '<div>' . get_the_post_thumbnail($post->ID,'featured') . '</div>' . $content;
	$content .= "<p>Read the full article: <a href='".get_permalink($post->ID)."'>".get_the_title($post->ID)."</a></p>";
	return $content;
add_filter("the_content_rss", "full_thumbnail_feeds”);

See – there’s an awful lot you can do without plugins, and this is just scratching the surface. If you want more, check out my list of IFTTT recipes for WordPress 5 Amazing IFTTT Recipes For WordPress Users IFTTT is the power-user's automation tool of choice; and WordPress is the ultimate blogger’s Swiss army knife. Just imagine the kind of world domination you could achieve by combining the two! Read More , or visit WPSnipp – a site with over 600 categorised snippet hacks.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *