How to properly use Child theme on Newspaper theme

Hi Team,
With every new theme update, I always have to make a few changes in the theme’s core file and now I am fade up with this.

There are two main files that I have to customize in the core theme file. 1. Style.css 2. Functions.php
( I am not talking about custom CSS but the real style.css file under theme)

Is there a way by which I can keep these changes in functions.php and style.css stable/fixed using child theme even after updating theme?

Should I simply copy the code that I change in core style.css file and paste it in style.css of child theme? Will this work? or will it load the style.css two times?

There is some tutorial here – https://codex.wordpress.org/Child_Themes which ensure that the child theme stylesheet loads after original style.css.

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

Is this code already written under our sample child theme file?

What about functions.php? there are multiple codes that I have added at the end of theme’s core functions.php. Should I delete these codes from core functions.php and write it on the child theme functions.php? If so? where do I need to write these codes?

Currently, this is how child theme funcitons.php look:

<?php
/*  ----------------------------------------------------------------------------
    Newspaper V6.3+ Child theme - Please do not use this child theme with older versions of Newspaper Theme

    What can be overwritten via the child theme:
     - everything from /parts folder
     - all the loops (loop.php loop-single-1.php) etc
	 - please read the child theme documentation: https://forum.tagdiv.com/the-child-theme-support-tutorial/

     - the rest of the theme has to be modified via the theme api:
       https://forum.tagdiv.com/the-theme-api/

 */

/*  ----------------------------------------------------------------------------
    add the parent style + style.css from this folder
 */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 1001);
function theme_enqueue_styles() {
    wp_enqueue_style('td-theme', get_template_directory_uri() . '/style.css', '', TD_THEME_VERSION, 'all' );
    wp_enqueue_style('td-theme-child', get_stylesheet_directory_uri() . '/style.css', array('td-theme'), TD_THEME_VERSION . 'c', 'all' );

}

Where am I supposed to insert new functions.php code?

Please help me create an almost stable style.css and functions.php under child theme so that all theme upgrade doesn’t affect all frequent updates.

Thank you.

• This topic was modified 8 years by Nano.

Thank you Simion for the great details.

I also read the Bogdan’s reply here- https://forum.tagdiv.com/topic/setting-up-child-theme/ . A few doubt I have:

1. I understood that the child theme can also not be future proof, if any of the files that I added in child-theme get modified in original theme as well.
But what about Styles.css and functions.php? How does child theme load style.css? Does it use stylesheets code from original theme and child theme both? If so, then how?

What if there are two codes written for customization of same elements on both original theme CSS and child theme CSS. Which will be finally displayed on the live website?

Does child theme makes calls from style.css and functions.php from both original theme and child theme to display it on live website?

Does this affect the speed of site as well?

There are manily few core font name, size and color changes done by me on the original style.css of my theme. How can I keep it secure and stable even when I make an update of the theme?

functions.php is usually remain unchanged with theme updates but for better update-proof ness, should I add the custom code to the child theme functions.php and remove it from main functions.php?

What will happen if I add these codes at both the functions.php ( theme and child theme), will it cause any conflict in any possible way?

Kindly help

Thank you for clearing my doubts. One last thing:
How to deal with styles.css and functions.php that are under ‘mobile’ folder and created specifically when the website is viewed on mobile devices. Should I simply copy functions.php and style.css after creating a new directory ‘mobile’ under child theme?

Above I am talking about the mobile related folder of main theme, not about td mobile theme which we need to install as a plugin.

Thanks.

Hello Nano,

Write a simple plugin for functions.php, and add your custom codes there. The plugin will auto put your custom code to the both main and mobile theme’s functions.php. So whenever you update the theme, you don’t need to edit functions.php file.

For style.css, you can use theme panel to add custom codes. You can force write the rule by adding an important tag.

For fonts, it seems you’re using Poppins bold for headlines and the default fonts for the rest of the site. You can create own.woff file for the Poppins bolt and use it with custom fonts file option in the theme panel.

Hope this will help you.
All the best

Hi Amit,
Thank you for the response.

Well, I am not really very good with technical stuff and hence didn’t understand what you mean by creating a plugin for function.php but I have successfully created a child theme with proper implementation of styles.css and function.php but still, couldn’t find any way to keep mobile style.css and function.php update proof.

May be someday, you will create a detailed blog post on this and then I will be able to actually implement it on my site. 🙂

Thank you.