Individual Design for any Page

The blog has a Theme and for every page an extra style sheet. This current trend of individuality for each content is very common today. Even with WordPress, you can do so; there are several possibilities. One possibility is to create, based on the title, the individual stylesheet.
By default, the class assignment of function body_class() has already a lot of possibilities. More individuality can be reached with the title or ID.
It is certainly not worth for a traditional blog environment but for a site with little content it works pretty well. As I have implemented in this case.

If a page is loaded, then you can pass the title. If you use this one in the body tag as ID or class and then create for each ID or class a style, the right design will be loaded.

Alternatively, you can work with the ID of the page or article, function the_ID() passes it. Please note, IDs and classes may not start with a number and therefore you must add a string before, for example:

As a final alternative, I would like to mention that you can expand the function body_class() via Hook with own classes. So you can have the title of a page/post via hook in this function.

function fb_title_body_class($classes) {
	global $post;
	
	$classes[] = sanitize_title_with_dashes( get_the_title( $post->ID ) );
	
	return $classes;
}
add_filter( 'body_class', 'fb_title_body_class' );

In the following I’m showing you the simplest case via title, so that you output only this class and and body_class() is not used.

With the help of the Title

Put the stylesheet in the header of your Theme:

Alternatively, this is integrated via Hook wp_head if the specific page is loaded, so you load the explicit style sheet only if it is needed. Everything happens in the functions.php of your Theme.

in your body tag of page.php is the title of the page:

Therefore the page “My Home” has the body tag:

and so on...

in your custom.css you define all style for class home: for example

.my-home a { color: #090; text-decoration: none; }
.my-home a:visited { color: #999; text-decoration: none; }
.my-home a:hover { color: #f60; text-decoration: none; }

in the original Theme it looks like this:

a { color: #009; text-decoration: underline; }
a:visited { color: #999; text-decoration: underline; }
a:hover { color: #c00; text-decoration: underline; }

I think it’s an approach with a lot potential and so I leave it to your creativity. So if you would like to have for each page a different style sheet, this is an easy solution.

Alternativ a small plugin to add the title of the post to the template tag body_class() as example.

= 2.8 and tested with PHP Interpreter >= 5.2.9
*/

if ( !class_exists('title2body_class') ) {

    global $wp_version;
    if ( !function_exists ('add_action') || version_compare($wp_version, "2.8alpha", "<") ) {
        if (function_exists ('add_action'))
            $exit_msg = 'The plugin requires WordPress 2.8 or newer. Please update WordPress or delete the plugin.';
        else
            $exit_msg = '';
        header('Status: 403 Forbidden');
        header('HTTP/1.1 403 Forbidden');
        exit($exit_msg);
    }

    class title2body_class{

        define( 'FB_T2BC_BASEDIR', dirname( plugin_basename(__FILE__) ) );
        define( 'FB_T2BC_TEXTDOMAIN', 'title2bodyclass' );

        function __construct() {

            add_action( 'body_class', array( &$this, 'title_body_class' ) );
        }

        function title_body_class($classes) {
            global $post;

            $classes[] = sanitize_title_with_dashes( get_the_title( $post->ID ) );

            return $classes;
        }

        }
    }

    function title2body_class_start(){
        new title2body_class();
    }

    add_action('plugins_loaded', 'title2body_class_start');
}
?>