micro.e33.io

The initial WordPress head tag section is a bit bloated. There are some quick optimizations via the functions.php file that will improve a WordPress site’s loading time and increase security. The key elements the method below addresses:

• Remove Query Strings from Static Resources – This can improve caching and fix some speed test warnings – Note that this can break how some external resources load (ex: enqueuing a Google Fonts CSS link)

• Header Cleanup – This removes all the unnecessary tags: RSD link, WordPress version number (increasing site’s security), wlwmanifest link, shortlink, and extra feed links (primary RSS feed still functions correctly)

• Disable the Emojis – This removes the emoji support WordPress has built-in for older browsers that isn’t needed for modern browsers

// Remove query strings from static resources 
function _remove_script_version( $src ) {
	$parts = explode( '?', $src );
	return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

// Header cleanup 
add_action( 'do_feed_rss2_comments', 'disable_feeds', -1 );
add_action( 'do_feed_atom_comments', 'disable_feeds', -1 );
add_action( 'feed_links_show_comments_feed', '__return_false', -1 );
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 );

// Disable the emojis 
function disable_emojis() {
	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	remove_action( 'wp_print_styles', 'print_emoji_styles' );
	remove_action( 'admin_print_styles', 'print_emoji_styles' ); 
	remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 
	remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
	add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );
function disable_emojis_tinymce( $plugins ) {
	if ( is_array( $plugins ) ) {
		return array_diff( $plugins, array( 'wpemoji' ) );
	} else {
		return array();
	}
}
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
	if ( 'dns-prefetch' == $relation_type ) {
		$emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );
		$urls = array_diff( $urls, array( $emoji_svg_url ) );
	}
	return $urls;
}

I’ve updated the site to use Prism syntax highlighter for styling posted code blocks. This free and open source project is built by a community of contributors and is super-configurable, lightweight and easy to use. It’s a great option to make code blocks easier to read.

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

To use Prism, I installed the Code Syntax Block plugin so I can simply pick the corresponding code language in the default Code Blocks in each blog post.

The plugin will check for a custom theme file here: assets/prism/prism.css, and use that file if it exists. Add your custom file in that location, and it will be used.

Rich link previews for links posted on social media or messaging apps help make content more engaging. There are a ton of WordPress plugins that will add Open Graph and Twitter Card meta tags, but plugins can be bloated and possibly break other parts of a WordPress site. The function below adds the required Open Graph and Twitter Card meta tags without needing a plugin. This will conditionally display meta tags specific to Post pages, to Front pages, and to Single/Archives pages.

<?php
function evo_og_meta_tags() {
	global $post;
	if ( has_post_thumbnail( $post->ID ) ) {
		$img_src = get_the_post_thumbnail_url( $post->ID, 'large' );
	} else {
		$img_src = get_stylesheet_directory_uri() . '/assets/images/default-post-image.png';
	}
	$current_url = 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
	$current_uri = $_SERVER['REQUEST_URI'];
	if ( is_single() ) { ?>
		<meta name="twitter:card" content="summary_large_image" />
		<meta property="og:url" content="<?php the_permalink() ?>" />
		<meta property="og:title" content="<?php the_title(); ?>" />
		<meta property="og:description" content="<?php echo wp_strip_all_tags( get_the_excerpt() ); ?>" />
		<meta property="og:image" content="<?php echo $img_src; ?>" />
	<?php } elseif ( is_front_page() ) { ?>
		<meta name="twitter:card" content="summary" />
		<meta property="og:url" content="<?php echo get_home_url(); ?>" />
		<meta property="og:title" content="<?php bloginfo( 'name' ); ?>" />
		<meta property="og:description" content="<?php bloginfo( 'description' ); ?>" />
		<meta property="og:image" content="<?php site_icon_url() ?>" />
	<?php } else { ?>
		<meta name="twitter:card" content="summary" />
		<meta property="og:url" content="<?php echo $current_url; ?>" />
		<meta property="og:title" content="<?php bloginfo( 'name' ); ?>" />
		<meta property="og:description" content="<?php echo $current_uri; ?>" />
		<meta property="og:image" content="<?php site_icon_url() ?>" />
	<?php }
}
add_action( 'wp_head', 'evo_og_meta_tags', 99 );

When all post content except the images is needed for a section of a post/page layout, like a post summary or a custom post type, the method below strips all images from the post content. This works well when combined with either code from the previous two posts micro.e33.io/112 and micro.e33.io/123 to make unique layouts as needed.

<?php
function evo_post_without_images() {
	global $post;
	$content = get_the_content();
	$content = preg_replace( '/<img[^>]+\>/i', ' ', $content );
	$content = apply_filters( 'the_content', $content );
	$content = str_replace( ']]>', ']]>', $content );
	echo $content;
}

Use the function in the loop like this.

<?php evo_post_without_images(); ?>

If only the post excerpt is needed instead of the full content, the method below displays the WordPress standard 55 words of the post with HTML tags stripped out.

<?php echo wp_strip_all_tags( get_the_excerpt() ); ?>

Single post pages with multiple images like a photoset, etc. can be very resource heavy when browsers download images that are larger than needed. The method below allows you to designate the initial size (thumbnail, medium, large or full), while using the native WordPress responsive image support by including srcset and sizes attributes to the image. Browsers will download the most appropriate size and ignore the others. This method also ignores the Featured Image of a post.

<?php
function evo_all_post_images() {
	global $post;
	$args = array(
		'post_type'   => 'attachment',
		'numberposts' => -1,
		'post_status' => 'any',
		'post_parent' => $post->ID,
		'exclude'     => get_post_thumbnail_id(),
	);
	$attachments = get_posts( $args );
	if ( $attachments ) {
		foreach ( $attachments as $attachment ) {
			echo wp_get_attachment_image( $attachment->ID, 'large', false, array( 'class'=>'img-responsive-post' ) );
		}
	}
}

Use the function in the loop like this.

<?php evo_all_post_images(); ?>