Creating a child theme for Customizr 148


Why should you create a child theme?

Creating a child theme is the best way to start using Customizr (and any theme in WordPress!). There is one major reason for that : you won’t loose any of your customizations when you’ll update the parent theme!. If you edit directly the style.css or functions.php files of your theme, the update will just delete everything.

Keeping your theme up to date is highly recommended  as it will guarantee an optimal security and fix bugs or browser compatibility issues.

Besides, using child themes is a good development practice : in your child theme you focus only on your added functionnalities, there are less files to edit and to maintain. If you come back to your code after a while, it is much easier to understand than having to dive into the parent theme and look for all your customizations in each php template and file…

 

Download a child theme for Customizr New!

 

customizr-child-theme

 

  

How to create a child theme for Customizr?

1) First method with a ftp access for developers

Well, it is pretty simple. You need to create a folder and a file.

1) Connect to your server via you FTP client and create a folder in the themes directory. You can name it as you want but without any spaces or special characters in the child folder name.

2) Create a style.css file in this folder and copy and paste the following code in it. The important point here is to write the parent template parameter name ( Template : customizr ) in small letters, no cap letter, as it is case sensitive.

 

2) Alternative method : with a pluginrecommended for beginners

Following this comment from Jivko, you can use a plugin to create a child theme in one click. This works great and requires no coding or file transfer.

1 Download and activate the Child Themify plugin http://wordpress.org/plugins/child-themify/

2 Go to Appearance > Themes. There, you’ll see a new link added by the plugin in the text description’s footer. See screenshot below.

customizr-child-theme-with-child-themify-plugin

 

3 Click on Create a child theme

4 Name your child theme (see below)

create-a-child-theme-customizr

 

5 Go back to Appearance > themes, find your freshly created Customizr child theme (see below) and activate it. You are done!

create-a-child-theme-customizr-select

  

I strongly recommend this method for newbie as it is really simple, safe and fast.

Note : The child themify plugin will only create a style.css  file (which is enough to create a child theme). If you want to add custom functions in a functions.php file, or new folder/files, you can either upload them by FTP or use the following plugin to easily manage your files right from admin : http://wordpress.org/plugins/wp-filemanager/

 

How to override Customizr core functionalities with a child theme

Child theme overwrite logic

When a child theme is created and activated, Customizr compares all path/class-files.php. Each time a match is found, the child theme path/file will be used first and will override the parent theme file.

There is one exception though : the functions.php file is loaded in addition to and before the parent’s functions.php.

For example, if you create a index.php template in your child theme, it will overwrite the parent index.php template file.

 

Pluggable functions

The fact that the functions.php file of the child version is read just before the parent version can be very useful if you want to replace functions in the original functions file.

To enable this particular behaviour, the theme developers have to write their functions in specific way  : this is what we call make the function pluggable :

A pluggable theme should have all its functions (in the functions.php file) wrapped like this :

This gives child theme developers the ability to completely replace functions declared in the parent theme. By the time WP finds them in parent functions.php, they exist and get skipped (because of the function_exists() condition).

 (thanks to @acub for this point)

 

Let’s take an example

In Customizr, the structure of the code is simple : at the root of the theme you have :

      • style.css
      • functions.php
      • and the theme mandatory templates : index, header,footer, comments

All the rest of the code is organized in a classes framework in /inc and /parts folder.

Let’s say you need to overwrite the parts/class-content-slider.php file.

In your child theme, copy and paste the file class-content-slider.php in a folder parts/ you have created. It has to be the exact same path/file.

Now, you can do whatever customization you need in this file, it will overwrite the parent file.

If you need to modify the Customizr, as a best practice, I would rather recommend to use the actions and filters hooks of the theme, instead of copying and editing the core files. 

To understand and use the available hooks in Customizr, enable the dev tools in customizer options.

 

Resources about child theme creation

http://codex.wordpress.org/Child_Themes


About Nicolas

My name is Nicolas Guillaume (nikeo). I am the developer of the WordPress Customizr Theme. This website is a discussion platform, your comments are welcome!


148 thoughts on “Creating a child theme for Customizr

  • Reply
    CC

    Hi Nicolas,

    I’ve looked through most of the Snippets – I haven’t been able to find one relating to moving the Nav.bar to be same width as the slider and to be on top of the slider.
    Could you please tell me how I can do this?
    Cheers

    This comment was posted awhile back but I wanted to know if there was ever and answer posted telling how to modify the nav bar in this way?
    Thanks!

  • Reply
    Michael

    Hi, i was able to solve the color issue but after customizing the child by following instruction at the snippet page and using it, the menu page i created all goes away, i try recreating a new menu and it is not working, can some one help me out?. Thank you.

  • Reply
    Cuzsis

    How do you create/add the functions.php file for the child theme? Is it an empty text file that you save with the name “functions.php” and then upload to your child theme folder in the file manager?

    • Reply
      Cuzsis

      Whoop! Well I was close. For future searchers reference:

      Everything I wrote above is correct except, the text file can’t be empty. It does need:

      Those are opening and closing PHP tags. So your file looks like this.

      That’s it! :)

  • Reply
    Cuzsis

    Let me try this again ()

    Without the parentheses.

    If perchance this one is blank too, just google “opening php tag” and “closing php tag”. Put those in your text file. And put the php code snippets between them.

  • Reply
    Fahad

    Just wanted to say thanks Nicoloas. The theme and all the added information you provide with it are awesome, you’re the best!

  • Reply
    usha

    Hi Nicolas,
    I am a new user. I like your theme. Thanks much for creating such user friendly theme. I was trying to change the size of the slider image and accidentally messed something up. I am getting the below error. Can you please help me with this.
    Parse error: syntax error, unexpected ‘:’ in /home/content/67/11291367/html/Vayu/wp-content/themes/customizr/parts/class-content-slider.php on line 170
    Thanks

  • Reply
    Francisco Madueno

    When I simpy add a style.css to my child theme my social icons are replaced by a box containing its code. For example, I can see an inbox containg “F204″ instead the facebook icon. If I remove my own style.css file from my child theme I can see the facebook icon well.

    • Reply
      Francisco Madueno

      I forgot to say that I add just an empty style.css, only including the reference to the parent “customizr” template.

      • Reply
        Francisco Madueño

        I will try to clarify the issue yet. If I put this code:

        in a text widget I only see a little box instead facebook icon.

  • Reply
    Delphine

    Bonjour Nicolas,

    J’utilise votre thème depuis peu, et je débute dans WordPress.
    Je voulais savoir si on peu modifier l’apparence des images qui s’affichent en bulles pour les mettre en carré par ex.
    Selon le support wordpress, il y aurait une option custom css mais je ne la trouve pas.
    Est-ce que je dois créer un thème enfant pour cela??
    Merci
    Cordialement,
    Delphine

  • Reply
    Rocco Aliberti

    Hi all,
    How can I override a function (method) of a class? For example, if I want to override the function TC_featured_pages->tc_fp_block_display() ?
    Thanks, and btw this theme/framework is awesome!

    • Reply
      Nicolas Post author

      Hi Rocco, the core classes of the Customizr theme are not “pluggable”. (not written as follow : if ! class_exists()…)
      The theme is rather designed to be extended with its hooks API.
      For example you can remove an action and add a new one using the following syntax :

      See an example of this code here : http://www.themesandco.com/snippet/move-featured-pages-block-anywhere-front-page/

      More about hooks, action and filters in WordPress here : http://codex.wordpress.org/Plugin_API

      Hope this helps

      • Reply
        Rocco Aliberti

        Thanks Nicholas for your answer.
        Yes, I used a lot of your hooks :), thanks also to this snippet section.
        Really great job m[a|e]n!

  • Reply
    Rocco Aliberti

    I know that probably this isn’t the right place to ask this, but I don’t know where…
    How can I change the collapsing menu threshold?

  • Reply
    Sundi Myint

    Hi Nicolas,

    I’ve chosen Customizr to use for my website at work when my supervisors announced we’d be moving our website to WordPress. We’re in the moving process, and we’d really like to incorporate IsotopeJS by David DeSandro at Metafizzy. There are numerous tutorials online on how to incorporate it, but all with themes that are simpler in nature and less customizable. I was wondering if you might know how we can incorporate Isotope into the Customizr theme? The most popular plug-in for Isotope for WordPress seems to be from Mintthemes ( http://mintthemes.com/isotope-for-wordpress/ ), but the instructions on the installation process seem to vary a little when it comes to the Customizr theme. We also are having difficulties discovering where The Loop is in this theme. Would you be able to give us pointers on the best way to approach this process?

    Thank you very much,
    -Sundi

  • Reply
    Roberto

    Tengo este error en el tema de cusromizr Error: Missing required field “updated”.
    Error: Missing required hCard “author”

    Me puedes decir como se soluciona esto, ya le he hecho algunos cambios y no reacciona como debe ser.

    Gracias.

  • Reply
    Rayne de Jongh

    Hi there… I’ve made use of your child theme.
    I think I may be missing something somewhere. I want to move the CSS changes that I’ve made from the custom CSS field to the Style.css that you’ve provided along with the functions.php in your child theme.zip. Only, the CSS changes are not showing up.

    The changes I’ve made in the functions.php is working just fine. What I’ve done is simply add my CSS beneath the last comment line in the style.css…
    Is there anything I’m missing? I’ve been over it a few times and just cannot seem to find the answer.

    Thanks in advance

  • Reply
    Jakub

    Hi Nico,
    I created a customizr child theme (using the plugin) and now I am wondering where to turn on the dev tools? Am I blind or is it not accessible for child themes?
    Thanks and keep up the great work!
    Cheers, Jakub

  • Reply
    JOSE ESTREMERA

    I need to know how do I move my navigation bar over so that I can get my logo down so it can be side to side

  • Reply
    sara

    Hi Nicolas!
    I’m using a Customizr child theme and it fits my needs almost completely. Anyway, I would like to have four featured pages with the round image in home; I’ve been searching and searching for the files to edit and couldn’t afford it. I’m not so a php expert anyway: could you help me a hand please? Many many thanks!

    Sara

  • Reply
    Mimouss

    Hi Nicolas !
    I think you can help me
    I have a child theme for Customizr et i want to filter just One category at the main page but i don’t unterstand clearly class-content-post-list.php in the function tc_post_list_content()
    Maybe i make wrong way, Can you make me good way?

  • Reply
    Pankaj

    Hi Nicolas,

    Thanks for provide us the responsive theme.

    when i made no. of pages in sub-menu then my old pages are removed, so how can i manage the limit of no. of pages?

  • Reply
    krot

    Николя, привет
    Спасибо за очень хорошую и удобную тему…
    У меня вопрос, хочу убрать страницу из верхней навигации, или вообще не показывать страницу. Пробовал плагином: Exclude Pages from Navigation, но он не активен и при редактировании страници не отображается.
    Подскажите, что сделать чтобы спрятать любую страницу…
    Спасибо…

  • Reply
    quinton

    Hello,

    I keep resizing images for them to fit into the homepage slider and it keeps cutting off the bottom part of the images. HELP! thanks!

  • Reply
    Roman

    Hi Nicolas!

    I want to thank you for an awesome theme and ask you the following: why when add this code

    to the Custom CSS section of the customizer option screen it’s working and when I add the same to my child theme it’s not working at all…
    My style.css in the child theme is the following:

    Best and thank you beforehand!

  • Reply
    Len Chappell

    Hi Nicolas,
    I have tried to answer this in the forums but am getting no luck – my issue is I have a problem where my site is no longer adding any new sub menus and I was wondering if their is a limit with the theme. My site is http://www.forcesunited.info and you will see that I need to add more to the Scottish Veterans link but it it not letting add any more?

  • Reply
    Elisa

    Hello,
    I created a child theme using child themify, I created a functions.php file and added it to the child folder files area. The only code inserted in the php file was to bring in google analytics script. When the child theme is active, I loose my menus.

    • Do I need to copy all the exisitng “functions.php” content and put it in the child “functions.php” OR was ik ok to just insert the new code?
    • When using a Child Theme, do I have to reconfigure menus and other components? or are they still there from the main theme?
    • In my main theme I made CSS modifications in the Edit CSS folder, do I need to copy them over to the css file in the child folder?

    Hope you can help :)

    • Reply
      Nicolas Post author

      Hi Elisa,
      • Do I need to copy all the exisitng “functions.php” content and put it in the child “functions.php” OR was ik ok to just insert the new code?
      No you don’t have to

      • When using a Child Theme, do I have to reconfigure menus and other components? or are they still there from the main theme?
      No they should still be there if defined from the parent theme

      • In my main theme I made CSS modifications in the Edit CSS folder, do I need to copy them over to the css file in the child folder?
      You don’t have to but it is recommended since the changes made in the parent theme will be lost on the next theme update.

Leave a Comment

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

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

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