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' );
Related
I'm developing my first WordPress plugin. I need to use a custom CSS for the settings pages that I created for the plugin but when I enqueue my stylesheet file, it affects the whole WordPress backend and not just my plugin's settings page.
Is possible to solve this problem? How?
When you want to add styles or scripts in WordPress you enqueue them using hooks. For the admin side the hook you are looking for is called admin_enqueue_scripts.
You can add something like
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
function wpdocs_enqueue_custom_admin_style() {
wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/woo-solo-api-admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );
You just need to be careful to correctly specify the url of the css script you want to enqueue.
Hope this helps.
Oh and https://developer.wordpress.org page is great for finding out about WordPress functionality, core functions, hooks etc.
Also check out the plugin handbook: https://developer.wordpress.org/plugins/
Loads of useful information can be found there :)
EDIT:
admin_enqueue_scripts has a parameter you can use read more
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
function wpdocs_enqueue_custom_admin_style( $hook ) {
if ( $hook === 'edit.php' ) {
wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/woo-solo-api-admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );
This will load the script only on the edit post screen.
You can see what hook is loaded on your screen by adding
error_log( print_r( $hook, true ) );
In your wpdocs_enqueue_custom_admin_style function before the condition. Enable the debug log in your wp-config.php and you'll get a name of your custom post screen hook.
Alternatively, you could target the $current_screen to match the CPT's screen. This will load the script only on that page.
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.
I want to style the registration page background in wordpress. I put some styles into my child-theme but they weren't picked up - think because the page isn't pulling in my style.css which I am doing this way in my functions.php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
Ideally I don't want to edit the login.css in the admin section.
How do i get my own style sheet to be loaded for the registration page?
Use:
add_action( 'login_enqueue_scripts', 'theme_enqueue_styles' );
There's also ways to edit the logo and so forth, without having to resolve to CSS. Read more here: https://codex.wordpress.org/Customizing_the_Login_Form
I am new to Wordpress and I need to convert a PSD int a Wordpress theme.
For that I downloaded a naked wordpress theme to start with and I tried to add my own css style in function.php as follows:
function naked_scripts() {
// get the theme directory style.css and link to it in the header
wp_enqueue_style( 'main-style', get_template_directory_uri() . '/style/main.css' );
wp_enqueue_style( 'responsive-style', get_template_directory_uri() . '/style/responsive.css' );
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/style/bootstrap.min.css' );
// add fitvid
wp_enqueue_script( 'jquery-js', get_template_directory_uri() . '/js/jquery.js', array( 'jquery' ), '1.10.2', true );
// add theme scripts
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.0.3', true );
}
add_action( 'wp_enqueue_scripts', 'naked_scripts' ); // Register this fxn and allow Wordpress to call it automatcally in the header
but in the browser I did not get my style and I have his error:
GET http://rota.alwaysdata.net/wp-content/themes/theme1/style/main.css?ver=4.1
what's ver=4.1 ??
It's a cache-buster added by WordPress. You can set it to any number you want using the $ver argument in wp_enqueue_style
http://codex.wordpress.org/Function_Reference/wp_enqueue_style
The ?ver=X.XX has NO effect on the content of the stylesheet.
CSS Cache-busting references:
http://css-tricks.com/snippets/wordpress/prevent-css-caching/
https://www.mojowill.com/developer/get-your-wordpress-css-changes-noticed-immediately/
I suggest if it's your first time creating a wordpress template using these resources:
Underscores blank wordpress theme:
http://underscores.me/
Lynda.com underscores tutorial:
http://www.lynda.com/underscores-tutorials/WordPress-Building-Themes-from-Scratch-Using-Underscores/163092-2.html
This is what i used to make my first wordpress project and it worked out grate , here is the result: ibreatheart.com
Hope it helps .