Modern Portfolio Pro header modification like a showcase example

[asbilly92]

Ok so i'm wondering ...

I have a client and we are using the Modern Portfolio theme. She really likes the HEADER area in one of the showcase sites using the same theme (Modern Portfolio), Here is a link to the site. : Dr Beurkens

So my question is: they have a div tag in the code inside the header that is: <div class="header-photo"></div> how can I put a div tag in the same are like this? I tried the simple hooks and I tried adding code into the functions.php. I was able to add wraps in the functions.php but not a complete div where I can put a pic...can anyone help me?

Thanks in advance.

p.s. our site isn't live yet and has a 'coming soon' plugin in use so it's not view-able.

[carasmo]

Use the genesis_header hook and set the priority to 5. See example, read the notes.

https://gist.github.com/carasmo/cb17f3077bb5081795d1

---

Genesis Theme Customization and Help

[asbilly92]

Omgosh so awesome, I will try it as soon as I can!!!

THANK YOU!!!

[asbilly92]

oK but wait I just noticed... in your code it looks like you are wrapping the class around the image...I'm wanting to add the complete class, it would be 'empty' complete with the opening and closing div tags before the image just like the showcase site...so it would look like: <div class="header-photo"></div> and that would still be just after the wrap and bifore the .title-area...?

You can see how it is in the showcase site (showcase site ) using the dev tools.

thanks!

[carasmo]

use the same but remove the image tag, it will be in the same spot as the sample site but you need to check the priority

Before:
echo '<div class="some-class"><img src="' . get_site_url() . '/path/to/image.png" alt="Change this" /></div>';

After:

echo '<div class="some-class"><!-- empty for background image --></div>';

---

Genesis Theme Customization and Help

[asbilly92]

Ok so do you mean it will be like:

function prefix_add_image_to_header() {

	echo '<div class="some-class"><!-- empty for background image --></div>';
	
}

add_action( 'genesis_header', 'prefix_add_image_to_header', 5 );	

[carasmo]

Yes, but read the instructions on the gist. Use ftp and a code editor. Add your theme prefix where prefix_ is so it looks professional. The hooks are in the documentation.

---

Genesis Theme Customization and Help

[asbilly92]

Ok yep I got the whole ftp and code editor part understood 😉 I will give this a shot as soon as I can

THANK YOU!

[asbilly92]

Omgosh YOU are my hero 😉

Worked first time!!

Thank you so much!! I've been trying to figure out how to do something like that with a function for a long time now,! Not only did you solve my issue I really learned something!! I love these forums 😉

So I'm gonna ask a super dumb question now... I always hear people say that about the documentation...what do you mean the WordPress documentation, or are you referring to some Genesis documentation?

THANK YOU THANK YOU 😉

[carasmo]

WordPress is the base for Genesis and the code is php, so the documentation refers to many things. I read the documentation on Genesis and I also read as much of the http://codex.wordpress.org/ and general stuff about php. I'm an artist and not really coder (php wise) but if I can see something similar to what I need, I can usually figure it out. The first thing I did was learn the terms used in php and WordPress has its own, then I am able to find what I'm looking for most of the time.

Putting something somewhere and moving this or that above or below something is in the Genesis docs, but it might not be very specific, you have to play around to learn on a .dev server.

---

Genesis Theme Customization and Help

[Author]

Posts