Developing (v7+)

Auto class or id for body tag

Permalink 2 users found helpful August 23, 2012 at 7:16 PM

I am wanting to add a unique class or id name to each page's body tag - so that I can apply unique styles on a per page basis.

Can anyone help me with this? Such as to have the script auto pull the current page's id number or page slug so that I can add it into a header.php file for the body tag?

Thanks,

(Sidenote, I could potentially try to use this:

http://www.concrete5.org/community/forums/customizing_c5/header-nav...

to figure it out, but the output from this is a page name which does not work so well when page names are more than one word - output is something like "About Us" rather than a slug like this "about_us".)

aghouseh replied on Aug 23, 2012 at 7:28 pm Permalink Reply

I typically do something like this.

<?php
$th = Loader::helper('text');
$nh = Loader::helper('navigation');
$path = 'path' . $th->sanitizeFileSystem($nh->getLinkToCollection($c));
$pagetype = ($pth = $c->getCollectionTypeHandle()) ? $pth : 'view';
?>
<body id="<?php echo $path; >" class="<?php echo $pagetype; ?>">

Hope that helps!

mhawke replied on Aug 23, 2012 at 7:51 pm Permalink Reply

I'm not sure if this is what you are going for but I just tried it with my own site and I like how it works. It gives you some predictable control over the styles you apply to specific pages.

Add this to your header code:

<body class="<?php echo $c->getCollectionAttributeValue('body_class') ?>">

Create a 'Text' page attribute called "body_class".

Define your unique styles in your css and then use the page properties to 'assign' that unique style through the body_class attribute's value.

Clear as mud?

uswebdesigner replied on Aug 23, 2012 at 8:05 pm Permalink Reply

Thanks mhawke. I appreciate that option - and - ideally, I would love to make it work so that the code will just pull a unique variable per page and auto insert it so that I do not have to go in and create an attribute for each page. Seems like it could be don and would save a ton of time - which we are always looking to do :)

And, if not, I will use your approach, and again, appreciate it.

aghouseh replied on Aug 23, 2012 at 8:09 pm Permalink Reply

Yeah, sorry if I didn't explain my code up there.

That will put a unique ID on each page based on the URL:

http://yoursite.com/about/contact/... with a pagetype of "right_sidebar" will output this:

<body id="path-about-contact" class="right_sidebar">

That would allow you to automatically target specific pages. You could also do it based on the cID for the given page with $c->getCollectionID();

mhawke replied on Aug 23, 2012 at 8:41 pm Permalink Best Answer Reply

How about this:

<?php
$th = Loader::helper('text');
$class = $th->sanitizeFileSystem($c->getCollectionName(), $leaveSlashes=false);
?>
<body class="<?php print $class ?>">

This returns "Products-Services" as the class for a page called "Products & Services"

uswebdesigner replied on Aug 24, 2012 at 3:40 pm Permalink Reply

Sidenote.

I have been trying to accomplish something similar by adding class names to each nav item for custom styling as well.

I have it working somewhat via this post,

http://www.concrete5.org/community/forums/customizing_c5/header-nav...

but the output is something like, "facilities & services" rather than facilities_services".

Any chance you feel to extend the help with that?

Either way, thanks for your help here.

milkmen replied on Jun 21, 2013 at 12:44 am Permalink Reply

Perfect. Just what I needed! Is there a standard practice as far as where to put global PHP functions like this?

mhawke replied on Jun 21, 2013 at 7:30 am Permalink Reply

Usually a theme has an 'elements' folder containing a 'header.php' file so I would put it in there but if your theme doesn't have such a file, then just make sure it gets called before the <body class=...> tag.

misam replied on May 9, 2014 at 1:22 pm Permalink Reply

Nice – Just what i looked for! Many thanx :)

uswebdesigner replied on Aug 24, 2012 at 3:10 pm Permalink Reply

Thanks to both aghouseh and mhawke. Both answers were helpful and I actually combined both to create what would serve me best, and put the code below for others to use.

aghouseh - I love the idea of adding in the pagetype, which I used. I personally would want to add dashes in between the parts of the path output, (ie. path-folder-filename) and did not know how to add them in. Also, for anyone trying out that code you provided, there is a missing ? in this part needing to be added

<?php echo $path; ?>

But really, I am grateful for your code.

mhawke - you nailed it for what I wanted, a simple page name for a path. I don't expect to have duplicate page names and my client may move the pages around and so I would not want the path in there in case they did that, resulting in the id changing and the styles suddenly not being applied.

For anyone else, I used this:

<?php
$th = Loader::helper('text');
$page = $th->sanitizeFileSystem($c->getCollectionName(), $leaveSlashes=false);
$pagetype = ($pth = $c->getCollectionTypeHandle()) ? $pth : 'view';
?>
<body id="<?php echo $page; ?>" class="<?php echo $pagetype; ?>">

stewblack23 replied on Jul 5, 2017 at 9:42 pm Permalink Reply

This is just what I was looking for. Using this in all my custom C5 projects from now on.

lucasschirm replied on Sep 1, 2014 at 9:50 am Permalink Reply

Hi',

based on this post i made my own function and it had work fine for me, i will put it on above and if i can help anyone to understand, made contact with.

function body_class($c) {
    $bc = '';
    $th = Loader::helper('text');
    $nh = Loader::helper('navigation');
    $path = 'path' . $th->sanitizeFileSystem($nh->getLinkToCollection($c));
    $pagetype = ($pth = $c->getCollectionTypeHandle()) ? $pth : 'view';
    $bc.= $pagetype;
    $categories = strtolower(preg_replace('/^\s+|\n|\r|\s+$/m', " ", $c->getCollectionAttributeValue('blog_category')));
    if (!empty($categories))
        $bc.= ' ' . $categories;
    $tags = strtolower(preg_replace('/^\s+|\n|\r|\s+$/m', " ", $c->getCollectionAttributeValue('tags')));
    if (!empty($tags))
        $bc.= ' ' . $tags;
    if (isset($_GET['akID']['14'])) {
        foreach ($_GET['akID']['14']['atSelectOptionID'] as $ak) {

Viewing 15 lines of 35 lines. View entire code block.

 
function body_class($c) {
    $bc = '';
 
    $th = Loader::helper('text');
    $nh = Loader::helper('navigation');
    $path = 'path' . $th->sanitizeFileSystem($nh->getLinkToCollection($c));
    $pagetype = ($pth = $c->getCollectionTypeHandle()) ? $pth : 'view';
 
    $bc.= $pagetype;
 
    $categories = strtolower(preg_replace('/^\s+|\n|\r|\s+$/m', " ", $c->getCollectionAttributeValue('blog_category')));
 
    if (!empty($categories))
        $bc.= ' ' . $categories;
 
    $tags = strtolower(preg_replace('/^\s+|\n|\r|\s+$/m', " ", $c->getCollectionAttributeValue('tags')));
 
    if (!empty($tags))
        $bc.= ' ' . $tags;
 
    if (isset($_GET['akID']['14'])) {
        foreach ($_GET['akID']['14']['atSelectOptionID'] as $ak) {
            $bc.= ' ' . strtolower($ak);
        }
    }
 
    if (isset($_GET['akID']['20'])) {
        foreach ($_GET['akID']['20']['atSelectOptionID'] as $akID) {
            $fak = CollectionAttributeKey::getByID(20);
            $handle = $fak->getAttributeKeyHandle();
            $type = $fak->getAttributeType();
            $controller = $type->getController();
            $controller->setAttributeKey($fak);
            $items = $controller->getOptions();
            foreach ($items as $item) {
                if ($item->ID == $akID) {
                    $bc.= ' ' . strtolower($item->value);
                }
            }
        }
    }
 
    return $bc;
}

The nice result can be see on:http://www.cliqueagosto.com.br/receitas/fritada-de-legumes-com-peit...

Look for <body> on source code.

Forums

Developing (v7+)

Auto class or id for body tag

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?