How to override parent theme function through the child theme [closed]

Question

Trying to create a template that places a custom post UI image between the navigation bar and the title like this:

However, I am unable to override the header-extensions.php in my child folder to the parent

The page is displayed through single-program.php -> get_header(); -> header-extensions.php -> ambition_headercontent_details();

The code that is fit between the Navbar and the title:

        </div><!-- .container -->

    <img id="single-program-banner" src="<?php the_field('banner'); ?>" alt="" />


</div><!-- .hgroup-wrap -->

Theme I'm using https://www.themehorse.com/preview/ambition/

Thank you

Answer 1

I just downloaded the theme to check it out, and header-extensions.php is not loaded as a template:

    /** Load Structure */
    require_once (AMBITION_STRUCTURE_DIR . '/header-extensions.php');

So you wouldn't be able to override the file in that manner. I'm not sure exactly what you are trying to do, but it looks like ambition_headercontent_details method is in a hook named ambition_header, so you could remove their action and add your own stuff wherever you want. This is one way it could be done in your child theme's function.php:

    <?php
    /**
     * Remove the Ambition parent theme headercontent_details filter.
     * @see https://developer.wordpress.org/reference/functions/remove_action/
     */
    add_action( 'init', 'ambition_child_remove_action');

    function ambition_child_remove_action() {
        remove_action( 'ambition_header', 'ambition_headercontent_details', 10 );
    }

    /**
     * Add child theme override for ambition_headercontent_details.
     * @see https://developer.wordpress.org/reference/functions/add_action/
     */
    add_action( 'ambition_header', 'ambition_child_headercontent_details' );
    /**
     * Shows Header content details
     *
     * Shows the site logo, title, description, searchbar, social icons and many more
     */
    function ambition_child_headercontent_details() { ?>
        <?php global $ambition_settings;
        $header_image = get_header_image();
        if (!empty($header_image)):?>
                <a href="<?php echo esc_url(home_url('/'));?>"><img src="<?php echo esc_url($header_image);?>" class="header-image" width="<?php echo get_custom_header()->width;?>" height="<?php echo get_custom_header()->height;?>" alt="<?php echo esc_attr(get_bloginfo('name', 'display'));?>"> 
                </a>
        <?php
            endif;?>
        <div class="hgroup-wrap">
            <div class="container clearfix">
            <?php
            $ambition_settings = wp_parse_args(  get_option( 'ambition_theme_settings', array() ),  ambition_get_option_defaults() );
                $header_display = $ambition_settings['header_settings'];
                $header_logo = $ambition_settings['img-upload-header-logo'];
                if ($header_display != 'disable_both' && $header_display == 'header_text') { ?>
                <section id="site-logo" class="clearfix">
                <?php if(is_single() || (!is_page_template('page-templates/page-template-business.php' )) && !is_home()){ ?>
                    <h2 id="site-title"> 
                        <a href="<?php echo esc_url(home_url('/'));?>" title="<?php echo esc_attr(get_bloginfo('name', 'display'));?>" rel="home">
                        <?php bloginfo('name');?>
                        </a> 
                    </h2><!-- #site-title -->
                    <?php } else { ?>
                    <h1 id="site-title"> 
                        <a href="<?php echo esc_url(home_url('/'));?>" title="<?php echo esc_attr(get_bloginfo('name', 'display'));?>" rel="home">
                        <?php bloginfo('name');?>
                        </a> 
                    </h1><!-- #site-title -->
                    <?php }
                    $site_description = get_bloginfo( 'description', 'display' );
                    if($site_description){?>
                        <h2 id="site-description"> <?php bloginfo('description');?> </h2>
                    <?php } ?>
                </section><!-- #site-logo -->
                    <?php
                }   elseif ($header_display != 'disable_both' && $header_display == 'header_logo') {
                    ?>
                <section id="site-logo" class="clearfix">
                <?php if(is_single() || (!is_page_template('page-templates/page-template-business.php' )) && !is_home()){ ?>
                    <h2 id="site-title">
                        <a href="<?php echo esc_url(home_url('/'));?>" title="<?php echo esc_attr(get_bloginfo('name', 'display'));?>" rel="home"> <img src="<?php echo $header_logo;?>" alt="<?php echo esc_attr(get_bloginfo('name', 'display'));?>"></a>
                    </h2>
                    <?php }else{ ?>
                    <h1 id="site-title">
                        <a href="<?php echo esc_url(home_url('/'));?>" title="<?php echo esc_attr(get_bloginfo('name', 'display'));?>" rel="home"> <img src="<?php echo $header_logo;?>" alt="<?php echo esc_attr(get_bloginfo('name', 'display'));?>"></a>
                    </h1>
                    <?php } ?>
                </section><!-- #site-logo -->
                <?php }?>
                <button class="menu-toggle"><?php _e('Responsive Menu', 'ambition' ); ?></button>
                <?php  
                if (has_nav_menu('primary')) {// if there is nav menu then content displayed from nav menu else from pages ?>
                <section class="hgroup-right">
                <?php $args = array(
                            'theme_location' => 'primary',
                            'container'      => '',
                            'items_wrap'     => '<ul class="nav-menu">%3$s</ul>',
                        ); ?>
                    <nav id="site-navigation" class="main-navigation clearfix" role="navigation">
                        <?php wp_nav_menu($args);//extract the content from apperance-> nav menu ?>
                    </nav><!-- #access -->
            <?php } else {// extract the content from page menu only ?>
                <section class="hgroup-right">
                    <nav id="site-navigation" class="main-navigation clearfix" role="navigation">
                        <?php   wp_page_menu(array('menu_class' => 'nav-menu')); ?>
                    </nav><!-- #access -->
                <?php   }
                $search_form = $ambition_settings['search_header_settings'];
                if (1 != $search_form) { ?>
                    <div class="search-toggle"></div><!-- .search-toggle -->
                    <div id="search-box" class="hide">
                        <?php get_search_form();?>
                        <span class="arrow"></span>
                    </div><!-- #search-box -->
                            <?php } ?>
                </section><!-- .hgroup-right -->
            </div><!-- .container -->
        </div><!-- .hgroup-wrap -->

                <?php global $disable_slider;
                    global $ambition_settings;
                if (is_front_page()) {
                    $disable_slider = $ambition_settings['disable_slider'];
                    if (empty($disable_slider)) {
                        if (function_exists('ambition_pass_slider_effect_cycle_parameters')) {
                            ambition_pass_slider_effect_cycle_parameters();
                        }
                        if (function_exists('ambition_featured_sliders')) {
                            ambition_featured_sliders();
                        }
                    }
                } else {
                    if (('' != ambition_header_title()) || function_exists('bcn_display_list')) {
                        $sitetitle_img_setting = $ambition_settings['site_title_setting'];

                        $sitetitle_image = $ambition_settings['img-upload-site-title']; ?>
                        <div class="page-title-wrap" <?php if ( $sitetitle_img_setting != '1'  && $sitetitle_image != '' ){ ?> style="background-image:url('<?php echo esc_url($sitetitle_image);?>');" <?php } ?> >
                            <div class="container clearfix">
                            <?php if(is_home()){?>
                                <h2 class="page-title"><?php echo ambition_header_title();?></h2><!-- .page-title -->
                            <?php } else { ?>
                                <h1 class="page-title"><?php echo ambition_header_title();?></h1><!-- .page-title -->
                            <?php }
                                if (function_exists('ambition_breadcrumb')) {
                                    ambition_breadcrumb();
                                }
                            ?>
                            </div><!-- .container -->
                        </div><!-- .page-title-wrap -->
                <?php
                    }
                }
    }

If you're trying to output the image after the header, and don't need to modify the actual header, then you just need to hook in at a later priority with a method like this in your child theme's functions.php file:

    <?php
    /**
     * Add Banner to the ambition_header hook.
     */
    add_action( 'ambition_header', 'ambition_child_add_banner', 15 );

    function ambition_child_add_banner() {
        ?>
        <img id="single-program-banner" src="<?php the_field( 'banner' ); ?>" alt="" />
        <?php
    }

P.S. I dunno what you have going on with the method the_field, but you may want to ensure that it's being used safely with something like https://developer.wordpress.org/reference/functions/esc_url/

EDIT: I threw those files in a gist that you test out if you need: https://gist.github.com/timelsass/754aa14b367b3f54b16d44ae13b540a7

Answer 2

First, get a child theme working. Lots of tutorials about that, here's one: https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/ , and the info in the WP codex (always a good place to look): https://codex.wordpress.org/Child_Themes .

Pay close attention to the changes that are needed in the child theme's styles.css .

Once you get the child theme working, copy the single-program.php from the parent theme (which might be a template) into the child theme folder. Modify the copied single-program.php code to make the changes that you need.

Since the single-program.php is in the child theme folder, it will be loaded instead of the one in the parent theme folder (assuming that the theme developer followed theme 'standards').

You don't want to make changes to the parent theme files, as your changes will be overwritten on the next theme update.

If the single-program.php is actually a template, you can still modify the code to do what you want. Just specify that template in your posts.

Good luck.