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:

<div id="page-<?php the_ID(); ?>">

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:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/custom.css" type="text/css" media="screen" />

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:

<body class="<?php echo sanitize_title_with_dashes( get_the_title() ); ?>">

Therefore the page "My Home" has the body tag:

<body class="my-home">
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.

<?php
/**
 * Plugin Name: Title 2 body_class
 * Plugin URI: http://bueltge.de/wordpress-theme-in-abhaengigkeit-des-titel/397/
 * Text Domain: title2bodyclass
 * Domain Path: /languages
 * Description: Add the title of the post to the boy_class-function
 * Author: Frank Bültge
 * Version: 0.1
 * Author URI: http://bueltge.de/
 * Donate URI: http://bueltge.de/wunschliste/
 * License: GPL
 * Last change: 26.07.2010 10:37:23
 */ 

/**
License:
==============================================================================
Copyright 2010 Frank Bueltge  (email : frank@bueltge.de)

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA

Requirements:
==============================================================================
This plugin requires WordPress >= 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. <a href="http://codex.wordpress.org/Upgrading_WordPress">Please update WordPress</a> 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');
}
?>

Comments are closed.

4 comments

  1. Devin

    Using the body classes provides a lot of options for styling. I use the Thematic body class code a lot in projects, which include body classes for browsers, date, and a lot more: http://wptheming.com/2009/12/dynamic-body-classes-wordpress-styling/

  2. Greg Freeman

    This is a great feature of wordpress that I use a lot, being able to customize pages, posts, categories is really easy thanks to all the css classes attached everywhere.

  3. Ash Blue

    Not a bad tutorial, I used to target a lot of pages in this manner. But I've found that its a better idea to target pages based upon the page template or other variables. You can easily load specific CSS or JS by using the conditional statements like the one below.


    if is_page_template('template name here') {
    // Your code here
    }

  4. Aj

    This is cool stuff. I have just started using the body tag and its useless are endless. Will definitely be adding some cool customizations into my next free theme - thanks for the info.