Kirki: How to add inline css into only one file .css

[ghost]

Hi,
inline 110 and 111 in path kirki/includes/styles/class-kirki-styles-frontend.php

wp_enqueue_style( 'kirki-styles-' . $config_id, trailingslashit( Kirki::$url ) . 'assets/css/kirki-styles.css', null, null );

wp_add_inline_style( 'kirki-styles-' . $config_id, $styles );

I know that, this plugin add kirki-styles.css and add inline css in it. In frontend, it will create a empty kirki-styles.css file. Now, i want to add inline css into mytheme-theme-style and remove kirki-styles.css.

This is my inline main css:
wp_enqueue_style( 'mytheme-theme-style', get_stylesheet_uri(), array(), '1.0' );
It feasible?
Version 2.3.6

[RonalddeRooij]

How do I aquire this functionality in 2.4.0?

Thanks in advance.

[aristath]

Using the latest dev version this should be posiible...
I haven't tried the below code but it should work:

// Compiles the CSS to a file instead of adding inline.
add_filter( 'kirki/dynamic_css/method', function() {
    return 'file';
});
// Embed googlefonts in styles instead of loading separate link.
// REPLACE MY_CONFIG WITH YOUR ACTUAL CONFIG-ID.
add_filter( 'kirki/MY_CONFIG/googlefonts_load_method', function() {
    return 'embed';
});
// Add the theme's stylesheet to the compiled CSS.
add_filter( "kirki/{$config_id}/dynamic_css", function( $css ) {
    return file_get_contents( get_stylesheet_directory() . '/styles.css' ) . $css;
});

If it does, then you can remove this line that you had:

wp_enqueue_style( 'mytheme-theme-style', get_stylesheet_uri(), array(), '1.0' );

[steve231293]

Hello Aristath,

I want to remove request to a empty file kirki-styles.css

You can add filter to change stylesheet to add inline css to for me?

Kirki version 3.0.23

kirki/modules/css/class-kirki-modules-css.php
line : 195
Change code to:

$stylesheet = apply_filters( "kirki/{$config_id}/stylesheet", 'kirki-styles-' . $config_id );

if ( $stylesheet == 'kirki-styles-' . $config_id ) {
    wp_enqueue_style( 'kirki-styles-' . $config_id, trailingslashit( Kirki::$url ) . 'assets/css/kirki-styles.css', array(), KIRKI_VERSION );
    wp_add_inline_style( 'kirki-styles-' . $config_id, $styles );
} else {
    wp_add_inline_style( $stylesheet, $styles );
}

then use:

add_filter( "kirki/config-id/stylesheet", 'change_kirki_stylesheet' );

function change_kirki_stylesheet() {
    return 'theme-name-style';
}

Hope you can understand my idea.

[carasmo]

I was using the second ...dynamic_css filter here to add css to avoid using wp_enqueue_scripts so I could combine with kirki's output for at least a couple years. With the latest upgrade, the css outputs but the background images are not there in the parsed output. The fields are not empty. I redid the code with wp_enqueue_scripts and the images are there. What's up with either of these filters? Thanks!

add_filter( 'kirki/config_id/stylesheet', 'my_css' );
add_filter( 'kirki/config_id/dynamic_css', 'my_css', 10, 3 );

[aristath]

@steve231293 somehow this got removed... Can you please try using the kirki_{$config_id}_stylesheet filter?

@carasmo in the develop branch can you please try using kirki_{$config_id}_stylesheet instead of kirki/{$config_id}/stylesheet and kirki_{$config_id}_dynamic_css instead of kirki/{$config_id}/dynamic_css and let me know if that works for you?

[steve231293]

Thanks Aristath, It worked (y)

[notrealdev]

Sorry, how i can remove a empty file kirki-styles.css, and add inline css into my main style sheet? Where i can find the hook? Thank

[aristath]

Something like this should work:

function my_theme_kirki_stylesheet_filter( $stylesheet ) {
    return 'my-theme-stylesheet-handle';
}
add_filter( 'kirki_config_id_stylesheet', 'my_theme_kirki_stylesheet_filter', 99 );

Replace my-theme-stylesheet-handle with your actual theme's stylesheet handle
Replace config_id inside kirki_config_id_stylesheet with your the actual config-id you use for your theme in Kirki
And finally of course rename the my_theme_kirki_stylesheet_filter function to whatever you want, prefixed with your theme's name - as per the WP guidelines.

[notrealdev]

Hi, i have config-id is neon and theme stylesheet handle is neon-theme-style

// config-id
Neon_Kirki::add_config( 'neon', array(
    'option_type' => 'theme_mod',
    'capability'  => 'edit_theme_options',
));

// theme handle
wp_enqueue_style(
    'neon-theme-style',
    get_stylesheet_uri()
);

This code not works for me

function my_theme_kirki_stylesheet_filter( $stylesheet ) {
    return 'neon-theme-style';
}
add_filter( 'kirki_neon_stylesheet', 'my_theme_kirki_stylesheet_filter', 99 );

[steve231293]

You should use lastest Kirki version. 3.0.23

[notrealdev]

Ya, waiting for it
// my current version 3.0.22

[aristath]

Closing this one again since it was resolved in v3.0.23.

[jessekafor]

I have the version 3.0.39 and I only get inline CSS

Closing this one again since it was resolved in v3.0.23.

The kirki output is only inline css, for the new version (3.0.39) how can we have it in a file?

[aristath]

Compiling to a file is no longer a feature included in the plugin.
It was causing a lot of issues because customer sites don't always have correct permission for their filesystem, the implementation on some hosting environments was problematic (like for example on Google and Windows servers), and it's performance wasn't as good as inlining the css. When compiling to a file the browser has to make an extra couple of round-trips to get the file and render it, while inlining the case is faster both for the server and for the browser. There is absolutely no benefit to having the styles compiled to a file and that's why the feature was removed.
However, Kirki does have a lot of filters you can use to get the compiled css, and if you really want to compile to a file you can write some custom code to do that.

[jessekafor]

Compiling to a file is no longer a feature included in the plugin.
It was causing a lot of issues because customer sites don't always have correct permission for their filesystem, the implementation on some hosting environments was problematic (like for example on Google and Windows servers), and it's performance wasn't as good as inlining the css. When compiling to a file the browser has to make an extra couple of round-trips to get the file and render it, while inlining the case is faster both for the server and for the browser. There is absolutely no benefit to having the styles compiled to a file and that's why the feature was removed.
However, Kirki does have a lot of filters you can use to get the compiled css, and if you really want to compile to a file you can write some custom code to do that.

But the filters require a config_id, can you give us a filter hook that can be used in a commercial theme?

[aristath]

But the filters require a config_id, can you give us a filter hook that can be used in a commercial theme?

Why, does your theme not have a config_id ?