[Resolved] Allow overrides for functions

[Sunil]

I’m building a child theme. I’d like to override some of the markup in ways that would be clunky if I were to use GP’s hooks UI.

The code I want to alter is in /inc/template-tags.php.

Presently this template is called like this:

require get_template_directory() . '/inc/template-tags.php';

The use of get_template_directory() means that the template will always be called from the parent theme.
I’d love to be able to override all of the templates in the theme. Can this call be restructured where it appears in functions.php?

Thanks.

[Tom]

Hi there,

It’s typically not a good idea to overwrite files that include functions.

For example, I might add a function into that file in the future, then call the function somewhere else in the theme. If that function doesn’t exist because the file is overwritten, you’ll get a fatal PHP error.

Instead, all of the functions in there are wrapped in the function_exists() function.

That means you can copy the entire function (including the ! function_exists() part), and paste it into your child theme functions.php.

Then you can make changes to the function.

Hope this helps 🙂

[Sunil]

Thanks Tom!

[Tom]

You’re welcome 🙂

[Katie Jones]

Hey Tom – I’m overwriting a function and it isn’t working. In my functions.php of my child theme, I have:

function generate_featured_page_header_area($class)
{
die();

}

just to check that it’s working, and it isn’t dying. Thoughts? Or, a different question – is there an easier way to set a default page header image?

Thanks!

[Tom]

Are you basically wanting to show a featured image if one doesn’t exit? If so, you could just do this:

add_action('generate_after_header','tu_default_featured_image', 10);
function tu_default_featured_image()
{
	if ( has_post_thumbnail() ) {
		return;
	}

	if ( is_page() ) { ?>
		<img src="URL TO YOUR DEFAULT IMAGE" alt="" />
	<?php }
}

[Katie Jones]

Hey Tom, thanks. That’s a little different than what I’m looking for. There’s the page header image – in the ‘page header’ box generated by GP – and also the native WP featured image. They’re different, so this function results in two images at the top.

I’m wanting to customize the page header image code (also, now, to add extra code, not just to set a default image). How can I do that?

Thanks!

[Tom]

Ah I see – so what exactly are you trying to customize within the page header code? HTML markup?

[Katie Jones]

Yes, I want to do two things: add a div after the image (just a

to be able to add a styling element on top that I can’t do with a :after in CSS), and set the image to show a default image if none is specified in the template.

[Katie Jones]

The part that didn’t show up in my reply after “just a” was just an empty div with a class I can hook into with css.

[Tom]

The Page Header from the meta box is actually a really complex function which can’t really be replaced. It’s being re-written right now to be much more simple and include hooks (which it currently doesn’t contain).

What are you not able to insert using a pseudo selector? I might be able to help.

[Katie Jones]

Ah, that explains it… glad I asked then & glad to hear hooks are coming! What I’m trying to insert is a .png that looks like a white wave, with the top half transparent, so that when you stick it on top of the image (with #main having a white background), it gives the image a wavy bottom. There’s an example of this at the bottom of the top image on http://dev.raisingsagespediatrics.com/ (also my site).

Here’s the css I wanted for the div. I couldn’t get it working using a :after but maybe I’m missing something.

div.waves{
background: url(“images/waves-blue.png”) repeat-x !important;
background-size: 700px 22px !important;
background-position: -150px 0px !important;
width: 100%;
height: 32px;
background-color: #000;
z-index: 500;
margin-top: 0px;
box-sizing: border-box;
border-top: 30px solid #5c7eae;
padding-bottom: 30px;
}

[Tom]

Hmm, maybe..

.selector:before {
    content: url(URL TO IMAGE);
    position: relative;
    display: block;
    position: absolute;
    width: 100%;
    height: 32px;
    top: 0;
    left: 0;
    padding-bottom: 30px;
    border-top: 30px solid #5c7eae;
    background-color: #000;
}

Totally untested, but if you want to throw that up and show me, I should be able to tweak it to get it working right.

[Katie Jones]

Oh cool, thank you!

I’ve been playing with this and I haven’t gotten any :before content working on .page-header-image img, even just text, with my css wiped out – so I’m not sure what’s going on. Anyway, here’s the page: http://dev.ncbirthcenter.org/about/

Here’s the css, in the child theme’s style.css:

.page-header-image img:before {
content: url(“images/waves.png”) repeat-x !important;
position: relative;
display: block;
position: absolute;
width: 100%;
height: 32px;
bottom: 0;
left: 0;
padding-bottom: 30px;
}

[Katie Jones]

Hey Tom, I ended up just using jQuery to drop a div in: http://dev.ncbirthcenter.org/virtual-tour/

Thanks for your help!

[Author]

Posts