Wordpress Child theme for html5blank - php

I'm having so much trouble setting up a child theme of the html5blank theme. To the point where I'm doing a fresh install of the parent theme and starting from scratch - and writing this post as I go through it! Basically upon creating the child them I now need to load my custom /css/main.css file - and it's not having it! Description of setup process follows:
I've dropped a freshly downloaded html5blank folder into /themes/ and activated it. After that I have created another folder within /themes/ called "html5blank-child". Within that I've created a new, blank style.css and functions.php.
Within style.css I have the following:
/*
Theme Name: HTML5 Blank Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: HTML5 Blank Child Theme
Author: My Name
Author URI: http://myportfolio.com
Template: html5blank
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: html5blank-child
*/
And within functions.php I have:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
With all that done, I active my child theme. With all that done, everything still appears to be working. As I've created static templates of the website, I drop my 'img', 'css', 'font' and 'js' folders into the html5blank-child.
Now my 'actual' CSS file has a path of: html5blank-child/css/main.css
I need to load this file in. I was told to adjust my functions.php CSS path to: /css/main.css ...but it won't load the file at all. I've also tried using get_stylesheet_directory_uri() instead of get_template_directory_uri() as was advised by someone else but no luck!
The reason I've documented the process like this is, last time I got to this point if I went to access the Wordpress admin using http://localhost:8888/websitename/admin it won't redirect to wp-admin like it normally does. Also when I went to save a post, I've get a blank page. Thankfully that isn't happening this time so I guess it's a good (better) start but now I need to get my files loaded in.
Hope someone can help! :)

You need to import the style.css from main theme first inside the style.css of the child theme.
Use #import to import the css file first.
Also remove the parent-style from functions.php of child theme and then include your html5blank-child/css/main.css like the following given,
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-main', get_stylesheet_directory_uri() . '/css/main.css' );
}

Load the parent themes style.css first, then load your child themes CSS like this:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-main', get_stylesheet_directory_uri() . '/css/main.css', array('parent-style') );
}

Related

Wordpress functions.php style version won't update

I know this has been brought up a million times on here, but I have followed various solutions to no avail. My child theme stylesheet just won't change. It actually seems like any changes I make to the child functions.php don't take effect.
This is the closest post to my issue is this one but the answer about cache busting hasn't worked for me. I am kind of thinking it has to do with how the parent theme enqueues child theme styles automatically, but I don't know how to override that.
functions.php styles enqueue:
// Load styles:
add_action( 'wp_enqueue_scripts', 'main_styles' );
function main_styles() {
//* Bootstrap CSS
wp_enqueue_style('bootstrap-style', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
//* Parent CSS
wp_enqueue_style( 'corporate-plus',
get_template_directory_uri() . '/style.css' );
//* Child theme CSS
$cache_buster = date("YmdHi", filemtime( get_stylesheet_directory() . '/style.css'));
wp_enqueue_style( 'yunev-corporate-plus',
get_stylesheet_directory_uri() . '/style.css',
array( 'corporate-plus '),
$cache_buster
);
}
child theme style.css theme comments:
/*
Theme Name: Yunev Custom
Description: Yunev Custom - Corporate Plus Child Theme
Template: corporate-plus
Version: 1.1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: yunevcorporatepluschild
*/
(I removed the author and such for this post)
I customized this child theme a while ago and the custom styles are working, but any changes I make now don't propagate. I have cleared cloudflare cache, cache plugin, everything I can think of. It's driving me crazy.
The child style version that I get in the browser is always '1.0.1'. Any troubleshooting tips would be much appreciated.
Just try to rename your stylesheet or reupload your theme.

Cached version of child theme css loading after updated css file?

I'm building a wp child theme of ThemeGrill's ColorMag. When I load the page, my child theme css file is loaded, but there is also a file called style.css?ver=5.3.2 loaded after it. When I look at the code under elements in the dev tools, it appears to be a cached version of my style.css file.
I've deleted the child theme folder and reuploaded all of my files but I see the same result. I also have wp-cache level set to 0
Also I should note, I'm new to wp and couldn't figure out how to enqueue the child theme properly, so style.css is loaded via an href in my header.php. my functions.php looks like this:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
Again, I'm new so any best practices you have would be much appreciated!
Site is here.

Wordpress child theme style.css has stopped working

really hoping someone can please help me! I just updated the Divi parent theme on my Wordpress site (www.ellymacdonalddesign.com), and the child CSS theme seems to have stopped working.
I've tried the solutions from this question, but they do not seem to work for me:
Wordpress child theme style.css not working
My child functions.php file is currently:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'divi-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( $child-style, get_stylesheet_uri() );
}
?>
Would really appreciate any guidance please, thank you in advance,
Elly
Is your variable $child-style have any value? According to document, the handle name (first parameter) is required. That's why your child theme still not working.
Try below code to see if it's work:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'divi-style';
$child_style = 'divi-style-child';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( $child_style, get_stylesheet_uri() );
}
Changing the css child theme version number helped solve the problem on my website.
My child theme was working correctly until I decided to change some css rules in the style.css file from the Wordpress 'Theme Editor' interface. I remarked that no changes appeared on the website, although the css was obviously loaded in the header and also I purged all cache.
I tried solutions of the following question but I think this is for new child theme installation, not an already working one: Wordpress child theme style.css not working
I decided to change the version number of my child theme, and the modifications were finally taken into account.
/*
Theme Name: Chromatic-child
Template: chromatic
Version: 1.1.0
*/

Multiple css files in Wordpress child theme

I made a child theme for 'Square Theme' in Wordpress and my 'functions.php' code in my child theme looks like this:
<?php
function square_child_enqueue_styles() {
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', 'square_child_enqueue_styles' );
?>
The thing is, I also want to edit another css file, that its path in the parent theme is "/css/owl.carousel.css".
So, should I create an "owl.carousel.css" file in my child theme too? And also, which code should I add to my child-theme's "functions.php"?
Depends whether that owl css is loaded in the child theme too and what you mean by 'edit'. Child theme normally inherits all the parent php template files, and the parent functions.php but not the base css. So normally one has to enqueue the parent css if one wants to use it. I imagine in this case if it's not the main css it might be being loaded anyway? (View source to check)
1) If you don't want it at all, you could use wp_dequeue_style to get rid of it.
or
2) if by 'edit' you mean you just want to make minor modifications, you could add those minor mods to override the owl css in your own stylesheet.

How to load up a CSS file in a Wordpress child theme that's nested in a different folder and name?

This is probably easy but I just want to make sure I'm doing it correctly. Basically I've been making a bunch of Wordpress sites using child themes and usually the style.css is in the root folder of the theme and I've been using this in my functions.php file
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
While this file exists in the parent theme I'm using, it's blank and I realized the CSS file being used was a different file name and nested in
\THEME-NAME\framework\css\site\stacks\THEME-CSS.css as opposed to just
THEME-NAME\style.css
So for the child theme do I have to recreate that folder structure and place a same named THEME-CSS.css in the same folder or do I just call it style.css and put it in the child themes root folder like it normally would be? Any other advice would be helpful. Thanks.
To add a stylesheet when in a child theme, these are the two options/behaviors:
// This will point to style.css in child theme
wp_enqueue_style( 'my_child_styles', get_stylesheet_directory_uri().'/style.css' );
// This will point to style.css in the parent theme
wp_enqueue_style( 'my_parent_styles', get_template_directory_uri().'/style.css' );
As you said, when using get_template_directory_uri() the path will always point to the parent theme folder. Use get_stylesheet_directory_uri() to point to the current / child theme folder, if applicable.

Categories