Skip to:
Content
Pages
Categories
Search
Top
Bottom

[1.2] Child Theme Best Practices

  • Profile photo of arnonel
    arnonel
    Participant

    @arnonel

    This thread can be used for anything really, but what I want to know is:

    What do I do if I only want to override 1 CSS element?

    eg: I want to change the background color.

    Do I need to copy _inc/css to my child theme and change there? ie, all the elements?

    If yes, what if there is updated parent css?

    If no, how do i override just that 1 element and leave everything else as-is?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Profile photo of Andy Peatling
    Andy Peatling
    Keymaster

    @apeatling

    Profile photo of David Lewis
    David Lewis
    Participant

    @takeo

    I believe the only file required for a child is style.css. If it’s literally just one line of CSS… I’d probably put it in that file. So for instance:

    /*
    Theme Name: My Child Theme
    Template: bp-default
    Tags: buddypress
    */

    /* Parent styles */
    @import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );
    @import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );

    /* Custom styles */
    body {background: #cf0;}

    Profile photo of arnonel
    arnonel
    Participant

    @arnonel

    @Andy I did :)

    Im happy with the default CSS, I dont want to create my own CSS, but im asking:

    What is the best practice if you only want to change ONE element.

    @David

    thanks.

    So effectively this means, I still use default CSS, but override that one element, right?

    That way if there are CSS updates to the parent, im still good to go

    Profile photo of Andy Peatling
    Andy Peatling
    Keymaster

    @apeatling

    Yes exactly.

    Profile photo of arnonel
    arnonel
    Participant

    @arnonel

    Thanks guys.

    Are there any implications on performance when overriding .php pages etc ?

    Profile photo of Andy Peatling
    Andy Peatling
    Keymaster

    @apeatling

    None.

    Profile photo of John James Jacoby
    John James Jacoby
    Keymaster

    @johnjamesjacoby

    @arnonel, the parent template file is never accessed. The only possible performance hit you would see is with loading the additional CSS from your child theme. Since you’re styling it one way with one set of CSS rules, then overriding it with another, you’re basically doing the same thing twice.

    It’s still the best/only way of doing this without totally writing your own CSS from scratch, or copying the bp-default CSS over totally, and never including it from the parent theme. If you go that route, you run the risk of not getting updates when CSS changes in the parent theme.

    Profile photo of arnonel
    arnonel
    Participant

    @arnonel

    Great stuff, thanks for all the help guys

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[1.2] Child Theme Best Practices’ is closed to new replies.