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');
}

Related posts

1. How to Exclude Sticky Posts from Adjacent Post Links
2. Show Ads Only to Visitors Coming from Search Engines
3. jQuery Script for Loading More Posts

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') .' <a href="'. $source_url .'">'. $parts['host'] .'</a>)';
	}

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

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

	return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
		. do_shortcode($content) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

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

Related posts

1. Automatically Escape HTML Entities of Code Fragments in Comments
2. Add rel Attribute to Image Links in WordPress Galleries
3. Take-away photo and image positioning CSS styles for blogs — idea for a plugin

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');

Related posts

1. Smarter Cleaner Gallery
2. Multiple Galleries per Post/Page
3. Multiple Galleries 0.4

Related posts

1. How to Add Simple Google Site Search to Any Website
2. OpenID Plugin and WordPress 2.8
3. Self-hosted HTML5 Notepad App With Synchronization

jQuery(document).ready(function($) {

	var $content = '#content';
	var $nav_wrap = '.navigation';
	var $anchor = '.navigation .alignleft a';
	var $text = 'Load More';

	var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts

	$($nav_wrap).html('<a id="almc-load-more" href="' + $next_href + '">' + $text + '</a>');

	$('#almc-load-more').click(function(e) {
		e.preventDefault();

		$.get($(this).attr('href'), '', function(data) {
			var $timestamp = new Date().getTime();
			var $new_content = $($content, data).wrapInner('<div class="almc-loaded" id="almc-' + $timestamp + '" />').html(); // Grab just the content
			$next_href = $($anchor, data).attr('href'); // Get the new href

			$('html,body').animate({scrollTop: $($nav_wrap).position().top}, 'slow'); // Animate scroll

			$($nav_wrap).before($new_content); // Append the new content
			$('#almc-' + $timestamp).hide().fadeIn('slow'); // Animate load
			$('#almc-load-more').attr('href', $next_href);	// Change the next URL
			$('.almc-loaded ' + $nav_wrap).remove(); // Remove the original navigation
		});
	});

});

Related posts

1. How to Embed Your YouTube Channel as a Playlist
2. Remove Border from Image Links
3. How to Automatically Add Image Credit or Source URL to Photo Captions in WordPress

Inside /api you’ll find index.php which processes all the update requests. You should place this in something like http://updates.example.com and update $api_url in /plugin/test-plugin-update/test-plugin-update.php and /theme/portfolio-racer/inc/updates.php accordingly. If you activate these sample plugins without changing API URL, updates will be checked against my test server. If you decide to update, both plugin and theme will be replaced with exactly the same version of each.

Related posts

1. Enable Automatic Updates for Plugins Hosted by Developers
2. Automatic Updates for Developer Hosted Themes
3. Tabbed Widgets Updated for WordPress 2.8

if (function_exists('apc_clear_cache') && $_GET['pass'] == 'secret') {
        if (apc_clear_cache() && apc_clear_cache('user'))
                print 'All Clear!';
        else
                print 'Clearing Failed!';

        print '<pre>';
        print_r(apc_cache_info());
        print '</pre>';
} else {
        print 'Authenticate, please!';
}

Then call the script via http://example.com/clearapc.php?pass=secret

Instead of using ?pass=secret, you might well call the filename something that is hard to guess: clearapc93920.php

Related posts

1. ‘Clear APC Cache’ Button for WordPress
2. jQuery Script for Loading More Posts

if (function_exists('apc_clear_cache')) {
	// Clear cache if something is edited
	if (!empty($_POST) && is_admin())
		apc_clear_cache();

	// Add Clear APC menu under Tools menu
	add_action('admin_menu', 'php_apc_info');
	function php_apc_info() {
		add_submenu_page('tools.php', 'Clear APC', 'Clear APC', 'activate_plugins', 'clear_php_apc', 'php_apc_options');
	}
	function php_apc_options() {
		if (apc_clear_cache() && apc_clear_cache('user'))
			print '<p>All Clear!</p>';
		else
			print '<p>Clearing Failed!</p>';
		print '<pre>'; print_r(apc_cache_info()); print '</pre>';
	}

	// Add Clear APC in the favorite actions dropdown
	add_filter('favorite_actions', 'clear_apc_link');
	function clear_apc_link($actions) {
		$actions['tools.php?page=clear_php_apc'] = array('Clear APC', 'edit_posts');
		return $actions;
	}
}

And the result looks like this:

p.s. It seems that WordPress doesn’t like newline returns inside <pre>.

Related posts

1. Standalone Script for Clearing APC Cache
2. AJAX Cache Purge Cookie Plugin
3. PHP APC Potential Cache Slam Averted for Key

Add this to your theme’s functions.php to allow readers post fragments of code in their comments (wrapped in <code>...</code>) which are automatically encoded (think of < and <)

add_filter('pre_comment_content', 'encode_code_in_comment');

function encode_code_in_comment($source) {
  $encoded = preg_replace_callback('/<code>(.*?)<\/code>/ims',
  create_function(
    '$matches',
    '$matches[1] = preg_replace(
        array("/^[\r|\n]+/i", "/[\r|\n]+$/i"), "",
        $matches[1]);
      return "<code>" . htmlentities($matches[1]) . "</code>";'
  ),
  $source);

  if ($encoded)
    return $encoded;
  else
    return $source;
}

Worth noting:

• Everything wrapped in <code>...</code> is encoded.
• Line breaks after opening <code> and before closing </code> are removed in order to avoid unnecessary <br /> tags.

Related posts

1. How to Automatically Add Image Credit or Source URL to Photo Captions in WordPress
2. Remove Inline CSS and Line Breaks in WordPress Galleries
3. How to Create Beautiful and Elegant HTML Lists Using CSS

HTML list have become one of the most used HTML elements for marking-up various semantic content structures — navigation, comments and even image galleries.

This article will explain and show you how to style lists inside blog posts, articles or other basic HTML documents.

Before we start, it is necessary to understand the importance of using specific HTML tags <ul> and <ol>, instead of simple numbering (like 1., 2. or •, ») for building lists. By applying content a semantic structure, we emphasize the relationships between different content elements. In case of lists we are able to imply that there is a certain relationship between all of the list members, which is possibly described by the paragraph introducing the list. It also helps screen reader users for whom the total number of items is announced before the rest of the list.

Default list rendering in standards aware browsers and Internet Explorer

Let’s look at the default rendering of ordered <ol> and unordered <ul> lists by Web standards aware browsers (with Gecko, Webkit or Opera rendering engine) and Internet Explorer (IE).

It turns out that IE applies default left side margin to the list container (<ul> and <ol>) while standards aware browsers apply left side padding. These differences in list rendering force us to set both padding and margin of <ul> to 0 and continue to work only with styling <li> tag.

Another thing we notice is that list bullets or numbering becomes invisible in IE with the left side margin set to 0.

Getting the list rendering consistent among all browsers

To solve the invisible bullet problem described above, its a good idea to use relative positioning of list containers <ul> and <ol>. By doing so, we will be able to create much more advanced list style later without repeating most of the CSS.

CSS for simple lists

ul, ol {
   margin:auto -3em 1em 0;
   padding:0;
   position:relative;
   left:-3em;
   overflow:hidden;
}

li {
   margin-top:0.25em;
   margin-bottom:0.25em;
}

ul ul, ul ol,
ol ol, ol ul {
   margin-left:1em;
   padding-left:0;
}

ul li, ol li {
   margin-left:5em;
}

li li {
   margin-left:1em;
}

Internet Explorer specific CSS

To fix IE’s ability to do the math correctly, we have to enable hasLayout property for all of our <ul> and <ol> tags. This is done by using conditional comments:

ul, ol { height:0; overflow:visible; }
ul, ol { height:1%; }

Output

List is now rendered equally in all browsers. For illustration purposes a yellow background is applied to the list container <ul>, gray border shows the dimensions of <ul>, while list items <li> have gray background.

Flat lists for more content per list item

Sometimes you have multiple lines of content per list item and then it might be reasonable to align the lists with the rest of the content in order to sustain the vertical flow of it.

CSS for flat lists

.flat li {
   margin-left:3em;
}

.flat li ul, .flat li ol {
   margin-left:1em;
   padding-left:0;
}

.flat li li {
   margin-left:0;
}

Notice the little amount of CSS, but more importantly that it is rendered equally among all of the browsers and we can still use the default bullet styles instead of images.

However, sometimes one might want to use custom style list bullets. This can be done using the list-style-image property in CSS.

Lists with custom style bullets

Note: don’t forget to remove the line break after list-style-image: to get it working.

CSS:

ul.bullet-a li {
   list-style-image:
    url('bullet-image-a.png');
}

ul.bullet-b li {
   list-style-image:
    url('bullet-image-b.png');
}

Although the alignment of the list image is not pixel perfect among all of the browsers, it is more than satisfactory if the height of the bullet image doesn’t exceed 10 pixels. One might suggest to use background of <li> tag as a list bullet image, but this would brake the ability to combine multiple CSS identifiers per list, like <ul class="flat bullet-a"> because of inherited margin settings.

All the small details

Notice that the spacing between list items in the last example (rounded image bullets) is larger than the default one (arrow image bullets). This enhances readability and separates list items similarly to paragraphs. So here is the final set of CSS styles to suite most of the needs:

.spaced {
    margin-bottom:0;
}

.spaced ul, .spaced ol {
    margin-top:1em;
}

.spaced li {
    margin-bottom:1em;
}

.indent li {
    padding-left:1em;
    text-indent:-1em;
}

.inside li {
    list-style-position:inside;
}

.clear li {
    list-style-type:none;
}

You can see that one of the previous examples already utilizes the “spaced” styling, while “indent”, “inside” and “clear” might benefit from a few examples:

All of CSS combined & list style cheat-sheet

• View all of the list style examples in your browser.
• View the resulting CSS as a seperate file (bullet images: )
• Download a list style CSS classname cheat-sheet (.pdf) which you can print and use as a reference when composing your articles, blog posts or other HTML documents.

Screenshot showing the use of various HTML list styles

Internet Explorer specific HTML and CSS

ul, ol { height:0; overflow:visible; }
ul, ol { height:1%; }

Few suggestions:

• Bullet image height preferably should not exceed 10 pixels. Lower image height makes them look better in Internet Explorer. If you want bullet images to be transparent, save them as transparent GIF or 8-bit PNG files.
• You might find it useful to apply this styling only to your post content, which can be easily done by prepeding the identifier of your post wrapper (like .post or .article) to all of the list styles. The end result would be something like .post ul, .post ol {}.

Related posts

1. Squeeze the Header of the New WordPress 2.7 Dashboard
2. Replace WordPress Login Logo With Your Site’s Name and Link
3. Remove index.html from the URL