Identifying each page using body tags and CSS - gHacks Tech News

Identifying each page using body tags and CSS

If you are building a large website, chances are you have a great little CSS stylesheet linked to every document which governs all the pages. But what do you do if you want just one of the pages to be completely different? You could of course go into your code and ad separate id-s and classes for specific elements, but I use a bit of an easier approach.

The basis of this is to use php code to determine the directory of the page you are viewing, and also the page's name itself. I will show you the code in a second, but let's say you have a social network site underway and you keep you messaging system (outbox, inbox, new message, etc.) in a folder named "messaging". In this case you can grab the name of the directory and the page and assign these as an id and a class to the body tag automatically, so it would look like this for the inbox: <body class="messaging" id="inbox">.

identify pages css
code example

This will make it very easy to add new rules in your stylesheet, since you can refer to whole documents in a directory using "body.messaging" and you can refer to specific pages using "body#inbox". You can now use the same CSS file to change the look of only one page without the need to go in and add new classes and ids all the time. So how about the code to grab the directory and the page? Let's take a look!

First of all, let's determine the page. For this we will use the "$_SERVER" superglobal variable which stores a lot of valuable information about the page you are viewing, the IP viewing the page and so on. Here's the code as is, with the explanation coming up afterward.

function page()
{
$page = substr(strrchr($_SERVER['PHP_SELF'],'/'),1,-4);
return $page;
}

As you can see this is a function because I use it a lot throughout the site, not just for this one purpose. "$_SERVER['PHP_SELF']" will return the path to the file with the filename from your root directory, so it will look something either like this: "/directory/subdirectory/file.php" or if the file is in the root directory it will simply be "/file.php". To get only the filename we want to chop off all the bits before the slash (and the slash itself), and also chop off the file extension.

As you can see the first thing I did was to chop off everything before the last slash using "strrchr()" which returns the part of the string after the last occurrence of the sub-string you specify. However, the last slash still remains, but this is not a problem, we can get rid of this, and the ".php" part in one go.

This is done by using "substr()". The function took three arguments, the string we want to work with, and two integers. The first integer tells the function to start from character 1 (this means everything before that will be chopped off, in this case character 0, which is the slash) and then return everything up to the -4th character from the end. This means that four characters will be dropped from the end.

Now the variable "$page" contains only the readable part of the filename which would be "inbox" or "index", without any slashes or the extension. You could also create this as a variable without using function. the reason I use a function is that I usually have some extra code in there which allows me to echo the function at once by default, but also to store it as a variable if needed.

Now, let's take a look at determining the directory. We could take the same approach as before but chop off different bits, but PHP already has a function which will make our life easier, let's take a look at the code:

function thedir()
{
$dir = substr(strrchr(getcwd(), '/'),1);
return $dir;
}

Using "getcwd()" we can get the current working directory. This will be in the form of "/directory/subdirectory", so all we need to do is return everything after the last slash and chop the last slash off. We use the same technique as before, so now we also have our directory. Once done, all you need to do is modify your header, which should be in a PHP file to make the body tag look like this (calling the functions as the names for the class and id):

<body id="<?php echo page() ?> class="<?php echo $thedir ?>"">

There are some other ways to do this, some can be simpler or more complicated, this is more like the proving of a point, but it is totally usable and I use a modified version of it throughout my sites. This is not a whole lot of code extra and will make your site better structured and easier to modify.

Please be aware that "getcwd()" can give you some weird results if you changed your current working directory somewhere in your code. In this case you can use a modified version of the 'page getting' code, or you can take a look at the server superglobal section in the PHP manual for some more help.

Summary
Identifying each page using body tags and CSS
Article Name
Identifying each page using body tags and CSS
Description
Daniel talks about an elegant way of identifying individual pages of your website using body tags and CSS for easy customization jobs.
Author
Publisher
Ghacks Technology News
Logo

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:

Comments

  1. Pranav said on March 12, 2009 at 3:12 am
    Reply

    Good going!
    With warmest regards,
    Pranav.

  2. Tobey said on March 18, 2009 at 1:00 pm
    Reply

    Nice idea Daniel. Thanks for sharing.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.