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__) );
}
?>
Related
I'm creating a new custom Wordpress Theme and I'm trying to add Boostrap CSS to the admin area, but it's only working when I add style.css to the admin area as well. The Boostrap js it is getting add to the admin area but the CSS is not, how do I add Bootstrap CSS without adding the style.css to the admin area?
this is my function.php
<?php
/*
* Function to register bootstrap css style
*/
function bootstrap_enqueue_styles() {
wp_register_style('bootstrap', get_template_directory_uri().'/bootstrap/css/bootstrap.min.css');
}
/*
* Function to register theme css style
*/
function main_enqueue_style(){
$dependencies = array('bootstrap');
wp_enqueue_style('main-css-style', get_stylesheet_uri(), $dependencies);
}
/*
* Function to register Bootstrap javascript
*/
function bootstrap_enqueue_scripts() {
$dependencies = array('jquery');
wp_enqueue_script('bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_enqueue_styles' );
add_action( 'wp_enqueue_scripts', 'main_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'bootstrap_enqueue_scripts' );
add_action( 'admin_init', 'bootstrap_enqueue_styles' );
add_action( 'admin_init', 'bootstrap_enqueue_scripts' );
//add_action( 'admin_init', 'main_enqueue_style' ); <-- IF I DONT ADD THIS ONE IT DOESNT ADD BOOTSTRAP CSS TO THE ADMIN AREA
If you need to add custom stylesheet/your own styles/bootstrap css at admin side only. Try two wordpress functions wp_register_style() and wp_enqueue_style()
function wpCustomStyleSheet(){
//first register sthe style sheet and then enqueue
wp_register_style( 'adminCustomStyle', get_bloginfo('stylesheet_directory') . '/adminCustomStyle.css', false, '1.0.0' );
wp_enqueue_style( 'adminCustomStyle' );
}
add_action('admin_enqueue_scripts', 'wpCustomStyleSheet');
your function main_enqueue_style not only enqueues your main theme stylesheet, but it calls Bootstrap as a dependency. See: https://developer.wordpress.org/reference/functions/wp_enqueue_style/ for more info.
So in effect, you're enqueuing your primary theme stylesheet, and that's the purpose of the function. You'll need to setup a separate function to just enqueue Bootstrap only.
However, you may want to look at the admin_enqueue_scripts hook for the proper way to add a stylesheet for the admin side of things. To quote WordPress' own documentation, it is the:
"proper hook to use when enqueuing scripts and styles that are meant to be used in the administration panel. Despite the name, it is used for enqueuing both scripts and styles."
In the documentation above, you can find a few different examples of how you can properly add the bootstrap stylesheet for your admin. For example, you could create a separate function something like:
function myunique_namespace_bootstrap_enqueue() {
wp_enqueue_style('bootstrap');
}
and then
add_action( 'admin_enqueue_scripts', 'myunique_namespace_bootstrap_enqueue' );
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' );
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.
how do I actually add jQuery to html5blank wordpress theme by toddmotto?
I'm quite new to wordpress so I'm not really sure how does this work.
For normal html, I'll just link a script tag of jquery and another script tag with $(document).ready.. . . . . and start the jquery codes.
Would really love if someone who had experience using html5blank theme could shed some light.
Thanks much!
The WordPress recommends add jquery from WordPress itself.So you can add jquery using following way.
Add code to your current theme functions.php file.
function func_add_my_jquery() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'func_add_my_jquery' );
I load all my scripts from functions.php by using wp_enqeue_script. This will avoid duplicate loading.
If you only want to load Query, you can do this by:
function load_my_scripts() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'load_my_scripts' );
This will load the jQuery that follows WP. You can see other default scripts you can load here:
If you want to load other JS scripts, then you must use this:
function theme_name_scripts() {
wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array('jquery') );
wp_enqueue_script( 'my-script' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
The array('jquery') is for dependencies and in this case means that jQuery must be loaded before this script can be loaded.
If you want to register a newer version of jQuery, you first have to deregister the loaded jQuery:
wp_deregister_script( 'jquery' );