Konstruktors» how to

How to Embed Your YouTube Channel as a Playlist

Kaspars — Sun, 13 Nov 2011 11:43:47 +0000

Update: There is an undocumented ID of your channel playlist which is available in the current beta version of YouTube UI as described by Federico in the comments.

For some reason YouTube doesn’t offer a simple way to embed your YouTube channel. The only official method is to manually create a playlist with all your videos and embed that. However, it requires additional work after every upload which is not cool, especially if you’re on a mobile. Here is a simple script that creates an HTML5 (iframe) player using the YouTube API:

(function() {
    function createPlayer(jqe, video, options) {
        var ifr = $('iframe', jqe);
        if (ifr.length === 0) {
            ifr = $('');
            ifr.addClass('player');
            if (options.playeropts)
                ifr.attr(options.playeropts);
        }
        var src = 'http://www.youtube.com/embed/' + video;
        if (options.playopts) {
            src += '?';
            for (var k in options.playopts) {
                src+= k + '=' + options.playopts[k] + '&';
            }
        }
        ifr.attr('src', src);
        jqe.append(ifr);
    }

    var defoptions = {
        autoplay: false,
        user: null,
        player: createPlayer,
        playeropts: {},
        loaded: function() {},
        playopts: {
            fs: 1,
            showinfo: 1,
            modestbranding: 1
        }
    };

    $.fn.extend({
        youTubeChannel: function(options) {
            var md = $(this);
            var allopts = $.extend(true, {}, defoptions, options);
            $.getJSON('http://gdata.youtube.com/feeds/api/users/' + allopts.user + '/uploads?alt=jsonc&v=2', null, function(data) {
                var videos = [];
                var playlist = '';
                $.each(data.data.items, function(i, item) {
                    videos.push(item.id);
                    if (i > 0)
                        playlist += item.id + ',';
                });
                allopts.playopts.playlist = playlist;
                allopts.player(md, videos[0], allopts);
            });
        }
    });

})();

$(function() {
    $('#player').youTubeChannel({user:'kasparsdambis', playeropts: { width: 400, height: 280 }});
});

Use Sticky Posts as Category Description

Kaspars — Wed, 09 Nov 2011 14:24:56 +0000

On putukrejums.lv blog we use the ‘sticky’posts to add introductory information to all category pages (see here, for example). This approach is better than using the category description field because it allows for all the usual formatting options.

Here is how to add sticky posts on top of their respective category index pages and hide them from the rest of pages and indexes:

add_action('pre_get_posts', 'alter_stickies');
function alter_stickies($query) {
	if (!$query->is_category && !$query->is_single)
		$query->set('post__not_in', get_option('sticky_posts'));
}

add_filter('posts_orderby', 'sticky_orderby');
function sticky_orderby($orderby){
	global $wpdb;
	if (is_category())
		$orderby = "Field(". $wpdb->prefix ."posts.ID," . implode(',', get_option('sticky_posts')) . ") DESC, " . $orderby;
 	return $orderby;
}

Add the is-sticky class to the post wrap for additional formatting control:

add_filter('post_class', 'add_stickies_class');
function add_stickies_class($classes) {
	if (is_sticky())
		$classes[] = 'is-sticky';
	return $classes;
}

Redirect Sticky Posts to Their Category Index Page

We don’t want the sticky posts to be available as individual posts that can be access via their permalinks because this information is already being displayed at the top of every category index page. Here is a simple filter to redirect all sticky posts to their category index pages:

add_action('template_redirect', 'redirect_stickies');
function redirect_stickies() {
	global $wp_query;

	if (!is_single())
		return;
	$stickies = get_option('sticky_posts');
	if (empty($stickies))
		return;

 	if (in_array($wp_query->post->ID, $stickies))
		if ($cats = get_the_category($wp_query->post->ID))
			if ($cat = end($cats))
				wp_redirect(get_category_link($cat->cat_ID), '302');
}

Check Who is Tweeting About Your Blog or Website

Kaspars — Mon, 24 Oct 2011 16:16:32 +0000

Knowing who is talking about your blog or website on Twitter is easy — simply subscribe to the following RSS feed:

http://search.twitter.com/search.rss?q=konstruktors.com

Replace konstruktors.com with your own domain.

How to Automatically Add Image Credit or Source URL to Photo Captions in WordPress

Kaspars — Sun, 16 Oct 2011 16:32:44 +0000

Photo credit added automatically to every photo with a caption (via putukrejums.lv)

Crediting and linking the source of any republished photo or illustration on the web is one of the most important best practices of web publishing. Unfortunately, there isn’t a standard way of doing it in WordPress and authors are left with their own decision on how and where to credit the original author or website.

I decided to add a simple “Source URL” input field to every image that is uploaded. Adding credit with a link to the source of that image now becomes as easy as adding a title or caption for an image:

Implementation

You need to add the following snippet of PHP to your theme’s functions.php:

Add the source URL input field to image upload screen

add_filter("attachment_fields_to_edit", "add_image_source_url", 10, 2);
function add_image_source_url($form_fields, $post) {
	$form_fields["source_url"] = array(
		"label" => __("Source URL"),
		"input" => "text",
		"value" => get_post_meta($post->ID, "source_url", true),
                "helps" => __("Add the URL where the original image was posted"),
	);
 	return $form_fields;
}

add_filter("attachment_fields_to_save", "save_image_source_url", 10 , 2);
function save_image_source_url($post, $attachment) {
	if (isset($attachment['source_url']))
		update_post_meta($post['ID'], 'source_url', esc_url($attachment['source_url']));
	return $post;
}

Automatically append the source URL to image captions

add_filter('img_caption_shortcode', 'caption_shortcode_with_credits', 10, 3);
function caption_shortcode_with_credits($empty, $attr, $content) {
	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> 'alignnone',
		'width'	=> '',
		'caption' => ''
	), $attr));

	// Extract attachment $post->ID
	preg_match('/\d+/', $id, $att_id);
	if (is_numeric($att_id[0]) && $source_url = get_post_meta($att_id[0], 'source_url', true)) {
		$parts = parse_url($source_url);
		$caption .= ' ('. __('via') .' '. $parts['host'] .')';
	}

	if (1 > (int) $width || empty($caption))
		return $content;

	if ($id)
		$id = 'id="' . esc_attr($id) . '" ';

	return ''
		. do_shortcode($content) . '' . $caption . '';
}

Please note that the source URL will be visible only if you specify image caption upon inserting the image.

WebKit Bug: Anti-aliasing for @font-face fonts

Kaspars — Sun, 02 Oct 2011 14:43:15 +0000

This is a known Webkit bug — any text with @font-face applied will be rendered without anti-aliasing if there is a text element without anti-aliasing applied preceding it. Usually those are fonts smaller than 5px or monospaced fonts at small sizes which are rendered without anti-aliasing.

I noticed this bug on this page — the heading “Kāzu ABC” was rendered aliased despite having the main menu in between that heading and the logo which had font-size:1px; applied. The only way to fix this is by avoiding aliased text directly before elements that use @font-face.

Here is a live demo of the bug.

How to Exclude Sticky Posts from Adjacent Post Links

Kaspars — Thu, 08 Sep 2011 11:21:22 +0000

add_filter('get_previous_post_where', 'remove_stickies_adjacent');
add_filter('get_next_post_where', 'remove_stickies_adjacent');
function remove_stickies_adjacent($where) {
	return $where . ' AND p.ID NOT IN (' . implode(',', get_option('sticky_posts')) . ')';
}

Remove Inline CSS and Line Breaks in WordPress Galleries

Kaspars — Sat, 19 Mar 2011 22:07:55 +0000

Inline CSS and line breaks that are automatically added to the image galleries in WordPress is an example of how the needs of Automattic and WordPress.com influence the way new features are added to the WordPress core. So instead of editing every single theme on WordPress.com and adding the necessary CSS for galleries to look good in all of them, they decided to put it WordPress core.

Here is how to replace those double line breaks with a single and remove the inline CSS:

add_filter('the_content', 'remove_br_gallery', 11);
function remove_br_gallery($output) {
	return preg_replace('/(]*>\s*){2,}/', '
', $output);
}

add_filter('use_default_gallery_style', '__return_false');

A Simple PHP Utility to Migrate Emails Between Two IMAP/POP Accounts

Kaspars — Wed, 16 Mar 2011 18:53:46 +0000

I wrote this little (quick & dirty) PHP command line utility to migrate around 10 email accounts from my IMAP server to Google Apps.

Replace WordPress Login Logo With Your Site’s Name and Link

Kaspars — Mon, 28 Feb 2011 09:38:32 +0000

There are several plugins out there that allow you to replace the WordPress logo on the login screen. Here is a simple way to replace that logo with your site’s name — place this in your theme’s functions.php:

add_filter('login_headerurl', 'my_login_url_local');
function my_login_url_local() {
	return get_bloginfo('url');
}

add_filter('login_headertitle', 'my_login_title_attr');
function my_login_title_attr() {
	return esc_attr(get_bloginfo('name'));
}

add_action('login_head', 'my_style_site_name');
function my_style_site_name() {
?>


Here is how it will look:

Related posts

Notes on the 2010 WordPress Theme
Remove Inline CSS and Line Breaks in WordPress Galleries
How to Automatically Add Image Credit or Source URL to Photo Captions in WordPress



How to Add Simple Google Site Search to Any Website
Kaspars — Thu, 17 Feb 2011 09:12:36 +0000
Built-in search engines of WordPress, Drupal and other content management systems are good, but not as good as Google. Here is a simple way to create a Google search form that will return results only from your site:

	
	
	

which will look like this:





This form does redirect your visitors to Google, but the results returned are only from your site, so there is nothing to worry about. And with Googling indexing blogs almost instantly, there are actually very little drawbacks from using this approach for site search.
Related posts

Optimize for search engines or users?
Show Ads Only to Visitors Coming from Search Engines
Google Sitelinks