WP Recipe Maker – template styles

WP Recipe Maker templates expect the CSS to be managed in the WordPress backend. You can edit a template’s CSS in WP Recipe Maker > Settings > Template Editor > {select template} > Edit CSS.

I prefer to build the template styles in my theme so I can version control the styles and leverage our SASS variables for brand colors. Including the styles in the theme’s main stylesheet works okay in most instances, but some recipe cards like Print and AMP are loaded without your theme styles.

My solution is to compile a stylesheet for each custom template I build, then hook into wprm_get_template to include the stylesheet anywhere that template is rendered. This is similar to how WPRM enqueues the template’s CSS you have specified in Edit CSS.

I also load all of the custom template stylesheets when in the Template Editor so it renders correctly there.

You’ll want to update the $templates array in be_recipe_template_styles() with the template slug and relative URL to your template’s stylesheet.

/**
 * Admin recipe template styles
 *
 */
function be_admin_recipe_template_styles() {
	$screen = get_current_screen();
	$show_on = [ 'admin_page_wprm_template_editor' ];
	if( defined( 'WP_LOCAL_DEV' ) && WP_LOCAL_DEV ) {
		$show_on[] = 'post';
	}
	if( !empty( $screen->base ) && in_array( $screen->base, $show_on ) ) {
		echo be_recipe_template_styles( 'all' );
	}

}
add_action( 'admin_head', 'be_admin_recipe_template_styles' );

/**
 * Recipe template styles
 *
 */
function be_frontend_recipe_template_styles( $output, $recipe, $type, $slug ) {

	if( empty( $type ) )
		return $output;

	$template = WPRM_Template_Manager::get_template_by_type( $type );
	if( !empty( $template['slug'] ) )
		$style = be_recipe_template_styles( $template['slug'] );

	return $style . $output;
}
add_filter( 'wprm_get_template', 'be_frontend_recipe_template_styles', 10, 4 );

/**
 * Recipe template styles
 *
 */
function be_recipe_template_styles( $slug = false ) {

	if( ! $slug )
		return;

	// key is WPRM template slug, value is CSS file location
	$templates = [
		'the-recipe-rebel' => '/assets/css/recipe.css'
	];

	$style = '';
	if( array_key_exists( $slug, $templates ) ) {
		$url = get_stylesheet_directory_uri() . $templates[ $slug ] . '?' . filemtime( get_stylesheet_directory() . $templates[ $slug ] );
		$style .= '<link rel="stylesheet" id="recipe-' . $slug . '-css"  href="' . $url . '" type="text/css" media="all" />';

	} elseif( 'all' === $slug ) {
		foreach( $templates as $slug => $template ) {
			$url = get_stylesheet_directory_uri() . $templates[ $slug ] . '?' . filemtime( get_stylesheet_directory() . $templates[ $slug ] );
			$style .= '<link rel="stylesheet" id="recipe-' . $slug . '-css"  href="' . $url . '" type="text/css" media="all" />';
		}
	}

	return $style;
}