I'd like to enqueue a stylesheet called charts.css & charts.min.css.
I'm not sure, why it's not working.
That's my added code in functions.php Wordpress:
function additional_stylesheets() {
wp_register_style( 'custom01', get_template_directory_uri().'/assets/css/minified/charts.min.css' );
wp_enqueue_style( 'custom01' );
wp_register_style( 'custom02', get_template_directory_uri().'/assets/css/unminified/charts.css' );
wp_enqueue_style( 'custom02' );
}
add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );
I tried in elementor to style a table but nothin' happened.
So I also tried to use:
<link rel="stylesheet" href="wp-content/themes/astra/assets/css/minified/charts.min.css">
but that's also not working.
Did I make a mistake somewhere?
I use the theme astra in WordPress.
The path is wp-content/themes/astra/.
After appending styleheets in WordPress I do not have to call them in html code anymore am I right?
You don't need to register them. Instead use the following code:
function additional_stylesheets() {
wp_enqueue_style('charts_min_styles', get_theme_file_uri('/assets/css/minified/charts.min.css'), NULL, 1.2, false);
wp_enqueue_style('charts_styles', get_theme_file_uri('/assets/css/unminified/charts.css'), NULL, 1.2, false);
}
add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );
The code goes to the functions.php of your active theme or child them.
Related
I have created a child theme in wordpress off of a parent theme called bigpont. I am also using woocommerce as well on the site. I had enqued my child theme style sheet and have noticed it loads twice and I'm not sure why. I am also wondering how I can get it to load so it overrides the woocommerce style sheet. Here is the code I'm currently using in my functions.php file:
function my_theme_enqueue_styles() {
$parent_style = 'bigpoint-css';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/base.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');
and here is how the stylesheets are being loaded on my site
It seems to load as 'bigpoint-default-css' and then again as I added it "child-style-css'
****UPDATE: I found the answer to my css being loaded twice, in my parent theme's functions.php file it being called in with :
wp_register_style('bigpoint-default', get_stylesheet_uri(), '1.0');
so I used this to undo that:
function unhook_parent_style() {
wp_dequeue_style( 'bigpoint-default' );
wp_deregister_style( 'bigpoint-default' );
}
add_action( 'wp_enqueue_scripts', 'unhook_parent_style', 20 );
From looking at the file class-wc-frontend-scripts.php it looks like WooCommerce enqueues it scripts/styles with the default priority of 10.
public static function init() {
add_action( 'wp_enqueue_scripts', array( __CLASS__, 'load_scripts' ) );
add_action( 'wp_print_scripts', array( __CLASS__, 'localize_printed_scripts' ), 5 );
add_action( 'wp_print_footer_scripts', array( __CLASS__, 'localize_printed_scripts' ), 5 );
}
So if you enqueue your scripts with a lower priority they it will load after the WooCommerce style and overwrite that stylesheet as the file will be loaded after the WooCommerce one lower down the HTML document.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
I would need more information to debug what is happening with the duplicate stylesheets though.
I am enqueuing bootstrap and this is my code:
add_action('wp_enqueue_scripts','my_theme_enqueue_styles');
function my_theme_enqueue_styles(){
//Adding styles from my child-theme using get_stylesheet_directory_uri()
wp_enqueue_style('sydney-child-style',get_stylesheet_directory_uri().'/style.css');
//Adding styles from my father-theme using get_template_directory_uri
wp_enqueue_style('sydney-style',get_template_directory_uri().'/style.css');
}
/**
* Enqueue Bootstrap
*/
function sydney_enqueue_bootstrap() {
wp_deregister_style('sydney-bootstrap');
wp_enqueue_style( 'sydney-bootstrap-child', get_stylesheet_directory_uri() . '/css/bootstrap/bootstrap.min.css', array(), true );
}
add_action( 'wp_enqueue_scripts', 'sydney_enqueue_bootstrap', 9 );
The theme I am using is Sydney, and after doing a search in google and here I can't find out what is wrong. When I add bootstrap, I get a blank page and I can't see any content.
Any advise??, thank you in advance!
I am making my first custom wordpress theme and am running into problems with functions.php
I am using bootstrap too so i want to include bootstrap stylesheets to wp i currently do it this way-:
style.css
#import url('css/bootstrap.css');
#import url('css/font-awesome.css');
I understand that i can use functions.php to do the same, so i wrote a custom function and tried to do it like this-:
functions.php
<?php
/* Theme setup */
require_once('wp_bootstrap_navwalker.php');
/* Add bootstrap support to the Wordpress theme*/
function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri().'/css/bootstrap.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri().'/css/font-awesome.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri().'/js/bootstrap.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
?>
This does not seem to work. Neither does functions.php load the wp jquery or the bootstrap.js
Can anyone shed some light onto this matter for me? I would be ever grateful. This is not a child theme its a custom theme.
Try registering your scripts before you enqueue them. For example:
function my_enqueue_scripts() {
// Register Bootstrap JS.
wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), NULL, true );
// Enqueue Bootstrap JS.
wp_enqueue_script( 'bootstrap-js' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
For my website, I am trying to include my own stylesheet for icons other than font-awesome. However, no matter what I do with "wp_enqueue_style", I can only end up using one of the stylesheets (either mine or font-awesome) but not both. Only one would be working. I was wondering what I am doing incorrectly with my coding here:
wp_enqueue_style( 'vantage-fontawesome', get_template_directory_uri().'/fontawesome/css/font-awesome.css', array(), '3.2.1' );
wp_enqueue_style( 'Mystyle', get_template_directory_uri().'/fontawesome/css/Mystyle.css', array());
What can I do so that both 'font-awesome.css' and 'mystyle.css' can be used? Thanks
You should wrap wp_enqueue_style() in a function and hook that function to wp_enqueue_scripts. For example:
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
// Enqueue more style sheets here.
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
Ref: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
You're code should look like this.
function my_scripts() {
// Add Mystyle
wp_enqueue_style( 'Mystyle', get_template_directory_uri().'/fontawesome/css/Mystyle.css',array());
// Add Font Awesome
wp_enqueue_style( 'vantage-fontawesome', get_template_directory_uri().'/fontawesome/css/font-awesome.css', array(), '3.2.1' );
}
//Push to wordpress all files
add_action( 'wp_enqueue_scripts', 'my_scripts' );
I am trying to en-queue css in WordPress.
Here is my code:
function adding_styles()
{
wp_register_script( 'jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
// Register the style like this for a plugin:
wp_register_style( 'custom-style', plugins_url( '/css/custom-style.css', __FILE__ ), array(), '20120208', 'all' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'jquery-ui-css' );
// For either a plugin or a theme, you can then enqueue the style:
wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'adding_styles' );
However, jquery-ui.css doesn't load. Can anybody guess the error here??
I believe you need to add path to the CSS file -
wp_enqueue_style( 'jquery-ui-css',get_stylesheet_uri() );
EDIT -
It will clearly works with the URL -
wp_enqueue_style( 'jquery-ui-css', http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css );
Reference - wp_enqueue_style
Look for$src parameter
Try this:
You can add javascript & css in wordpress like this
function load_custom_wp_admin_js() {
wp_enqueue_script('custom_wp_admin_js', plugins_url() . '/dynamic-headers/dynamic-header.js');
}
add_action('admin_enqueue_scripts', 'load_custom_wp_admin_js');
Add this code in function.php file.
-
Thanks