Need clarity: how to know when to use child theme

To broadly answer the question in your subject, you should *always* use a child theme if you’re modifying a theme. When an update for a theme is released, and you choose to apply that update (you should always apply updates), all of the theme files are replaced, even the ones you modify.

Making modifications to child theme (which is just a collection of the changed files that reference the parent theme for the rest), you can safely update the parent theme without losing your changes.

Now, on to your problem, are you absolutely sure that your child theme is activated at Appearance -> Themes in your Dashboard? Your site still appears to be using just the parent GeneratePress theme.

Hi James,

Thanks for the prompt and quick reply.

Yes I am using the GeneratePress Child theme.

But thing is, when I try to inspect an element, I still go to the parent theme and change it there. When I try doing the code on my child theme the code doesn’t work.

Is there anything I am doing wrong?

Thanks.
Dave

I’m not convinced you have the child theme enabled. When I view source at your site, this is the only theme’s stylesheet I see in use:

https://davemontemayor.com/wp-content/themes/generatepress/style.css

That’s GeneratePress’s stylesheet, not a child theme. There are no other theme stylesheets present.

Check Appearance -> Themes in your Dashboard. Are you absolutely sure that your child theme is the active theme, or is GeneratePress the active theme?

You might also want to review these on using/creating child themes:

https://codex.www.ads-software.com/Child_Themes

https://themeshaper.com/modify-wordpress-themes/

Hi James,

Hmmm here’s a snap of my themes dashboard for your reference:

https://davemontemayor.com/wp-content/uploads/2016/02/Screen-Shot-2016-02-20-at-9.34.43-AM.png

Is there anything I am doing wrong?

Actually, I think I am doing something because when I tried coding on the end of my style.css child theme the codes do not work.

Apologies for the ignorance.

Dave

It does appear that a Child theme is being used as the theme’s CSS is: https://davemontemayor.com/wp-content/themes/generatepress-child/style.css?ver=1.0.1455710611 which is being loaded after the parent theme’s style.css.

Any changes you should add to the child’s style.css. If the rule is not in the child’s style.css then you need to add it and not just change an existing rule in the parent’s style.css.

Anything you add to the child’s style.css will (should) override the parent’s.

By the way I used “Child Theme Configurator” plugin to create the child theme.

Is this wrong?

Ah, I glanced over that Mark, nice catch!

I don’t think the plugin is to blame.

Can you give us a few examples of things you tried to add to the child theme’s style.css file which didn’t work?

Ok thanks,

But check this out:

https://davemontemayor.com/quantifying-the-unquantifiable/

I am trying to reduce the space between the Facebook comment section and the website post section.

So I inputted the following code on my child theme style.css

.comments-area {
padding-top: 0px !important;
}

.inside-article {
padding-bottom: 0px !imporant;
}

How come it is not working? ??

Oh.. oops.. it should be:

.separate-containers .comments-area {
padding-top: 0px !important;
}

.separate-containers .inside-article {
padding-bottom: 0px !important;
}

I didn’t get the selectors right and made a typo. Also, need to get rid of this above:

.separate-containers.comments-area {
	  padding: 1px 40px 40px 40px;
	}

Hi Mark,

I did all you told me: here’s a snap of my child theme style.css

https://davemontemayor.com/wp-content/uploads/2016/02/Screen-Shot-2016-02-20-at-9.58.01-AM.png

But still doesn’t work. Anything I am doing wrong?

Dave

Hmmm.. something else is going on here. This is the style that is being applied:

.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content {
	padding: 40px 40px 40px 40px;
}

The .separate-containers .comments-area is the one being highlighted.

But my browser’s developer tools indicates that it’s inline like the style is being generated by some javascript or something and not coming from one of the style.css files. Here’s what I’m looking at: https://i.imgur.com/LeVMsd3.png

I may need to take a break and look at this again LOL.

Looking at the source code, those style seem to be coming from this:

<style id='generate-style-inline-css' type='text/css'>
body {background-color: #ffffff; color: #3a3a3a; }a, a:visited {color: #000000; text-decoration: none; }a:visited {color: #000000; }a:hover, a:focus, a:active {color: #000000; }body .grid-container {max-width: 1350px; }
body, button, input, select, textarea {font-family: "Open Sans", sans-serif; font-size: 17px; }.main-title {font-weight: bold; font-size: 45px; }.site-description {font-size: 15px; }.main-navigation a, .menu-toggle {font-size: 15px; }.main-navigation .main-nav ul ul li a {font-size: 14px; }.widget-title {font-size: 20px; }.sidebar .widget, .footer-widgets .widget {font-size: 17px; }h1 {font-weight: 300; font-size: 40px; }h2 {font-weight: 300; font-size: 30px; }h3 {font-size: 20px; }.site-info {font-size: 16px; }
.site-header {background-color: #FFFFFF; color: #3a3a3a; }.site-header a,.site-header a:visited {color: #3a3a3a; }.main-title a,.main-title a:hover,.main-title a:visited {color: #222222; }.site-description {color: #999999; }.main-navigation,  .main-navigation ul ul {background-color: #222222; }.navigation-search input[type="search"],.navigation-search input[type="search"]:active {color: #3f3f3f; background-color: #3f3f3f; }.navigation-search input[type="search"]:focus {color: #FFFFFF; background-color: #3f3f3f; }.main-navigation ul ul {background-color: #3f3f3f; }.main-navigation .main-nav ul li a,.menu-toggle {color: #FFFFFF; }button.menu-toggle:hover,button.menu-toggle:focus,.main-navigation .mobile-bar-items a,.main-navigation .mobile-bar-items a:hover,.main-navigation .mobile-bar-items a:focus {color: #FFFFFF; }.main-navigation .main-nav ul ul li a {color: #FFFFFF; }.main-navigation .main-nav ul li > a:hover,.main-navigation .main-nav ul li > a:focus, .main-navigation .main-nav ul li.sfHover > a {color: #FFFFFF; background-color: #3f3f3f; }.main-navigation .main-nav ul ul li > a:hover,.main-navigation .main-nav ul ul li > a:focus,.main-navigation .main-nav ul ul li.sfHover > a {color: #FFFFFF; background-color: #4f4f4f; }.main-navigation .main-nav ul .current-menu-item > a, .main-navigation .main-nav ul .current-menu-parent > a, .main-navigation .main-nav ul .current-menu-ancestor > a {color: #FFFFFF; background-color: #3f3f3f; }.main-navigation .main-nav ul .current-menu-item > a:hover, .main-navigation .main-nav ul .current-menu-parent > a:hover, .main-navigation .main-nav ul .current-menu-ancestor > a:hover, .main-navigation .main-nav ul .current-menu-item.sfHover > a, .main-navigation .main-nav ul .current-menu-parent.sfHover > a, .main-navigation .main-nav ul .current-menu-ancestor.sfHover > a {color: #FFFFFF; background-color: #3f3f3f; }.main-navigation .main-nav ul ul .current-menu-item > a, .main-navigation .main-nav ul ul .current-menu-parent > a, .main-navigation .main-nav ul ul .current-menu-ancestor > a {color: #FFFFFF; background-color: #4f4f4f; }.main-navigation .main-nav ul ul .current-menu-item > a:hover, .main-navigation .main-nav ul ul .current-menu-parent > a:hover, .main-navigation .main-nav ul ul .current-menu-ancestor > a:hover,.main-navigation .main-nav ul ul .current-menu-item.sfHover > a, .main-navigation .main-nav ul ul .current-menu-parent.sfHover > a, .main-navigation .main-nav ul ul .current-menu-ancestor.sfHover > a {color: #FFFFFF; background-color: #4f4f4f; }.inside-article, .comments-area, .page-header,.one-container .container,.paging-navigation,.inside-page-header {background-color: #FFFFFF; }.entry-meta {color: #888888; }.entry-meta a, .entry-meta a:visited {color: #666666; }.entry-meta a:hover {color: #1E73BE; }.sidebar .widget {background-color: #FFFFFF; }.sidebar .widget .widget-title {color: #000000; }.footer-widgets {background-color: #FFFFFF; }.footer-widgets a, .footer-widgets a:visited {color: #1e73be; }.footer-widgets a:hover {color: #000000; }.footer-widgets .widget-title {color: #000000; }.site-info {background-color: #222222; color: #ffffff; }.site-info a, .site-info a:visited {color: #ffffff; }.site-info a:hover {color: #606060; }input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea {background-color: #FAFAFA; border-color: #CCCCCC; color: #666666; }input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus {background-color: #FFFFFF; color: #666666; border-color: #BFBFBF; }button, html input[type="button"], input[type="reset"], input[type="submit"],.button,.button:visited {background-color: #666666; color: #FFFFFF; }button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover,.button:hover,button:active, html input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active,.button:active {background-color: #3F3F3F; color: #FFFFFF; }
.main-navigation .mobile-bar-items a,.main-navigation .mobile-bar-items a:hover,.main-navigation .mobile-bar-items a:focus {color: #FFFFFF; }
.inside-header {padding: 40px 40px 40px 40px; }.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content {padding: 40px 40px 40px 40px; }.one-container.right-sidebar .site-main,.one-container.both-right .site-main {margin-right: 40px; }.one-container.left-sidebar .site-main,.one-container.both-left .site-main {margin-left: 40px; }.one-container.both-sidebars .site-main {margin: 0px 40px 0px 40px; }.ignore-x-spacing {margin-right: -40px; margin-bottom: 40px; margin-left: -40px; }.ignore-xy-spacing {margin: -40px -40px 40px -40px; }.main-navigation .main-nav ul li a,.menu-toggle,.main-navigation .mobile-bar-items a {padding-left: 20px; padding-right: 20px; line-height: 60px; }.nav-float-right .main-navigation .main-nav ul li a {line-height: 60px; }.main-navigation .main-nav ul ul li a {padding: 10px 20px 10px 20px; }.main-navigation ul ul {top: 60px; }.navigation-search {height: 60px; line-height: 0px; }.navigation-search input {height: 60px; line-height: 0px; }.widget-area .widget {padding: 40px 40px 40px 40px; }.footer-widgets {padding: 40px 0px 40px 0px; }.site-info {padding: 20px 0px 20px 0px; }.right-sidebar.separate-containers .site-main {margin: 20px 20px 20px 0px; }.left-sidebar.separate-containers .site-main {margin: 20px 0px 20px 20px; }.both-sidebars.separate-containers .site-main {margin: 20px; }.both-right.separate-containers .site-main {margin: 20px 20px 20px 0px; }.separate-containers .site-main {margin-top: 20px; margin-bottom: 20px; }.separate-containers .page-header-image, .separate-containers .page-header-content, .separate-containers .page-header-image-single, .separate-containers .page-header-content-single {margin-top: 20px; }.both-left.separate-containers .site-main {margin: 20px 0px 20px 20px; }.separate-containers .inside-right-sidebar, .inside-left-sidebar {margin-top: 20px; margin-bottom: 20px; }.separate-containers .widget, .separate-containers .hentry, .separate-containers .page-header, .widget-area .main-navigation {margin-bottom: 20px; }.both-left.separate-containers .inside-left-sidebar {margin-right: 10px; }.both-left.separate-containers .inside-right-sidebar {margin-left: 10px; }.both-right.separate-containers .inside-left-sidebar {margin-right: 10px; }.both-right.separate-containers .inside-right-sidebar {margin-left: 10px; }.one-container .sidebar .widget{padding:0px;}
.main-navigation .mobile-bar-items a {padding-left: 20px; padding-right: 20px; line-height: 60px; }.menu-item-has-children .dropdown-menu-toggle {padding-right: 20px; }.slideout-navigation .main-nav ul li.menu-item-has-children a {padding-right: 20px; }.menu-item-has-children ul .dropdown-menu-toggle {padding-top: 10px; padding-bottom: 10px; margin-top: -10px; }
</style>

Not sure why this theme is using both all this inline style in addition to separate style.css files. All of this really should not be directly in the page source.

At this point, I would go ask in the theme’s support forum: https://www.ads-software.com/support/theme/generatepress

Problem is i tried editing the padding: 40px 40px 40px 40px from my browser (through inspect element) and it works.

However, you are right when we try to override the codes through style.css of child theme it seems it doesn’t.

Is there like a disconnect happening?

In case you missed it, I would go ask in the theme’s support forum: https://www.ads-software.com/support/theme/generatepress

All right thanks for all the help.

But just for clarification all overrides should be done through the child theme right?

One more thing: what if I want to override something in the header or footer, how do I go about it? how do I add a “duplicate” header and footer on my child theme?

Thanks!