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');
?>
Related
I have been struggling with diagnosing a bug on a project for hours now. I have currently narrowed it down to what is happening, I'm just not sure why:
I have a template partial called "testimonials.php" which enqueues styles at the top of the file:
<?php
add_action("wp_enqueue_scripts", function() {
wp_enqueue_style("testimonials-style", get_stylesheet_directory_uri() . "/partials/testimonials.css");
});
?>
However, when I try to render this as a partial in a parent template, using get_template_part('partials/testimonials') the partial is rendered, but the CSS is not enqueued. Same for enqueueing JS files. I have verified that the pathways are correct, etc.
If I enqueue the style in the parent Template, then the styles show up.
Do I really need to enqueue the styles into every parent template in which I wish to include this partial?? I must be missing something, because this doesn't seem modular at all!
Can someone please help?
Try this
CSS
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}
JS
function wpdocs_scripts_method() {
wp_enqueue_script( 'form-script', get_template_directory_uri() . '/js/form.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
<?php
add_action( 'wp_enqueue_scripts', 'my_stylesheet' );
function my_stylesheet() {
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/partials/testimonials.css', false, '1.0', 'all' );
}
For more understanding you can see following doc
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
function mytheme_scripts_styles() {
wp_enqueue_script( 'app-script', get_template_directory_uri() . '/assets/js/app.6e31112b.js', array('jquery'), 1.0, true);
wp_enqueue_style('app-css', get_stylesheet_directory_uri() . "/assets/css/build.css",false,'','all');
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts_styles' );
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'm making a custom wordpress theme, but for some reason the enqueue style is not working.
I've added:
<?php get_header(); ?>
to the index.php
And i've added
<?php wp_head();?>
Inside the
head tag.
The following code is inside my functions.php:
function pompier_scripts() {
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '1.0.0', false );
//wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '1.0.0', false );
}
add_action( 'wp_enqueue_scripts', 'pompier_scripts' );
What am i missing here?
I don't know if this helps, but I just created my first child theme, and because It's based on a parent theme, I had to enqueue my custom stylesheet like this in order to make it work:
wp_enqueue_style( 'my-style', get_stylesheet_uri() . '/style.css' );
I've started building a theme for Wordpress. Add a certain point I want to add some style to the site. I can get it to work when adding the style to the header, but I want to use the function.php file to accomplish this. This is what I got:
<?php
function addCss(){
wp_enqueue_style('style', get_template_directory_uri() . 'style.css');
}
add_action("wp_enqueue_scripts", "addCss");
?>
It's a very simple function, but for some reason, the function is not fired. I also don't get any errors and style.css is not added to the site according to the console.
My file structure:
I've tried searching for a solution, but couldn't find any. I hope u guys can help me.
Make sure you call <?php wp_head(); ?> in header.php just before ending </head> tag.
function addMyStyle() {
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css', false, '1.0', 'all' );
}
add_action('wp_head', 'addMyStyle');
get_template_directory_uri() return a path without the "/" at the end.
Add a "/" in your path:
// add this line to create a versionning of your stylesheet
$ver = time();
wp_enqueue_style('style', get_template_directory_uri() . '/style.css', $ver);
I hope that help you !
You need to have wp_head() in header.php
if ( ! function_exists( 'themescripts' ) ) {
function themescripts() {
wp_enqueue_style('style', get_stylesheet_uri(), array());
wp_enqueue_script( 'jquery', array(), '', true);
....
}
add_action( 'wp_enqueue_scripts', 'themescripts' );
}
Also, make sure to have wp_footer() in footer.php file.
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