One-Click Child Theme plugin for WordPress

This plugin allows you to child theme from within wp-admin.

### Download ###

[http://wordpress.org/extend/plugins/one-click-child-theme/][download page]

### Description ###

In the current version of WordPress, you shouldn’t modify CSS of any downloaded themes because if you update the theme, your changes will be destroyed. What you should instead do is [create a child theme](http://codex.wordpress.org/Child_Themes) and edit the CSS of the child theme. If done this way, updates to the parent theme will be inherited instead of destroy your changes.

The problem is that currently the only way to child theme something is edit files on the filesystem. This is non-intuitive for shared-hosting sites with one-click WordPress installs (it usually involves a “shell account” or learning how to use “FTP”).

This plugin attempts to get around that issue, by adding a button to the themes page to allow you to child theme the currently selected theme. (It’s not really one-click, though.)

### To use ###

1. Install the plugin.
1. Log in to your /wp-admin
2. Click on “Appearance” on the menu
3. Click on “Child Theme” (sub-menu or on the page).
4. Give your new theme a name and description and click “Create Child”
5. Your child should be created, [edit the new theme style.css](http://codex.wordpress.org/Editing_Files#Using_the_Theme_Editor_and_Plugin_Editor), and go wild!

### Issues ###

* Doesn’t play perfectly with grandchildren themes (Not my problem, this is an
issue with the way templates and stylesheets are handled in WordPress. I
have ideas though)
* Pages have terrible UX
* Doesn’t like multiple theme directories (I don’t know how these work, yet)
* No error handling if something goes wrong during the shell commands. (Shouldn’t happen if you can install themes in the first place)
* Needs an “Add File” button to the editor to allow you to edit any file
* “add file” should be able to include files from the parent

### Thanks ###
Inspired by [@janeforshort][janeforshort]‘s and [@designsimply](http://twitter.com/designsimply)’s WordCamp SF 2011 talk on CSS theming as requested by [@sfgirl](http://twitter.com/sfgirl).

Also thanks to [Chris Robinson](http://contempographicdesign.com/) for the screenshot copying code (see comments).

### I Screenshot the sheriff ###

Manage Themes ‹ The Woodwork — WordPress

Make a Child Theme ‹ The Woodwork — WordPress

Manage Themes ‹ The Woodwork — WordPress

### Hey Terry, I already modified my CSS. What do I do now? ###

Well, you can wait for the theme to get updated and it to break your s—t, or you can do something about it now while you still (may) remember what changes you made.

1. Go through the steps for installing and running the plugin above.
2. Click on the [Appearance > Editor][appearance-editor-subpanel] in your admin dashboard menu (or network admin menu if multi-site).
3. Select the parent theme in the drop down on the right, click “Select” and make sure you are editing the file “style.css” (select on the right).
4. Copy the changes you made, if you managed to remember them.
5. Select the child theme you created to the drop down in the left (you should be editing “style.css”).
6. Paste your changes to the end of the file.

(I wish I could automate this process, but WP_Upgrader is undocumented, and I’d need it to figure out what parts of the style.css you trashed. So you’re just going to have to deal.)

[download page]:http://wordpress.org/extend/plugins/one-click-child-theme/ “One-Click Child Theme—WordPress Plugins”
[janeforshort]:http://twitter.com/janeforshort “@janeforshort @ Twitter”
[appearance-editor-subpanel]:http://codex.wordpress.org/Appearance_Editor_SubPanel

35 thoughts on “One-Click Child Theme plugin for WordPress

  1. Chris Robinson

    Awesome idea, one thing you might consider adding is copying the parents screenshot into the child directory — did it with three quick lines:


    $screenshot = $theme_root.'/'.$parent_theme.'/screenshot.png';
    $child_screenshot = $theme_path.'/screenshot.png';
    copy ($screenshot, $child_screenshot);

    Reply
    1. Jane Wells

      It would be even better to have an uploader to upload a screenshot image into the media library and use that since in most cases the child theme is being created in the first place to make the theme look different, so using the parent screenshot would be deceptive in many cases and bad ux (it was proposed to do this in core for child themes and is not happening for this reason: http://core.trac.wordpress.org/ticket/18599 ).

      Reply
  2. Steve

    When I set-up a child theme in a BuddyPress compatible theme, the resulting child theme displays a message stating that I need to activate a BuddyPress compatible theme.

    Has anyone run into this situation?

    Thanks!
    Steve

    Reply
  3. Rick Hutchinson

    I’m trying to delete themes created with the plugin but they won’t delete, on ftp won’t allow either. Not sure what I might be doing wrong?

    Reply
  4. Pingback: WordPress Child Themes – How To | TwoBeers Project

  5. Delton

    Hi Terry,

    Thanks for providing this plugin. It works great for a novice like myself. I am writing to find out if you have further instructions to share about creating an “adding file” button to the editor.

    Much thanks in advance,

    Delton

    Reply
  6. Karen Bennett

    Hi Terry,
    This plugin is a great idea! I came across potential solutions for some of your planned updates. Check out the “Theme File Duplicator” plugin wordpress.org/extend/plugins/theme-file-duplicator/. I also came across one that can add or update the screenshot but don’t remember its name. I found yours, and both of these, in the first few pages of plugin search results for theme options.
    Karen

    Reply
  7. chad

    Hate to bug you about this but I spent two hours trying to figure out what went wrong. I only know from the steps I took and the php error log that it is related to the child theme plugin/child theme.

    I’m working locally using MAMP, all was well until I installed your plugin and created a new child theme in your admin panel called blue typography and saved it. Immediately after I was no longer able to see the site. localhost and anything after it (ie. localhost/home) gets the chrome error loading page as if it were offline.

    Simply put: How do I get my site back? I can get rid of the plugin once I can get back on but I don’t know what files to modify or delete or whatever has to be done.

    Here is my error code, by the way

    [09-Dec-2011 15:29:29] PHP Warning: require_once(/Users/chad/Documents/Design Resources/_wordpress/wp-content/themes/blue-typography/admin/options-framework.php) [function.require-once]: failed to open stream: No such file or directory in /Users/chad/Documents/Design Resources/_wordpress/wp-content/themes/yin_and_yang/functions.php on line 23

    Reply
    1. David C

      Same issue here. Likely a hosting issue as I’ve chmod’d the files, but the problem persists and appears to be related to permissions.

      Reply
  8. adam v

    Help! I’m just setting up a website through 123-reg, with a shared server hosting package. I’m not good at ftp so gave one click child theme a try to create a child theme of twentyeleven. When I set the child theme and then preview my website, all formatting has gone. It comes back again when I switch to original twentyeleven theme. Any ideas?

    Reply
  9. Chris

    I’m in the same position as Adam- I’m not any good with CSS files, even though I’ve spent SO many hours/days modifying the style of my site.

    When installing and activating the “One-Click Child Theme” plugin, everthing I’ve ever modified in the CSS files to make my site look as I want it to look, is being reset to default. It did NOT help changing back to the parent theme, that was also at default. So I deleted everything on my server via FTP and uploaded it again (made a backup before installing the plugin). The plugin is still there, but the parent theme (with the CSS changes) is the active theme and is now back to normal.

    Is the only way to get a child theme to work with this plugin (or any other way), to install it with a fresh/unmodified theme? And/or remembering all the changes I’ve ever made in the style.css etc, copy that and paste in the child themes directory/CSS files? How about copying the whole style.css into the child themes directory?

    Reply
    1. Jez Nash

      …bump… Great idea, but when I used the plugin, I got a child theme – cool – but all of my menu nesting was destroyed. Also the main picture reverted to the original rotating set of pictures in Twenty Eleven. Should I just keep the new child theme and try and remember all of the changes I made in the original??

      Reply
  10. Bart

    Hi,

    Thanks for this great plugin!

    There is only one thing missing that would make this plugin ideal for my purposes.
    That is: Creating a functions.php in the child theme. I use in often to drop in stuff specific for the theme like changing footers.

    I am not that familiar with PHP so I leave it to you to update this very usefull plugin.

    Think the code should be something like this, but have not found the time to test it.

        // Make functions.php
        ob_start();
        require $this->plugin_dir.'/child-theme-css.php';
        $css = ob_get_clean();
        file_put_contents( $new_theme_path.'/functions.php', $css );
    

    And it needs a empty functions.php

    Like:

    Would be great if you could add this and make a new release.

    Thanks! Bart

    Reply
    1. Kay

      Hi,
      Appreciate for your wonderful on-click child theme.
      I am also looking for your update for the function.php issue.

      I am not familiar with php, yet I do need such function.php.
      Could any one suggest how I should add the Bart’s suggested code as below?

      // Make functions.php
      ob_start();
      require $this->plugin_dir.’/child-theme-css.php';
      $css = ob_get_clean();
      file_put_contents( $new_theme_path.’/functions.php’, $css );

      PS: When will the new version be released? :) looking forward to it.

      Reply
  11. Gayatri

    Hi

    I tried to use the child theme. But everytime it gives the random code and I go back to appearance – its says, Theme Broken and so the child them doesnt get created. Parent theme is Good News by Momizat.

    When I tried to use the child them on another blog with the same parent theme it wouldn’t register the changes :(

    Please help.

    Reply
  12. Thomas

    Hi,

    I just installed your plugin and it totally messed up my site when I created a child theme. I got the following error and I can’t do anything.


    Warning: require_once(/home/tomi2012/public_html/relensi.com/wp-content/themes/openhouse-childtheme/admin/admin-functions.php) [function.require-once]: failed to open stream: No such file or directory in /home/tomi2012/public_html/relensi.com/wp-content/themes/Openhouse/functions.php on line 32

    Fatal error: require_once() [function.require]: Failed opening required ‘/home/tomi2012/public_html/relensi.com/wp-content/themes/openhouse-childtheme/admin/admin-functions.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/tomi2012/public_html/relensi.com/wp-content/themes/Openhouse/functions.php on line 32

    I have deleted it using ftp, but still error remains. Kindly assist me here.

    Regards

    Reply
  13. Mike Rawlins

    Hey Terry, nice plugin for creating child themes..

    Is there any way that other files can be copied in to the child theme? I regularly update the footer of themes and it would be useful if there was a way of copying this in to the child theme without the need to FTP on to the site.

    Reply
  14. Pingback: Blog Improvement: 10 Must-Have Wordpress Plugins

  15. Pingback: Create a Child Theme In One Click | WP Sites

  16. infiniteplayer

    This looks like a great plugin but I am not sure if its compatible and/or being developed any more. Its a shame as it got a good write up in the wordpress missing manual book.

    Reply
  17. Tea Cosy

    Hi Terry,

    Really want to use this plugin as it sounds awesome. Only trouble is it never works for me. Your plugin creates the new child theme but it’s labelled as a broken theme because the stylesheet is never created. Any ideas?

    Thanks,

    Reply
  18. Pingback: Child Themes | WebFaSol

  19. maria

    Hi I’m a bit new to this! I’m trying to understand how to make it work.
    I Installed the plugin.
    Clicked on “Appearance” on the menu
    Clicked on “Child Theme” (sub-menu or on the page).
    Give your new theme a name and description and click “Create Child”

    Ok I made changes before so I’m following these steps:
    Clicked on the Appearance > Editor
    Select the parent theme in the drop down on the right, click “Select” and make sure you are editing the file “style.css” (select on the right).
    Copy the changes you made, if you managed to remember them.

    Select the child theme you created to the drop down in the left (you should be editing “style.css”). DO YOU MEAN THE ONE UNDER APPEARANCE? when I click there ask me to create a new child! or should I use the drop down on the top right and click select again? SORRY I’M NEW AND I AM A BIT CONFUSED.
    Paste your changes to the end of the file. SHOULD I PASTE THEM UNDER THIS:??
    /*
    Theme Name: jeremy feather
    Description:
    Author: Jeremy
    Template: Feather

    (optional values you can add: Theme URI, Author URI, Version)
    */

    @import url(“../feather-child-theme/style.css”);

    thanks for your help

    Reply
  20. Pingback: Create a child theme in seconds - Great WP plugin

  21. Pingback: WordPress & The Web’s Golden Bounty | ok-cleek

  22. Matt

    Hi Terry,

    I really like the idea of this plugin…gonna start playing with it soon. Since you haven’t been actively developing it would you mind if I forked it on github with the idea of taking it over in the WordPress repository as well?

    Reply
    1. tychay Post author

      I don’t mind it at all. Contact me via e-mail at php.net :-) If there is a way I can help out, I’d love to.

      Reply
  23. Pingback: Nice Wordpress Themes photos | Everything About Web Hosting

  24. Pingback: How to create a child theme and why | katapress.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>