Creating a child theme for Customizr 194

Note : This snippet applies to Customizr version 3.1.x and below. It may not work with version 3.2+. Use with caution on 3.2+ and check the availability and type of the hooks in the Customizr hooks API.

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.

Additional resources about child themes in WordPress


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!


194 thoughts on “Creating a child theme for Customizr

  • Reply
    Pascal Rodmacq

    Do I need a child theme to insert “fb:admins” and “fb:app_id” tags ?
    Otherwise where to set this information in order to Facebok API be able to find it ?
    Thank you for your help.

    • Reply
      Nicolas Post author

      Hi Pascal,
      To add those facebook tags to your WordPress website, you can use the following code in the functions.phs file of either your theme or a child theme :

      Using a child is always safer since your custom functions will not be deleted when updating the parent theme.
      Hope this helps!
      More about inserting those tags in a WordPress website here : http://stackoverflow.com/questions/10836135/when-do-i-need-a-fbapp-id-or-fbadmins

      • Reply
        Pascal Rodmacq

        Hi Nicolas,

        Thank you for your help.

        I’m now in the following state :

        A child theme activated. (Directory : /www/wp-content/themes/customizr-child)
        In this directory I have 3 files :
        style.css
        functions.php
        screenshot.png

        style.css
        /*
        Theme Name: Customizr-Child
        Theme URI: http://themesandco.com/customizr
        Description: A child theme for the Customizr WordPress theme. This child theme simply includes 2 files : style.css to add your custom css and functions.php where you can extend Customizr’s core code. In order to keep your code as clean and flexible as possible, try to use Customizr’s hooks API for your customizations. Do something awesome and have fun !
        Author: Nicolas Guillaume (nikeo)
        Author URI: http://themesandco.com
        Template: customizr
        Version: 1.0.0
        */
        /* Your awesome customizations start right here !

        ————————————————————– */

        functions.php

        }
        <?php
        ———————————————————————————-
        In this state, Facebook still unable to detect the meta tag value.
        ———————————————————————————-
        Could you help, kindly ?

  • Reply
    Paraskevas

    Nicolas,

    Thank you for a very nice theme! I would like to share with you my experience and also ask you if you do think what I did is a good practice. So here is what I did. I created a child theme, and since I wanted also to use functions.php ( knowing also that you can’t define two times the same function, one in parent and one in child – and also didn’t want to use this wrapping workaround ) I just emptied functions.php of the parent and pasted everything in child functions.php. I didn’t copy the file, but just the contents. And it seems to work great. Just shared this to ask you if you think I might have a problem with this approach, but also, in case it is ok, for other people to know this workaround.

    Thank you again for your nice theme.

    • Reply
      Nicolas Post author

      Hi Paraskevas,

      I would not recommend to do it since there might be changes in the functions.php of the parent theme future versions, and it could possibly lead to some issues/conflicts with the fact you have been copying everything in the functions.php of the child theme.

      My question is : why would you need to split your customizations in both the parent and child themes when you could do everything safely from the child theme only?

      Thanks and I look forward to reading from you,
      Best

  • Reply
    Rahman

    I want to remove the “Designed by Themes and Co” Link at the buttom of my theme and put a custom footer with a link. How do I go on with that. Also what is the actual size of an image to be used in a full width slide show? Thanks

  • Reply
    Rodney Solomon

    I need to add the above code inline with the tagline display in the header. Is there a way to do that?

  • Reply
    Crystal

    I am a newbie to Child themes, but there is no option to “Create a Child Theme.” Was this removed with the new version? Should I follow the other options? Thanks!

  • Reply
    Mauricio

    Hi Nicholas congratulations from brazil

    i start to use your theme and would like to make a fixed menu on top. after people scrolling.
    i´m not a programmer. i wolud like to know if you can help me.

    other thing, i wolud like to use a awsome fonts or google fonts in slider area and in the area pages

    thanks so much

  • Reply
    Robin

    I like the Customizr theme and find that it fills all my needs however, I would like to change the round feature pages at the bottom on the home page to square feature pages. I’ve activated the child theme and now would like to know it if it is possible to get a step-by-step tutorial for this code? Thanks in advance for any help.

  • Reply
    Paraskevas

    Hello Nicolas,

    My question this time is the following: Is it possible to incorporate a site built with customizr on a LAMP stack machine? I really need to work with data and d3 and plugins are not an option.

    Thank you.

  • Reply
    Rahman

    To use Customizr , one must be able to code efficiently. Creating my child themes still give me headache. I want to be as perfect as you are Nicolas

  • Reply
    Roberto

    Hi Nicolás,

    I have Child theme but i can’t add any image or link on a page, i have the up grade version but im not sure where can i round the CSS editor, ghanés for your help

    Regards

  • Reply
    Sherry

    I love the Customizr Theme. I am a beginner and was trying to follow the directions listed here to edit the footer credits. I installed CHild-Themify plugin and it crashed my site so badly I couldn’t even access WordPress. Host repared that much, however, now I can’t activate the Customizr theme where the entire website is built. Please help, do I have to completely rebuild my website?

  • Reply
    Hannah Neumann

    I downloaded the child theme and tried to add the snippets found here http://themesandco.com/snippet/center-header-block-items/ to the functions.php …. it brings me to the “white screen of death”. I’ve tried three separate times and each time it’s brought me to the same white screen. What did I do wrong? I also tried adding the same snippets to the customize custom css section but nothing changed.

  • Reply
    Johan Nero

    Hello. I´m a WordPress beginner and I´ve been using the Customizr theme for a while now (awesome theme!). I read about the possibility of ditching the slider “clickable box” and make the whole slider into a link..I also noticed that this couldnt be done via the Custom CSS (I´ve used this for other changes, very simple!) So I took the advice of downloading Child Themify and created a child theme, I then downloaded the WP-filemanager and checked all the boxes in the config. This is where I really start schratching my head..I´ve got no clue where to go from here and the WP-filemanager is complete jibberish to me..Can anyone help?

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="">