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.
Related
WordPress 5.0.3
I'm reading my first book on WordPress.
I'm just creating a child theme of an existing Twenty Seventeen theme.
In the book it is said for me to create functions.php and paste this:
add_action( 'wp_enqueue_scripts', 'wpquickstart_enqueue_styles' );
function wpquickstart_enqueue_styles() {
wp_enqueue_style( 'twenty-seventeen-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'wpquickstart-style', get_stylesheet_directory_uri() . '/style.css',
array('twenty-seventeen-style') );
}
Well, being framed in it works, which is strange to me.
What bothers me is the first dash in twenty-seventeen-style.
I mean this also works (attention to twentyseventeen-style, to dashes in it):
<?php
add_action( 'wp_enqueue_scripts', 'wpquickstart_enqueue_styles' );
function wpquickstart_enqueue_styles() {
wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'wpquickstart-style', get_stylesheet_directory_uri() . '/style.css',
array('twentyseventeen-style') );
}
?>
Could you tell me whether dashes are ignored? Where can I read some documentaion on this moment?
Since you're passing a second argument to wp_enqueue_style(), it's defining the ha dle as that source. If you registered a handle and source with wp_register_style() previously, then you wouldn't need to pass a source argument to wp_enqueue_style() as long as you called the handle identically.
Otherwise, since you're defining the handle and the source at the same time, it's effectively arbitrary. However if you ever need to dequeue, modify, add inline styles to, etc, your enqueued style - you'll so it by using the handle you've passed here (with or without the dashes).
Edit: To simplify a little bit:
When you write:
wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
You, Michael, are adding a stylesheet named twentyseventeen-style that's located at /template/style.css.
You can name it whatever you want, and it will still load. For instance, this will work as well:
wp_enqueue_style( 'blahblah-michaels-2k17-style', get_template_directory_uri() . '/style.css' );
That first argument is the name YOU are giving the stylesheet located at the second argument's location.
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
I want to use the jQuery-ui .accordion function in a WordPress child theme. So far I've:
created a js file in my child theme directory and put it in no-conflict mode:
jQuery(document).ready(function($) {
$( "#accordion" ).accordion();
});
Enqueued the script into my functions.php file: function myChild_scripts() {
wp_enqueue_style( 'onepage-child-style', get_stylesheet_uri() );
wp_enqueue_script( 'onepage-child-accordion', get_stylesheet_uri() . '/js/accordion.js', array('jquery-ui-accordion', 'jquery'), 20150507, true );
Added the add_action function: add_action( 'wp_enqueue_scripts', 'myChild_scripts' );
However, the .accordion function is also dependent on jquery-ui.css. Don't I also need to include that in the enqueueing process? I can find no documentation that discusses inclusion of this file - or whether it's already part of WP core.
You can enqueue a stylesheet in the functions.php file. It may be something like this (assuming your file is in your theme directory, inside a css folder).
function my_styles()
{
wp_register_style( 'jquery-ui-style', get_template_directory_uri() . '/css/jquery-ui.css', 'all' );
wp_enqueue_style( 'jquery-ui-style' );
}
add_action( 'wp_enqueue_scripts', 'my_styles' );
Here's some reference.
I've been trying with no success to add a new stylesheet to my template. It's my first time creating a wordpress template. I'm using underscore and this is what I have in functions.php:
style.css is the stylesheet shipped with the template starter.
wp_enqueue_style( 'name-style', get_stylesheet_uri() );
I just want to add foundation-icons.css, foundation.min.css and custom.css. Any help? Thanks.
This is how I do it in all of my templates
/* Enqueue Scripts
-----------------------------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'template_enqueue_scripts' );
function template_enqueue_scripts() {
wp_register_style('Sub-CSS', get_template_directory_uri() .'sub-style.css');
wp_enqueue_style( 'Sub-CSS');
}
This is the best way to my knowledge, like I said, I always do it this way. It works flawlessly, and I have never had a problem doing it this way.
Edit
You will notice that no one else uses wp_register_style, and the wp_register_style is the safest way to setup your style for actual enqueue.
Make sure that you wrap the wp_register_style & wp_enqueue_style in a function.
Try this code :
<?php
add_action( 'wp_enqueue_scripts', 'safely_add_stylesheet' );
/**
* Add stylesheet to the page
*/
function safely_add_stylesheet() {
wp_enqueue_style( 'prefix-style', plugins_url('style.css', __FILE__) );
}
?>
I am having an issue with loading some javascript in a child theme I am creating for one of my themes.
Essentially I do:
get_stylesheet_directory() . '/path/to/javascript.js'
which is what your suppose to do, But , as per the documentation, I am getting:
mysite.com/dev/home/path/to/wordpress/path/to/theme/path/to/js.js
which is causing it to not find the required file. because home is at the root of the site.
any ideas on what I can do to fix this?
get_stylesheet_directory() returns a server path. I'm pretty sure you want:
get_bloginfo('stylesheet_directory');
That will return a URL of your stylesheet directory in relation to your Wordpress Installation so you can load external assets like Javascript files that reside in your theme.
I think this will do the trick:
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/path/to/javascript.js"></script>
It's better to enqueue scripts and styles the WordPress way.
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Put this in functions.php
add_action( 'wp_enqueue_scripts', 'enqueue' );
function enqueue() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'theme-style', get_stylesheet_directory_uri().'/css/theme.css' );
wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri().'/js/theme.js' );
}