Child theme syndey pro ii not working properly

Hello all,

Me and my friend are trying to put the priority of the child theme above the parent theme. At this time we are seeing that this is not working.

Anything inside the child theme needs to take priority and so there should not be any need for the ’ !important ’

Any help will be mostly appreciated.

Regards
Hero

Hello there,

Do you mean extra CSS cod in child theme’s style.css file doesn’t take any effect? Please share your code here, maybe there’s something we could correct.

Regards,
Kharis

Hello,

Thank you for your reply,

How do I N Q and register the child theme so that it has a higher priority than anything else?

Many thanks
Tom

Hello there,

Please check how the parent theme’s stylesheet is loaded within child theme. Ensure it uses wp_enqueue_style() function. Please refer to this handbook.

Regards,
Kharis

Hello Kharris,

Thanks for the reply,

I have read through the handbook and below I have provided the functions.php code that we have.

<?php
// Register Script
wp_register_script('myscript', get_template_directory_uri().'/js/Script.js', array(), true );
wp_enqueue_script('myscript');

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function myprefix_enqueue_scripts() {

}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts' );

function theme_enqueue_styles() {
    wp_enqueue_style( 'sydney-pro-ii', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'sydney-pro-ii-child', get_stylesheet_directory_uri() . '/style.css', array( 'sydney-pro-ii' ) );
    wp_enqueue_style( 'sydney-pro-ii-child-tom', get_stylesheet_directory_uri() . '/tom.css' );
}
?> 

Also inside inspector mode in firewfox we can see that the child theme is taking prority and is duplicated. Is this normal?

please see the attached image below,

Many thanks

Tom

Hello there,

Please try removing PHP_INT_MAX from this line:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

And use unique slug name for the parent theme’s main stylesheet by replacing this line:

wp_enqueue_style( 'sydney-pro-ii', get_template_directory_uri() . '/style.css' );

to

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

Regards,
Kharis

Hello Kharris,

We have followed your instructions stated in your last post.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');

// Register Script
wp_register_script('myscript', get_template_directory_uri().'/js/Script.js', array(), true );
wp_enqueue_script('myscript');

function my_theme_enqueue_styles() {
 
    $parent_style = 'sydney-pro-ii';
 
    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')
    );
    wp_enqueue_style( 'sydney-pro-ii-child-tom',
        get_stylesheet_directory_uri() . '/tom.css',
        array( $parent_style, child-style ),
        wp_get_theme()->get('Version')
    );
}
?>

The child theme is being duplicated and is not taking priority over the parent theme still, can you assist any further?

An example of this has been provided below,

The inline code of the site origin plug in as shown in the screenshot is not taking priority, as the text is still red.

Many thanks
Tom

Hello Tom,

Please share your CSS code of child theme, so I can reproduce it on my test site. Maybe there’s something I can correct in there.

Regards,
Kharis

Hi Kharis

I work with Tom on the https://thesurgenetwork.net website but I’m going to help get the ball rolling on this one as he’s forgotten about it… If I was to explain how I would the priority of the style sheets to work will that help?

Basically I would like to attach an additional style sheet file called ‘Extra’ (that has additional CSS to the our child theme style sheet) and be read at the highest priority going down to the child theme, then the additional CSS (found under WordPress > Customization) and finally the parent. In others words if CSS code isn’t listed in the top style sheet it will go through to the next style sheet down in the hierarchy, as shown in the attached image.

!

As well as prioritising the style sheets between the parent and child theme, when I did have a partially working functions.php file we noticed in the web browser’s inspector view the child theme code was being duplicated, with in-line and parent theme CSS in between the two duplications from the child theme CSS.

I know this could go onto another forum post but as this is related to the functions.php file I thought I will ask it. If I wanted to move custom JavaScript from the TC Custom JavaScript into a physical JavaScript file what’s the correct way of loading it from a folder inside my child theme’s folder called JS?

js!

Please don’t hesitate for further questions if you need it explained more clearly.

Many thanks

Will

Hello Kharris,

Is there any update on this?

Regards
Tom

Add this code to your child theme’s functions.php file.

    add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue' );
    function sydney_child_enqueue() {

        wp_enqueue_script( 'sydney-child', get_stylesheet_directory_uri() . '/js/sydney-child.js', array('jquery'),'', true );

    } 

Regards,
Kharis

Hello Kharris,

Thank you again for your help.

Also is there anyway of having an adittional style sheet file called ‘Extra’? , this will have additional CSS to the child theme style sheet and is to be read on the highest priority going down to the child theme.

Please see the below,

I apologise about the late response, but if you could assist us on this then that would be greatfully apprieated.

Regards
Tom

Hello Kharris,

Any update on this?

Regards
Tom

Hello there,

Child theme’s stylesheet is always the last executed in your site document. It seats in the higher priority than parent theme. To double-check it yourself, you can view the source code of your site, then search for style.css.

However some styles associated with customizer settings are printed as inline stylesheet, which means its priority is higher that child theme’s. To know it, in the source code of your site, search for “”. To override them, you can use !important declaration. Or, apply proper CSS specificity.

Regards,
Kharis

Hello,

In regards to the CCS specificity, does it mean that it would be best to narrow down the CCS selector to gain a higher priority?

Regards
Tom

In addition to my last comment,

Would it be too much to ask for a full functions.php that includes the enqued JS, child style sheet and a grandchild stylke sheet (additional style sheet attached to the child style sheet - parent > child > grandchild)

add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue' );
    function sydney_child_enqueue() {

        wp_enqueue_script( 'sydney-child', get_stylesheet_directory_uri() . '/js/sydney-child.js', array('jquery'),'', true );

    }

We would like to get the structure right so that the function.php file works correctly, so that we can copy and paste from here to the file location itself.

Hello,

Is there any chance that we could get an update on the above post please.

I understand that it has been sometime since this was touched but it is of the highest importance to us that we get this solved.

We appreciate any help on this.

Kind regards
Tom

Yes. For example, to override this CSS rules found in the parent’s stylesheet

    .single .entry-header,
    .page .entry-header {
          margin-bottom: 40px;
    }

use this in your child theme’s:

    body.single .entry-header,
    body.page .entry-header {
          margin-bottom: 20px;
    }

Regards,
Kharis

    add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue' );
    function sydney_child_enqueue() {
        wp_enqueue_script( 'sydney-child', get_stylesheet_directory_uri() . '/js/sydney-child.js', array('jquery'),'', true );
    }

That code isn’t an ideal way to override the parent theme’s JS file. As it will load the parent’s JS file as well. Firstly you have to exclude the parent’s JS file, then start queueing your new one in child theme. You can use wp_dequeue_script function. Checkout my post on the .org community forum, please.

Regards,
Kharis

Hello Kharris,

Thank you for your reply.

Which part of the code provided below will we need to tweak in order for our Child theme to correspond with the parent theme?

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.

    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' );
?>

Regards
Tom