Include CSS the right way in a WordPress’ child theme

We really should be using wp_enqueue_style functions to include your theme’s stylesheets rather than using @import statements. The enqueue functions allows us to specify dependencies in much better way.

//enqueue style for child theme
function  custom_child_enqueue_styles(){
	// enqueue parent styles
	wp_enqueue_style('parent-theme', get_template_directory_uri() . '/style.css' );
	// enqueue child styles - style.css
	wp_enqueue_style('parent-theme-child', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
	// enqueue child styles - scss/child.css
	wp_enqueue_style('parent-theme-child-scss', get_stylesheet_directory_uri() .'/scss/child.css', array('parent-theme', 'parent-theme-child'));
add_action('wp_enqueue_scripts', 'custom_child_enqueue_styles');

How to change thumbnail size for Divi’s gallery module

post_thumbnails_divi.php is where Elegant Themes‘ Divi specifies the custom image sizes:

add_theme_support( 'post-thumbnails' );

global $et_theme_image_sizes;

$et_theme_image_sizes = array(
	'400x250'  => 'et-pb-post-main-image',
	'1080x675' => 'et-pb-post-main-image-fullwidth',
	'400x284'   => 'et-pb-portfolio-image',
	'510x382'   => 'et-pb-portfolio-module-image',
	'1080x9999' => 'et-pb-portfolio-image-single',
	'400x516'   => 'et-pb-gallery-module-image-portrait',
	'2880x1800' => 'et-pb-post-main-image-fullwidth-large',

$et_theme_image_sizes = apply_filters( 'et_theme_image_sizes', $et_theme_image_sizes );
$crop = apply_filters( 'et_post_thumbnails_crop', true );

if ( is_array( $et_theme_image_sizes ) ){
	foreach ( $et_theme_image_sizes as $image_size_dimensions => $image_size_name ){
		$dimensions = explode( 'x', $image_size_dimensions );

		if ( in_array( $image_size_name, array( 'et-pb-portfolio-image-single' ) ) )
			$crop = false;

		add_image_size( $image_size_name, $dimensions[0], $dimensions[1], $crop );

		$crop = apply_filters( 'et_post_thumbnails_crop', true );

I wanted to modify the “et-pb-gallery-module-image-portrait” thumbnail size to be 500×500. Since I was using a child theme, my thought was to copy the post_thumbnails_divi.php into the child theme and change the value there.

…Nope, that didn’t work.
Continue reading “How to change thumbnail size for Divi’s gallery module”

How to darken post background images in Fable theme 1.7.4

The theme I’m currently using for this site is Fable Theme by Elegant Theme.

One of the issues I recently dealt was how I have to be picky about selecting featured images for each post. The featured image is used as the background image for each post on homepage and archive pages. And by default, when there is an featured image assigned to a post, the font color of the post title and its summary is white.

Initially, I darken the text shadow to make the text more readable. But depending on the image I picked, it wasn’t an effective solution for some posts.

So I decided to apply linear gradient over the post background/featured image to make it little darker to give little more contrast between the text and the image.

Unfortunately, you can’t simply overwrite style.css in this case. The themes uses a function, et_fable_get_background(), to insert background-image property in the section in content.php

So in order to make the change, you need to modify two files in the child theme folder.
Continue reading “How to darken post background images in Fable theme 1.7.4”