How to use CSS sprites in WordPress post content

Most images attract users to read the post or content. Its also used to explain problems and solutions with step by step guide. If you running a blog based on technology, tutorial, and other topics, you need to add many images in your WordPress blog post.

But many images in a single blog post, not good for Search Engine Optimization (SEO). These images will increase the HTTP requests and web page size.

CSS Sprites
CSS sprites are commonly used to reduce HTTP requests and page size.
CSS sprites are the best way to reduce HTTP requests via WordPress post content images. Commonly CSS sprites only used in WordPress theme, not in post. So I decided 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 a custom CSS panel for your WordPress theme. This custom CSS panel offers a simple way to put custom CSS about image sprite location. So we need to add a custom CSS option panel in the WordPress theme for a particular post.
Let’s get started.
Go to your WordPress Admin Dashboard.
Choose Appearance ->Editor option.
In the Template menu,
Open functions.php file. Just paste the following code.

Code:

//Custom CSS option panel
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_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;
        rewind_posts();
    }
}

Step 2: Next create CSS sprites with a 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 the custom CSS panel.
Step 4: Click the text option in your post content editor.
Step 5: Now publish and check your post.

Related Posts

How to Add a Favicon to Your WordPress Website

WordPress Theme Design Software, Frameworks, Generators

9 Best Async Social Sharing WordPress Plugins

About arunvasudev