Community Forums › Forums › Archived Forums › Design Tips and Tricks › Loading style sheet from child theme folder w/php
Tagged: enqueue stylesheet
- This topic has 13 replies, 3 voices, and was last updated 7 years, 5 months ago by
okieman.
-
AuthorPosts
-
February 4, 2016 at 3:52 pm #178336
okieman
MemberI'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.
http://www.tulsaunity.com/<?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); ?>
February 4, 2016 at 7:00 pm #178342Brad Dalton
ParticipantFebruary 6, 2016 at 4:45 pm #178488okieman
MemberA lot of information at that link. I'll tinker and report back!
March 12, 2016 at 5:57 pm #181292okieman
MemberI 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?
March 13, 2016 at 8:59 am #181334Victor Font
ModeratorDid 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?March 13, 2016 at 9:04 pm #181372okieman
MemberMy 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?
March 13, 2016 at 9:29 pm #181375Victor Font
ModeratorIf 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?March 15, 2016 at 2:40 pm #181475okieman
MemberVictor 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.
March 23, 2016 at 6:10 pm #182136okieman
MemberPartial 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 );
March 23, 2016 at 8:15 pm #182141Brad Dalton
ParticipantTry using
!important
to override the plugins CSS. https://css-tricks.com/when-using-important-is-the-right-choice/
March 24, 2016 at 1:32 pm #182175okieman
MemberBrad, 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}
March 24, 2016 at 1:58 pm #182180okieman
MemberNote:
I have also now posed this question to the folks who make the plugin (Modern Tribe).March 29, 2016 at 7:51 pm #182498okieman
MemberThe 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 );April 4, 2016 at 3:12 pm #182916okieman
MemberSolved.
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!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.