wpthemedetector-logo
WordPress Theme Detector Blog
child-theme-plugin-manage-themes

A new plugin for WordPress child theme creation

46 comments

Two weeks ago I wrote a post about how easy it really is to create a WordPress child theme, and on that post I explained an even easier way to do it by means of a  plugin I had found after thinking about creating such a plugin myself.

The idea for that plugin was to allow people to create a child theme from their own WordPress Admin Dashboards, without the need to access their servers via FTP.

As I said, I was surprised to find that somebody had already thought about that need, so I wrote about how to use the One Click Child Theme plugin as an easier way to create a child theme.

But then I was surprised today when I learned that  a new plugin for child theme creation had just been released: Child Themify by John P. Bloch is a brand new plugin available since just a couple of days ago (version 1.0 date is December 31st, 2012).

Using the new plugin

I have installed the new Child Themify plugin on the same WordPress “Tutorial Test Site” I used in my previous post. After installing and activating the plugin, you will not find any modification to your dashboard, since there is no new menu element added to it. Your will not need it anyway, because the plugin only affects the “Appearance/Themes” section. Once you get there, you´ll see that the plugin is doing its work. The first thing to be noticed is that we have the possibility to create a child theme for each and every one of the themes we have installed, except for already existing child themes, if any:

child-theme-plugin-manage-themes

You can see on the above image that, since I´m using my Tutorial Test Site as I left it on my previous tutorial, the active theme is “New 2012 Child Theme”. There´s  no option to create a grandchild theme from it, but there is a “Create a child theme” option for each of the other themes installed on the site, regardless of whether they are active or not.

This is the first difference  I´ve found between this plugin and the one I presented on my previous tutorial, since Once Click Child Theme will only create a new child theme for the active theme, which means that we need to activate the theme that we want to use as a parent theme before making the plugin create the child theme.

So far, so cool. Let´s go ahead using the plugin to create a new child theme and see what else is different.

Let´s say I wanted to create one more child for Twenty Twelve, and I wanted to call it “Happy New 2013″. So I clicked on the “Create a child theme” link for the Twenty Twelve theme and this is what I got:

create-child-theme-from-twenty-twelve

So, the second thing to be pointed out is that we are only able to enter the new theme name. We won´t find a way to fill in such other fields as a description, the author´s name, etc.

Is that a problem? Well, for one thing this method gives us a really fast and easy way to create a child theme, by just typing the Theme Name and clicking the “Let´s go!” button. But on the other hand I would say that it wouldn´t take too much time to type in other options and, in any case, if we were given the chance to do so, we could always leave them blank if we were in such a hurry.

I guess John P. Bloch made it this way for the sake of simplicity, though.

If we go to “Appearance/Themes” after having created our new child theme, we will have it right there waiting for us to activate it:

created-child-theme

Note that the author´s name is shown as “Anonymous” because we did not fill that information in, and that there is no screenshot available yet.

If we now activate the new child theme and go to “Appearance/Editor”, we will see that the stylesheet just created by the plugin for the new child theme looks like this:

child-theme-stylesheet

As we saw on my previous tutorial, there are 3 lines which must be in the style.css file of any child theme:

  1. The Theme Name (assigned by us)
  2. The Template (the chosen parent theme)
  3. The @import rule we discussed on that tutorial

So the plugin took care of those mandatory lines, but we can see that it also wrote two additional lines:

  • A very short description: “A child theme of (parent theme name)”
  • A version number: It assigned our child theme a default 1.0 version number

Like I said before, this plugin is a very easy and fast way of creating a child theme. And even if we are not given the opportunity to fill other information in before creating the theme, we can always edit the style.css file, modify some lines (for example the description) or add new ones (for example the author) and save the changes.

What else is new?

Although I have not tried it on my Tutorial Test Site, according to the plugin information available in the WordPress Plugin Directory, this plugin is multisite compatible, which is good news. If the plugin is used on a multisite network, the controls for creating child themes will be in the network admin instead of the regular site admin.

Conclusion

On our previous post we learned that creating a child theme was easy, and that there was and even easier way to do it by means of a plugin.

Today we have learned that there is more than one “easier way” to create a WordPress child theme, and that we have a new plugin available for that purpose. Child Themify provides a fast and easy way to create a child theme for any of the themes that we have installed (as long as they are not child themes themselves)  and it is multisite compatible.

January 20th, 2013 Update

If you are using the initial release version 1.0 of Child Themify, please update it to version 1.0.1 (available since 2013-1-18) to take care of a little bug.

As always, I would be glad to know about your feelings and your progress through the comments!

Luis Alejandre

Luis is the creator of the WPThemeDetector tool and the chief editor of this blog. You can read more about Luis in our About page.
Liked this post? Please share it!

46 Comments

  1. I’m glad you liked the plugin! I was indeed going for simplicity, but as you rightly point out, it would be little extra effort to include those options. The main reason I shipped the plugin without those features was because I’d already spent too much time on the plugin. I started working on the plugin at WordCamp Grand Rapids in August after Ryan Imel remarked that there were no tools like that at the time.

    I’ve already been thinking about what I want to do in version 1.1. It would be easy to set God defaults for the omitted theme headers; the user already has a name, the description obviously does too.

    I’ve also been thinking about providing a list of template files that can be overridden by copying them to the child theme at time of creation.

    All of these extra options can be hidden by default, of course, revealing them with an advanced controls link, or something.

    • Hi John, thanks for stopping by to comment.

      I believe that Ryan Imel was right. If you read my post A WordPress child theme made easy… and-easier you saw that I came to think that there was a need for a plugin like yours. Why, I actually thought of creating it! So it makes me happy that somebody else took the trouble to do it ;-).

      Nice to hear that you´re already thinking about the next version of your plugin. The template files idea sounds great of course, and I would suggest that a very simple functions.php file could also be automatically created (maybe including just one basic function that could be edited later by the user), since I think the goal would be to get the whole skeleton of the child theme directly from the admin dashboard.

      I´ll be looking forward to the new versions. As a member of the WordPress community, I thank you for taking the time and the effort to create a new plugin available for everybody!

  2. Is this a plugin that needs to stay installed or once I’ve set up the child theme can I delete it? Not sure if there’s any benefit but seems fewer installed is better right?

    • You can deactivate or even delete the plugin once you´re done. This plugin just creates the new child theme folder and the child style.css file for you, but it is not necessary for the child theme to work.

  3. I’m a little confused what happened when i tried to use this plugin…it’s has basically wiped out everything. I can’t even see my WP dashboard now and my url is just blank… thoughts?

    • I´m sorry to hear that, Chad.

      However, I´m sure it has nothing to do with the plugin itself, since it just creates a new folder and a new stylesheet file. I can´t tell you more without knowing more details about your case, but it could be caused by your parent theme not being properly coded for child theme support, as reported for a similar plugin here .

  4. I am a newbie to WordPress and was wondering how to edit CSS, PHP etc in the child theme? I tried locating the Child theme folder in WordPress to copy the other files over but couldn’t find it.

    As far as editing CSS is concerned, do I have to copy over anything I want to edit into my Child Theme’s CSS and paste below the @import ? Thank you!

    • Hi Catherine,

      To edit CSS, copy only what you want to modify bellow the @import rule, and then change it. You only have to leave in your child theme stylesheet what is different from the parent theme.

      For instance, let´s say that you only want to change the background color of your widget areas to black, and that you have a class in your parent´s style.css with many rules such as:

      .widget-area { margin: 10px 5px; padding: 8px; color: #ffffff; background: #2949CC; ….. etc…. }

      Then the only thing you need to put in your child theme´s stylesheet bellow the @import rule would be this:

      .widget-area { background: #000000 }

      • Thank you for your prompt reply :) thought that’s what you had to do, just wanted to clarify!

        As for the missing php files in the Child Theme, not sure what to do there as want to make some basic structural changes to my website which I cannot do purely in CSS. Was going to just edit the parent theme but this sort of defeats the object of having a child! Any advice would be greatly appreciated. :)

        • You are right: don´t touch the parent theme!

          Always remember that any style change made in the child theme to any element of the theme will override that of the parent theme, while any function added to the child theme will add to the functions of the parent theme.

          So if you want to add funcionalities to your child theme first create an empty functions.php and put it in your child theme folder, and then add any new function you need to that functions.php file (or copy an existing function from your parent and then modify it).

          This is explained in my posts Add functions to your WordPress child theme (1) and Add functions to your WordPress child theme (2) – Create a new function.

          There are more tutorials about child theme functionality on the way, so please stay tuned. On the next one we will be dealing with WordPress Hooks, and we still have to talk about template files ;)

  5. Hi Luis,

    I really hope you can help me.

    I have a notification from WordPress waiting for me to take action: a notice that there is a new version for my parent theme and it is offering me “to view its details” or “update now”.

    I am very hesitant to update my theme because I made edits on the parent theme prior to learning about Child Themes. My site is working just fine with these edits.

    However with this new version available for my parent theme, I don’t know how to proceed after creating a Child Theme using the very easy to use Child Themify plug-in. I have not yet activated it because I’m not sure it won’t crash my site.

    After creating my child theme, I got this notification at the bottom of the “Appearance” page:

    ****
    BROKEN THEMES

    The following themes are installed but incomplete. Themes must have a stylesheet and a template.

    Name Description
    My Theme Child The parent theme is missing. Please install the “My Theme” parent theme.
    ****

    Here are my questions:
    1) Is it safe for me to do an update/install the new version of my theme at this point?
    2) And after I update my theme, what happens next? What must I do next?
    3) In case, it doesn’t run properly can I back track to how I had it prior to doing the update?

    Thank you in advance and I look forward to your reply.

    Sofia

    • Hi Sofia,

      If you update your theme, you would lose all the modifications you´ve made so far, so be very careful with this. First of all you will need to save your current theme; you can do that by making a copy of everything within the theme folder and renaming it.

      It is very strange though what you got after creating your child theme. May I assume that you used Child Themify to create a child for “My Theme”? Because in that case “My Theme” must exist, otherwise the plugin wouldn´t have created a child theme based on it. So this puzzles me. If you haven´t done any changes to that child theme (or if you haven´t even activated it), you can delete it and then create a new child theme again with Child Themify, maybe you did something wrong the first time.

      Anyway, don´t worry. You will be able to update your theme and to keep all the customizations you already made (or to revert to your previous theme situation if needed). You´ll just have to follow some steps carefully.

      In order to have enough information to be able to help you, I need you to answer these questions first of all:

      1- Where you able to successfully create a new child theme for the parent theme that you are using as your current theme right now?

      2- The edits you talked about: are only CSS modifications or do they affect PHP functions as well?

      • Hi Luis,

        Thank you for your immediate attention!

        In answer to your questions:

        (1) I created a new child theme again through Child Themify. Child Themify said it created it successfully (like last time) but the same message appears at the bottom of Appearances>Theme page
        (I copied and pasted the message below)

        >>>>
        BROKEN THEMES
        The following themes are installed but incomplete. Themes must have a stylesheet and a template.
        Name Description
        Minimatica Child The parent theme is missing. Please install the “Minimatica” parent theme.
        <<<<<<

        (2) The edits I made I´m certain affect some “TEMPLATES” or PHP functions. I might´ve edited the “STYLES” or (style.css or editor-style.css)

        Meanwhile, I have copied each and every single one of the PHP files into Notebook (.txt files) in case I need them in the future…

        Again would appreciate much needed advice regarding Minimatica Theme (my theme) pending update.

        I also have a pending WordPress 3.6 Update that I haven´t done either. I figured one at a time and Theme Update (Minimatica) probably should be resolved first.

        If you need my website, I´d be happy to give it in a private message.

        Thank you!

        Sofia

        • There is no problem even if you modified templates, I just needed to know it to give you the correct directions.

          Please email me the URL to your website through our contact page, we´ll see why you get that message after creating the child theme.

  6. I want to inform people that major new/updated features that are added to WordPress will happen through Core Plugins. Core developers and anyone else that want to contribute will now have a greater influence on the development as smaller groups are formed to create these core plugins.

    Matt Mullenweg briefly mentioned core plugins at the State of the Word WordCamp in San Francisco (around the 45 minute mark). Groups have formed around various features that are now in development. One of these features is the focus on updating the theme install/preview screen. I am pushing for the group to also add automatic Child Theme Development. If you want more info on what is going on I suggest you check the features as plugins list:
    http://make.wordpress.org/core/features-as-plugins/

    Meetings usually happen at various times through the week through IRC. To make it really easy I have embeded the IRC chat box into my own site so you can easier get right into the chat area and take part in the discussions going on: http://easywebdesigntutorials.com/wordpress-developer-irc/

    I find it really neat to be able to add my voice and skills to the various groups to influence the future of WordPress.

  7. Hello Luis,

    Will this plugin generate a child theme from a modified template? I used Elegant Themes 13floor, and am hesitant to upgrade as I’m not exactly sure what parts I have changed. I’m at v3.7, and it is now at 4.1.

    • Hi Marshall,

      Yes, it can create a child theme for whatever theme you´re using. But, since you made changes to your v3.7 theme, those changes won´t appear automatically in your new child theme (obviously), so they would be overwritten if you update the theme to a newer version.

      You should create a child theme, then try to identify your changes (boring task, I know), add those changes to your child theme, make a backup copy of your current v3.7 parent theme folder, and then update your parent theme. It´s never too late to create a child theme, and that way you´ll avoid having to go through the same hassle again in the future when newer versions of 13floor are released.

      Did you modify style.css only or php files as well?

  8. Ah, well there’s a new plugin idea! Maybe something that automates using TextWrangler or similar to compare the current modified versions of the site against a fresh copy of the template?

    Could the modified theme be copied and renamed, a child theme created, then the copy of the modified theme renamed to that of the child theme?

    I’m going to bet it’s not that simple or you’d have figured that one already, so I will fire up the ol’ Wrangler to see what I’ve messed with.

    Thanks!

    • If you rename your parent theme and use it as a template for your child theme, then your parent theme will never get updated. In your case: if you call it “Marshall Theme”, your child will always use that renamed theme no matter how many times you update 13floor.

      By the way, you´re right, that really is a good idea for a new plugin!

  9. First of all, thanks for these great tips!

    I am using child themes for a while now, but still get confused, which part of the code I need to past into the child theme?

    For instance, let´s say that you only want to change the background color of your widget areas to black, and that you have a class in your parent´s style.css with many rules such as:
    .widget-area { margin: 10px 5px; padding: 8px; color: #ffffff; background: #2949CC; ….. etc…. }
    Then the only thing you need to put in your child theme´s stylesheet bellow the @import rule would be this:
    .widget-area { background: #000000 }

    I get lost as into what do I need to copy and what can I leave out?

    As long as I am in the complete style sheet or php file, and can try things out and see if it affects the part I want to edit if I am not sure.

    The rest of the code stays intact, so I just need to alter colour, or px.
    If I just have to copy and paste that peace of coding that is needed, I am not sure what I can leave out and what not.

    Is there a way to know that, or do i need to learn more about css and php to know that?

    Thx,
    Annie

    • You´re right, Annie.

      If you only need to change the color of your widget areas to black, then you´ll just have to add that line to your child theme´s style.css below the @import rule:

      .widget-area { background: #000000 }

      Thta´s it! You don´t need to learn more about css, but just remember that your child theme´s stylesheet will use all the css rules imported from the parent theme, except it will override the rules you add. That simple.

      You may want to read also my previous post A WordPress child theme made easy… and easier

  10. Hello,

    I wonder if I can simply copy and paste the whole content of the parent style.css under the @import URL and from there on make the changes there right into the child theme?

    Thx,
    Annie

  11. Hi Luis,

    Thx for your reply.
    Maybe I did not formulate my question well, but what is confusing to me is how to know from where to where I need to copy and past a code, so it will work in the child theme.

    For example take this code below:

    #main-area { padding-top: 58px; }

    .entry { border: 1px solid #e5e5e5; background-color: #fff; position: relative; margin-bottom: 30px; }

    .entry:before { content: ”; position: absolute; height: 8px; bottom: -8px; left: 0; background: url(images/middle-shadow.png) no-repeat top center; width: 100%; }

    .entry .meta-info { background-color: #f9f9f9; border: 1px solid #fff; border-bottom: none; font-size: 16px; color: #b8b8b8; text-shadow: 1px 1px 0 #fff; font-weight: lighter; padding: 19px 28px; }

    .entry .meta-info a { text-decoration: none; color: #888888; }

    Lets say I just want to change the 100% width to 50% in this section:

    .entry:before { content: ”; position: absolute; height: 8px; bottom: -8px; left: 0; background: url(images/middle-shadow.png) no-repeat top center; width: 100%; }

    Do I need to copy form #main-area on, so that the child theme knows these changes are in the main area or how does this work?

    I already played around with it, but probably did nog copy the nessecary piece of code, for it did not work. As long as I can change it in an exesiting code it works, probably because I break the code by not copying enough? SAy I dont copy a { or a . that is enough to break it, or make it not work. Do you get what I am having troubles with?

    Thx,
    Annie

    • Hi again Annie,

      You just need to copy what you want to change from the parent theme, paste it on your child theme´s style.css and then change or add only the desired rules.

      You have to include the complete name of the element you want to modify, and of course you need to open your rules with { and to close them with }.

      In the example you asked me about, the only line you have to add to your style.css is this:

      .entry:before { width: 50%; }

      However, if your parent theme uses that entry class for the main-area and not only for it but also for other places with different IDs (not only for #main-area), your change would affect those other places as well. So if you wanted to change that width only for the main area, then your line should be like this:

      #main-area.entry:before { width: 50%; }

      That way the other parts of your site that use that entry class will not be affected by your modification, because you´re only applying it to the entry class when it is inside a division that has the main-area ID.

      I hope this helped you.

  12. Hi Luis,

    Thx again for your help.

    I am following a series of tutorials about html and CSS so I get familiar with therms like classes, rules, ID’s becaus thats where I get confused.

    I quess it wont hurt either to simply copy and past the whole style css in the child theme, and change it there?

    Thx,
    Annie

    • It won´t hurt in the sense that it will work and nothing will be broken, but there are some drawbacks:

      1 – It will make your theme slower, since there´s double work to be done unnecessarily.

      2 – It will make harder for you to keep track of your changes, you could get lost in that forest of css rules, whereas if you just add what you change your child theme stylesheet will be much cleaner and easier to work with.

  13. Hi all,

    I can’t believe nobody mentioned my plugin: Orbisius Child Theme Creator :|
    The plugin is available in WordPress Plugin Directory.

    I am curious what keywords did you use to find the other child theme plugins?

    Slavi

  14. Hi Slavi,

    I searched the WordPress Plugin Directory for plugins intended to easily create child themes many months ago (almost a year), and I didn´t find your plugin then.

    But now it is true that if you search for “child themes” your plugin shows up inmediately. Actually, I discovered it three days ago while checking the Plugin Directory with that keyword.

    Thanks for letting us know about Orbisius Child Theme Creator.

    • Thanks Paal Joachim,

      Sounds good. It´ll definitely give it a try. I discovered the plugin some days ago like I said, but I haven´t tried it yet.

  15. Hey,

    I am not sure if I am at the right place, but in my search for an answer I came here.
    I just made a child theme and now I want to edit it and adapt it to the way I like it. The thing is I don’t want the theme live yet, as I want to activate it when I finished designing.
    Heard there is a ‘work behind the scenes and be able to see you what you’re doing’ plugin without anyone else seeing it (so the new theme is not online / activated yet). Any ideas which one it might be?

    • Hi Limoentje,

      It makes perfect sense that you don´t want your child theme to go live until it is finished and tested. That´s why we use a local development environment, and I encourage you to do the same: set up a local WordPress website installation (in your computer, not in your live server), work on your theme offline until you´re satisfied with it, then upload your finished theme to your live site and activate it.

      This is the right way to go. Actually, since it is a very interesting topic, I´m planning to write a tutorial post about how to do that local installation using XAMPP. But if you don´t want to wait for me to publish that tutorial (I have other priorities at this moment, so it may take a while), you can find very useful information about it just by doing a Google search for “wordpress local xampp”.

      I haven´t heard about the plugin you mentioned, and I wasn´t able to find it.

      Another approach to solve your problem could be this: create a subdomain on your live site which nobody knows about (for example mytests.limoentjeslife.com), install WordPress in it, install your parent and child theme and play with it (don´t forget to tell browsers not to index that subdomain!).

      You could use a plugin like SitePush to move code and content.

      I´d rather go for the local development site solution, it is much easier and pleasant to work with and you don´t have to be using ftp every single time you make a modification to your child theme, just save your modified style.css or whatever file you changed or added and see it working!

      I hope this helped.

      • Hi Paal Joachim,

        That looks like an interesting plugin. I´ve tried another one for that same purpose before, but it didn´t seem to work too well.

        I also thought of maintenance mode plugins before replying to Limoentje, but then I guessed that she needs that her current site remained fully operative while she´s working on her new theme behind the scenes.

        Thanks

  16. I start using the Child Themify plugin after reading your post here and like it very much. However, it doesn’t seem to work with the new WP 3.8 :-(
    Any suggestion?

    • Hi Ruziha,

      I haven´t tried it myself yet, but it actually is the first thing I thought when I saw the new way themes are managed in WordPress 3.8 (that this plugin might not work properly now).

      I´ll check it out after Christmas.

      • Thank you… Appreciate it very much.

        Merry Xmas and Happy Holiday! :-)

  17. Thanks Violacase & Paal.

    If you have any suggestions/feature requests for the Orbisius Child Theme-Creator plugin use the quick question box in the plugin’s settings page.

    Slavi

  18. Hi Luis,

    I was very excited to have found this plugin. I installed it in my local development but so far I don’t see it appearing in the Themes and giving me an option to create a Child theme. Am I right to presume that it only works somehow in Live installs….?? If yes, a bit odd…if not…I don’t know what I’m doing wrong..? I just installed and activated it.

    Thank you..

    • Yes, it is odd. I use this plugin in my local installs and I never had any problem, except after the release of WordPress 3.8 and before the plugin was updated to work with it. Are you using the latest versions of WordPress and the plugin?

      If for whatever reason you can´t make it work, you may want to try a new plugin I found for child themes. You can read about it in my post Style your theme easily with Child Theme Configurator

  19. To think that this plugin is free made it extremely simple for us to use., thanks and keep up the good works.

  20. The plugin looks awsome, we might use it for our tips website.

Leave a Reply