Skip to:
Content
Pages
Categories
Search
Top
Bottom

[1.2] Child Theme Best Practices

  • Avatar 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)
  • Avatar of Andy Peatling
    Andy Peatling
    Keymaster

    @apeatling

    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;}

    Avatar 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

    Avatar of Andy Peatling
    Andy Peatling
    Keymaster

    @apeatling

    Yes exactly.

    Avatar of arnonel
    arnonel
    Participant

    @arnonel

    Thanks guys.

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

    Avatar of Andy Peatling
    Andy Peatling
    Keymaster

    @apeatling

    None.

    Avatar 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.

    Avatar of arnonel
    arnonel
    Participant

    @arnonel

    Great stuff, thanks for all the help guys

Viewing 8 replies - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.