I try to use bootstrap in my custom wordpress Plugin but seems to broke all admin area with the following
class MyPlugin{
public function iniAdmin(){
add_action('admin_menu', array($this, 'register_collections_menu_page'));
add_action( 'admin_init', array($this,'style_bootstrap' ));
}
public function style_bootstrap(){
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array('jquery'), '1.9.1', true); // we need the jquery library for bootsrap js to function
wp_enqueue_script( 'bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
wp_enqueue_style( 'bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );
}
}
$collections_settings = new MyPlugin();
if (is_admin()){
$collections_settings->iniAdmin();
}
How to wrap in a propper way bootstrap style in a wordpress plugin
After a long search I found a really good tutorial on how to recompile twitter-bootstrap to use in Wordpress admin. You can find it here.
Using Bootstrap 3
Create a new .less on the same directory where your bootstrap.css is (for example wordpress-bootstrap.less) and wrap the following
.bootstrap-wrapper {
#import (less) url( 'bootstrap.css' );
}
... after all you have to recompile your css (I used winless) and you get wordpress-bootstrap.css wrapped inside .bootstrap-wrapper.
Then, you're ready to go!
Related
I am new to WordPress and am building a single page template for my site. I want to keep my main WordPress theme for the majority of the site, but I have a very specific application that I want to use Bootstrap for on just a couple of pages. To avoid losing my custom work when the theme updates, I made a child theme with the page template and then selected that template from WordPress for the appropriate page.
I finally arrived at this script for my functions.php (based on example here):
<?php
function enqueue_child_theme_styles() {
//deregister the parent bootstrap style and script
wp_deregister_style( 'bootstrap' );
wp_deregister_script( 'bootstrap' );
//enqueue my child theme stylesheet
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('theme') );
//enqueue bootstrap in the child theme
wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri().'/bootstrap/css/bootstrap.min.css', false, NULL, 'all');
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
That worked perfect for my page template, it now responds to Bootstrap classes... unfortunately, so does everything else on my site. How do I make this only apply if Wordpress is trying to load my page template, but ignore it in all other cases?
Use is_page_template
if (is_page_template($templatename))
{
wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
...etc
}
The link provided has an exact example you are looking for.
I am developing a Wordpress plugin.
I would like to know how to integrate a Bootstrap CSS file into my plugin?
create a function in your Plugin file
function add_scripts_and_css(){
wp_enqueue_style('your-plugin-bootrtrap_css', plugin_dir_url( __FILE__ ) . 'folderpath/bootstrap.css');
}
add_action('wp_enqueue_scripts', 'add_scripts_and_css');
This is the way to add wp_enqueue_style to add css files and wp_enqueue_script to add JavaScript .js files.
// load your plugin css into the website's front-end
function myplugin_enqueue_style() {
wp_enqueue_style( 'myplugin-style', plugin_dir_url( __FILE__ )."css/bootstrap.css" );
}
add_action( 'wp_enqueue_scripts', 'myplugin_enqueue_style' );
Add above code in your plugin register_activation_hook.
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' );
Within a wp plugin, I see the following code on the php file of the plugin.
public function register_plugin_scripts() {
/*** Styles ***/
$cyclone_css = add_query_arg(array('cyclone_templates_css' => 1), home_url( '/' ));
wp_register_style( 'cyclone-slider-plugin-styles', $cyclone_css );//contains our combined css from ALL templates
wp_enqueue_style( 'cyclone-slider-plugin-styles' );
/*** Scripts ***/
wp_register_script( 'cycle', $this->plugin_url.'js/jquery.cycle.all.min.js', array('jquery') );
wp_enqueue_script( 'cycle' );
}
Now, I want to alter some of it. Right now, this plugin is used at every single page. Implying both the 1) combined css 2) jquery.cycle.all.min.js is requested each page. However, I only use this plugin for the main page. So how do I fix it, making the css file + js to only be loaded for the main page, nothing else.
Next, I do not want to combine css from all templates. Instead, it should be pinpointed to a selected location. How to do that?. Thanks in advance. Plugin is Cyclone Slider 2.
If you were happy to edit the plugin code directly, it would be a simple matter of making the wp_enqueue_script() calls conditional on being on the home page.
public function register_plugin_scripts() {
/*** Styles ***/
$cyclone_css = add_query_arg(array('cyclone_templates_css' => 1), home_url( '/' ));
wp_register_style( 'cyclone-slider-plugin-styles', $cyclone_css );//contains our combined css from ALL templates
/*** Scripts ***/
wp_register_script( 'cycle', $this->plugin_url.'js/jquery.cycle.all.min.js', array('jquery') );
if (is_front_page()){
wp_enqueue_style( 'cyclone-slider-plugin-styles' );
wp_enqueue_script( 'cycle' );
}
}
However, you almost certainly don't want to edit the plugin, because your changes will get overwritten when the plugin is updated.
I would therefore use wp_dequeue_script and wp_dequeue_style to get stop the scripts loading where you don't want them to.
Per Wordpress Function reference, you could add this code in your theme function.php file or similar:
/**
* Dequeue a queued script.
*
* Hooked to the wp_print_scripts action, with a late priority (100),
* so that it is after the script was enqueued.
*/
function wpcyclone_dequeue_script() {
wp_dequeue_script( 'cycle' );
wp_dequeue_script( 'cyclone-slider-plugin-styles' );
}
if (!is_front_page()){
add_action( 'wp_print_scripts', 'wpcyclone_dequeue_script', 100 );
}
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__) );
}
?>