.. Your Daily Design Dosis

10+ great and handy WordPress Code Snippets

| 8 Comments

WordPress comes with standard functions but there are many plugins and code snippets/hacks to give your blog a different look and/or function(s). Today I have collected some new code snippets that focus on extending the functionality of WordPress even further.

One of the main reasons I like to work with WordPress is because it’s an open source Content Management System (CMS) that is easy to customize. With a few lines of code you can get some cool customization and new features with all those filters, actions and hooks.

In this article I’ld like to show you 10+ great and handy code snippets/hacks that will help you extend the capabilities and functionalities of your WordPress site. But before I begin, as always, a word of warning ..

Note: These hacks worked at the time they were published, but as new versions of WordPress are released, some may no longer work. Please backup your theme before attempting any hacks so you can restore things if something goes wrong.

There are a lot more WordPress hacks and/or code snippets here in the gonzoblog, take a look in our tag-list WordPress Hacks. So, .. let’s hit the road Jack!

Add Custom Post Types to Tags and Categories in WordPress

So, if you’d like your custom post types to show up in archive listings for your site’s standard tags and categories you can add the following code to your functions.php file:

function add_custom_types_to_tax( $query ) {
if( is_category() || is_tag() && empty( $query->query_vars['suppress_filters'] ) ) {

// Get all your post types
$post_types = get_post_types();

$query->set( 'post_type', $post_types );
return $query;
}
}
add_filter( 'pre_get_posts', 'add_custom_types_to_tax' );

If you’d like to add only specific post types to listings of tags and categories you can replace the line:

$post_types = get_post_types();

with:

$post_types = array( 'post', 'your_custom_type' );

Source

Use Open Graph to make your content easily recognizable by social networks

Created by Facebook, Open Graph is a protocol which allow your blog or website to “talk” to social networks. Here is a super useful code snippet to add to your WordPress site to make it fully Open Graph compliant.

Simply paste the code below into your functions.php file. The snippet will automatically add the Open Graph metadata to the <head> section of your pages.

function opengraph_for_posts() {
    if ( is_singular() ) {
        global $post;
        setup_postdata( $post );
        $og_type = '<meta property="og:type" content="article" />' . "\n";
        $og_title = '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '" />' . "\n";
        $og_url = '<meta property="og:url" content="' . get_permalink() . '" />' . "\n";
        $og_description = '<meta property="og:description" content="' . esc_attr( get_the_excerpt() ) . '" />' . "\n";
        if ( has_post_thumbnail() ) {
            $imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
            $og_image = '<meta property="og:image" content="' . $imgsrc[0] . '" />' . "\n";
        }
        echo $og_type . $og_title . $og_url . $og_description . $og_image;
    }
}
add_action( 'wp_head', 'opengraph_for_posts' );

In order to make your blog fully compliant with the Open Graph protocol, you also have to edit your header.php file and replace the <html> tag by the following:

<html <?php language_attributes(); ?> prefix="og: http://ogp.me/ns#">

Source

Create a Pinterest “pin it” button for your WordPress blog

While facebook and twitter are definitely the two bigger social networking sites, Pinterest is also bringing lots of traffic to blogs. So what about adding a pinterest “Pin It” button to your blog? The first thing to do is to paste the following snippet where you’d like the “Pin It” button to be displayed. Note that this code must be inserted within the loop.

<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' ); echo $thumb['0']; ?>&description=<?php the_title(); ?>" count-layout="horizontal">Pin It</a>

Once done, open your footer.php file and add the pinterest JavaScript code:

<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>

Source

Remove autolinks from comments

By default WordPress will wrap any URL’s left in your comments in a nice <a> tag. While this can be a good thing, spammers will often abuse this. If you have a lot of spam comments getting by Akisment, you may want to remove the autolinking of URL’s. To do so, just add the following to your functions.php:

// Remove autolinks from comments
remove_filter('comment_text', 'make_clickable', 9);

Source Unknown

How to get the first link in posts

Sometimes you may want a post to link to somewhere else instead of providing a content, like the “link” type from the post formats do. To do so, here is a useful code snippet to get the first link from a post. The first thing to do is to integrate the function to your theme. To do so, paste this code into your functions.php file.

function get_content_link( $content = false, $echo = false ){
    if ( $content === false )
        $content = get_the_content(); 

    $content = preg_match_all( '/hrefs*=s*["']([^"']+)/', $content, $links );
    $content = $links[1][0];

    if ( empty($content) ) {
    	$content = false;
    }

    return $content;
}

The function above finds the first link in the post and returns it for you. In this way, you can link the title (or whatever) to this place, as demonstrated below:

<h2><a href="<?php echo get_content_link( get_the_content() ); ?>"><?php the_title(); ?></a></h2>

Source

wordpress-code-snippets

Automatically hide email adresses from spambots on your WordPress blog

Spambots are definitely a big problem on blogs and websites. Here is a handy code snippet to prevent spambots to scan your blog and steal email adresses for spamming purposes. Paste the following code into your functions.php file. Once you saved the file, the code will filter content and widget content to hide all e-mails from spambots.

function security_remove_emails($content) {
    $pattern = '/([a-zA-Z0-9._%+-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})/i';
    $fix = preg_replace_callback($pattern,
&quot;security_remove_emails_logic&quot;, $content);

    return $fix;
}
function security_remove_emails_logic($result) {
    return antispambot($result[1]);
}
add_filter( 'the_content', 'flex_remove_emails', 20 );
add_filter( 'widget_text', 'flex_remove_emails', 20 );

Source

Create a dropdown menu of tags

In order to display your categories in a dropdown menu, WordPress provide the wp_dropdown_categories() function. But if you want to display your tags in a dropdown as well, there’s no built in function. Let’s use wp_dropdown_categories() and modify it in order to be able to display tags in a dropdown menu.

Simply paste the following code where you want the dropdown menu to be displayed. Note that you can use your own taxonomy: Just modify the code on line 5 according to your needs.

<h2><?php _e('Posts by Tags'); ?></h2>
<form action="<?php bloginfo('url'); ?>/" method="get">
<div>
<?php
$select = wp_dropdown_categories('taxonomy=post_tag&show_option_none=Select tag&show_count=1&orderby=name&echo=0');
$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
echo $select;
?>
<noscript><div><input type="submit" value="View" /></div></noscript>
</div></form>

Source

Add a custom field to all posts

For some reason you sometimes need to add a custom field to all your existing posts. You can do it manually, but if you have lots of posts, the process will take a while. Here is a simple way to add a custom field to all posts quickly and easily.

Simply run the following SQL query on your WordPress database, using the command line client or PhpMyAdmin. This will automatically ad a custom field named MyCustomField to all your existing posts.

INSERT INTO wp_postmeta (post_id, meta_key, meta_value)
SELECT ID AS post_id, 'MyCustomField'
AS meta_key 'myvalue AS meta_value
FROM wp_posts WHERE ID NOT IN
(SELECT post_id FROM wp_postmeta WHERE meta_key = 'MyCustomField')
`` AND post_type = 'post';

Source

Remove WordPress version number from pages and feeds

By default, WordPress publicly display its version number in RSS and Atom feeds. Here is a code snippet that allows you to remove those version number from all your blog feeds. Simply paste the code snippet below in your functions.php file:

add_filter('the_generator', 'complete_version_removal');
function complete_version_removal() {
	return '';
}

Source

WP Shortcode to Display External Files

If you are looking for a quick way to automatically include external page content within your post, this snippet will create a shortcode allowing you to do it.

Paste this code into your themes functions.php file:

function show_file_func( $atts ) {
  extract( shortcode_atts( array(
    'file' => ''
  ), $atts ) );

  if ($file!='')
    return @file_get_contents($file);
}

add_shortcode( 'show_file', 'show_file_func' );

And then post this shortcode, editing the URL, into your post or page.

[show_file file="http://www.gonzoblog.nl/2012/02/22/15-fresh-and-useful-wordpress-hackssnippets/"]

Source

How to Easily Embed Instagram in WordPress with oEmbed

In this article, we will show you how to add instagram oEmbed support in WordPress.

All you have to do is open a blank .php file and call it wpb-instagram.php. Then copy the code below and save it in there. Upload the file into your plugins folder, and simply activate the plugin.

// Add Instagram oEmbed
function wpb_oembed_instagram(){
wp_oembed_add_provider( 'http://instagr.am/*/*', 'http://api.instagram.com/oembed' );
wp_oembed_add_provider( 'http://www.instagram.com/*/*', 'http://api.instagram.com/oembed' );
}
add_action('init','wpb_oembed_instagram');

Source

Display your latest tweet on your blog without using a plugin

Many plugins are available if you’re looking for a way to display your latest tweet on your blog. But you don’t really need to install a plugin for that.

Simply paste the following code anywhere in your theme files, where you want the tweets to be displayed. Don’t forget to update the code with your username on line 3. Max items to display can be defined on line 4.

<?php
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=gonzodesign');
$maxitems = $rss->get_item_quantity(2);
$rss_items = $rss->get_items(0, $maxitems);
?>

<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li>
<a href='<?php echo $item->get_permalink(); ?>'>
<?php echo $item->get_title(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>

Source

Change the WordPress Default Permalinks for Pages

By default, WordPress uses this as the Page permalink structure: ‘../%pagename%’. But let’s say you wanted to make it ‘../page/%pagename%/’ or ‘../%pagename%.html’ or something of that variation.

In this example, we will change the permalink structure to be something like this: ‘../page/credits.html’ (credits being the page slug). Put this code in your functions.php file.

add_action( 'init', 'custom_page_rules' );
function custom_page_rules() {
    global $wp_rewrite;
    $wp_rewrite->page_structure = $wp_rewrite->root . 'page/%pagename%.html';
}

If you want to change it to be just ‘../credits.html’, you could use something like ‘%pagename%.html’ and so on, and so on.

Source

Screenshots of External Pages Without a Plugin

This is a very simple URL script that will generate a screenshot of any website. Here is the URL:

http://s.wordpress.com/mshots/v1/http%3A%2F%2Fgonzoblog.nl%2F?w=600

You can see the result here. All you have to do is insert your required URL in the place of the ‘gonzoblog.nl’ part of the link and resize (‘w=600′) as required.

Source unknown

– § –

REMINDER: You can still tweet & comment to Win 1 of 5 premium multisite SliderShock licenses (by @webdesignshock), participation for this giveaway will close on 19th of December 2012.

 

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

8 comments

on this article: “10+ great and handy WordPress Code Snippets”
  1. Great blog here! Also your sute loads up very fast!
    What host are you using? Can I get your affiliate link to your host?
    I wish my web site loaded upp as quickly as yours lol

    • Hi Klara,

      .. hosting is very important for the loadtime of your site (my host’s link is in de footer), but there are more factors that speed up your site. A platform like shutterfly will NOT help you much, but also not optimized or compressed images, non-valide codes, a shitload of plugins, a lot of scripts, etc., etc. will not help you too.

      There are some intersting posts here for you, to optimize your website for speed. Good luck, cheers & ciao!

  2. What an awesome post. Really love to be a co-author here if admin wil let me.

    • Hi Agbonghama,

      Thanks man, glad you liked it! Sorry for my late reply, but I had several deadlines these last 2 weeks ..!?

      And yeah, I always have room for co-authors/guestbloggers here on the gonzoblog! You can send me an email via the contactform here on the gonzoblog.nl and we could set something up? Thanks for your comment buddy, enjoy your day ..!

      Cheers & Ciao!

  3. I simply couldn’t leave your website before suggesting that I extremely loved the usual info an individual provide for your visitors? Is going to be again often in order to check up on new posts

  4. Hi there I am so happy I found your blog, I
    really found you by accident, while I was researching on Aol for something
    else, Anyhow I am here now and would just like to
    say cheers for a tremendous post and a all round exciting blog (I also love the theme/design), I don’t have time to read it all
    at the minute but I have book-marked it and also
    added in your RSS feeds, so when I have time I will be back to read much
    more, Please do keep up the great work.

  5. Dude, I just grabbed ‘Add a custom field to all posts’, probably gonna re-work a project I just did where this would be som much better than what I did! Thanks!

    • Hey Patrick,

      great news mate, yeah, who doesn’t want an extra custom field ;-P – Make sure tho that you FIRST make a backup, don’t want you to lose all your data!

      Enjoy your weekend Patrick, be good man!