I am working on a WP plugin that uses bootstrap. However, it seems to be having a very strange affect on the page. You can see it here:
My Test Page
If you go to this page, then go to another, you will see that the page goes back to normal.
How can I prevent bootstrap from affecting the WP elements on the page?
add_action( 'wp_enqueue_scripts', 'bootstrap_css', 150 );
function bootstrap_css(){
// add pages for bootstrap leave out site address, just the path e.g.
$pages= array( '_3_8_0/rentals/','add_page_url' );
$path=$_SERVER['REQUEST_URI'];
if( !in_array($path, $pages) ):
wp_dequeue_style( 'bootstrap_handle' ); // look up handle for stylesheet
endif;
}
You can do something like the above to de_queue the bootstrap css on pages that you dont want it on. The problem is Bootstrap is not really designed for singular page use with a existing theme and will share a lot of common identifers with what your theme uses e.g. "content"
its either that or remove bootstrap altogether (just de-queue it) and style the page yourself. To be honest bootstrap is a heavy load for the use case here.
Related
I am new to wordpress and want to know best way to add css from installed and activated plugin.
I have one activated plugin called "social-media" and in that plugin i have created one css file called "social-login-style.css"
I want to include this css file and apply style to my content. How should I add css file in any page so that I can see the effects.
In Short, I want to add social-login-style.css on wp-login.php file.
Whether it is theme or plugin, css or js, any custom addition, wp_enqueue_scripts is the only acton you need for all.
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
function additional_custom_styles() {
/* Enqueue The Styles */
wp_enqueue_style( 'custom-login-style', plugins_url( 'social-login-style.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'additional_custom_styles' );
If you it to be added only on login screen then use the following condition,
if ( $GLOBALS['pagenow'] === 'wp-login.php' ) {
// We're on the login page!
}
Hope this one help :)
UPDATE
Please check login_enqueue_scripts. it is designed to add custom scripts into login page only. Works well without any login condition.
https://codex.wordpress.org/Plugin_API/Action_Reference/login_enqueue_scripts
Without saying what you want to achieve is impossible, it certainly is against how WordPress is designed to work. Plugins are supposed to be modules that add to or modify how WordPress works. The folder of a plugin should only hold files pertaining to what the plugin does and, if it's a public plugin, its contents are controlled by a versioning (SVN) system.
In short, adding a file to an existing plugin will not have any effect, regardless of whether the plugin is active or not. And you should not add files to plugins you haven't developed yourself.
To load a CSS file on the login page, one should add an action hook to login_enqueue_scripts, as instructed in Customizing Login Form page of the codex. The stylesheet itself should be placed in either a custom plugin (you could create for your use-case) or inside the current theme folder.
As you see in following pictureenter image description here.
woocomerce css styles has magically over ride my template css (after using yith tab manager permiume (disabling doesn't help).
You can see that disable those styles from woocomerce.css will prove that, y template style is still there.
How can I prevent from this issue ?
Here is the website link for that page
amatistrading.
I used this code in functions.php of template but it didn't work:
:// Disable WooCommerce's Default Stylesheets
function disable_woocommerce_default_css( $styles ) {
// Disable the stylesheets below via unset():
unset( $styles['woocommerce-general'] ); // Styling of buttons, dropdowns, etc.
// unset( $styles['woocommerce-layout'] ); // Layout for columns, positioning.
// unset( $styles['woocommerce-smallscreen'] ); // Responsive design for mobile devices.
return $styles;
}
add_action('woocommerce_enqueue_styles', 'disable_woocommerce_default_css');
i couldnt use that code(in main comment) but i found a way to solve problem. ( i will put the right code if i find any),first we can delete that stylesheet content, or act like me: disable all plugins(every single plugin) try to replace woocommerce files with orginal, then re active plugins, this method worked for me, it seems changing woocommerce files made this problem.
I am new to wordpress and learning Plugin development, I m creating a custom plugin, which display a list of page-title with check-boxes in admin section and on checking the selected pages footer should be remove from that pages, now I m facing issue with how to remove footer section?
I dont want to remove footer on single page, so custom template can not be used
I dont want to remove footer using css(like display none)
Can anybody help?
You can use Wordpress's remove_action to help remove unwanted php calls. More on that found here
Something like this:
function your__conditional_footer() {
if( is_front_page() )
return;
remove_action( 'theme_before_footer', 'theme_footer_widget_areas' );
}
Mind you, the function arguments are theme dependent.
Hope this points close.
I've got a site with an instance of WooCommerce running on it. On the Product Archive page there's a noticeable delay when the mouse leaves a product and the overlay disappearing. I'd like to reduce that delay to about 0.1s
URL: http://economistfoundation.org/the-library/
I've tried looking through the various CSS files in the main theme and the woocommerce plugin to see if there's a 'transition' with 0.5s or similar that controls .thumb-overlay, but can't find anything that seems relevant.
I wondered if the setting might be in Javascript, but there are so many files where it might be stored I'm at a loss.
I've looked at the page using the Firebug inspector and .thumb-overlay has a style attribute that moves between 'display: block' and 'display: none', and as you move the mouse over an attribute of 'opacity' rapidly counts from 0 to 1.
Does anyone know where the delay value might be stored?
It is in your wp-content/themes/agent/woocommerce/woocommerce-custom.js file at line 19.
jQuery(document).on( 'mouseenter', '.products .product', function() {
jQuery(this).find('.thumb-overlay').stop(true, true).fadeIn();
});
jQuery(document).on( 'mouseleave', '.products .product', function() {
jQuery(this).find('.thumb-overlay').stop(true, true).fadeOut();
});
EDITED
Child themes only override files in the main theme directory (like header.php) that are called in with functions like get_template_part or get_header, etc.
The correct way to add scripts to WordPress is with wp_enqueue_script. If your parent theme uses this, you can override the JS files by using wp_dequeue_script and enqueuing your own.
Like so...
<?php
add_action( 'wp_enqueue_scripts', 'so28089698_script_fix' );
function so28089698_script_fix()
{
wp_dequeue_script( 'parent_theme_script_handle' );
wp_enqueue_script( 'child_theme_script_handle', get_stylesheet_directory_uri() . '/scripts/yourjs.js', array( 'jquery' ) );
}
If the parent theme isn't using wp_enqueue_script, it's probably hooking into wp_head (or wp_footer) to echo out the scripts there. So you'd use remove_action to get rid of those functions echoing the scripts out, and then enqueue your own script.
If the script is hard coded into the template file, you'll just need to replace that template file in your child theme without the script tag.
If they used wp_enqueue_script calls that utilize get_stylesheet_directory_uri, then you shouldn't have to do anything. Since this isn't happening, you'll just have to poke around and see what the theme author did.
I'm working on a plugin where I need some of the colors to be settable in the admin.
Right now, I have these color settings saved with the WP update_option() function. Then, when I need to display a page, I use the get_option() function then embed the color codes like this:
<style>
.some_class{ background-color: <?php echo $settings->color_code;?>; }
</style>
Of course, this works. But it seems a bit clumsy because the plugin can load one of several PHP based pages. So, for each one, I have to do the above.
Is there some way to get this tag into all my plugins pages without doing it page by page?
for frontend:
add_action( 'wp_enqueue_scripts', 'custom_css', 100 );
function custom_css(){
echo '<style>css here!</style>';
}
it should print after your current css stylesheets so it will override prev. css