Wordpress Function to change existing featured image size

Question

I am using the custom-community (CC) theme I have created a sub-theme I have created a functions.php file

The original CC theme has this code in the functions.php

        // This theme uses post thumbnails
    if (function_exists('add_theme_support')) {
        add_theme_support('post-thumbnails');
        set_post_thumbnail_size(222, 160, true);
        add_image_size('slider-top-large', 1006, 250, true);
        add_image_size('slider-large', 990, 250, true);
        add_image_size('slider-responsile', 925, 250, true);
        add_image_size('slider-middle', 756, 250, true);
        add_image_size('slider-thumbnail', 80, 50, true);
        add_image_size('post-thumbnails', 222, 160, true);
        add_image_size('single-post-thumbnail', 598, 372, true);
    }

I want to change the post thumbnail size from 222x160 to a larger size, e.g. 400x300.

I have read the codex on Post Thumbnails, Function Reference/add image size, Function Reference/set post thumbnail size, Function Reference/the post thumbnail, Plugin API/Filter Reference.

Unfortunately my understanding of PHP is still very limited and I am in the early-learning phase.

I have seen examples of what sound like similar problems elsewhere for the twenty-ten theme, but nothing I can understand or apply myself without my functions.php locking me out, deleting it on ftp and starting again.

I am still unsure if it is possible to add a function to my sub-theme functions.php that will either unset/re-assign an image size for the thumbnail (or any other specified image type) in the parent theme.

To clarify that my functions.php and sub-theme are working correctly I can confirm that I have successfully used functions for styling my login, I just lack the understanding to achieve this myself.

Following the tuts-plus tutorial (Point 6 - Remove Additional Image Sizes) I tried the following code in my functions.php:

//change thumbnail size
function remove_parent_image_sizes( $sizes ) {
    unset( $sizes['post-thumbnail-size'] );
    return $sizes;
}

if ( function_exists( 'add_image_size' ) ) {
    // 400 pixels wide and 300 px tall, cropped
    add_image_size( 'post-thumbnails', 400, 300, true );
}

I then removed a featured image from a post and applied a new one but it still has the dimensions 222x160.

Still stumped :(

Also tried it this way but still no luck;

//change thumbnail size
function remove_parent_image_sizes( $sizes ) {
    unset( $sizes['post-thumbnail-size'] );
    return $sizes;
}

if (function_exists('add_theme_support')) {
    add_theme_support('post-thumbnails');
    set_post_thumbnail_size(400, 300, true);
    add_image_size('post-thumbnails', 400, 300, true);
}

And adding this line (modified from the stackexchange link) to the end caused my site to break:

add_action( 'after_setup_theme', 'remove_parent_image_sizes' );

Answer 1

In my opinion simplest way to create your own sizes inside your child theme is to remove using remove_theme_support and set it again add_theme_support like following example :

// Use the after_setup_theme hook with a priority of 11 to load after the
// parent theme, which will fire on the default priority of 10
add_action( 'after_setup_theme', 'remove_featured_images_from_child_theme', 11 );

function remove_featured_images_from_child_theme() {

    // This will remove support for post thumbnails on ALL Post Types
    remove_theme_support( 'post-thumbnails' );

    // Add this line in to re-enable support for just Posts
    add_theme_support( 'post-thumbnails', array( 'post' ) );
    // Thumbnail sizes
    add_image_size( 'my-theme-featured', 638, 280, true );
    add_image_size( 'my-theme-featured-home', 311, 207, true);
    add_image_size( 'my-theme-featured-carousel', 970, 400, true);
}

Don't forget to rebuild your thumbnail after the change with a plugin like AJAX Thumbnail Rebuild

I hope this help, Mike

Answer 2

The answer was incredibly simple in the end, and the writers of the parent theme had provided clear instructions on what I needed to do.

 * To override cc_setup() in a child theme, add your own cc_setup to your child theme's
 * functions.php file.

Above the original code was the start of a function which needed to be included in the child theme:

function cc_setup() {
    global $cap, $content_width;

    // This theme styles the visual editor with editor-style.css to match the theme style.
    add_editor_style();

    // This theme uses post thumbnails
    if (function_exists('add_theme_support')) {
        add_theme_support('post-thumbnails');
        set_post_thumbnail_size(222, 160, true);
        add_image_size('slider-top-large', 1006, 250, true);
        add_image_size('slider-large', 990, 250, true);
        add_image_size('slider-responsile', 925, 250, true);
        add_image_size('slider-middle', 756, 250, true);
        add_image_size('slider-thumbnail', 80, 50, true);
        add_image_size('post-thumbnails', 222, 160, true);
        add_image_size('single-post-thumbnail', 598, 372, true);
    }

Then I just deleted the lines I didn't want to modify and closed the function }:

// Override parent theme thumbnail size
function cc_setup() {
    global $cap, $content_width;

    // This theme styles the visual editor with editor-style.css to match the theme style.
    add_editor_style();

    // This theme uses post thumbnails
    if (function_exists('add_theme_support')) {
        add_theme_support('post-thumbnails');
        set_post_thumbnail_size(400, 300, true);
        add_image_size('post-thumbnails', 400, 300, true);
    }
}

Saved the functions.php (child theme), uploaded a new featured image to a post and it worked, my thumbnails are now 400,300.

My fault for not reading the documentation properly the first time, lesson learned!

Answer 3

You should first use remove_action() or remove_filter() functions to remove the parent theme behaviour and then you can add the action of sub theme using add_action() . Here is a nice tutorial on How to Modify the Parent Theme Behavior Within the Child Theme for your reference.