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.
Related
I am making a new theme for WordPress using guide from this site https://www.taniarascia.com/developing-a-wordpress-theme-from-scratch.
The writer of tutorial the says that using <link href="" rel="stylesheet">
is not the most correct way to load scripts.
I am thinking to use wp_enqueue_style() and add_action() on function.php to load the .css file. I have already had three files, index.php, function.php, and style.css in my theme directory but I can't seem to make it work.
Below is the code I use to load the .css file:
<?php
function enqueue_my_styles(){
wp_enqueue_style('style', get_template_directory_uri().'/style.css');
}
add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );
?>
Is your functions file named functions.php or function.php? This should be functions.php and is fundamental.
Your code looks correct, but could actually be shortened a little as in the twentyfifteen Wordpress template;
function twentyfifteen_scripts() {
// Load our main stylesheet.
wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
You'd use get_template_directory_uri() for loading a custom file within the template directory.
function my_custom_styles() {
wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/custom-style.css');
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );
I want to use the jQuery-ui .accordion function in a WordPress child theme. So far I've:
created a js file in my child theme directory and put it in no-conflict mode:
jQuery(document).ready(function($) {
$( "#accordion" ).accordion();
});
Enqueued the script into my functions.php file: function myChild_scripts() {
wp_enqueue_style( 'onepage-child-style', get_stylesheet_uri() );
wp_enqueue_script( 'onepage-child-accordion', get_stylesheet_uri() . '/js/accordion.js', array('jquery-ui-accordion', 'jquery'), 20150507, true );
Added the add_action function: add_action( 'wp_enqueue_scripts', 'myChild_scripts' );
However, the .accordion function is also dependent on jquery-ui.css. Don't I also need to include that in the enqueueing process? I can find no documentation that discusses inclusion of this file - or whether it's already part of WP core.
You can enqueue a stylesheet in the functions.php file. It may be something like this (assuming your file is in your theme directory, inside a css folder).
function my_styles()
{
wp_register_style( 'jquery-ui-style', get_template_directory_uri() . '/css/jquery-ui.css', 'all' );
wp_enqueue_style( 'jquery-ui-style' );
}
add_action( 'wp_enqueue_scripts', 'my_styles' );
Here's some reference.
I am creating a website in wordpress 4.2.2.
I created a plugin to customize the registration page. I activated my plugin and called my form function within wp-login.php like this
case 'register' :
require( dirname(__FILE__) . '/wp-load.php' );
custom_registration_function();
login_footer('user_login');
break;
I can see my new registration form but the problem is, the wordpress styles are totally gone. So I have a plain HTML page with no styles. Wordpress is not loading bootstrap for this page.
I do not know why bootstrap is not being loaded.
you can add css in plugin folder or you should register styles and script and theme functions.php file.
function myplugin_scripts() {
wp_register_style( 'style-name', plugin_dir_url( __FILE__ ) . 'css/style.css' );
wp_enqueue_style( 'style-name' );
}
add_action( 'wp_enqueue_scripts', 'myplugin_scripts' );
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' );
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!