Defer loading of JavaScript in WordPress

Deferring loading of JavaScript functions that are not called at startup reduces the initial download size, allowing other resources to be downloaded in parallel, and speeding up execution and rendering time.

While this “lazy” method of loading doesn’t reduce the total JS payload, it can significantly reduce the number of bytes needed to load the initial state of the page, and allows the remaining bytes to be loaded asynchronously in the background.

In order to speed up the loading of a page all the JavaScript in the HTML header has to be run after the page finish to load, more precisely at the end of the page before the </body> tag.

WordPress automatically adds all the core and plugin JavaScript in the HTML header using the function wp_head() or at the end of the page using wp_footer().

All the JavaScript contained in the header wp_head() has to be moved at the end of the page in wp_footer().

In order to do that you can add those simple line in your function.php of the your theme.

if(!is_admin()) {
	// Move all JS from header to footer
	remove_action('wp_head', 'wp_print_scripts');
	remove_action('wp_head', 'wp_print_head_scripts', 9);
	remove_action('wp_head', 'wp_enqueue_scripts', 1);
	add_action('wp_footer', 'wp_print_scripts', 5);
	add_action('wp_footer', 'wp_enqueue_scripts', 5);
	add_action('wp_footer', 'wp_print_head_scripts', 5);
}

All this will be valid just in the public website not for the admin panel.

Make sure that in your theme you will not add any other JavaScript in your header.

If you use HTML5, Modernizr (or html5shiv) needs to be in the HTML header, in order to make the old browsers (i.e. IE7, IE8) HTML5 and CSS3 friendly.

 

How to update WordPress on Aruba.it hosting

Aruba.it has a strict write permission on his web hosting servers.
Just adding the following two simple lines at the top of the wordpress configuration file wp-config.php and your website will be able to run all the updates without returning any error.

<?php
   define('FS_CHMOD_FILE',0755);
   define('FS_CHMOD_DIR',0755);
   ...
?>

Enjoy your automatic wordpress upgrades and plugin updates.

Kony2012.com – Cover the night April 20th

Get your kit NOW!

  

http://www.kony2012.com
http://www.invisiblechildren.com
http://www.facebook.com/KONY20121

KONY 2012: Part II – Beyond Famous

KONY 2012: Part I – INVISIBLE CHILDREN

Disclaimer: Invisible Children does not condone any type of illegal activity, including vandalism or trespass, in the distribution of KONY 2012 materials. Our company accepts no liability for consequences, including loss or damage, that may arise in connection with their distribution. Any action you take in relation to KONY 2012 is strictly at your own risk. Everyone can agree that Kony must be stopped, so just ask for permission to post these materials.

How to get the Featured Image or the First Image in the post?

Supposing you want to have an image aside of each post in your post list page. The WordPress function get_the_post_thumbnail() is what you need. Make sure to set a  featured image inside the edit post (or custom post) page.

If you forget to set the featured image inside a post, WordPress will consider as featured image the first uploaded image from your computer. Obviously if you do not have any image in the content of a post, the featured image for it will not exist.

What happens if you write a post and add images from the “WordPress media library” (without uploading images from your computer)?
Well, get_the_post_thumbnail() will not return any image at all.

If it is your blog/website it will not be a big problem, you will notice the error and you will fix it straight away.
But if you set up a WordPress website for some of your clients that are not really web oriented, the following solution will save you a lot of time (avoiding “not easy” support phone calls).

Copy the following code in your theme functions.php

// POST IMAGE
function get_default_post_image($size = 'thumbnail', $post_id = false){
	global $post, $id;
	$post_id = (int)$post_id;
	if (!$post_id) $post_id = $post->ID;
	$image = '';
	if(has_post_thumbnail($post_id)) {
		$image = get_the_post_thumbnail($post_id, $size);
	} else {
		$args = array(
			'post_parent' => $post_id
			, 'post_type' => 'attachment'
			, 'post_mime_type' => 'image'
			, 'post_status' => 'any'
			, 'numberposts' => 1
			, 'order' => 'ASC'

		);
		$attachments = get_children($args);
		foreach($attachments as $attachment) {
			//$attachment = array_shift($attachments);
			$image = wp_get_attachment_image($attachment->ID, $size);
		}
	}
	return $image;
}
function the_default_post_image($size = 'thumbnail', $post_id = false){
	$img = get_default_post_image($size, $post_id);
	if( empty($img) ){
		$img = '<img src="'.get_bloginfo('stylesheet_directory').'/images/default_post_image.png" alt="no image" />';
	}
	echo $img;
}

Make sure you add a “not available” image (/images/default_post_image.png) in your theme folder.

Then you will able to use the_default_post_image()

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    ...
    <?php the_default_post_image(); ?>
    ...
    <?php endwhile; ?>
<?php endif; ?>

inside your theme (inside your post loop).

An alternative could be get_default_post_image()

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    ...
    <?php echo get_default_post_image(); ?>
    ...
    <?php endwhile; ?>
<?php endif; ?>

Usage

<?php the_default_post_image( $size, $post_id ); ?>

the_default_post_image will return an HTML image (/images/default_post_image.png when not image is set in the post)

<?php echo get_default_post_image( $size, $post_id ); ?>

get_default_post_image() will return an HTML image as string and  an empty string when not image is set in the post.

Parameters

size
(string/array) (Optional) Either a string keyword (thumbnail, medium, large or full) or a 2-item array representing width and height in pixels, e.g. array(32,32).
Default: ‘thumbnail’

post_id
(integer) (Optional) Post ID.
Default: Post ID

 

Personalise the WordPress maintenance page

Every time you update your WordPress site, the website will show the maintenance message to visitors.

Unfortunately the default maintenance page is not so pretty. What can you do about that?

Simple! Just design an HTML page as you like with the message that the website is under maintenance and it will come back soon.

Use the file name

maintenance.php

for this page and upload it to your

/wp-content/

folder.

The next time you will update your WordPress installation that page will be served to your visitors.

 

Protect your wp-config.php

You can protect your wp-config.php in WordPress if you have access and your server support .htaccess.

Just make a little addition to your .htaccess as following:

<File wp-config.php>
order allow, deny
deny from all
</File>

Malicious people will have an harder life in order to get hold of your wp-config.php file, which contains really sensitive information.

Try this out on a test installation first just to avoid funny surprises in case you have some sort of special configuration.

How to show a custom post type in a category page in WordPress

If you want to use the default taxonomy category in a custom post type (i.e. products) it is easy, just create your new post type “Product” and link it to use the taxonomy category.

Example
add to your theme function.php the following:

add_action('init', 'create_my_post_types');
function create_my_post_types() {
	register_post_type(
		'products',
		array(
			'label' => 'Products',
			'description' => '',
			'public' => true,
			'show_ui' => true,
			'show_in_menu' => true,
			'capability_type' => 'post',
			'hierarchical' => false,
			'rewrite' => array('slug' => '', 'with_front' => true),
			'query_var' => true,
			'supports' => array(
				'title',
				'editor',
				'excerpt',
				'trackbacks',
				'custom-fields',
				'comments',
				'revisions',
				'thumbnail',
				'author',
				'page-attributes'
			),
			'taxonomies' => array('category'),
			'labels' => array (
				'name' => 'Products',
				'singular_name' => 'Product',
				'menu_name' => 'Products',
				'add_new' => 'Add Product',
				'add_new_item' => 'Add New Product',
				'edit' => 'Edit',
				'edit_item' => 'Edit Product',
				'new_item' => 'New Product',
				'view' => 'View Product',
				'view_item' => 'View Product',
				'search_items' => 'Search Products',
				'not_found' => 'No Products Found',
				'not_found_in_trash' => 'No Products Found in Trash',
				'parent' => 'Parent Product'
			)
		)
	);
}

As alternative to create you post type you can easily use a WordPress plugin Custom Post Type UI or similar plugins.

Soon you will realise that when you go in a category page just default post will be displayed. Where are my products gone?

Strangely if you use the widget Categories with the tick “Show post counts” on you will see that the total number of post in a single category will be the sum of the default posts + the products (custom post type)

In order to have in the category page both the post types together you need to patch a bit the query that return the post inside a category.

Add to your theme function.php the following:

add_filter('pre_get_posts', 'my_get_posts');
function my_get_posts($query) {
    if(is_category() && false == $query->query_vars['suppress_filters'])
        $query->set('post_type', array('post', 'products'));
    return $query;
}