Archived topic

Use Settings in Child Theme css

18 replies · Started by Phuc on March 18, 2020

Viewing posts 1–15 of 19

March 18, 2020 at 8:23 am #1198606

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

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

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

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

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

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

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

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

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

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

I've already implemented the updates that you suggested.

March 23, 2020 at 2:26 pm #1207921

With the 20 added to the function? Still nothing?

March 24, 2020 at 2:12 am #1208125

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 :D

March 24, 2020 at 9:48 am #1208711

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

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?

This archived topic is closed to new replies.

Start building better websites today.