Posts tagged how to

Enable WordPress Dashboard Quick Login

#

All of the web browsers today have input autocomplete or auto-fill feature built-in and chances are that you have your WordPress username and password stored in the browser and the input fields are completed automatically upon visiting /wp-login.php. Wouldn’t it be nice if WordPress would log you in automatically if the fields have been pre-filled by the browser?

Here is a simple snippet of PHP and Javascript that checks if the input fields have been filled and submits the login form one second after the page has been loaded. All you have to do is append #quicklogin to your login bookmark URL so that it looks like http://example.com/wp-admin/#quicklogin and Javascript will do its magic. Add this to your functions.php.

add_action('login_footer', 'enable_admin_quick_login');
function enable_admin_quick_login() {
?>
	<script type="text/javascript">
		$url_hash = window.location.hash;
		if ($url_hash.indexOf('quicklogin') != -1) {
			setTimeout(function() {
				if (document.loginform.user_login.value && document.loginform.user_pass.value) {
					document.loginform.submit();
				}
			}, 1000);
		}
	</script>
<?php
}

How to Embed Your YouTube Channel as a Playlist

#

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 = $('<iframe scrolling="no" frameborder="no">');
            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 }});
});

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

#
Add image author or source URL to photos in WordPress

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. Read more »

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

#

This is a known Webkit bugany 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.

Remove Inline CSS and Line Breaks in WordPress Galleries

#

Inline CSS and line breaks <br style="clear" /> 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 <br /> and remove the inline CSS:

add_filter('the_content', 'remove_br_gallery', 11);
function remove_br_gallery($output) {
	return preg_replace('/(<br[^>]*>\s*){2,}/', '<br />', $output);
}
add_filter('use_default_gallery_style', '__return_false');

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

#

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() {
?>
	<style type="text/css">
	h1 a { width:auto; height:auto; text-indent:0; overflow:visible; text-decoration:none; color:#666; display:block; margin:0; padding:0 10px; background:none; }
	h1 a:hover { color:#000; background:none; }
	h1 { font-family:'helvetica neue', arial, sans-serif; font-weight:bold; text-align:center; font-size:2em; width:310px; position:relative; right:-8px; margin:0 0 1em 0; }
	</style>
<?php
}

Here is how it will look: