theme.json styles rendering on backend but not frontend

  • Resolved rohannelson

    (@rohannelson)


    2 years, 9 months ago

    I’m a first timer learning to build my own block theme, following this tutorial.

    I can’t for the life of me figure out why global styles are rendering on the front end but not the back end. I’ve basically done what the tutorial says word for word.

    I also compared a a few different templates like this one.

    I’m using Local as a local development environment, but tried putting it on a live server to see if it made any difference and it didn’t.

    I’m assuming it’s something wrong with my functions.php file as there isn’t much happening anywhere else.

    if ( ! function_exists( 'dianella_theme_support' ) ) : 
	function dianella_theme_support() {
            add_theme_support( 'wp-block-styles' );
			add_theme_support( 'editor-styles' );
			add_theme_support( 'post-thumbnails' );
			add_editor_style( 'style.css' );
        }

add_action( 'after_setup_theme', 'dianella_theme_support' );
endif;

function dianella_theme_styles() {
	
	wp_enqueue_style( 'dianella-theme-style', get_stylesheet_uri() );

		wp_enqueue_style( 'dianella-theme-style' );
}
add_action( 'wp_enqueue_scripts', 'dianella_theme_styles' );

    Aside from that I’ve just added some fonts…

    • This topic was modified 2 years, 9 months ago by Jan Dembowski.
Viewing 10 replies - 1 through 10 (of 10 total)

  • Hey,

    Do you mean global styles that you’ve set up using the global styles interface in the editor? Or those that you’ve configured in your themes theme.json file?

    Also, please confirm where the styles are appearing correctly, your post title says the frontend but in the post you mention the backend ??

    Thread Starter rohannelson

    (@rohannelson)

    Hi,

    I mean global styles that I’ve configured in my theme.json file.
    They’re displaying in the theme editor, but not on the front end (excuse the mixup in my first post).

    Here’s a link to the theme on github https://github.com/rohannelson/dianella-theme

    Thread Starter rohannelson

    (@rohannelson)

    Thought I should add, I’m using wp 5.9 and there aren’t any plugins installed.
    twenty twenty-two also seems to work fine on the same install of WordPress, so I don’t see how it could be anything other than my theme…

    Hi
    I am also using Local, so I don’t think that is the issue :thinking
    Let me download the theme and check quickly.

    OK, I removed the font families from theme.json and the styles loaded on the front: I think it is because of the extra '. in "'Montserrat', sans-serif'"
    Try removing them or escaping them.

    Thread Starter rohannelson

    (@rohannelson)

    Thanks @poena.

    I tried removing the ' but it didn’t seem to make a difference. Can you elaborate on how you removed the font families from theme.json to get it to work? I tried removing the font families, and then the typography sections altogether, and still couldn’t get it to work.

    I removed all font families except the system fonts.

    Did you try clearing the cache?

    Either way the problem is likely because there are errors somewhere in the theme.json formatting.

    Thread Starter rohannelson

    (@rohannelson)

    Thanks again @poena.

    I tried hard-refreshing on my browser, but it seems like the changes I’ve tried on the json file aren’t registering? Is there a way of flushing the cache on wp without a plugin?

    Thread Starter rohannelson

    (@rohannelson)

    I’ve tried switching away from the theme and switching back, clearing the cache on my browser, clearing the cache on wordpress cli and it’s STILL showing the same ' after ‘Montserrat’, sans-serif in developer mode…

    Thread Starter rohannelson

    (@rohannelson)

    Whoops, was editing the theme in a different location…
    Makes a lot of sense now :/

    Thanks for your help @poena (and @jameskoster), works now!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘theme.json styles rendering on backend but not frontend’ is closed to new replies.