Loading style sheet from child theme folder w/php

[okieman]

I'm trying to put all custom CSS (for Outreach Pro) into a separate style sheet residing in the child theme directory. I created the functions.php below and placed it in the child theme dir, but I don't think it is ever called. You can see were I tried to get the server to dump certain variables but nothing showed (now commented out). If this is somewhere on the StudioPress site, I'll gladly follow a link.

<?php

function register_my_theme_styles(){
        if ( ! is_admin() ){
        wp_register_style( 'my-theme-stylesheet', get_stylesheet_uri(), array(), false, 'screen' );
        }
}
add_action( 'init', 'register_my_theme_styles' );

function use_parent_theme_stylesheet() {
    // Use the parent theme's stylesheet
    return get_template_directory_uri() . '/style.css';
}
// $message1 = get_template_directory_uri();
//      var_dump($message1);

// $message3 = get_theme_root_uri();
//      var_dump($message3);
	 
function my_theme_styles() {
    $themeVersion = wp_get_theme()->get('Version');

    // Enqueue our style.css with our own version
    wp_enqueue_style('child-theme-style', get_stylesheet_directory_uri() . '/child-style.css',
        array(), $themeVersion);
}
// $message2 = get_stylesheet_directory_uri();
//      var_dump($message2);

// Filter get_stylesheet_uri() to return the parent theme's stylesheet 
add_filter('stylesheet_uri', 'use_parent_theme_stylesheet');

// Enqueue this theme's scripts and styles (after parent theme)
add_action('wp_enqueue_scripts', 'my_theme_styles', 20);

?>

http://www.tulsaunity.com/

[Brad Dalton]

Try this http://wpsites.net/wordpress-themes/second-style-sheet-theme/

---

Tutorials for StudioPress Themes & WooCommerce.

[okieman]

A lot of information at that link. I'll tinker and report back!

[okieman]

I keep tinkering with this. If I use the Chrome Inspector (F12), it continues to indicate pulling CSS from the same old sources, not the child CSS. What is the recommended way to debug this?

[Victor Font]

Did you overwrite the functions.php file that comes with Outreach Pro or did you add that code to the file that comes with Outreach Pro? All you had to do was add 1 line of code to the Outreach Pro functions.php file as such:

function outreach_load_scripts() {

	wp_enqueue_script( 'outreach-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
	wp_enqueue_script( 'jquery-ui-tabs' );

	wp_enqueue_style( 'dashicons' );
	wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Lato:400,700', array(), CHILD_THEME_VERSION );
	wp_enqueue_style('child-theme-style', get_bloginfo( 'stylesheet_directory' ) . '/child-style.css', array(), CHILD_THEME_VERSION);
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[okieman]

My tests have appended code. I may be biased, but I don't believe the problem thus far has been lacking the sense to simply add one line of code. What has been frustrating is finding various plausible solutions posted by people who seem to know what they're talking about, and having their code not work for me.

So, before I test your recommendation, I have a question that may help me better understand this. I've been told the child theme directory must exist separate from the parent theme but inside the overall themes directory. Yet, I keep seeing recommended snippets which give a URL that simply says "'/child-style.css'" I'd very much like to know how this code is actually directing the server to go up one level (from the functions.php in the parent theme folder), then across to the child theme folder containing the custom CSS?

[Victor Font]

If you open you functions.php and read the code, you'll see this as the first line in every Genesis Child Theme:

//* Start the engine
include_once( get_template_directory() . '/lib/init.php' );

get_template_directory is a WordPress function that returns the absolute path to the parent theme directory in the case where a child theme is being used. This is how the server traverses to the parent theme. How it knows there is a parent/child relationship is found in the header comments of style.css. This is the header from Outreach Pro:

/*
	Theme Name: Outreach Pro
	Theme URI: http://my.studiopress.com/themes/outreach/
	Description: A mobile responsive and HTML5 theme built for the Genesis Framework.
	Author: StudioPress
	Author URI: http://www.studiopress.com/
	Version: 3.1

	Tags: black, green, white, one-column, two-columns, three-columns, left-sidebar, right-sidebar, responsive-layout, custom-menu, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, premise-landing-page

	Template: genesis
	Template Version: 2.1

	License: GPL-2.0+
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

See the Template? It says genesis. This tells WordPress that the parent theme for Outreach Pro is Genesis.

As you continue to read through functions.php, you'll see the function I posted earlier. Within that function, the wp_enqueue functions are using the WordPress function get_bloginfo( 'stylesheet_directory' ) to determine the directory of the child theme.

Hope this helps with your understanding. The code I gave you works because it's the same code I use on dozens of sites to load custom style sheets or JavaScript files.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[okieman]

Victor that's interesting. Although my css is already formatted like that, I had not known how get_template_directory works before you described it. I'll be testing revisions this week and will report on progress. Thanks.

[okieman]

Partial progress. The child theme now loads, with a glitch regarding order. One of the items in the child CSS targets padding on a calendar plugin page. Somehow the calendar plugin's CSS supersedes my tweak despite the following effort to make mine load last:

function my_theme_child_style() {
   $base = get_stylesheet_directory_uri();
   wp_enqueue_style('child-theme-style', get_bloginfo( 'stylesheet_directory' ) . '/outreach-pro-child/child-style.css', array(), CHILD_THEME_VERSION);
}
add_action('wp_enqueue_scripts', 'my_theme_child_style', 25 );

[Brad Dalton]

Try using

!important

to override the plugins CSS. https://css-tricks.com/when-using-important-is-the-right-choice/

---

Tutorials for StudioPress Themes & WooCommerce.

[okieman]

Brad, I like the simplicity of that idea. I tried it, and Google Chrome inspector tells me it is still getting the padding value from the plug CSS. Here's my custom CSS follow by the test page ...

#tribe-events-content{margin-bottom:48px;padding:2px 17px 2px 18px !important;position:relative}

CSS override attempt

[okieman]

Note:
I have also now posed this question to the folks who make the plugin (Modern Tribe).

[okieman]

The plugin makers have referred me back, since calling a child theme stylesheet is a function of the parent theme. They did at least suggest this cleaner version of my code, but again it is not working. I have tried putting this alone as the functions.php file in the child directory, and appending this snippet to the functions.php in the parent dir ...

function my_theme_child_style() {
wp_enqueue_style( 'parent-theme-style', get_template_directory_uri() . '/style.css', array() );
wp_enqueue_style( 'child-theme-style', get_stylesheet_directory_uri() . '/child-style.css', array( 'parent-theme-style' ) );
}
add_action('wp_enqueue_scripts', 'my_theme_child_style', 25 );

[okieman]

Solved.
Not a PHP problem. This turned out to be A) Exact wording of the child-theme CSS header, and B) Double-checking the admin dashboard to make sure there were no indications that the child-theme had been designated as "broken". (Or that the parent theme needed to be installed.)

Thanks all!

[Author]

Posts