How to add/insert a class to a sidebar in single.php?

Question

I have a sidebar displaying in the home and single pages. When it shows up in the home page, it has an already defined css class (width:30%)

When it shows up in the single page, i want to add/insert a new class to that sidebar. I want this new style to modify the predifined elements.So it ends with a width of 35%

I tried to do it as follows:

In functions.php (child theme)

function sidebar_class() {
    if ( is_single() ) {
        $class = 'sidebar-single';
    }
    return $class;
}

In sidebar.php

<div id="secondary" class="sidebar1-area <?php sidebar_class(); ?>" role="complementary">

The html result should be:

<div id="secondary" class="sidebar1-area sidebar-single" role="complementary">

Original css values for the class

width: 30%

Final result

width:35%

How can I accomplish this in the most efficient way?

Answer 1

How can I accomplish this in the most efficient way?

As Rarst indicates, don't change the class to change the style. Leave the class the same and use CSS Specificity to change the style on certain pages.

When WordPress creates a page in a theme that uses the body_class() function it adds a lot of information about the page in the html class of the body tag. Look at that tag on a page created by single.php and that class will include the class name single.

Use that to specify the style for single.php files.

#secondary {
    /** These styles work on all pages. */
}

body.single #secondary {
    /** These styles only work on single.php pages. */
}

body.home #secondary {
    /** These styles only work on home pages. */
}

See the body_class() function for details on which classes are added.