To add custom thumbnail sizes to your theme, add this to your theme’s functions.php:
/* Image thumbnail sizes
/* ------------------------------------ */
function alx_setup()
{
add_image_size( 'thumb-small', 200, 200, true ); // Hard crop to exact dimensions (crops sides or top and bottom)
add_image_size( 'thumb-medium', 520, 9999 ); // Crop to 520px width, unlimited height
add_image_size( 'thumb-large', 720, 340 ); // Soft proprtional crop to max 720px width, max 340px height
}
add_action( 'after_setup_theme', 'alx_setup' );
To display a featured image with your new size (in this case “thumb-small”) in a post, just add:
<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumb-small' ); } ?>
Read more
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' );
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
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
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
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.
