I am creating my first wordpress theme from a static site I have built which runs on Boostrap delivered by CDN.
Please no suggestions to download boostrap for this project it needs to be delivered via the CDN.
I would like to load boostrap via the CDN using my functions.php file but instead of loading it just displays the text at the top of the loaded page (there is nothing obvious in the inspector pannel and no error message it just appears to dispaly the infomration from functions.php as text).
I have included <?php wp_head(); ?> in header.php
All code from functions.php:
function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_script( 'gajax-js', '://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', false, NULL, 'all' );
wp_register_style( 'fontawsome-css', '://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css', false, NULL, 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_script( 'gajax-js' );
wp_enqueue_style( 'bootstrap-css' );
wp_enqueue_style( 'fontawsome-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );
If you want everything from the CDN, you'll have to get rid of the default jQuery expect on the backend or loginscreen.
After that you just add the CDN without ":"
add_action( 'wp_enqueue_scripts', 'register_jquery' );
function register_jquery() {
if (!is_admin() && $GLOBALS['pagenow'] != 'wp-login.php') {
wp_deregister_script('jquery');
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', false, '1.11.2');
wp_register_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'));
wp_register_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
wp_register_style( 'fontawsome-css', '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap-js');
wp_enqueue_style('bootstrap-css');
wp_enqueue_style('fontawsome-css');
}
}
Related
I want to include bootstrap inside my WordPress installation. I know how to include scripts and styles to a theme, but this isn't what I want.
I've looked to the WordPress core files and I've tried to add the bootstrap files to the script-loader.php file but they will not be loaded. Is there any way to add these files to the WordPress core loaded styles and scripts?
for example, I've added this line to the default wordpress stylesheet/script loader function:
$styles->add( 'bootstrap', "/includes/css/bootstrap$suffix.css" );
$scripts->add( 'bootstrap', "/includes/js/bootstrap$suffix.js", array( 'jquery' ) );
but this will not work.
I would do this by altering your functions.php in your current theme.
There are a 2 functions you should know about. The first one is to add CSS.
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
Documentation
The second one is to add JS
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
Documentation
Wordpress has a basic documentation on how to do it both:
Documentation
Eventually you going to have something like this:
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
Good luck!
In my child theme functions PHP file, I have the following code:
<?php
add_action( ‘wp_enqueue_scripts’, ‘enqueue_child_theme_styles’, PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}
// IMPORT BOOTSTRAP CDN
function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', false, NULL, 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );
}
// END BOOTSTRAP IMPORT
?>
However, when I try to use a simple bootstarp class like col-sm-4 I do not get the column layout on my page. It seems, bootstrap is not being loaded. I'm using the optimizer theme, but I don't think that matters.
In any event. I've scoured there many WP support forums and to no avail have I had success. Custom css is working in my child theme style file but this is not working in the functions file. Where am I going wrong?
You are missing 2 things....
You function my_scripts_enqueue doesn't seem to be called anywhere, just call it inside your enqueue_child_theme_styles function or add another hook function call for it.
In '://maxcdn.bootstrapcdn.com/boo... we don't start with : just with // ;-)
Your code should look something like this...
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
my_scripts_enqueue();
}
// IMPORT BOOTSTRAP CDN
function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', false, NULL, 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );
}
it will probably something stupid as ussual but.. I can't get my style.css or custom.css to override the bootstrap css. I don't wanna put all my custom css in my header file because that is not really the way to do it I suppose..
Now I Tried to add it in my functions.php like this:
//Enqueue scripts and styles
function horizon_scripts() {
//Load the theme CSS
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css');
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/css/custom.css', array(), '1.0.1', 'all' );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'horizon_scripts' );
So it loads my bootstrap css first and then the style.css and custom.css but that didn't quite hit it..
So any help would be appreciated :)
You should be using get_stylesheet_directory_uri(). Here's just the css, without your js:
function horizon_scripts() {
wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style( 'main', get_stylesheet_uri(), array('bootstrap') );
wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/custom.css', array('main') );
}
add_action( 'wp_enqueue_scripts', 'horizon_scripts' );
Note that the third parameter of wp_enqueue_style() is "dependencies". Read more in the Codex.
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
I have a query to get a post in wordpress:
<?php
$page_content = get_page(2);
echo do_shortcode($page_content->post_content);
?>
The page that is being loaded has a shortcode in it that loads a slider. The slider markup is loading but the javascript and css files required for the plugin are not showing up in the source code. How can I fix this?
you did not supply any relative source code or link, but did you load the JS and css ?
Is the slider comes from a plugin ? is it your plugin ? is the plugin activated for said page ? did you enqueue your styles and scripts ??
Anyhow, as a first measure , try to load it manually on the page
function my_scripts_enq()
{
// Register the script for a plugin:
wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ) );
// or
// Register the script for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
// then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enq' );
For fast debug you can can simply try :
if( is_page(42) ){
add_action( 'wp_enqueue_scripts', 'my_scripts_enq' );
}
for styles you should do :
function load_styles()
{
// Register the style for a plugin:
wp_register_style( 'custom-style', plugins_url( '/css/custom-style.css', __FILE__ ), array(), '20120208', 'all' );
// or
// Register the style for a theme:
wp_register_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css', array(), 'se16205117', 'all' );
// then enqueue the style:
wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'load_styles' );
BTW - as a side note , From codex
$page_id = 2;
$page_data = get_page( $page_id );
// You must pass in a variable to the get_page function. If you pass
in a value (e.g. get_page ( 123 ); ), WordPress will generate an
error. By default, this will return an object.