Skip to:
Content
Pages
Categories
Search
Top
Bottom

Custom classes for profile pages, possible?

  • Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Hi! I wonder if it would be possible to have every profil page their own classes for some css customizing?

    /Jay

Viewing 25 replies - 1 through 25 (of 37 total)
  • Avatar of henrywright
    henrywright
    Participant

    @henrywright

    You could filter the body class? Something like this:

    function add_body_classes( $classes ) {
        if ( bp_is_member() )
            $classes[] = 'this-is-a-member-profile';
    
        if ( bp_is_my_profile() )
            $classes[] = 'this-is-my-profile';
    }
    add_filter( 'body_class', 'add_body_classes', 12 );
    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Hi and thanks for the reply. I assume this goes to functions.php? However didn’t do anything for me.. Any other suggestions?

    Thanks!

    Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    try in bp-custom.php

    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Doesn’t seems to work. I use an integrated buddypress theme (sweet date), and i i don’t have a bp-custom.php but a functions.php in the child theme for modification. Tried to create a bp-custom.php anyways, but it didn’t pick up any of my other custom snippets, so i ruled that one out. Any other suggestions?

    Thanks for the help!

    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    If i could get a custom class for just the #profile, then it would be enough!

    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Solved it. Added this to functions.php

    function page_bodyclass() {  // add class to <body> tag
    	global $wp_query;
    	$page = '';
    	if (is_front_page() ) {
        	   $page = 'home';
    	} elseif (is_page()) {
       	   $page = $wp_query->query_vars["pagename"];
    	}
    	if ($page)
    		echo 'class= "'. $page. '"';
    }

    and then replaced the body tag in the header with

    <body <?php page_bodyclass(); ?>>

    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Well, this didn’t work.. It only works for my main profile page where my slug/url is unique to the profilname. If i click other fields in the profile page, notifications, activity etcetera the url changes, and so does my css changes.

    Any other ideas?

    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Still struggling with this one. anyone?

    Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    bp-custom.php goes in wp-content/plugins. If that file exists BuddyPress will load it. By using this file instead of function.php you will preserve your added code if you ever wish to change themes.

    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Well.. I get that. However, I’m using a theme that have buddypess integrated, so that won’t work for me. I do have my functions in a child theme, and if i need to move to a new theme i can easily bring those functions.

    Anyways, back to my question. Still haven´t find a solution to this.

    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Still struggling with this- Anyone?

    Avatar of henrywright
    henrywright
    Participant

    @henrywright

    @jerryskate

    Regarding your answer to @modemlooper‘s suggestion:

    I’m using a theme that have buddypess integrated, so that won’t work for me

    You should really try to give the bp-custom.php approach a try – I think it’s the solution here.

    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Appreciate the answer, but i have already tried it, and it doesn’t work. It actually gives me less body classes, which break other stuff where i use .single and .single-forum rom the body tags.

    Avatar of @modemlooper
    @modemlooper
    Moderator

    @modemlooper

    what Henry posted is correct way. scroll down to Add Classes By Filters

    http://codex.wordpress.org/Function_Reference/body_class

    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Yeah it might be correct, but it doesn’t work. I have tried pretty much anything regarding the body class, but the page doesn’t output anything i can use. It works at the main profile page, where my last slug is unique to the username, but as soon as you click on any tabs at the profile page, its lost, since the slug change to a more universal one. Here´s some of the things i tried, to no luck. http://wordpress.org/support/topic/give-pages-truly-unique-id´s-classes-possible?replies=23

    This is the page output:

      [page] => 0
        [pagename] => profile
        [error] =>
        [m] =>
        [p] => 0
        [post_parent] =>
        [subpost] =>
        [subpost_id] =>
        [attachment] =>
        [attachment_id] => 0
        [name] => profile
        [static] =>
        [page_id] => 0
        [second] =>
        [minute] =>
        [hour] =>
        [day] => 0
        [monthnum] => 0
        [year] => 0
        [w] => 0
        [category_name] =>
        [tag] =>
        [cat] =>
        [tag_id] =>
        [author] =>
        [author_name] =>
        [feed] =>
        [tb] =>
        [paged] => 0
        [comments_popup] =>
        [meta_key] =>
        [meta_value] =>
        [preview] =>
        [s] =>
        [sentence] =>
        [fields] =>
        [menu_order] =>
        [category__in] => Array
            

    As you can see the page doesn’t output a class unique to the profile, so doesn’t seems to work to filter the bodyclass.

    Must be another way of doing this?

    Avatar of henrywright
    henrywright
    Participant

    @henrywright

    Have you tried viewing the page source? <body class"...">

    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Yes of course… I added echo '<pre>' . print_r( $wp_query->query_vars, true ) . '</pre>';

    To dump the output of the body classes in the page source, which you can se in my post above.Pagename gives me the users name, but only when you land on the profile page. Any other tab you click on the profile page, it changes to profile, therefor useless.

    Avatar of henrywright
    henrywright
    Participant

    @henrywright

    And you’re sure you have <body <?php body_class( $class ); ?>> in your template?

    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Well, i changed the header.php´s bodytag to that, yes. Should i have done it somewhere else? Took a look around the php right know, didn’t find any obvious places with a body tag. Maybe thats my problem?

    Avatar of henrywright
    henrywright
    Participant

    @henrywright

    @jerryskate the body tag in your theme’s header.php file should be <body <?php body_class( $class ); ?>> – if it is just something like <body> then the filter I suggested above won’t work. Perhaps that was why it wasn’t working?

    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Nope, thats exactly what i did. It does work though, it outputs the profilename as the only unique class when you land on a profile page due to the slug being your profilename. But as stated above, if you navigate around on someones profile page, forum, sites, notifications etc, the slug changes to something not unique, and it doesn’t work anymore.

    It would work if i used “dirty” permalinks, but being on a multisite its not an option.

    The output in my previous post is what i get when i use the body tag your talking about.

    Avatar of henrywright
    henrywright
    Participant

    @henrywright

    If you want something unique you just have to modify the filter function.

    For example, this is very generic:

    if ( bp_is_member() )
        $classes[] = 'this-is-a-member-profile';

    This is unique:

    if ( bp_is_member() )
        $classes[] = 'member-profile-of-' . bp_displayed_user_username();
    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Hmm there we go. I now get <body jerryclass="" class=" customize-support" and its consistent throughout the priflepage. it does however give me less other classes, which is a problem in my bbpress where i have used the classes for customization there. Maybe i can work around that.

    Im unsure how to use the this bodycalss with css though, i tried .jerryclass, #jerryclass, body.jerryclass.. Nothing seems to work. Any guidance there would be appreciated.

    Thanks for the replies, feels close know!

    Avatar of henrywright
    henrywright
    Participant

    @henrywright

    <body jerryclass="" class=" customize-support" seems weird. You shouldn’t be getting that. You should be getting something like <body class="classname">

    In your CSS file, you’d use:

    body.classname {
        // whatever
    }
    Avatar of jerryskate
    jerryskate
    Participant

    @jerryskate

    Yeah thats what i was thinking too. Seemed kinda weird to me. body.classname would be the obvious choose for me, but well.. weird output. need to fiddle around with it a little to see if i can get it to work. Too bad it filters out all the other classes though. This is how it looks without the filter:

    activity bp-user my-activity my-account just-me buddypress bbp-user-page single singular bbpress page page-id-5 page-template-default logged-in admin-bar bp-wall adminbar-enable not-responsive customize-support

    Wish i could keep those classes and have the bodyclass of the user added.

Viewing 25 replies - 1 through 25 (of 37 total)

You must be logged in to reply to this topic.