How do I create a child theme from PowerMag theme

Question

I am using PowerMag 2.5 as parent and can't seem to find a way to get a working child theme. As far as I am now, I can only extend css in the style.css but as far as overriding, nothing has worked. When I copy over e.g. the header.php from parent to child and make some edits to the code it does not work. The very big functions.php from the parent theme is overwhelming me and I do not know how to get it working.

child > style.css

/*
Theme Name:   PowerMag Child
Theme URI:    https://themeforest.net/item/powermag-the-most-muscular-magazinereviews-theme/4740939
Description:  PowerMag Child Theme
Author:       djwd
Author URI:   http://themeforest.net/user/djwd
Template:     powermag
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         dark,light,three-columns,two-columns,left-sidebar,right-sidebar,featured-image-header,featured-images,full-width-template,rtl-language-support,sticky-post,theme-options,threaded-comments,translation-ready,post-formats,custom-menu,custom-background,flexible-width
Text Domain:  powermag-child
*/

child > functions.php

<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

parent > functions.php

The file is to big for posting so I uploaded it here

Answer 1

Just create a folder named PowerMag-child

• Put style.css with below text

  /*
  Theme Name:   PowerMag Child
  Theme URI:    https://themeforest.net/item/powermag-the-most-muscular- magazinereviews-theme/4740939
  Description:  PowerMag Child Theme
  Author:       djwd
  Author URI:   http://themeforest.net/user/djwd
  Template:     powermag
  Version:      1.0.0
  License:      GNU General Public License v2 or later
  License URI:  http://www.gnu.org/licenses/gpl-2.0.html
  Text Domain:  powermag-child
  */
  

• functions.php with below code and nothing else

  <?php
  

Answer 2

Based on your description and then the additional mention in the comments, I would suspect that the issue is the load order of the various stylesheets involved. I'd suggest taking a look at the header via "view source" in your browser to see what order the stylesheets are in when everything is loaded.

Check load order and adjust enqueueing priority

Stylesheets that load later will override styles from an earlier stylesheet. So if you have stylesheets from the parent that are loading after the child theme's styles.css, those later stylesheet properties will be what is applied.

Normally, the child stylesheet should load after any enqueued styles from the functions.php of the child and the parent. But if that doesn't happen, you may need to make adjustments accordingly.

One thing you could do is add a stylesheet in your child theme folder to contain your override styles (separate from your child theme stlyesheet), then load that with wp_enqueue_style(). Hook it to the wp_enqueue_scripts action and set the priority to be later (like 99 or 100). Reviewing your parent functions.php indicates that the enqueued styles are enqueued at the default priority, which is 10, so setting this later priority should load your custom stylehseet later than the enqueued styles from the parent.

It may take some jiggering around, but reviewing what loads and when in the "view source" in your browser should help you get things coming in the right order.

What if everything is in the right order and I still can't override?

Make sure that the styles your trying to override are actually in the stylesheets you think they are in. Use the browser inspector to view the style and it should tell you what the source stylesheet is for that style.

Also, using the browser inspector should tell you if the developer used the !important CSS specification. I personally hate when they do this - it's a bad practice usually done out of laziness because they can't figure out the correct way to apply a property. The problem with it is that simply defining a new property then gets ignored. In that case, you need to have a later load of your CSS coupled with also specifying !important to override the first one. You may also need to set the particular property to initial to completely reset it.

Hope this helps you track down the problem.

Answer 3

Please replace your code with this code in child functions.php file. i think some priority OR dependence problem. For More info

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>