[Resolved] Since I upgraded WordPress my Website lost its Styling and Custom CSS

[Author]

Posts

[joseH-4]

I tried to follow the instructions from another thread from you to updgrade wp-types plugins and WordPress, since I did I lost all my formatting. Could you help me found out why? I also noticing it is not getting the custom CSS from my custom stylesheet for my child theme.

The child theme is activated, the stylesheet is there, everything seems normal, but I do not know why it lost its formatting.

Could you help me?

[Beda]

Thank you for contacting us here in the Support Forum

Please read carefully this DOC about how to create Child Themes with WordPress:
https://codex.wordpress.org/Child_Themes

It elaborates step by step how to proceed.

It is important to understand the code suggested there, as some details need to be changed/adapted and can not be used one by one (copy and paste)

I see in your Child Theme on your site that you did not enqueue your Child Theme's Stylesheet.

The DOC I provided elaborates on how to do that.

Also note that WordPress uses a "cascading" precedence system in cases of enqueueing scripts.
As example, if you enqueue Style Sheets or other styles, it will follow this "precedence":

1. First line (first enqueue) is loaded before, but "overwritten" by rules of...
2. The second line (or second enqueue) which is overwritten as well by...
3. The next line, etc.

That means, all styles you have on your LAST line in the enqueue script (is enqueued last) will Overwrite all precedent styles, if some CSS is "duplicated"

That means, your CUSTOM style sheet should ALWAYS be the last to be enqueued, so to ensure that all precedent CSS can be overwritten by your custom css.

Studying your functions.php file I also saw CRED API codes.
Please be careful by naming functions with the SAME name

Each Function in WordPress must have a unique name, otherwise you will receive fatal errors.

This is just a side-inforamtion, to avoid complications while developing your site.

Please let me know if you have further questions regarding the issue mentioned in this Thread

Thank you for your patience.

[joseH-4]

I am sorry, but It does not make sense to me what you said, because I did not change one single line of code from the previous state of my site, and it was working with a child theme before - with a custom CSS.

Look the image attached, it shows you how in the functions.php of the Style.css theme is en-queued like before. I even tried to change to something like the link you sent suggest:

function 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 )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

It does not work!

The style.css is the same as previously, the functions.php is the same as previously. Nothing was changed, and it was working before. The only thing done was the upgrade of WordPress version per you guys suggestion. After that, styles are NOT working anymore. BUT, interesting or not, the custom Javascript IS still working!

I may be wrong, but I am not sure what else to do. Please check the folder "benchmark-theme", that is my Child theme folder where I have my custom functions.php, custom style.css and custom javascript code. The style.css is not being applied to the site.

[Beda]

I apologize the delay here

Could you please attach the access details to lathes Post, and elaborate where your feel is located, which one you would like to use, and which theme you use exactly.

I can then long to your FTP and try to adjust the code.

Please could you provide me the additional Infos, and as well permit me to perform the required steps?

Thank you for your patience.

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for providing the details. Beda has a few days off, I will replace him in the meanwhile.

Please allow me some time to work on this. I will update you as soon as I find a solution.

[Waqas Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Please see it fixed. Actually it was all about the dependencies a child theme should take care about. I have updated the relevant function in your child theme's functions.php as below:

// Load Custom JavaScript via Child Theme
function theme_js() {
	wp_register_style('child-style', get_stylesheet_uri(), array('main', 'theme'));
	wp_enqueue_style('child-style');
    wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/myscript.js', array( 'jquery' ));
    wp_enqueue_script( 'myscript2', get_stylesheet_directory_uri() . '/myscript2.js', array( 'jquery' ));
    wp_enqueue_script( 'myscript3', get_stylesheet_directory_uri() . '/jquery.dotdotdot.js', array( 'jquery' ));
}

add_action('wp_enqueue_scripts', 'theme_js');

Please notice the first 2 lines of theme_js() function. There's no parent style sheet is being included, but you will find references to 2 parent style sheets used by the parent theme. Child theme's CSS has a logical dependency on these and should be loaded after that. So I used wp_register_style() to register child theme's style properly with all it's dependency. Since the dependent styles are already been loaded by the parent theme, we just need to enqueue our style after those. The second line simply enqueues the child theme style sheet after the parent styles.

Please read following articles for more information:

- hidden link
- https://codex.wordpress.org/Function_Reference/wp_register_style

I hope the matter is resolved now.

[joseH-4]

Thanks Waqas, my issue seems to be solved for now.