In wordpress I have created a child theme and for some template made changes according to design in style.css in child theme.
I have also created a new template in child theme but I want that the style.css which in child theme not added with the only one template on frontend. my template file name is template-custom.php.
How to do that?
You can use wp_dequeue_style function to remove css on specific template
Try below code it will work :
/**
* Remove specific style sheets.
*/
function some_remove_styles() {
if ( is_page_template( 'yourtemplate.php' ) ) {
wp_dequeue_style( 'some-style' );
wp_dequeue_style( 'some-other-style' );
}
}
add_action( 'wp_print_styles', 'some_remove_styles', 99 );
Related
I'm creating a new custom Wordpress Theme and I'm trying to add Boostrap CSS to the admin area, but it's only working when I add style.css to the admin area as well. The Boostrap js it is getting add to the admin area but the CSS is not, how do I add Bootstrap CSS without adding the style.css to the admin area?
this is my function.php
<?php
/*
* Function to register bootstrap css style
*/
function bootstrap_enqueue_styles() {
wp_register_style('bootstrap', get_template_directory_uri().'/bootstrap/css/bootstrap.min.css');
}
/*
* Function to register theme css style
*/
function main_enqueue_style(){
$dependencies = array('bootstrap');
wp_enqueue_style('main-css-style', get_stylesheet_uri(), $dependencies);
}
/*
* Function to register Bootstrap javascript
*/
function bootstrap_enqueue_scripts() {
$dependencies = array('jquery');
wp_enqueue_script('bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_enqueue_styles' );
add_action( 'wp_enqueue_scripts', 'main_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'bootstrap_enqueue_scripts' );
add_action( 'admin_init', 'bootstrap_enqueue_styles' );
add_action( 'admin_init', 'bootstrap_enqueue_scripts' );
//add_action( 'admin_init', 'main_enqueue_style' ); <-- IF I DONT ADD THIS ONE IT DOESNT ADD BOOTSTRAP CSS TO THE ADMIN AREA
If you need to add custom stylesheet/your own styles/bootstrap css at admin side only. Try two wordpress functions wp_register_style() and wp_enqueue_style()
function wpCustomStyleSheet(){
//first register sthe style sheet and then enqueue
wp_register_style( 'adminCustomStyle', get_bloginfo('stylesheet_directory') . '/adminCustomStyle.css', false, '1.0.0' );
wp_enqueue_style( 'adminCustomStyle' );
}
add_action('admin_enqueue_scripts', 'wpCustomStyleSheet');
your function main_enqueue_style not only enqueues your main theme stylesheet, but it calls Bootstrap as a dependency. See: https://developer.wordpress.org/reference/functions/wp_enqueue_style/ for more info.
So in effect, you're enqueuing your primary theme stylesheet, and that's the purpose of the function. You'll need to setup a separate function to just enqueue Bootstrap only.
However, you may want to look at the admin_enqueue_scripts hook for the proper way to add a stylesheet for the admin side of things. To quote WordPress' own documentation, it is the:
"proper hook to use when enqueuing scripts and styles that are meant to be used in the administration panel. Despite the name, it is used for enqueuing both scripts and styles."
In the documentation above, you can find a few different examples of how you can properly add the bootstrap stylesheet for your admin. For example, you could create a separate function something like:
function myunique_namespace_bootstrap_enqueue() {
wp_enqueue_style('bootstrap');
}
and then
add_action( 'admin_enqueue_scripts', 'myunique_namespace_bootstrap_enqueue' );
When enqueueing a Wordpress child theme stylesheet the correct way the new styles override the parent's styles.
However, since Divi introduced Builder support for custom post types, a new stylesheet style-cpt.css has been added.
All the styles in this stylesheet (a lot of which unfortunately have !important after them) are declared after enqueued child styles, so will override any matching ones.
Is there any way of overriding such "custom" stylesheets?
The "remove_action(...);" solution no longer works as of Divi version 4.10.6 (Sept '21) as the "et_divi_replace_stylesheet" action was removed.
What I did to solve it was to overwrite line #776 (as of version 4.14.6) from Divi/includes/builder/core.php, so that the function et_builder_should_wrap_styles() always returns false:
function et_builder_should_wrap_styles() {
static $should_wrap = null;
if ( null === $should_wrap ) {
$post_id = get_the_ID();
// Warp on custom post type archives and on non-native custom post types when the builder is used.
$should_wrap = et_builder_is_custom_post_type_archive() || ( et_builder_post_is_of_custom_post_type( $post_id ) && et_pb_is_pagebuilder_used( $post_id ) );
}
// return $should_wrap; /*** ORIGINAL CODE ***/
return false; /*** NEW CODE ***/
}
Then to make sure I don't lose this edit when Divi updates, I set up an action to automatically rewrite this line every time a Divi update occurs:
add_action('upgrader_process_complete', 'edit_files_on_update'), 10, 2);
function edit_files_on_update($upgrader_object, $hook_extra) {
if ($hook_extra['action'] !== 'update') return false;
if ($hook_extra['type'] === 'theme' && isset($hook_extra['themes'])) {
// Divi - disable CPT CSS wrapper
if (array_search('Divi', $hook_extra['themes']) !== false) {
$file_location = get_template_directory().'/includes/builder/core.php';
$file_contents = file_get_contents($file_location);
$file_contents = str_replace('return $should_wrap;', 'return false;', $file_contents);
file_put_contents($file_location, $file_contents);
}
}
}
I know it's technically incorrect to edit a theme's original file, BUT the "correct" alternative is to overwrite the entire Divi/includes/builder/core.php file in my child theme, which is 7253 lines long! Chances are high that future Divi updates would edit that original file, leaving me without those edits reflected in the child theme version.
After some experimentation, I found that the following code in functions.php works... (please note, this will enqueue both the standard theme stylesheet as well as Divi's custom post child theme).
You can include all the styles you want to override in your own style-cpt.css file in your child theme folder.
function my_theme_enqueue_styles() {
$parent_style = 'divi-style';
$template_directory = get_template_directory_uri();
$stylesheet_directory = get_stylesheet_directory_uri();
wp_enqueue_style( $parent_style, $template_directory . '/style.css' );
wp_enqueue_style( 'child-style',
$stylesheet_directory . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
$parent_style = 'divi-cpt-style';
wp_enqueue_style( $parent_style, $template_directory . '/style-cpt.css' );
wp_enqueue_style( 'child-cpt-style',
$stylesheet_directory . '/style-cpt.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
I am using this and is working fine:
function disable_cptdivi(){
remove_action( 'wp_enqueue_scripts', 'et_divi_replace_stylesheet', 99999998 ); } add_action('init', 'disable_cptdivi');
very late to the party but I managed to block the CPT styles from divi by prepending the #page-container selector to my Custom CSS in Theme Options, e.g.:
.header --> #page-container .header
#nav_toggle --> #page-container #nav_toggle
Will override the #et-boc selector
Tested with Divi 6.1.1
I am fairly new to Wordpress but I do understand child themes.
This is the first time I came across a theme with a plugin that has its own style sheet enqueued. Is the following code adding the stylesheet of the booking plugin into the main parent style sheet already (so I do not need to include this in the child theme), or is this an additional enqueued style sheet and I will have to also include that separately in my child's theme.
Any explanation as to what exactly and how this code is working with the parent style would be appreciated. Wordpress codex is practically useless in this area.
{
wp_enqueue_style( 'villagio-style', get_stylesheet_uri(), array(),
villagio_get_theme_version() );
if ( is_plugin_active( 'motopress-hotel-booking/motopress-hotel-
booking.php' ) ) {
wp_enqueue_style( 'villagio-motopress-hotel-booking',
get_template_directory_uri() . '/css/motopress-hotel-booking.css',
array('villagio-style'), villagio_get_theme_version(), 'all' );
}
Yes, you can put that code into your child theme functions.php file. It'll call motopress-hotel-booking.css file, when the plugin motopress-hotel-booking.php will be active. Here is full code:
function custom_add_css_for_theme()
{
wp_enqueue_style('villagio-style', get_stylesheet_uri(), array(), villagio_get_theme_version());
if (is_plugin_active('motopress-hotel-booking/motopress-hotel-booking.php')) {
wp_enqueue_style('villagio-motopress-hotel-booking', get_template_directory_uri() . '/css/motopress-hotel-booking.css', array('villagio-style'), villagio_get_theme_version(), 'all');
}
}
add_action( 'wp_enqueue_scripts', 'custom_add_css_for_theme' );
It's don't matter, from where you called your function( from child theme, or from parent theme ). The function get_template_directory_uri() returns directory of your parent theme, even if you called it from child theme.
If I understand correctly you want to enqueue CSS only in parent theme, try following:
if (is_plugin_activate( 'plugin-name' ) && ! is_child_theme() ) {
//the code will show only in parent theme
}
Reference here
I am pretty new to WordPress development. I read that it's better to use wp_enqueue_style and do_action inside the functions.php file rather than linking CSS files directly as I would when not using WordPress.
Why this is a best practice? What are its advantages?
If you have activated child theme then use get_template_directory_uri() functions.
If you have activated parent theme then use get_stylesheet_directory_uri() functions.
get_template_directory_uri will always refer to the parent theme folder for assets.
get_stylesheet_directory_uri will refer to the "current" theme folder for assets (which could be the parent or the child, depending on where it is called).
Child theme example:
wp_enqueue_style( 'my_child_styles', get_stylesheet_directory_uri().'/style.css' );
Parent theme Example
wp_enqueue_style( 'my_parent_styles', get_template_directory_uri().'/style.css' );
Method-1
// load css into the website's front-end
function mytheme_enqueue_style() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
Method-2
// Add this code in your functions.php
function add_stylesheet_to_head() {
echo "<link href='".get_stylesheet_directory_uri()."/style.css' rel='stylesheet' type='text/css'>";
}
add_action( 'wp_head', 'add_stylesheet_to_head' );
Because wp-enqueue-style adds scripts/styles to the queue.
Registers the style if source provided (does NOT overwrite) and enqueues.
I'm really really stuck here so I'd appreciate some help from above...
I'm using the jkreativ theme and am currently trying to translate my child-theme.
I am using this code in my childthemes functions.php:
<?php
/**
* Setup My Child Theme's textdomain.
*
* Declare textdomain for this child theme.
* Translations can be filed in the /languages/ directory.
*/
function my_child_theme_setup() {
load_child_theme_textdomain( 'jkreativ-child', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>
In my Childthemes Folder I have a folder called "languages" that contains the
de_DE.mo
de_De.po
files.
I looked in the wordpress codex and to me this seems to be the proper way.
But no single line gets translated...
Any ideas anyone?
Thanks!
Paul
There is a post at wordpress.stackoverflow.com with this problem. Basically what you have to do is
Create a folder inside your languages one with the name of your parent theme;
Place there the .mo file that will overwrite the parent theme translations;
Change your code like this:
function my_child_theme_setup() {
load_theme_textdomain( 'jkreativ', get_stylesheet_directory() . '/languages/jkreativ' );
load_child_theme_textdomain( 'jkreativ-child', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
Calling load_theme_textdomain and passing the parent theme domain will do the trick.
Hope it helps!