Here are useful code snippets and hacks that will help you extend the capabilities of your WordPress site, and of course save your time.
Auto Generated select Menu For Shortcode
This snippet automatically generated select menu list of your shortcodes.
add_action( 'after_setup_theme', 'wpse3882_after_setup_theme' );
function wpse3882_after_setup_theme()
{
add_editor_style();
}
add_filter('mce_buttons_2', 'wpse3882_mce_buttons_2');
function wpse3882_mce_buttons_2($buttons)
{
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('tiny_mce_before_init', 'wpse3882_tiny_mce_before_init');
function wpse3882_tiny_mce_before_init($settings)
{
$settings['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4';
// From http://tinymce.moxiecode.com/examples/example_24.php
$style_formats = array(
array('title' => 'Bold text', 'inline' => 'b'),
array('title' => 'Red text', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
array('title' => 'Red header', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
array('title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1'),
array('title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2'),
array('title' => 'Table styles'),
array('title' => 'Table row 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
);
// Before 3.1 you needed a special trick to send this array to the configuration.
// See this post history for previous versions.
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}Add/remove contact info fields
User profiles in WordPress by default have these fields for Contact Info by default: E-mail, Website, AIM, Yahoo IM, Jabber / Google Talk. You can remove those and add new ones as you wish, like in this example code for your functions.php file in your theme:
function new_contactmethods( $contactmethods ) {
$contactmethods['twitter'] = 'Twitter'; // Add Twitter
$contactmethods['facebook'] = 'Facebook'; // Add Facebook
unset($contactmethods['yim']); // Remove YIM
unset($contactmethods['aim']); // Remove AIM
unset($contactmethods['jabber']); // Remove Jabber
return $contactmethods;
}
To display that publicly, you could:
$user_id = 1;
$key = 'twitter';
$single = true;
$user_twitter = get_user_meta( $user_id, $key, $single);
echo $user_twitter;
Check if post has more than one image attached
Pretty simple if statement, to check if the post has more than one image display a slider, else display the single image.
<?php
$attachments = get_children(
array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'post_parent' => $post->ID
));
if(count($attachments) > 1) { ?>
<!-- Do something like show a slider -->
<?php } else { ?>
<!-- Display a single image -->
<?php } ?>
Get custom field value with shortcode
Adding this PHP code to the functions.php of your wordpress theme will enable you to get custom field values using shortcode.
add_shortcode('field', 'shortcode_field');
function shortcode_field($atts){
extract(shortcode_atts(array(
'post_id' => NULL,
), $atts));
if(!isset($atts[0])) return;
$field = esc_attr($atts[0]);
global $post;
$post_id = (NULL === $post_id) ? $post->ID : $post_id;
return get_post_meta($post_id, $field, true);
}
then add shortcode in the post
[field "my_key"]
[field "my_key" post_id=1]
Expanding code box (customized)
This is a customized version of Chris Coyier’s expanding code box posted at DigWP.com some time ago.
$(function(){
$('article.category-code pre').hover(function(){
var codeInnerWidth = $('code',this).width() + 15;
if(codeInnerWidth > 475){
$(this).stop(true,false).css({'overflow-x':'scroll'}).animate({width:860},{'duration':'fast','easing':'swing'});
$('#sidebar').css({'opacity':'0.5'});
}else if(codeInnerWidth > 860){
$(this).stop(true,false).css({'overflow':'auto'}).animate({width:860},{'duration':'fast','easing':'swing'});
$('#sidebar').css({'opacity':'0.5'});
}
},function(){
$(this).stop(true,false).css({'overflow':'hidden'}).animate({width:475},{'duration':'fast','easing':'swing'});
$('#sidebar').css({'opacity':'1.0'});
});
});
Another expanding code box script…
$('pre').hover(function(){
$(this).stop().animate({width:890},300).css({'overflow-x':'scroll'});
$('#sidebar').css({'opacity':'0.5'});
},function(){
$(this).stop().animate({width:550},300).css({'overflow-x':'scroll'});
$('#sidebar').css({'opacity':'1.0'});
});
$('pre').hover(function(){
var codeInnerWidth = $('code',this).width() + 10;
if(codeInnerWidth > 555){
$(this).stop().animate({width:890},300).css({'overflow-x':'scroll'});
$('#sidebar').css({'opacity':'0.5'});
}
},function(){
$(this).stop().animate({width:555},300).css({'overflow-x':'auto'});
$('#sidebar').css({'opacity':'1.0'});
});
});
Add Custom Post Type to feed
Adding a custom post type to your site’s main feed.
// Add a Custom Post Type to a feed
function add_cpt_to_feed( $qv ) {
if ( isset($qv['feed']) && !isset($qv['post_type']) )
$qv['post_type'] = array('post', '<CPT>');
return $qv;
}
add_filter( 'request', 'add_cpt_to_feed' );
Display attachment thumbnail with image metadata
This snippet will display a list of all post attachments with the following metadata (Credit, Camera, Focal Length, Aperture, ISO, Shutter Speed, Time Stamp, Copyright).
Add within the loop of your index.php template file…
<?php
if($images =& get_children( 'post_type=attachment' )){
foreach($images as $id => $attachment ){
echo '<div>';
echo wp_get_attachment_image( $id, 'thumb' )."<br />";
$meta = wp_get_attachment_metadata($id);
echo "Credit: ".$meta[image_meta][credit]."<br /> ";
echo "Camera: ".$meta[image_meta][camera]."<br />";
echo "Focal length: ".$meta[image_meta][focal_length]."<br />";
echo "Aperture: ".$meta[image_meta][aperture]."<br />";
echo "ISO: ".$meta[image_meta][iso]."<br />";
echo "Shutter speed: ".$meta[image_meta][shutter_speed]."<br />";
echo "Time Stamp: ".$meta[image_meta][created_timestamp]."<br />";
echo "Copyright: ".$meta[image_meta][copyright];
echo '</div>';
}
}
?>
How to display your latest Google+ update on your WordPress blog
Simply paste the following code where you want to display your latest Google+ update. Don’t forget to put your Google+ ID on line 3.
<?php
include_once(ABSPATH.WPINC.'/rss.php');
$googleplus = fetch_feed("http://plusfeed.appspot.com/103329092193061943712"); // Replace 103329092193061943712 by your own ID
echo '<a href="';
echo $googleplus->items[0]['link']; echo '">';
echo $googleplus->items[0]['summary'];
echo '';
?>
HTML5 Audio Shortcode for Posts and Pages
Just add first code in the functions.php of your wordpress theme.
function html5_audio($atts, $content = null) {
extract(shortcode_atts(array(
"src" => '',
"autoplay" => '',
"preload"=> 'true',
"loop" => '',
"controls"=> ''
), $atts));
return '<audio src="'.$src.'" autoplay="'.$autoplay.'" preload="'.$preload.'" loop="'.$loop.'" controls="'.$controls.'" autobuffer />';
}
add_shortcode('audio5', 'html5_audio');
then add shortcode to a post or page to add HTML5 audio.
[audio5 src="http://your-site/videos/your-video.mp4" loop="true" autoplay="autoplay" preload="auto" loop="loop" controls=""]
Shortcode for HTML5 video in posts
Adding the first snippet to the functions.php of your wordpress theme will create a new HTML5 video shortcode.
function html5_video($atts, $content = null) {
extract(shortcode_atts(array(
"src" => '',
"width" => '',
"height" => ''
), $atts));
return '<video src="'.$src.'" width="'.$width.'" height="'.$height.'" controls autobuffer>';
}
add_shortcode('video5', 'html5_video');
then add shortcode to a post or page to display html5 video.
[video5 src="http://your-site/videos/your-video.mp4" width="720" height="480"]
