I'm creating a wordpess plugin and I need the stylesheet to be loaded onto the front-end (included in wp_head). The plugin's stylesheet is vital so it will show up on the front-end.
How can I achieve this?
I've tried several methods such as enqueing but it doesn't show up. Perhaps I'm placing the code in the wrong file?
As you can see below, I do enqueue the scripts and styles but it only shows up on the edit screens and not on the front-end like i need it too.
function input_admin_enqueue_scripts()
{
// register scripts
wp_register_script('input-icon_field', $this->settings['dir'] . 'js/input.js', array('input'), $this->settings['version']);
wp_register_style('input-icon_field', $this->settings['dir'] . 'css/input.css', array('input'), $this->settings['version']);
// scripts
wp_enqueue_script(array(
'input-icon_field',
));
// styles
wp_enqueue_style(array(
'input-icon_field',
));
}
try removing array from wp_enqeue_script
function input_admin_enqueue_scripts() {
// register scripts
wp_register_script('input-icon_field', $this->settings['dir'] . 'js/input.js', array('input'), $this->settings['version']);
wp_register_style('input-icon_field', $this->settings['dir'] . 'css/input.css', array('input'), $this->settings['version']);
// scripts
wp_enqueue_script('input-icon_field');
// styles
wp_enqueue_style('input-icon_field');
}
and add an action to this function like so
add_action('wp_enqueue_scripts', 'input_admin_enqueue_scripts');
Related
I am creating a Wordpress plugin that adds a page that embeds a React app.
On plugin activation, a post is inserted with wp_insert_post() function, and then the load_app_template() function is triggered to set the post template.
This template contains wp_head() in the head section and my React app.
The problem is that some other plugins are loading some JS and CSS in the head that are disturbing the React app behavior. I am trying to remove all JS and CSS given by Wordpress & other plugins and add my own.
If I remove wp_head() from the post template, then I cannot register styles and scripts with my plugin through wp_register_script.
How to remove all JS and CSS from Wordpress and plugins and add my own from my plugin ?
There could be two ways :
Remove wp_head() and manually add links to my JS and CSS in the HTML template. I can do that for Jquery and Bootstrap but I don't know how to put links of JS files from my plugin directory.
Keep wp_head(), deregister all CSS and JS and add my own afterwards with Wordpress hooks. I am not able to remove some Javascript from other plugins with this solution. I tried deregistering all following this answer.
Thank you !
Try to remove unnecessary scripts and styles using wordpress hooks
(this might help you figure out how to do so: https://wordpress.stackexchange.com/questions/233140/how-can-i-get-a-list-of-all-enqueued-scripts-and-styles) if your template is used on page.
You can remove unused CSS/JS from that page. Put this code on your function.php
function remove_unused_css_js() {
// remove only from that page
if(get_the_ID() == 'Your Page ID'){
wp_dequeue_style('css-id'); // remove css
wp_dequeue_script('js-id'); // remove js
}
}
add_action( 'wp_print_styles', 'remove_unused_css_js', 100 );
Hope this will help.
I am trying to call my custom styles in my wordpress plugin. I tried the wp_enqueue methods but i could not find my style sheet getting loaded.
I have tried examples from stackoverflow itself but it is not working for me.
I checked the enqued styles using debug bar - dependancy tool and cannot find the styles in that too. Please check the link for my enqued styles . debug bar
The following are the two different ways, i tried to load my css.
function wp_adding_styles1()
{
wp_enqueue_style('my_eastern_charts_stylesheet', plugin_dir_url(__FILE__) . 'eastern_charts_stylesheet.css');
}
add_action('wp_enqueue_scripts', 'wp_adding_styles1');
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('eastern_charts_stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
Directory Structure
Please try with below code :
function your_namespace() {
wp_register_style('charts_stylesheet',plugins_url('charts_stylesheet.css',__FILE__ ));
wp_enqueue_style('charts_stylesheet');
}
add_action( 'wp_head','your_namespace');
Over the past few years, I have worked with many WordPress theme templates. I have now decided to take the next step of learning to create my own WordPress themes.
I am now at the stage whereby I am looking to use the Bootstrap feature, in order to make my website responsive. I understand how to transfer files from the Bootstrap website and place them on my server, however I am at a loss on how they work with my website. Here area few questions:
I have already created a '[theme-name].css' to style my website. Will the Bootstrap CSS file automatically override my theme CSS file (s)?
When I transfer the Bootstrap files to my server, do I simply add the contents of my own stylesheet, the Bootstrap CSS file or call both CSS files together using the 'function.php' file?
When I transfer the Bootstrap files to my server, do I have to rename any of the files?
At present, I am currently calling my stylesheets, by inserting the following code in my 'functions.php' file:
function [theme-name]_script_enqueue() {
wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/[theme-name].css', array(), '1.0', 'all');
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/[theme-name].js', array(), '1.0', true);
}
add_action( 'wp_enqueue_scripts', '[theme-name]script_enqueue' );
Referring to the above code, would I need to change the code to reflect the Bootstrap.css files or simply add another function for the Bootstrap files, so that they can both be called?
Apologies if my questions are using incorrect terminologies, as the Bootstrap functionality is a new set of files to me.
You should be able to just add another call to load the bootstrap css. Make sure you add bootstrap before your custom CSS.
See below
https://bootstrapbay.com/blog/customize-bootstrap/
You shouldnt need to rename any files providing you link them correctly in your function call.
i want to hide few plugins style sheets to reduce load on our Index page and categories pages. Actually we want to display plugin style sheet only on Post not on other pages.
we have used following code in plugin, but it doesn't work. please help how to use it.
if( is_single() || is_singular('post') ) wp_enqueue_style('savrix-style.css');
If you are modifying your own plugin I see no reason your code wouldn't work. The is_single() condition is not needed, and will result in the stylesheet being loaded on custom post types and other singles that you don't intend.
However your wp_enqueue_style call is incomplete, so unless you have a wp_register_style call somewhere else defining the handle and URL of the stylesheet you need to change it to something along these lines:
if (is_singular('post')) {
wp_enqueue_style('savrix-style', plugins_url('savrix-style.css', __FILE__);
}
However, I get the impression that you are actually trying to remove a stylesheet included by a thirdparty plugin. It is generally a bad idea to modify a third-party plugin, as your modifications will be lost on the next update... it is very difficult to maintain that sort of modifications in the long run.
Instead make a new plugin and modify whatever you need from there.
What you want to achieve can be accomplished by:
Create a new folder in the wp-content/plugins folder, fx. my_load_reducer.
Inside that folder create a new file called my_load_reducer.php
Paste this in the file:
<?php
/*
Plugin Name: My Load Reducer
Description: Removes unneeded and unwanted stylesheets from other plugins
Version: 0.1
*/
//Use a class to avoid conflicts
class my_load_reducer {
function __construct() {
//Hook into wp_enqueue_scripts with a high priority
add_action( 'wp_enqueue_scripts', array($this, 'deregister_styles'), 1000 );
}
function deregister_styles() {
//Check that current post is not a single post
if (!is_singular('post')) {
//deregister the stylesheet - this removes the twentyfifteen
//main stylesheet - obviously you need to substitute the handle
//of the stylesheet you actually want to remove
wp_deregister_style( 'twentyfifteen-style' );
}
}
}
//Instantiate the class
$my_load_reducer = new my_load_reducer();
Activate the plugin through the wordpress admin.
You can remove perticular plugin css on selected page.
below code is remove plugin css to other pages and display only on post pages:
/*disable loading plugin css to page and load on post page*/
add_action('wp_print_styles', 'my_deregister_styles', 99999);
function my_deregister_styles()
{
if(!is_single())
{
wp_dequeue_style('plugin-css-handle');
wp_deregister_style('plugin-css-handle');
}
}
where 'plugin-css-handle' is perticular plugin's css handle which you want to remove.
I'm trying to enqueue a script directly from my child theme's header just after the wp_hook, but for the life of me it's not showing up - what gives?
// register your script location, dependencies and version
wp_register_script('jqtransform',
get_bloginfo('stylesheet_directory') . '/includes/jqtransformplugin/jquery.jqtransform.js', false);
// enqueue the script
wp_enqueue_script('jqtransform');
Here's the link.
Turns out I needed to add enqueue_script BEFORE the wp_head call, as well as use a different URL path thingamabob. Here's the final code:
function add_my_scripts(){
wp_register_script('jqtransform',
get_bloginfo('stylesheet_directory').'/includes/jqtransform/jquery.jqtransform.js', array('jquery'),'1.0');
wp_enqueue_script('jqtransform');
}
add_action('init', 'add_my_scripts');