I am making a new theme for WordPress using guide from this site https://www.taniarascia.com/developing-a-wordpress-theme-from-scratch.
The writer of tutorial the says that using <link href="" rel="stylesheet">
is not the most correct way to load scripts.
I am thinking to use wp_enqueue_style() and add_action() on function.php to load the .css file. I have already had three files, index.php, function.php, and style.css in my theme directory but I can't seem to make it work.
Below is the code I use to load the .css file:
<?php
function enqueue_my_styles(){
wp_enqueue_style('style', get_template_directory_uri().'/style.css');
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
?>
Is your functions file named functions.php or function.php? This should be functions.php and is fundamental.
Your code looks correct, but could actually be shortened a little as in the twentyfifteen Wordpress template;
function twentyfifteen_scripts() {
// Load our main stylesheet.
wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
You'd use get_template_directory_uri() for loading a custom file within the template directory.
function my_custom_styles() {
wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/custom-style.css');
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );
Related
I actually am a newbie to wordpress, i am converting an html website to wordpress template. There are alot of js file in my js directory but all of them are not loaded on every page. What I want to know is that do we have to register all js files in functions.php and use wp_head in our head tag to load them?
For theme you need to put below code in your functions.php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' )
If you are creating your custom plugin below code will help you.
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
For more understanding of wp_enqueue_script read below two links :
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/
As you are beginner i can say wpbeginner will be good site for you they give the all understanding very clearly
I am pretty new to WordPress development. I read that it's better to use wp_enqueue_style and do_action inside the functions.php file rather than linking CSS files directly as I would when not using WordPress.
Why this is a best practice? What are its advantages?
If you have activated child theme then use get_template_directory_uri() functions.
If you have activated parent theme then use get_stylesheet_directory_uri() functions.
get_template_directory_uri will always refer to the parent theme folder for assets.
get_stylesheet_directory_uri will refer to the "current" theme folder for assets (which could be the parent or the child, depending on where it is called).
Child theme example:
wp_enqueue_style( 'my_child_styles', get_stylesheet_directory_uri().'/style.css' );
Parent theme Example
wp_enqueue_style( 'my_parent_styles', get_template_directory_uri().'/style.css' );
Method-1
// load css into the website's front-end
function mytheme_enqueue_style() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
Method-2
// Add this code in your functions.php
function add_stylesheet_to_head() {
echo "<link href='".get_stylesheet_directory_uri()."/style.css' rel='stylesheet' type='text/css'>";
}
add_action( 'wp_head', 'add_stylesheet_to_head' );
Because wp-enqueue-style adds scripts/styles to the queue.
Registers the style if source provided (does NOT overwrite) and enqueues.
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 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 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' );
}