Add sidebar widget support to your WordPress theme

First, let’s go to your theme’s sidebar.php. Add the following where you want your sidebar widgets to be listed:

<?php dynamic_sidebar( 'primary' ); ?>

Then, add this to your functions.php:

/*  Register sidebars
/* ------------------------------------ */
function alx_sidebars()	{
	register_sidebar(array( 'name' => 'Primary','id' => 'primary','description' => "Normal full width sidebar", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
}
add_action( 'widgets_init', 'alx_sidebars' );

That’s all you need to make your theme widget-ready. Give it a go!

Function reference: register_sidebar

Remove WordPress more link scroll down to content

If you want to get rid of the WordPress more link scroll, so that your more link doesn’t make a jump down to the continuing content, add this to your theme’s functions.php:

/*  Remove more link scroll
/* ------------------------------------ */
function alx_remove_more_link_scroll( $link ) {
	$link = preg_replace( '|#more-[0-9]+|', '', $link );
	return $link;
}
add_filter( 'the_content_more_link', 'alx_remove_more_link_scroll' );

Loading WordPress theme JavaScript the right way: Enqueue scripts

Instead of adding your theme javascript manually in the header.php/footer.php, a better way is to enqueue the files, so that they are loaded via wp_head() or wp_footer().

Here is how – add the following to your theme’s functions.php:

/*  Enqueue javascript
/* ------------------------------------ */	
function alx_scripts()  
{
	wp_enqueue_script( 'flexslider', get_template_directory_uri() . '/js/jquery.flexslider.min.js', array( 'jquery' ),'', false );
	wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ),'', true ); 
	
	if ( is_singular() && get_option( 'thread_comments' ) )	{ wp_enqueue_script( 'comment-reply' ); }
}  
add_action( 'wp_enqueue_scripts', 'alx_scripts' );  

In this example I am loading flexslider in the header, and a general theme scripts file in footer. So, if you set to true, it will load in the footer.

Read more

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.