0

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

Intended outcome

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

1

2 Answers 2

0

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

5
  • Cheers, thank you so much! It worked as expected :D
    – Stanford
    Jul 20, 2017 at 16:58
  • The method the_field is my part of my custom post type, this is for a template :)
    – Stanford
    Jul 20, 2017 at 17:14
  • Weird, now when I try to public or preview pages, the page just hangs..
    – Stanford
    Jul 20, 2017 at 18:13
  • I'm not sure why that would happen, make sure you have debugging on for PHP[WP_DEBUG] and JS [SCRIPT_DEBUG] ( codex.wordpress.org/Debugging_in_WordPress ) and see if there's anything outputted beyond that on page or in the console. It might be hanging due to something not being found. I noticed that theme was missing some stuff/didn't always include files to be friendly with a child theme that you might have to include/require in your child theme.
    – Tim Elsass
    Jul 21, 2017 at 1:45
  • Figured it out, using the wordpress debug as you mentioned!! Turns out I have an extra whitespace right before <?php and it was throwing the error: 'Cannot modify header information - headers already sent by' Found the solution here: stackoverflow.com/questions/8028957/…
    – Stanford
    Jul 21, 2017 at 17:19
0

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.