Skip to:
Content
Pages
Categories
Search
Top
Bottom

How to Create a Child Theme for the purpose of modifying bbPress


  • wiste
    Participant

    @wiste

    The codex page for this is outdated and a lot of the threads are for older versions so here is a version for WP 3.8, bbPress 2.5.2.

    Resources

    Here are the pages from which I pieced this together.

    http://codex.bbpress.org/step-by-step-guide-to-creating-a-custom-bbpress-theme/
    http://codex.wordpress.org/Child_Themes
    http://op111.net/53/
    http://perishablepress.com/bbpress-theme-template-files/
    http://www.hongkiat.com/blog/wordpress-child-themes-dev/

    WordPress Child Themes – What, Why & How

    Initial Setup

    Install WordPress and bbPress.

    Step #1: Create a child theme of your WordPress theme.

    Even though what you’re wanting to change is bbPress and not your WordPress, there are not separate themes for plugins, so you need to create a child theme of whatever WordPress theme you are using to have a place to put the bbPress plugin child theme files. This will ensure that any updates to bbPress or your WordPress theme will not overwrite your changes. Here is how you create a child theme:

    1. FTP to your website
    2. Go to ../wp-content/themes
    3. Create a new folder for your child theme. Name it yourtheme-child for the sake of organization.
    4. Create a new file called style.css and add the below, changing the valuesto the value for your child theme. The critical fields are Theme Name, Template, and the the parent theme directory name (which should be the same as “Template”) in the @import. Everything else is used by wordpress.org for categorizing templates so don’t stress if you don’t know what to put there:

    /*
     Theme Name: Your Theme Name Child
     Theme URI: Your website if you don't intend to publish a separate site just for your theme
     Description: A brief description of your child theme
     Author: your name
     Author URI: your website
     Template: parent-theme-directory
     Version: 1.0.0
     Tags:  whatever tags you might want to use for your child theme
    */
    
    @import url("../parent-theme-directory/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */

    5. FTP your newly created style.css to ../wp-content/themes/yourtheme-child

    Step #2: Add your bbPress Child Theme files to your WordPress Child Theme

    1. Create a folder called “bbpress” on your local machine.
    2. FTP to ../wp-content/plugins/bbpress/templates
    3. Download the contents of the “Default” folder to the “bbpress” folder on your local machine
    4. Edit the files you want to change for bbPress (see bbpress-theme-template-files link under resources above).
    5. Delete any files you haven’t changed. You can skip this step if it’s confusing, but you should try to only upload files you’ve changed.
    6. FTP to ../wp/content/themes/yourtheme-child
    7. Create a folder called “bbpress” inside yourtheme-child
    8. Copy the contents of the “bbpress” folder in your local machine to the “bbpress” folder inside your child theme folder.

    Step #3: Activate your Child Theme

    Once you have created your child theme and made changes to the bbPress files in the child theme, you need to activate the child theme in order to see the changes on your site.

    1. Log into your WordPress admin panel
    2. Go to Appearance -> Themes
    3. Find your child theme. It would be the same as the “Theme Name” you gave it in the first line of the style.css you created in Step 1.
    4. Click “live preview” and make sure nothing has gone horribly wrong.
    5. Activate the child theme.

    Since you didn’t change any files from your wordpress theme, the theme for the site will be inherited from the parent theme so the only changes you should see are the changes you made to the bbpress files that you uploaded to your child theme. The only problem I encountered was that because it was a new theme, my custom “header top menu” was not associated with the theme, so I just had to go into the menu and check the box to tell it to use that custom menu as the header menu.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thanks for this 🙂

    Any chance you’d be able to update the codex so it isn’t out of date?
    https://codex.bbpress.org/step-by-step-guide-to-creating-a-custom-bbpress-theme/

    (You login with your normal wordpress.org/bbpress.org username & password as anyone can edit the codex)


    wiste
    Participant

    @wiste

    Thanks, I didn’t realize I could do that. I’ve only been using bbPress for about a week so I’m not sure I’m an authority. I spent the morning working it out and figured I could save someone else the frustration. I will take a look at updating the codex when I get some spare time, but if anyone wants to take this info and add it before I get to it feel free.


    wiste
    Participant

    @wiste

    I should also add that I’m not 100% certain this is correct. It works for the CSS files but it doesn’t seem to pick up the php files in ../wp-content/themes/yourchildtheme/bbpress/bbpress. It works if I move them up a level to the top level bbpress folder, or even under the child theme folder, though. I haven’t read enough about child themes yet to figure out why this is the case, but it works, it’s just odd that you can’t have the files in the same structure in a child theme.

    The bbPress templates should be in /wp-content/themes/yourchildtheme/bbpress/


    wiste
    Participant

    @wiste

    @netweb, I get that and that’s where the CSS files are, but when I try to change any php files that are located in the subfolder which is also names “bbpress” it simply doesn’t see them. My understanding from the WordPress documentation is that if you put the file in a child theme in the exact same heirarchal location as it is in the parent theme it should pick it up, but that’s not how it’s working.

    I made a custom loop-forums.php. The structure of the default folder is that this file is inside a folder already called bbpress. When I copy over all the files form default in my parent theme to bbpress in my child theme I end up with a bbpress folder containing all of the php files inside of the bbpress folder that I created for the child them. Then upload my custom loop-fourm.php to the folder where it normally resides, it doesn’t pick up the change. When I put it at the root it does pick it up. However, changes to the CSS files in bbpress/CSS get picked up.

    I’m having this same problem with other files in the child theme where I can’t figure out where to place php files to have them be recognized in the child theme, so it might be something wrong with the way the theme handles child themes, but I have no way to know this.

    @wiste What I think/expect is the following:

    1. \wp-content\plugins\bbpress\templates\default\bbpress\loop-forums.php
    2. \wp-content\themes\mytheme\bbpress\loop-forums.php
    3. \wp-content\themes\mychildtheme\bbpress\loop-forums.php

    I’ll try to have a closer look at this sometime in the next few days and report back 🙂


    hamzahali
    Participant

    @hamzahali

    @netweb @wiste any update on this,

    should i maintain the hierarchy or not in child theme.


    jacksudan
    Participant

    @jacksudan

    I could not get this to work, is there simpler instructions? I mean why do i need to use ftp, Just explain to me where to create the child theme folder and which files i need to copy to it?

    I already have a child theme for my website where I can modify my website css files. Where do i put the byddypress-child folder?


    jacksudan
    Participant

    @jacksudan

    Stephen could you tell me the easiest way to do this please?


    jacksudan
    Participant

    @jacksudan

    I have put the bbpress css files inside my child theme folder

    themes/mytheme-child/bbpress-child/bbpress.css

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.
Skip to toolbar