Use Settings in Child Theme css

This topic has 18 replies, 2 voices, and was last updated 2 years, 2 months ago by Elvin.

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

Author

Posts
March 18, 2020 at 8:23 am #1198606
Phuc
Hi, I saw that you write CSS using php (e.g /inc/block-editor.php).

Is it possible to use the customizer settings in my own child theme?
If yes, what’s the proposed way to do so. I don’t mind to create a new css file, but if
it’s possible, I would like to override some settings from the main theme.

e.g if I would want to apply the background color to a different div or the width etc.
```
$css->set_selector( 'body .editor-styles-wrapper' );
$css->add_property( 'background-color', esc_attr( generate_get_option( 'background_color' ) ) );
```
March 18, 2020 at 4:02 pm #1198933
Tom
Lead Developer
Lead Developer
Hi there,

Are you wanting to add the CSS into the block editor?

If so, I’d do this:
```
add_action( 'enqueue_block_editor_assets', function() {
    $css = '.your-class {color: ' . $your_variable . ';}';
    $css .= '.another {font-size: ' . $another_variable . ';}';

    wp_add_inline_style( 'generate-block-editor-styles', $css );
} );
```
March 21, 2020 at 7:35 am #1201855

Phuc

I don’t think so. I want to add the Settings from the Customizer into my CSS.
Like the Padding from the Container or the Container Width.

Let’s say I have a child theme with my own CSS.
I’ve set the container width to 1200px with Generatepress.
Of course I could use that width in my CSS just by writing 1200px.
But I want to grap the setting, so if I change the 1200px, I don’t have to touch the CSS.

March 21, 2020 at 3:59 pm #1202149

Tom
Lead Developer
Lead Developer

GeneratePress adds the necessary CSS from the Customizer into the block editor by default.

Are you finding something specific that’s missing?

March 21, 2020 at 11:48 pm #1202290

Phuc

I know you do, and you do a good job. But I am a Developer and want to add things by myself too. I want to create my own Theme based on GeneratePress and sometimes I might need to have access to breakpoints, Font Sizes, Colors for example.

March 22, 2020 at 8:59 am #1206213

Tom
Lead Developer
Lead Developer

In that case, you need to access the options in the database like this:

Standard options: https://github.com/tomusborne/generatepress/blob/2.4.2/inc/css-output.php#L19-L22
Color options: https://github.com/tomusborne/generatepress/blob/2.4.2/inc/css-output.php#L104-L107
Typography: https://github.com/tomusborne/generatepress/blob/2.4.2/inc/css-output.php#L320-L323
Spacing: https://github.com/tomusborne/generatepress/blob/2.4.2/inc/css-output.php#L503-L506

You can find the option names here: https://github.com/tomusborne/generatepress/blob/2.4.2/inc/defaults.php

March 22, 2020 at 11:36 am #1206456
Phuc
Ok, so I tried to simplify the process to understand what’s going on. So I’ve set the border to a fixed value. Can change that afterwards anyway, just wanted to see, where this is going.
But I can’t seem to find the border. Is it supposed to be inline in html or does it create a file? I’m lost here, sorry.
```
<?php 
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

if ( ! function_exists( 'wtp_base_css' ) ) {
	/**
	 * Generate the CSS in the <head> section using the Theme Customizer.
	 *
	 * @since 0.1
	 */
	function wtp_base_css() {
		$generate_settings = wp_parse_args(
			get_option( 'generate_settings', array() ),
			generate_get_defaults()
		);

		$css = new GeneratePress_CSS;

		$css->set_selector( 'body' );
		// $css->add_property( 'background-color', esc_attr( $generate_settings['background_color'] ) );
		$css->add_property( 'border', '1px solid green' );

		do_action( 'wtp_base_css', $css );

		return apply_filters( 'wtp_base_css_output', $css->css_output() );
	}
}
```
March 22, 2020 at 3:59 pm #1206618
Tom
Lead Developer
Lead Developer
Now you need to add it to the editor:
```
add_action( 'enqueue_block_editor_assets', function() {
    wp_add_inline_style( 'generate-block-editor-styles', wtp_base_css() );
}, 20 );
```
Also, I would add some checks to make the code update safe:
```
function wtp_base_css() {
    if ( ! function_exists( 'generate_get_defaults' ) ) {
        return;
    }

    $generate_settings = wp_parse_args(
        get_option( 'generate_settings', array() ),
        generate_get_defaults()
    );

    if ( ! class_exists( 'GeneratePress_CSS' ) ) {
        return;
    }

    $css = new GeneratePress_CSS;

    $css->set_selector( 'body' );
    // $css->add_property( 'background-color', esc_attr( $generate_settings['background_color'] ) );
    $css->add_property( 'border', '1px solid green' );

    return apply_filters( 'wtp_base_css_output', $css->css_output() );
}
```
March 23, 2020 at 1:02 am #1207039
Phuc
```
if ( ! function_exists( 'generate_get_defaults' ) ) {
        return;
    }
```
Yeah this part was usefull, because it didn’t work in the beginning saying, the function doesn’t exist.

I added it to the editor, but nothing happens. When I dump the function, I do get the CSS that I wrote. But it doesn’t seem to get injected into generate-block-editor-styles
March 23, 2020 at 9:35 am #1207703

Tom
Lead Developer
Lead Developer

Hmm, maybe it needs to fire later. Can you try the updated function?: https://generatepress.com/forums/topic/use-settings-in-child-theme-css/#post-1206618

March 23, 2020 at 10:12 am #1207724

Phuc

I’ve already implemented the updates that you suggested.

March 23, 2020 at 2:26 pm #1207921

Tom
Lead Developer
Lead Developer

With the 20 added to the function? Still nothing?

March 24, 2020 at 2:12 am #1208125

Phuc

That worked.
So now I have the Setting in the Editor, but I couldn’t figure how to apply it to the frontend too.

I’ve tried to different things, obviously not working, which is why I’m asking you again 😀

March 24, 2020 at 9:48 am #1208711
Tom
Lead Developer
Lead Developer
For that, you’d do this:
```
add_action( 'wp_enqueue_scripts', function() {
    wp_add_inline_style( 'generate-style', wtp_base_css() );
}, 20 );
```
March 24, 2020 at 9:50 am #1208718

Phuc

You are my hero. How can I thank you? Shall I send you a package of toilet paper or anything else in these crazy times?
Author

Posts

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] Use Settings in Child Theme css

Popular Articles

Start building better websites today.