thumbnail

WordPress Child Themes – How To

Categories: Guide, Temi WordPress
Comments: 7 Comments

Quoting WordPress documentation (Child Themes), a “child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.”

The main advantage in making a child-theme, instead of just modify an existing one, is the future possibility to use the parent-theme updates without loosing your own personalizations.

 
How you can see, child-theme's files (dx), 'tell us' what was previously modified and where we have to look to eventually fix it

Let’s suppose we have a theme and we want to use a different icon set with different dimensions, normally we will modify theme files, but what if after a couple of weeks (or worste month), a new version of the theme, with very interesting features, is released?!

  • Case A: we don’t remember we’ve done some modifications and we update… personalizations are gone!!
  • Case B: we modify again every single theme file.
  • Case C: we like new features, we don’t like to modify the theme again, we don’t update
  • And so on…

Now let’s assume we do made a child-theme; as soon as a new version of the parent-theme is released we just need to check that everything is working, and if not, we will know exactly where to set it (a child-theme is made only by the files we need, see pictures beside).

 

How To
The making of a basic child-theme is quite simple: create a new folder in themes direcory wp-content/themes/ (e.g. fastfood-child), inside it put a style.css with the following header:

/*
Theme Name: Fastfood Child
Description: Fastfood child theme
Author: tbcrew
Template: fastfood
*/

@import url("../fastfood/style.css");

Remember that:

  • Template is the folder name, not the parent-theme name (WP official documentation said is the parent-theme name, but we have notice that in some hosts can cause problems).
  • @import url(“../fastfood/style.css”); has to point to parent-theme’s style.css

 

Before making a child theme is very important to plan exactly wich parts of the parent-theme we want to change (copy all parent-theme files won’t have any sense), and that, when a child theme is done, it’ll rule on the parent-theme:

  • if we want to change something in the style, just write the rules into child-theme’s style.css
  • if we want to make another footer, we’ll copy parent-theme’s footer.php into child-theme directory and go on with the changes
  • ecc

Once a child-theme is done, it could be activated as a normal theme in Dashboard -> Themes

N.B. Parent-theme’s folder and all his files must not be removed

P.S. If you’re looking for a faster solution, I may suggest One-Click Child Theme plugin for WordPress; I didn’t try it, but it looks good.

The last, but not the least, important aspect of a child-theme: is faster to make it than release a new version of the theme. And that’s why we “abuse” of it to satisfy the many requests we have ;).

Previously made child-themes will be released soon :).


7 Comments - Leave a comment
  1. donna says:

    Hi, great theme — could be a little larger, but great overall dynamics. I just wanted to let you know, too, that I came across your site earlier and was trying to figure out a way to translate to English. On the child template theme article, there was an American flag translation icon; I clicked and the page came up with a little window with a bunch of directories and files . . . I hope not yours!!! Just wanted to let you know.

    I also wondered how and whether it was possible to delete the name header, i.e., site name with word press wording. It’s very redundant for my site. Any help would be appreciated! Thank you.

  2. Jimo says:

    Hi Donna,
    thanks for compliments and for using our theme :)

    could be a little larger

    yes, but it’s made to fit even in low resolution screens (1024×768)

    […]there was an American flag translation icon; I clicked and the page came up with a little window with a bunch of directories and files . . . I hope not yours!!!

    the icon you clicked is simply a link to the english version of the “child template theme” article, not a tool to translate or similar. The file list you can see in that page is a screenshot of a generic theme directoty. Anyway thanks for the tip ;)

    […]how and whether it was possible to delete the name header

    you have to open the header.php file and delete the lines 39-40

    <h1><a href="<?php echo home_url(); ?>/"><?php bloginfo( 'name' ); ?></a></h1>
    <div class="description"><?php bloginfo( 'description' ); ?></div>
    

    bye

  3. Marco says:

    Exellent theme!

    Found a tiny bug, though:
    With WP 3.2.1 and FF 0.28.2 and a Site with pages and posts, when I click the print-button in the sidebar, i get to print the first post of my site, no matter which post or page I was reading…
    CTRL+P still works though :-)

    • V.I. says:

      Hi Marco,
      thanks for your submission.
      It’s a known bug and we’re already at work to fix it, meanwhile try this solution: http://prj.twobeers.net/discussion/142/fastfood-print-page-always-directs-to-p353
      Hope it helps.
      Cheers

      P.S. Please next time post your comment in appropriate page http://www.twobeers.net/annunci/tema-per-wordpress-fastfood

  4. Sir,

    Great Theme!!

    The problem I am having is that the slider is not working. I have added featured images to pages, but no luck….can you explain how to add images so slider will work?

    Thans for your help,

    Fred

    • V.I. says:

      Hi,
      first of all, this is the wrong page where to ask for help, next time use the correct theme page (Shiword in this case).
      Now, to add post or pages to the slideshow, just select them in Dashboard -> Appearance -> Slideshow.
      Hope it helps
      Cheers

Leave a Reply

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

*


*