this is my test page e-commerce shop: https://shop.amir-rahbaran.com/
this is the parent style:
https://colorlib.com/shapely
functions.php:
<?php
function my_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 ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
The shapely-master (parent) and shapely-child are both located in the theme folder (same hierarchy).
This is my shapely-child style.css:
/*
Theme Name: Shapely-Child
Template: shapely
Theme URI: https://colorlib.com/wp/themes/shapely
Author: colorlib - modified by Sandra J. / Amir R.
Author URI: https://colorlib.com/
Description: [...]
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shapely
[ ... ]
*/
To make it work you can try replacing the code of function my_theme_enqueue_styles with the following modified code.
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array('shapely-bootstrap') );
wp_dequeue_style('shapely-style');
wp_enqueue_style( 'shapely-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
To resolve the issue please make change in the function my_theme_enqueue_styles as i have described above and then change the following line in the style.css file of your child theme
Template: shapely
with the following line.
Template: shapely-master
In this way, it will not work :
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/shop.amir-rahbaran.com/wp-content/themes/shapely-master/style.css' );
Because the result of the enqueue is an incorrect stylesheet path :
../wp-content/themes/twentyfifteen/shop.amir-rahbaran.com/wp-content/themes/shapely-master/style.css
After checking your website source code with inspection tool, it seems is working.
I have tested too the following function, and it works:
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
Still not working for you?
Related
I've searched through several questions and still having trouble. I'd really appreciate some expertise from y'all. =)
The child theme created and activated on my WordPress site seems to be enacting no changes.
I know essentially zero PHP but trying to use the functions.php instead of #import since it's supposed to be a better load time.
Here's what I have in my child theme's directory style.css (first) and functions.php (second)
/*
Theme Name: Quest-Child
Description: No Coward's Quest Child Theme
Author: Jason from No Coward
Author URI: http://www.nocoward.com
Template: quest
Version: 1.0
*/
/* add padding to site description */
.site-description {
padding-top: 15px;
padding-bottom: 30px;
}
.body {
background: red;
}
/* can be found on "Services" page. Is the first ID within the <p> element */
#cc-m-12571703896 {
background: blue;
}
<?php
function my_theme_enqueue_styles() {
$parent_style = 'quest-all-css'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
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 ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
WordPress recognizes the child theme and has allowed me to activate it successfully.
The stuff in CSS is what I've tried to use for testing my child-theme laying down my changes. Nothing is appearing.
Again, I have zero PHP knowledge. Based on the official WordPress "How to create a child theme", I copied and pasted the code above and tried to fill in the "parent-style" value based on their instructions.
Here's what I saw on my parent theme I could possibly be using for the functions.php "parent-style"...
// Enqueue required styles
wp_enqueue_style( 'quest-bootstrap', get_template_directory_uri() . '/assets/plugins/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style( 'smartmenus', get_template_directory_uri() . '/assets/plugins/smartmenus/addons/bootstrap/jquery.smartmenus.bootstrap.css' );
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/assets/plugins/font-awesome/css/font-awesome.min.css' );
wp_enqueue_style( 'animate-css', get_template_directory_uri() . '/assets/plugins/animate/animate.css' );
wp_enqueue_style( 'slit-slider', get_template_directory_uri() . '/assets/plugins/FullscreenSlitSlider/css/style.css' );
wp_enqueue_style( 'colorbox', get_template_directory_uri() . '/assets/plugins/colorbox/colorbox.css' );
wp_enqueue_style( 'Quest-style', get_stylesheet_uri(), array(
'quest-bootstrap',
'smartmenus',
'font-awesome',
'animate-css',
'slit-slider',
'colorbox'
) );
...
// Enqueue required styles
wp_enqueue_style( 'quest-all-css', get_template_directory_uri() . '/assets/css/plugins-all.min.css' );
wp_enqueue_style( 'Quest-style', get_stylesheet_uri(), array( 'quest-all-css' ) );
// Enqueue required scripts
wp_enqueue_script( 'quest-all-js', get_template_directory_uri() . '/assets/js/quest-and-plugins.js', array(
'jquery',
'masonry'
) );
What am I missing?
Thanks in advance!
-Jason
I managed to fix this. Here's the PHP code I found on the help forum. I think the "Portfolio" bit may be extraneous, but it's working so I'm leaving it there just in case.
<?php
add_action( 'wp_enqueue_scripts', 'quest_child_enqueue_styles' );
function quest_child_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_filter( 'quest_plus_template_content-portfolio', 'quest_child_template_portfolio' );
function quest_child_template_portfolio(){
return get_stylesheet_directory() . '/content-portfolio.php';
}
Caveat to this solution: There is a weird thing happening. I put in some styling to make something "Background: red" so I could test if the child theme was working, and despite deleting that bit of code, it is still appearing.
For now I'm chalking it up to slow hosting but be aware that's happening if you follow this solution.
Hope this helps someone else! =)
Jason
My child-theme stylesheet doesnt seem to be working. I think the script needs to change to load it last but I'm not sure how to change the priority.
Website url
This the functions.php file:
<?php
function thim_child_enqueue_styles() {
// Enqueue parent style
wp_enqueue_style( 'thim-parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'thim_child_enqueue_styles', 100);
You should enqueue also 'parent-style' and set it as a dependency of 'child-style'. It will ensure that the child theme stylesheet loads after it. So rewrite your enqueue function accordingly:
function my_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 ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
Take a look at the documentation.
I have created a file structure in the same format as my parent theme. My parent theme is called Alpine and within Alpine there is a functions.php and style.css file. There do not appear to be any additional style.css files.
I have created a directory called Alpine-child and within that I have created a functions.php and style.css file.
I can't work out why any changes I make to the child style.css are not implemented but they are when I make the same changes in parent style.css
This is my child style.css:
/*
Theme Name: Alpine Child
Theme URI: http://www.creative-ispiration.com/wp/alpine/
Description: My first child theme, based on Alpine
Author: MilkshakeThemes
Author URI: http://themeforest.net/user/milkshakethemes
Template: Alpine
Version: 1.0.0
Tags: one-column, two-columns, right-sidebar, fluid-layout, custom-menu, editor-style, featured-images, post-formats, rtl$
Text Domain: alpine-child
*/
This is my child functions.php file:
<?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' );
}
?>
Take a look at your <head> tag. More importantly look at the order of your stylesheets.
The styles from your child theme are being added first and then all the styles from your parent theme. This will cause the styles from the parent theme to override your child theme styles.
You can change the priority of your my_theme_enqueue_styles function to run after the parent by using the third parameter of add_action. This will enqueue your child theme styles last and allow the CSS to work as expected.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
?>
This worked for me:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'twentyseventeen-style';
$child_style = 'twentyseventeen-child-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( $child_style, get_stylesheet_uri() );
}
?>
and none of the other answers did.
After updating from Divi 4.4.1 to Divi 4.10.8 the Child theme parent CSS was not working. I did some research om my website and realized that Divi style.css file was empty with only header info (after the update) and that the code needed to show the CSS was now in a different file (style-static.min.css) I changed the file name in my Child Theme functions.php file from style.css to style-static.min.css. This solved my problem and the CSS is working.
See underneath the code I used:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11);
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style-static.min.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
You need to enqueue the child theme style.css so your function should be:
function my_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 ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
Take a look at the documentation.
Craig Hick's answer worked for me and I also realize why my default code from the Wordpress documentation wasn't working.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
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 ),
wp_get_theme()->get('Version')
); }
In my case, the line wp_get_theme()->get('Version') returned 1.0.0 which was the same version number as the parent theme.
So I just changed the child theme css version number to 1.0.1 and it worked.
My child theme currently has the following code:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
//load child theme custom CSS
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
?>
Previously, the code I used only had the first part before //load child theme custom CSS part, and it was unable to get the custom CSS. I have added the code #jrod suggested above and it worked. I need to confirm with you guys that my child theme code is complete, and I don't have to add anything else. I am not sure if this also fetches the custom JS files I have in the child theme JS files.
<?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' );
}
?>
Just remove version from comment in child them style.css it's working for me in wordpress 6.1
I am using this theme:https://dessign.net/sold-responsive-woocommerce-free/
and I have created a child theme. I set it up by adding
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() .
/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
but certain things are not being applied like the sticky headeror mobile menu. Is there anything else I need to include?
Your child theme's stylesheet will usually be loaded automatically. If it is not, you will need to enqueue it as well. Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it. See here a more detailed discussion :
<?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' );
?>
https://codex.wordpress.org/Child_Themes
Trying to create a child theme from wordpress twentyfifteen theme.
Wordpress codex says
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 use
wp_enqueue_script() in your child theme's functions.php.
The function which is responsible of loading styles and javascript files of twentyfifteen is
function twentyfifteen_scripts() {
// Add custom fonts, used in the main stylesheet.
wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );
// Add Genericons, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );
// Load our main stylesheet.
wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
// Load the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );
// Load the Internet Explorer 7 specific stylesheet.
wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );
wp_enqueue_script( 'twentyfifteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20141010', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
if ( is_singular() && wp_attachment_is_image() ) {
wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141010' );
}
wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141212', true );
wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
'expand' => '<span class="screen-reader-text">' . __( 'expand child menu', 'twentyfifteen' ) . '</span>',
'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
) );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
So after copy it from parent's functions.php and paste it in child's functions.php what i did :
1.Changed the function name.
2.Replaced the line
wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
with
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
3.Removed code for javascript files.
Do i also remove other style sheets which are not main style sheet of parent theme?
How do i include another stylesheet properly which are in the child's theme ?
(do i just use wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' ); ?)
You don't need much to make a child theme, most of the code in your question is not needed:
create a folder in your 'themes' directory and name it whatever you'd like. twentyfifteenchild will make it clear
create a file called style.css and put the following at the top:
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
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: twenty-fifteen-child
*/
Create a functions.php file and paste the following into it:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
Weird, I can answer but not comment yet... I also want to know why people use the #import in the CSS, when WordPress specifically says this is the way:
The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it. See here a more detailed discussion :
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_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')
);
}
I actually learned now that I didn't always do the dependencies thingy... noob/designer fail or bad documentation fail... ?!?
This is used when you want to launch both stylesheets i.e parent theme stylesheet and child theme style sheet. Replace 'parent-style' in this with your parent theme main stylesheet name e.g 'twenty-twenty-one-style' which you can find in scripts function under functions.php