I have WordPress theme with a child theme. After editing and saving the child style sheet, I don't see the changes. Looking at the source code, the style sheet is loaded but has this ver at the end: style.css?ver=4.9.7
Now, the styles show when I load style.css but shows an empty file with comments (the original file when first got the theme) style.css?ver=4.9.7
I understand that it is encouraged to have custom styles in the child theme but, then why doesn't WordPress support this?
Any advice or help is appreciated. Thanks.
This version added on function.php file, check it first
Better enqueue style on function.php like this
function child_themes_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array(), wp_get_theme()->get('Version'));
}
add_action( 'wp_enqueue_scripts', 'child_themes_styles' );
Related
I want to create a WordPress Plugin where I want to add some css, and upon activation, those css will be in effect and be viewing in the website. Upon deactivation, the css will also be out of effect.
Any how I can do that? Or any documentation I can take help from?
You can follow Plugin Handbook for creating a plugin https://developer.wordpress.org/plugins/.
create a CSS file in plugin directory then upon plugin activation hook you can enqueue the CSS file using action 'wp_enqueue_style'.
You can add this to your main file to load your css file:
function add_my_css() {
$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_style( 'style', $plugin_url . "/css/plugin-style.css");
}
add_action( 'wp_enqueue_scripts', 'add_my_css' );
Then create your plugin-style.css file and write your css.
Hope this helps
I've been trying to develop a simple child theme to tweak a few things on my website which currently uses the vantage theme. So far, I've had little success.
The two files (style.css and function.php) I've created only have a few lines of code, but I'm still unable to pinpoint the problem.
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles',
PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style',
get_template_directory_uri().'/style.css' );
}
?>
/*
Theme Name: vantage-child
Template: Vantage
*/
body {
color:aqua;
}
I suspect the problem is with the enqueueing in the PHP file, but all configurations that I have found on the internet and the wordpress codex don't seem to work on my site. When I activate the child theme created by my code, the site reverts to ONLY the styles in my child theme's stylesheet, instead of falling back on the parent theme's stylesheet when no styles are specified in the child theme.
For child theme you can first need to create folder with themename-child.
Then you have to create style.css file.
Put the following lines in your style.css
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://yourwebsite.com/twentyfourteen-child/
Description: My first child theme, based on Twenty Fourteen
Author: Joshi Niket
Template: twentyfourteen
Text Domain: twenty-fourteen-child
*/
Then create functions.php in child theme folder and put the following code.
<?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' );
}
?>
Please check following link to make child theme with proper steps, i have added few here to guid you.ReferenceLink
Thank you ,I hope this helps you.
Please install and create child theme by using One-Click Child Theme
plugin. This is very easy to use
I've followed these two links of a "tutorial" to set up a WP page with the use of git and composer.
https://deliciousbrains.com/storing-wordpress-in-git/
https://deliciousbrains.com/using-composer-manage-wordpress-themes-plugins/
My question:
By looking at the network tab of the developer tools on chrome I see that the bootstrap stylesheet gets called as last one, and so its overwrite the theme styles and my child-theme styles.
But I want the following order:
first: bootstrap styles, second parent-theme styles, and third child-theme styles.
How do I accomplish that goal without touching the parent-theme directly?
Or do I get something wrong and this order, as it is now is intended?
You have to use dependency parameter of wp_enequeue_style function : Filenames are used as example, please change according to your need.
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
/** Enqueue scripts and styles. **/
function mytheme_scripts()
{
wp_enqueue_style( 'bootsrap-styles', get_template_directory_uri() . '/css/bootstrap.min.css','', 'v1' );
wp_enqueue_style( 'main-css', get_template_directory_uri() . '/css/main.css',['bootsrap-styles',''], 'v1' );
}
You can do this through your theme's functions.php
add_action('wp_enqueue_scripts', function(){
wp_enqueue_style('mainstyle', get_template_directory_uri() . '/main.css' );
}, 99);
Wordpress will place the stated .css file in your header and giving a 99 priority, which means it will add it later than the rest. You can do this for each of the desired .css files and maintain your own preferred order.
A WordPress website loads a lot of things before the main css file. The stylesheet was previously hard-coded in the head in the header.php file, I have enqueued it in the functions.php file, but it is possible to give this file priority now so it loads first before everything else? As it is now, it loads last and it's very visible for the users.
function twentyfourteen_style(){
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/css/styles.css' );
}
add_action( 'wp_enqueue_scripts', 'twentyfourteen_style' );
try to use dependency parameter in enqueue/register style function (see https://codex.wordpress.org/Function_Reference/wp_register_style). Set dependency on styles which you want to load after main style OR choose one first style after you can load main style as dependency.
EDIT: or add priority to your action
add_action( 'wp_enqueue_scripts', 'twentyfourteen_style', 1 ); // added 1 as priority 1, everything else will be loaded after this action
I am creating a child theme for an existing theme. When setting up I noticed a few layout changes for the child theme cf the parent theme. Eventually I have worked out that this is due to the header pulling in the css files in a different order.
In the parent it goes:
pile of css files
theme styles.css
In the child them it goes:
theme styles.css
pile of css files
child styles.css
I want to get the order in the child them same, but just have the child one added on at the end,
In my child functions.php I have this.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
I have tried adding an large index to the end of the add_action call but that just messes things up even more.
So, how can I get the files in the right order please
Your add_action function has a 'priority' argument you can use
http://codex.wordpress.org/Function_Reference/add_action
you can pass an arg on add_action for priority like
add_action( 'wp_enqueue_scripts', 'pile_name_scripts', 5 );
With 5 being loaded before the default priority of 10.