Child Theme Basics

Sometimes though, you might find a theme that you really like, but there’s a few changes that you would like to make. The problem is that when you edit the theme’s files, if your theme ever gets updated, you lose all your changes.
Keeping your theme up to date is highly recommended as it will guarantee an optimal security, bugfixes or browser compatibility issues.
The issue is mainly with updates. If you make changes to a theme’s files (i.e. anything within the “/themes/seodesign/” directory), those changes are likely to be overwritten when you next update the theme. A child theme allows you to set up a standalone directory in which you can make create copies of a theme’s files and tweak away, without endangering the parent theme and fear of your work being overwritten by any future updates. That’s where child themes come in.
Besides, using child themes is a good development practice : in your child theme you focus only on your added functionalities, 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…

Child Theme Overwrite Logic

If you want to make a change to a specific PHP file in your parent theme, just make a copy of it, and paste that copy into your child theme’s directory. Any changes you make will go live. This is perhaps most applicable for adding additional functionality via functions.php, but the same process applies to all available PHP files.
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.
One thing you must bear in mind is that the directory structure in your child theme should match that of the parent theme’s. So if you decide to edit a PHP file in “/parenttheme/includes/external/php/example.php”, you should place it in “/childtheme/includes/external/php/example.php”.

Overriding Parent Theme Template Files

Editing with CSS is great and it’s very easy to learn just enough to safely make changes to a WordPress theme but what happens when you really do need to make changes to a template file? When there’s something hardcoded in?

Easy. Copy the Parent Theme template file to your Child Theme directory and make the edits there. As of version 2.7, WordPress will look in the Child Theme directory first for template files. And if an alternate version of, say, footer.php, or single.php exists, WordPress will use that template file instead. This is simply awesome. WordPress will even accept category-XX.php (where XX is the ID of a particular category) in a Child Theme if you want to make changes to a specific category archive.

Child Theme File Structure

WordPress Child Themes are located in /wp-content/themes/ like any other WordPress Theme. They’re activated from the WordPress admin like any other theme. They’ll always have a style.css file and may often include a functions.php file. They can contain images folders, script folders and include folders.

  • htdocs OR www
    • wp-content
      • themes
        • seodesign (directory of the parent theme – it will not be modified)
          • functions.php
          • header.php
          • style.css
          • other template files…
        • seodesign-child (directory of our child theme)
          • functions.php (the file we will use to customize the parent theme)
          • header.php (overrides header.php for the parent theme)
          • style.css (this is a required file in a child theme and must be named style.css)
          • css (this is a folder inside SDF child theme)
            • custom.css (this is a required file in a child theme and must be named style.css)

Custom css should be placed in /css/custom.css file and theme generated css file will be set inside child theme in /css/ folder as well.
Changes on /css/custom.css can be applied/visible upon you make “Save Changes” in theme style options.
Namely, all styles from bootstrap, style settings and custom.css are then saved to one file e.g. seodesign-child/css/preset-1.css and then it’s working.
So like when you change some theme settings it’s same for custom.css changes. Save that file and then you have to click “Save Changes” in style settings to generate theme css:

So just keep that structure regarding css part and there won’t be ajax calls for css as it’s slowing down the site.

If you just want to add small css snippets you might also want to consider adding it to the designated CSS option field in your themes backend at:
SEO Design >> Header >> Additional HTML/CSS

In child theme’s functions.php file you can save your options encoded backup string. Copy from styles export (.txt) file and paste in line 10 variable $child_theme_options

Also on line 3, child theme options name is defined ‘_sdf_theme_options_initial’
so child theme options won’t overwrite your core theme options.

But first of all export and save your SDF style settings as you need to import it upon new child theme activation and to have it as a backup too.

About style settings, initial child theme comes as a blank so as mentioned above, you can save encoded settings content in functions.php and have it inside as a backup and for options reset functionality on this child theme:
Copy from SEO_Design_Framework_Settings.txt file or from Options Export Code textarea and paste in line 10 variable $child_theme_options