Archive for the 'Tips and Tricks' Category
Add unique styles to your pages using the body_class() function
When WordPress 2.8 was released, a new function called body_class() was made available to developers allowing us to style our pages differently. This new function places a location-specific class on the opening <body> tag. I must admit, I missed this function when it came out and only discovered it recently. But it’s proved very useful. I can now specify different background images for my pages and posts.
Here’s how to do it.
Open up your header.php file and change <body> to <body <?php body_class(); ?>>
The function will automatically generate extra html code. Have a look at the source code to see what classes are available to you and simply create new styles.
For example if you have an about page which has a page id equal to 2, you will notice the following code:
<body class="page page-id-2">
In your css, you could add a new style such as
body.page {background:yellow;}
This would change the background of all your pages to yellow.
Or
body.page-id-2 {background:yellow;}
And now the yellow background will only be applied to your about page.
Nathan Rice wrote up a great article about the body_class() function and you can, of course, get more information by visiting the Codex.
Select the proper code for your title tag
Depending on what template your start with and the purpose of your site, you may come across different WordPress variations for displaying the title tag. The following are examples:
Simple and most common:
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>More complex and better for SEO:
<title><?php if (is_home()) : ?><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>
<?php else : ?><?php wp_title('', 'false'); ?> - <?php bloginfo('name'); ?>
<?php endif; ?></title>If you’re concerned about search engine optimization, the simple way won’t provide you with the best result since your blog name will appear before your page/post title on every single page. The second method allows you to display your blog name and description on your home page, but inserts the title of your page/post before your blog name on all other pages.
However, this only works if your blog is your home page. If you’ve chosen to display a static page as your home page, you will notice that only the dash and blog description appears on the home page. This can easily fixed by using this instead:
<title><?php if (is_front_page()) : ?><?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>
<?php else : ?><?php wp_title('', 'false'); ?> - <?php bloginfo('name'); ?>
<?php endif; ?></title>Changing is_home() to is_front_page() will ensure that your blog name and description is displayed properly on your home page.
