Using a child theme

Omega comes bundled with a child theme. Once you unzip the .zip file that you have downloaded from Themeforest, you will see omega-child-theme-ver.zip.

A child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the best, safest, and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.

Why is a child theme important

Here are a few reasons:

• If you modify an existing theme and it is updated, your changes will be lost. With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes.
• It can speed up development time.
• It’s a great way to get started if you are just learning WordPress theme development.

Template Files

If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme's directory, and that file will be used instead of the parent theme's header.php.
You can also include files in the child theme that are not included in the parent theme. For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive.

Using functions.php

Unlike style.css, the functions.phpof a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

In that way, the functions.phpof a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its functions.phpfile and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear. But there is an alternative way which is the smart way: you can create a child theme, add a functions.phpfile in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

The structure of functions.phpis simple: An opening PHP tag at the top, and below it, your bits of PHP. In it you can put as many or as few functions as you wish. The example below shows an elementary functions.phpfile that does one simple thing: Adds a favicon link to the head element of HTML pages.

    <?php // Opening PHP tag - nothing should be before this, not even whitespace
    // Custom Function to Include
    function favicon_link() {
        echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
    }
    add_action( 'wp_head', 'favicon_link' );

TIP FOR THEME DEVELOPERS:

E.g.:

    if ( ! function_exists( 'theme_special_nav' ) ) {
        function theme_special_nav() {
            //  Do something.
        }
    }

In that way, a child theme can replace a PHP function of the parent by simply declaring it beforehand.

Editing the theme javascript

Omega comes with a minifiedand an unminifiedversion of its main javascript file, theme.min.js and theme.js respectively. There is also a map.min.jsand a map.jsfile provided. They are located in the assets/jsfolder. If you want to edit the javascript of your theme do the following:

• Open the assets/jsfolder and edit the theme.js file that you want to customize.
• After you have finished editing it save the file.
• In order for the unminified version of your file to be loaded instead of the minified, edit frontend.php inside the /incfolder.
• Locate the oxy_load_scripts()function around line 171.
• Change the name of the theme.min.js file that is enqueued to be the theme.js unminified version, around line 201.
• Reload your page to see the changes.

Editing the map javascript

If you want to edit the map javascript of your theme do the following:

• Open the assets/jsfolder and edit the map.js file that you want to customize.
• After you have finished editing it save the file.
• In order for the unminified version of your file to be loaded instead of the minified, edit shortcodes.php inside the /inc/options/shortcodesfolder.
• Locate the oxy_shortcode_google_map()function around line 2229.
• Change the name of the map.min.js file that is enqueued to be the map.js unminified version, around line 2271.
• Reload your page to see the changes.

Editing the theme CSS

Omega comes with a minifiedand an unminifiedversion of its main CSS file, theme.min.css and theme.css respectively. There is also a bootstrap.min.cssand a bootstrap.cssfile provided. They are located in the assets/cssfolder. If you want to edit the CSS of your theme do the following:

• Open the assets/cssfolder and edit the theme.css file that you want to customize.
• After you have finished editing it save the file.
• In order for the unminified version of your file to be loaded instead of the minified, edit frontend.php inside the /incfolder.
• Locate the oxy_load_scripts()function around line 171.
• Change the name of the theme.min.css file that is enqueued to be the theme.css unminified version, around line 218.
• Reload your page to see the changes.

Editing the bootstrap CSS

If you want to edit the bootstrap CSS of your theme do the following:

• Open the assets/cssfolder and edit the bootstrap.css file that you want to customize.
• After you have finished editing it save the file.
• In order for the unminified version of your file to be loaded instead of the minified, edit frontend.php inside the /incfolder.
• Locate the oxy_load_scripts()function around line 171.
• Change the name of the bootstrap.min.css file that is enqueued to be the bootstrap.css unminified version, around line 217.
• Reload your page to see the changes.