WordPress Wednesday: Styling a single page

I have the awesome privilege of offering up to you all WordPress tips and tricks every week. What can be expected is master trickery when it comes to CSS and WordPress editing. Something I find myself learning more and more about everyday.

Today I wanted to introduce to you a very easy way to alter the look of a single page or multiple pages within your WordPress installs. The images on a page along with the CSS styles can all be altered depending on the page you are on within your site. It’s a quick technique and really fun to do once you figure it out.

Let’s start with the PHP part of the code. This is an easy copy and paste into your header.php file in your theme directory. The code below should be added below the <body> tag in your header.php.

[php]<body<?php if ( is_page(array(‘test’))) {

echo ‘ ‘; } ?>>

<body id=’top’ <?php body_class($k_body_class);?> >[/php]

What this tells your site is to setup special classes per the page you specify. So for the first array we specify the page on your site named “test”. Then below we echo the CSS class of “test” Same goes for the second page and classes.

Next steps are to add some CSS into your custom.css file or your style.css file.

Below is an example of what you need to do to get the desired effect per page.

[css].test .follower_count {background: url(/wp-content/uploads/2010/12/followers_count_bg-light1.jpg) no-repeat 0% 0%;font-family: Helvetica, Arial, sans-serif;height: 50px;padding: 13px 0px 0px 30px;width: 270px;}[/css]

So what the above accomplishes is this.

Below is my sidebar using Standard Theme and the follower widget.

Below is a test page with the same sidebar widget but a different image.

While these changes I have made are subtle, you can change all CSS images and colors to whatever you want based upon the page you name in the above code.

The best place to see this happen is at my Church’s website I resigned last year. Head over to Hunt Valley Church and click on the Kids button or Students button and see the magic.

Stay tuned next week for some more code hackery and CSS trickery for your WordPress installs!

Leave a Reply

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