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' );
Related
I'm trying to make a child theme off the html5blank theme. I've managed to get my child theme CSS working using the following:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
}
?>
But the styles from the parent are still inherited. These are style.css and normalize.css. I have no need for these files at all.
So I've been told I need to use wp_dequeue_style(). to "remove parent enqueued files with wp_dequeue_style()" and add your hook with a later priority than the default 10. This is a third, optional parameter for add_action(). Something like 100.
Unfortunately I'm really struggling with this basic task, I've tried but I can't get it working. I tried the following but obviously it's totally wrong!
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
wp_dequeue_style( 'parent-style-css', get_template_directory_uri() . '/style.css', 100 );
wp_dequeue_style( 'parent-normalize-css', get_template_directory_uri() . '/normalize.css', 100 );
}
?>
Can anyone help with this? I'm sure it's straight forward but I don't have a clue!
Also, I'm guessing if I don't need the JS from the parent either as I'll use that in my child them, I guess I'd use the methods to enqueue/dequeue them?
EDIT
Is this more like it...
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
wp_dequeue_style( 'normalize');
wp_dequeue_style( 'html5blank');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts', 100 );
function my_theme_enqueue_scripts() {
wp_deregister_script( 'conditionizr');
wp_deregister_script( 'modernizr');
wp_deregister_script( 'html5blankscripts');
wp_register_script('jquery', get_template_directory_uri() . '/js/jquery-1.12.0.min.js', array('jquery'), '1.12.0'); // Custom scripts
wp_enqueue_script('jquery'); // Enqueue it!
wp_register_script('responsive-nav', get_template_directory_uri() . '/js/responsive-nav.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('responsive-nav'); // Enqueue it!
wp_register_script('uniform-js', get_template_directory_uri() . '/js/jquery.uniform.min.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('uniform-js'); // Enqueue it!
wp_register_script('main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('main-js'); // Enqueue it!
}
?>
The instructions were simply telling you to change this...
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
into this...
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
The full method call is...
add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )
Only the first two are required, the others have defaults they will use in case you leave them blank.
Also, to dequeue, you only need the name of the parent identifier, not all of the file details.
wp_dequeue_style( 'name-of-identifier-in-parent-theme' );
It looks like you put the priority on the wrong function call.
And Yes, you can dequeue javascript files as well using this method.
I have tried using the following code to embed Bootstrap to Wordpress but it doesn't work. Need help..........
<?php
function resources() {
wp_enqueue_style('style',get_stylesheet_uri());
wp_enqueue_style('bootstrap.min',get_template_directory_uri().'/css/bootstrap.min.css');
wp_enqueue_style('bootstrap',get_template_directory_uri().'/css/bootstrap.css');
wp_enqueue_style('bootstrap-theme.min',get_template_directory_uri().'/css/bootstrap-theme.min.css');
}
add_action('wp_enqueue_scripts', 'resources');
This may be helpful to you
WordPress is to use wp_enqueue_style and wp_enqueue_script from within functions.php. In particular, we need to create a new function that adds (or enqueues) the css style and the js script and then allow WordPress to call it at the right moment by adding a wp_enqueue_scripts action.
/* Add bootstrap support to the Wordpress theme*/
function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
For Reference: click here
In order towp_enqueue_scripts in function.php work properly, <?php wp_head(); ?> needs to be placed before the closing </head> and <?php wp_footer(); ?> before closing </body> tag in your template file.
Because you didn't post your template file, so I think this can be a reason causes your problem.
Hope this help
Just use the bootstrap CDN - https://www.bootstrapcdn.com/
In your child theme find the function theme_enqueue_styles() and add the two lines of extra code shown below.
function theme_enqueue_styles() {
// Add the following two lines //
wp_enqueue_style( 'bootstrap-cdn-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-cdn-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' );
// ------ -------//
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') );
}
Make sure your file location of downloaded bootstrap files. and put this code into functions.php
1.stylesheet CSS file
2.script js file
<?php
function load_stylesheets()
{
// enqueue parent styles
wp_enqueue_style('bootstrap', get_stylesheet_directory_uri().' /css/bootstrap.min.css');
wp_enqueue_script('bootstrap', get_stylesheet_directory_uri().' /js/bootstrap.min.js');
}
add_action('wp_enqueue_scripts','load_stylesheets');
?>
I've been following a tutorial online thats taught me how to enqueue stylesheets for Wordpress with the functions folder instead of the headerusing the following code:
function lucieaverillphotography_scripts() {
wp_enqueue_style( 'lucieaverillphotography_style', get_stylesheet_uri() ); }
Followed by:
add_action( 'wp_enqueue_scripts', 'lucieaverillphotography_scripts' );
This has worked, but when I tried to enqueue a separate stylesheet for a page template, it won't work. Here is the code I used, I put it between the two above:
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_style( 'lucieaverillphotography-full-page' ,
get_template_directory_uri() . '/css/full-page.css');
}
else { wp_enqueue_style( 'lucieaverillphotography_style',
get_template_directory_uri() . '/style.css'); }
I have a feeling that it's something to do with the last part: '/style.css' ... but the only way I can get my theme to recognise the new stylesheet is by adding: '/css/full-page.css' in its place and then it uses the new stylesheet for every page rather than the page template.
If I change it by adding the name of the folder that contains style.css - i.e '/files/style.css' , I lose all my css altogether, which is puzzling as I thought this was the most obvious thing to try.
Try This in functions.php
function lucieaverillphotography_scripts() {
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_style( 'lucieaverillphotography-full-page' , get_template_directory_uri() . '/css/full-page.css');
}
else{
wp_enqueue_style( 'lucieaverillphotography_style', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'lucieaverillphotography_scripts' );
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' );
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