Child Theme Not Working (for a change)

bicartwright
(@bicartwright)

10 years, 3 months ago

*******Configuration***********
Theme Base is Twenty Sixteen
Child Theme Directory twentysixteen-child
I created a child theme with Child Theme Configurator
Version 1.7.9.1 | By Lilaea Media | View details
Theme is activated
Site is mmosio.com
This my first attempt at child themes and this is the first style change so the CSS is about as simple as you get. I Know this is cockpit error I just need to know how I screwed up and how to fix it.
**************Details***********
I want to make the text layer background to be semi-transparent (home page)
mmosio.com

initially I put the following in the Simple CSS
.site
{
background-color: rgba(195, 195, 195, 0.7);
}
That worked fine so I commented it out and put it in the child theme’s style.css
That did not work
I opened firebug and went through the full process again. With code done in Simple CSS it worked fine. I examined the CSS in Firebug and found the line of code near the bottom.

Next I commented out the Simple CSS and inserted the code back in then child’s style.css
This time when I searched the CSS with firebug there was no sign of the code.

Below in the style.css from my child theme
(hope I’ve provided the requisite information)
Thank you
Bruce

Am I wrong to think that if the MAIN theme’s code is loaded than it indicates that the child theme is loading at least as far as the import?

/*
Theme Name: Twenty Sixteen Child
Template: twentysixteen
Author: Child Theme Configurator
Version: 1.0.1452529419
Updated: 2016-01-11 16:23:39
*/

@charset “UTF-8”;
@import url(“../twentysixteen/style.css”);

.site
{
background-color: rgba(195, 195, 195, 0.7);
}

Viewing 15 replies - 1 through 15 (of 29 total)

1 2 →

neotechnomad
(@neotechnomad)

10 years, 3 months ago
Did you enqueue the styles as per : https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme
```
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' );
```
Not…
```
@charset "UTF-8";
@import url("../twentysixteen/style.css");
```
Thread Starter bicartwright
(@bicartwright)

10 years, 3 months ago

Sorry, forgot this
<?php
// Exit if accessed directly
if ( !defined( ‘ABSPATH’ ) ) exit;

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED – Do not modify or remove comment markers above or below:

if ( !function_exists( ‘chld_thm_cfg_parent_css’ ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( ‘chld_thm_cfg_parent’, trailingslashit( get_template_directory_uri() ) . ‘style.css’ );
}
endif;
add_action( ‘wp_enqueue_scripts’, ‘chld_thm_cfg_parent_css’ );

// END ENQUEUE PARENT ACTION
neotechnomad
(@neotechnomad)

10 years, 3 months ago
This goes in the Child Theme’s functions.php file…
```
<?php

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' );
```
…no closing tag ?> or space below the last line of code.

Remove this from Child Theme’s style.css…
```
@charset "UTF-8";
@import url("../twentysixteen/style.css");
```
from: https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme

Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.
Thread Starter bicartwright
(@bicartwright)

10 years, 3 months ago

Well that didn’t make a difference in the function of the script But I definitely appreciate the style tip. I will do it that way from now on.

Thread Starter bicartwright
(@bicartwright)

10 years, 3 months ago

Just saw in a different post where it says to use

wp_enqueue_style( $parent_style, get_stylesheet_uri(). ‘/style.css’ );

instead of
wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
because the get_Template_dirctory_uri() loads the main theme’s style sheet in stead of the child style.css but that didn’t change anything either. I’m not sure that is the correct format or if I’m barking up the wrong tree.

neotechnomad
(@neotechnomad)

10 years, 3 months ago

This is the most recent and best way to enqueue child and parnet styles, as per the link I posted with the code.
Can you post exactly what you child theme functions.php is, please?

Thread Starter bicartwright
(@bicartwright)

10 years, 3 months ago

<?php

function theme_enqueue_styles()
{

$parent_style = ‘parent-style’;

// wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );

wp_enqueue_style( $parent_style, get_stylesheet_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’ );
neotechnomad
(@neotechnomad)

10 years, 3 months ago
There are errors in your code and…
For this: “parent-style” – replace it with your Parent Theme Name.
For this: “child-style” – replace it with your Child Theme Name.
And for this: “theme_enqueue_styles” replace just the word “theme” with your Child Theme Name.

So, it looks like this…
```
<?php

function twenty-sixteen-child_enqueue_styles() {

    $parent_style = 'twentysixteen';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'twenty-sixteen-child',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'twenty-sixteen-child_enqueue_styles' );
```
Paste this exactly as it is into the child theme functions.php and it will work, and…
No spaces beneath the last line of code and No closing tag (?>)!!
Thread Starter bicartwright
(@bicartwright)

10 years, 3 months ago

I thought for sure this would work but no. Those were pretty bad mistakes but there has to be something else as well. To make sure I’ve FTPed the function back down and am pasting the function.php back in. That one is embarrassing. I really appreciate your help on this. I wish there were better tools to DX websites. Like breakpoints, single step, etc.

<?php

function twenty-sixteen-child_enqueue_styles() {

$parent_style = ‘twentysixteen’;

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘twenty-sixteen-child’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style )
);
}
add_action( ‘wp_enqueue_scripts’, ‘twenty-sixteen-child_enqueue_styles’ );
neotechnomad
(@neotechnomad)

10 years, 3 months ago
My mistake, I copied this wrong from your original post:

Theme Base is Twenty Sixteen
Child Theme Directory twentysixteen-child

So, code should be…
```
<?php

function twentysixteen-child_enqueue_styles() {

    $parent_style = 'twentysixteen';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'twentysixteen-child',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'twentysixteen-child_enqueue_styles' );
```
…and remember, No spaces beneath the last line of code and No closing tag (?>)!!
Thread Starter bicartwright
(@bicartwright)

10 years, 3 months ago

Sadly, it didn’t work either. Just to verify I did the Copy and Paste accurately. Here is what I pasted in.

Thread Starter bicartwright
(@bicartwright)

10 years, 3 months ago

<?php

function twentysixteen-child_enqueue_styles() {

$parent_style = ‘twentysixteen’;

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘twentysixteen-child’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style )
);
}
add_action( ‘wp_enqueue_scripts’, ‘twentysixteen-child_enqueue_styles’ );
stephencottontail
(@stephencottontail)

10 years, 3 months ago
You can’t use a hyphen in a PHP function name; you need to use an underscore instead. Try this code:
```
<?php

function twentysixteen_child_enqueue_styles() {

$parent_style = 'twentysixteen';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'twentysixteen-child',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'twentysixteen_child_enqueue_styles' );
```
neotechnomad
(@neotechnomad)

10 years, 3 months ago

@stephencottontail… Thanks, you’re correct. 🙂
I actually missed that (…too many late nights). Yes, it does have to be an underscore. That code should work, now.

Thread Starter bicartwright
(@bicartwright)

10 years, 3 months ago

But it didn’t. Even found another dash and changed that. Here is the functions.php installed now, and yes, I changed the child theme to twentysixteen_child. Also removed the twentysixteen

<?php

function twentysixteen_child_enqueue_styles() {

$parent_style = ‘twentysixteen’;

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘twentysixteen_child’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style )
);
}
add_action( ‘wp_enqueue_scripts’, ‘twentysixteen_child_enqueue_styles’ );

Viewing 15 replies - 1 through 15 (of 29 total)

1 2 →

The topic ‘Child Theme Not Working (for a change)’ is closed to new replies.

Child Theme Not Working (for a change)

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics