How to use CSS sprites in WordPress post content

Mostly images attract user to read post or content. Its also used to explain problems and solutions with step by step guide. If you running blog based on technology, tutorial and other topics, you need to add many images in your WordPress blog post.
But many images in single blog post, not good for Search Engine Optimization (SEO). These images increase HTTP requests and web page size.
CSS Sprites
CSS sprites are commonly used to reduce HTTP requests and page size.
CSS sprites is the best way to reduce HTTP requests via WordPress post content images. Commonly CSS sprites only used in WordPress theme, not post. So i am decide to write a tutorial to use CSS sprites in WordPress post content.
So How to use CSS sprites in WordPress post Content?
Step 1: First you need to create custom CSS panel for your WordPress theme. This custom CSS panel offer simple way to put custom CSS about image sprite location. So we need add custom CSS option panel in WordPress theme for particular post.
Let get started.
Go to your WordPress Admin Dashboard.
Choose Appearance ->Editor option.
In Template menu,
Open functions.php file. Just paste the following code.

//Custom CSS option panel
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
function custom_css_hooks() {
    add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
    add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
function custom_css_input() {
    global $post;
    echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
    echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
function save_custom_css($post_id) {
    if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_css = $_POST['custom_css'];
    update_post_meta($post_id, '_custom_css', $custom_css);
function insert_custom_css() {
    if (is_page() || is_single()) {
        if (have_posts()) : while (have_posts()) : the_post();
            echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
        endwhile; endif;

Step 2: Next create CSS sprites with combination of images and its location in CSS. I am already written a post to create CSS sprites.


Step 3: Add CSS sprite image in your blog post and paste CSS sprite image location CSS in custom CSS panel.
Step 4: Click text option in your post content editor.
Step 5: Now publish and check your post.

Leave a comment

Your email address will not be published. Required fields are marked *