Loading WordPress theme CSS the right way: Enqueue styles

We don’t want to add direct links to our style.css and other css files in the header.php – let’s keep it clean there!

Instead, add the following to your theme’s functions.php:

/*  Enqueue css
/* ------------------------------------ */	
function alx_styles() 
{
	wp_enqueue_style( 'style', get_stylesheet_uri() );
	wp_enqueue_style( 'font-awesome', get_template_directory_uri().'/fonts/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'alx_styles' ); 

In this example, I am loading style.css and a Font Awesome css file that is in the theme’s subfolder named /fonts/.

Note, in order for this to work, your theme must have this inside the header.php < head > tag:

<?php wp_head(); ?>

Function reference: wp_enqueue_style

Add a tracking code to your WordPress theme footer

If you want to add for example a Google Analytics or Piwik tracking code to your theme, you can either just add it directly in your footer.php or add it via functions.php. Here is how to do the latter:

Add this to your functions.php file:

/*  Tracking code
/* ------------------------------------ */
function alx_tracking_code() {
	echo 'My tracking code goes here'."\n";
}
add_filter( 'wp_footer', 'alx_tracking_code' );

All that this does is that it echoes out the code via wp_footer(). So make sure that your theme has the following just before the closing of the body tag in footer.php:

<?php wp_footer(); ?>

Function reference: wp_footer

Redirect your WordPress feed to Feedburner

Want to redirect your WordPress default RSS feed to for example Feedburner? Add this in your theme’s functions.php and change to your custom feed link.

/*  Custom rss feed
/* ------------------------------------ */
function alx_custom_rss_feed( $output, $feed ) {
	// Do not redirect comments feed
	if ( strpos( $output, 'comments' ) )
		return $output;
	return esc_url('http://feeds.feedburner.com/MyFeed/');
}
add_filter( 'feed_link', 'alx_custom_rss_feed' , 10, 2 );

The comments feed will remain the same.

Add a custom favicon to your WordPress site

First, create a 16×16 png/ico/gif favicon and drop it in you theme’s root folder. That’s the one we will show in this example!

Add this to your theme’s functions.php.

/*  Custom favicon
/* ------------------------------------ */
function alx_favicon() {
	echo '<link rel="shortcut icon" href="'.get_template_directory_uri().'/favicon.png" />'."\n";
}
add_filter( 'wp_head', 'alx_favicon' );

It’s that simple.

Useful tip: To force-refresh a favicon that you’ve updated, just add ?v=2 to the image url, like /favicon.png?v=2.

Change the default excerpt length in WordPress

This is another useful snippet for modifying the length of the excerpt (in amount of words).

Drop this in your theme’s functions.php and modify the length as you wish:

/*  Excerpt length
/* ------------------------------------ */
function alx_excerpt_length( $length ) {
	return 30;
}
add_filter( 'excerpt_length', 'alx_excerpt_length', 999 );

In this case I set the amount of words to 30.

Change the default excerpt ending in WordPress

By default, WordPress ends excerpts with “[…]” and some people do not like how that looks. So, here is how to change it to “…” or something of your own choice.

Add this to your theme’s functions.php and you are done:

/*  Excerpt ending
/* ------------------------------------ */
function alx_excerpt_more( $more ) {
	return '&#46;&#46;&#46;';
}
add_filter( 'excerpt_more', 'alx_excerpt_more' );

I use & #46; instead of period signs because some web browsers tend to convert 3 period signs into something custom that may cause issues.

Change the quality of your WordPress thumbnails

Do you think that your cropped thumbnails don’t have a good enough quality? By default, the jpeg quality is set to 90 out of 100 in WordPress – a good balance between performance and looks. Here is how to increase it to max quality, or close to it, depending on what you want.

Add this to your theme’s functions.php:

/*  Custom thumbnail quality
/* ------------------------------------ */
function alx_thumbnail_quality( $quality ) {
	return 100;
}
add_filter( 'jpeg_quality', 'alx_thumbnail_quality' );
add_filter( 'wp_editor_set_quality', 'alx_thumbnail_quality' );

Change 100 to anything you want. 95 would be the step inbetween default quality and max quality.

This code also works with images being resized via the new WP_Image_Editor class that was released with WordPress 3.5.