I have this code which i am using for custom theme , but it is not linking css file, can someone let me know, what is wrong in it?
function delna_enqueue_style() {
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/css/main.css');
}
add_action( 'wp_enqueue_scripts', 'delna_enqueue_style' );
Use below code.
function load_parent_stylesheet() {
wp_enqueue_style( 'parent-styles', get_template_directory_uri() . '/css/main.css');
}
add_action( 'wp_enqueue_scripts', 'load_parent_stylesheet' );
Hope it will help for you.
Related
I have created a child theme and have created a page-splash.php in the child theme and have also created a page-splash.css for this page, but somehow I am unable to load the page-splash.css for the page-splash.php file.
This is my code in the functions.php ( in the child theme folder)
<?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' );
}
function splash_enqueue_style() {
wp_enqueue_style( 'page-splash', get_template_directory_uri().'/css/page-spash.css' );
}
add_action( 'wp_enqueue_scripts', 'splash_enqueue_style' );
?>
I'd really appreciate your help on this.
What am I doing wrong??
I am working in localhost and will transfer these files to a working domain after things are working properly.
Couple of things, starting with the simplest -- You've got a typo in your page-splash.css file path. You've got it typed as page-spash.css
Additionally, there's probably no need to call two separate functions for this. You could enqueue both of those styles in one call like so:
function splash_enqueue_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
if(is_page_template('page-splash.php'){
//Path to your template.. if it's in a dir, include it before the file
wp_enqueue_style( 'page-splash', get_template_directory_uri().'/css/page-splash.css' );
}
}
add_action( 'wp_enqueue_scripts', 'splash_enqueue_style' );
Well, I kept on searching for answers and I have found it.
It seems that using wp_head() is important if you want to load all javascript
or css files and it started to work when I did that.
I'm using a child theme and need to enqueue the stylesheet for a slider. The css file is located in a folder in the parent theme directory, i.e. /parent-theme/css/flexislider.css
I created the child theme using a plugin which added a functions.php file to the child theme directory with the following code:
<?php
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 assume I have to add another entry to the above function referencing flexislider.css but I'm not quite sure how to do it.
*UPDATED
Based on what you added to the question, you should be able to just add to that function and register the stylesheet. The full function would look like this:
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')
);
wp_enqueue_style('flex-slider',get_template_directory_uri() . '/css/flexislider.css');
}
I don't have much experience with child-themes, but following the model in that function, I think get_template_directory points to the parent theme and not the child theme, which you said the flexislider code is located
https://github.com/320press/wordpress-bootstrap
How do I add custom.js to this theme? I'm not very good at gruntjs. Let's say it's path is library/js/custom.js
Here's the gruntfile: https://github.com/320press/wordpress-bootstrap/blob/master/Gruntfile.js
Thank you!
Why do not you use enqueue to embed script into your theme. Create a function in function.php file as
/**
*Enqueue styles.
*/
function add_scripts() {
wp_register_script( 'customScript', get_template_directory_uri() . 'library/js/custom.js', array(), '1.0.0', true );
// here it is just example of path. you can use yours.
wp_enqueue_script( 'customScript' );
}
add_action( 'wp_enqueue_scripts', 'add_scripts' );
I have a page that I want to apply custom css file, but I am having difficulty loading the custom css file for my page 'homepage'. If anyone could help me out, it would be highly appreciated. thank you!
This part works:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
}
this part does not :(
function addcssAndScripts()
{
if ( is_page( 'homepage' ) )
{
wp_enqueue_style( '/stylehome.css', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'addcssAndScripts');
You're misunderstanding how wp_enqueue_style should be used.
In the example below the first argument I pass in is a handle, 'style-home'. The second argument is the path to the file.
function wpse_load_scripts_styles() {
if ( is_page( 'homepage' ) ) {
wp_enqueue_style( 'style-home', get_stylesheet_directory_uri() . '/stylehome.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse_load_scripts_styles' );
get_stylesheet_directory_uri() gets the URL to your child theme folder. get_template_directory_uri() which is used in the first block of code in your question gets the path to the parent theme directory. Select the correct function based on where the file is located.
My guess would be that you've set the page, homepage, as your front page therefore you may want to replace the conditional with is_front_page().
Replace:
if ( is_page( 'homepage' ) ) {
With:
if ( is_front_page() ) {
Finally get_stylesheet_uri() as used in the second block of code in your question will return the URL of the child theme's stylesheet (or the parent theme if you don't have a child theme setup).
Further reading: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Will this work for you?
function addcssAndScripts()
{
if ( is_page( 'homepage' ) )
{
wp_enqueue_style( 'child-home-style', get_stylesheet_directory_uri . '/stylehome.css');
}
}
add_action( 'wp_enqueue_scripts', 'addcssAndScripts');
http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri
http://codex.wordpress.org/Function_Reference/wp_enqueue_style
I am trying to get my head round the wp_add_inline_style() function in WordPress.
//setting inline css.
function my_styles_method() {
wp_enqueue_style(
'custom-style',
get_template_directory_uri() . '/css/custom_script.css'
);
$color = get_theme_mod( 'my-custom-color' ); //E.g. #FF0000
$custom_css = "
.mycolor{
background: {$color};
}";
wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
I understand most of it but I am not understanding this bit:
wp_enqueue_style(
'custom-style',
get_template_directory_uri() . '/css/custom_script.css'
);
Is this a dependency? or a blank css file so that code is written to it?
If its dependant then why? I just want to load custom css into the theme so it can be more customisable.
Thanks
Answer to my own question is, its a dependency :)