One-Click Child Theme plugin for WordPress

@: One-Click Child Theme plugin for WordPress

This plugin allows you to child theme from within wp-admin’s Appearance submenu

Download

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 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.
  2. Log in to your /wp-admin
  3. Click on “Appearance” on the menu
  4. Click on “Child Theme” (sub-menu or on the page).
  5. Give your new theme a name and description and click “Create Child”
  6. Your child should be created, edit the new theme style.css, 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‘s and @designsimply‘s WordCamp SF 2011 talk on CSS theming as requested by @sfgirl.

Also thanks to Chris Robinson 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 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.)

57 thoughts on “One-Click Child Theme plugin for WordPress”

  1. 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);

    1. 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 ).

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

  3. 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?

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

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

    1. @Karen

      Thanks for the response! I added an update screenshot generator in version 1.6. and I added the ability to copy over template files (the main thing people should want without making it too complicated) in version 1.5.

      I’ll take a look at the Theme File Duplicator plugin sometime.

  6. 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) [<a href='function.require-once' rel="nofollow">function.require-once</a>]: 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<

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

    2. This is strange. You should be able to go directly to /wp-admin of the site and it will bypass loading the child theme which sounds like it is breaking the site.

      The error code, by the way, is not one in my child theme plugin or the theme it created. It’s saying that the functions.php of the active theme (I assume the parent theme) is trying to load a file that doesn’t exist (looks like it got deleted). In fact, given the two names yin_and_yang and blue-typography, it seems to imply that yin_and_yang is a child theme of blue-typography created in a manner that violated WordPress coding standards for child themes!

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

  8. 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?

    1. …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??

      1. Yes currently. I think at the time I wrote it I had an idea of inspecting the WP_Upgrader object to see if I could dig out the parent theme’s original files and do some surgery when creating the child theme.

        But then I left Automattic and became a manager at Wikimedia. :-(

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

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

      1. Well a new version finally got released! 😀

        There is no longer any need to do Bart’s suggestion both because WordPress by default now does a functions.php cascade just like it enequeue’s styles.css in a cascade.

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

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

    1. Hmm This must be because WordPress changed the spec to require functions.php in all child themes. I couldn’t do this back when I wrote it because if I did, the parent theme’s functions.php would never get called. Later versions of WordPress realize when the file is missing and default to the original child theme behavior.

      I’ve since fixed this and also added a button to repair old child themes with one click (when it detects the error in the child theme).

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

    1. I added this feature in one-click-child-theme version 1.5. However, I only support copying “template” files (*.php files in the root of the parent theme) because I feel copying over hierarchical files will create confusion to budding theme developers when they find those files are not overridden by default in WordPress.

      Thanks for the idea!

    1. It’s in the child directory. This is editable from within WordPress in Appearance > Editor. The updated theme presents a link directly to this after a new theme is created to make this easier.

      Take care.

    1. It’s now being updated. Nice to hear that someone wrote about this plugin.

      I really should have spent more than a day writing it back then. This has caused no small amount of pain for others. :-(

    1. Delete the top level directory from ftp and start over. That should be doable since the top level directory should have the permissions that you used from FTP. The only other way is to install a web-based file management tool (it will have the same access controls as wordpress since both are executing within apache).

      Should I make it so that this can be done from my plugin? At the time, I decided against this because deleting files from a web interface entails some security risk I wanted to avoid.

  13. 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,

    1. I don’t know what happened. The new version of the plugin should throw an error explaining why any file could not be created so maybe that will help.

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

    1. Yes, you should go into the styles.css file in the child theme and paste in your changes to the styles.css file you made in the parent. Those styles will override the parent file so now the parent file can be upgraded/changed without affecting the changes you made to it.

  15. 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?

  16. I was try create Proteus Carpress child theme, but after creating I was obtain this:

    array(5) { ["parent_template"]=&gt; string(8) "carpress" ["parent_theme"]=&gt; string(8) "carpress" ["new_theme"]=&gt; string(14) "carpress-child" ["new_theme_path"]=&gt; string(112) "/nfsmnt/hosting2_2/e/a/ea9fe8ac-3360-46c4-8252-0a6e003ff021/havariatrans.sk/web/wp-content/themes/carpress-child" ["new_theme_title"]=&gt; string(14) "carpress-child" } NULL Theme switched!

    child theme working, but no complete and in child theme directory is only this:

    rtl.css
    style.css

    with:

    /*
    Theme Name:     carpress-child
    Description:    childed theme from installed Proteus theme Carpress
    Author:<br />
    Template:       carpress
    
    (optional values you can add: Theme URI, Author URI, Version)
    */
    
    @import url("../carpress/style.css");
    

    and

    /*
    Theme Name:     carpress-child
    Template:
    
    Right to Left text support.
    */
    @import url("../twentyeleven/rtl.css");
    
    1. The first part was debugging code I left in because I was lazy. I have since fixed that. It never affected anything and just looked a bit strange and sophomoric.

      This was “correct” at the time I wrote the plugin. That was all it took to create a child theme back then. However, later, WordPress changed the recommended method of creating child themes. The updated plugin can repair this and add a proper functions.php for you.

      (It creates an rtl.css pointing back to twentyeleven if the parent theme does not have a proper rtl.css file.)

  17. Since it hasn’t been updated for 7 months, this is what shows in wp: “Warning: This plugin has not been tested with your current version of WordPress.” So, I’m looking for another plugin. Any suggestion?

    1. I’ve finally updated it (in my defense, I was working as an engineering manager at Wikipedia for the last three years and not allowed to code). I also wrote a routine into it to repair any active child theme created before WordPress changed the recommended method of creating child themes.

      To find any competing plugins, you can search for “child theme” on the WordPress.org plugins page and read the accompanying description. I will warn you, however, that creating child themes are a simple task best left to a free and direct plugin like mine than advert-ware with a bunch of useless (and often poorly coded) features.

  18. I was adding a child template manually today and I couldn’t ever get the child styles.css to actually work. I ran across your plugin and thought maybe using your plugin the correct settings would be implemented.

    After installing and creating the child theme I set one CSS and sure enough its not working. Using Chrome Tools I can see that it loads the settings but they are crossed off because the parent theme overrides them.

    Would appreciate some help.

    1. Sure!

      First let’s make sure everything is set up correctly in the child theme.

      If the child theme is properly created, the parent theme’s css file should be superseded by the child theme. To verify this, view source and make sure that the stylesheet id="child-style-css" after id="parent-style-css". If not, there’s a problem with the way the child styles were enqueued.

      If all that is fine (and it is loading both css files which you can verify by clicking on the href’s and making sure), then the only way for the parent theme to override the child theme’s styles is if the style’s are written to have a higher priority. Is is known as the “cascade” which is the “c” in css.

      For instance, if an !important tag is placed in front of the style (not likely) or if the style has more rules preceding it (most likely), then those styles take precedence in the cascade. The best way to fix this is to look at the element you are trying to modify in chrome tools and look at the css selector that triggered the overriding rule (in the parent them). Use that same selector in your child theme when writing your style and your child theme’s style will override exactly that rule in the parent theme.

      I hope this helps. In the future, it might be better to ask questions like this on the plugin support page as there are more people monitoring that then me.

      Hope this helps.

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=""> <s> <strike> <strong>