trying to make the header image clickable on my WP theme

@stevemtnoApr 01.2018

I would think this would be a simple things to do, but I can’t get it to work.

Here is the function that displays the header image:

[code] function spacious_header_image_markup( $html, $header, $attr ) { $output = ”; $header_image = get_header_image();

if( ! empty( $header_image ) ) { $output .= ‘<img src=”‘ . esc_url( $header_image ) . ‘” class=”header-image” width=”‘ . get_custom_header()->width . ‘” height=”‘ . get_custom_header()->height . ‘” alt=”‘ . esc_attr( get_bloginfo( ‘name’, ‘display’ ) ) . ‘”>’; }

return $output; } [/code]

I tried doing this:

[code] function spacious_header_image_markup( $html, $header, $attr ) { $output = ”; $header_image = get_header_image();

if( ! empty( $header_image ) ) { $output .= ‘<a href=”http://www.google.com”><img src=”‘ . esc_url( $header_image ) . ‘” class=”header-image” width=”‘ . get_custom_header()->width . ‘” height=”‘ . get_custom_header()->height . ‘” alt=”‘ . esc_attr( get_bloginfo( ‘name’, ‘display’ ) ) . ‘”></a>’; }

return $output; } [/code]

but it didn’t work.

Any help would be greatly appreciated.. thanks!

SteveMTNO

to post a comment

PHP

8 Comments(s) _↴

@rootApr 01.2018 — #You need to find the page that uses these functions and either side of the function you insert HTML code.

In JavaScript, you can add onclick to an image that will do something similar.

First thisg are for you to identify where in the page the function gets called and see if its possible to add HTML to the output.

@stevemtnoauthorApr 01.2018 — #I'm not sure I understand what you're talking about. I'm a serious PHP newbie.

I know that the function I pasted above is the correct one, and that once I make the change, then it goes into the functions.php file for the site.

That's about all I know... Hope that helps..

@rootApr 01.2018 — #To make it clickable you wither need to add the HTML attribute or add HTML elements that make it clickable, PHP does not make anything applicable, it generates HTML output that is all.

So you have to make it clickable in a ferw ways, easiest is to find the place in the output script that calls the function you posted.In simple terms, you search for [B]spacious_header_image_markup()[/B] being used in the HTML side of things, thats where you make the mod.

@rootApr 01.2018 — #To expand on what I was trying to get across.

[code=php]?>
 <!DOCTYPE html>
 <head>
 <title>PageTitle</title>
 </head>
 <body>
 <div id="header"><?php echo spacious_header_image_markup('Blah','Blah','Blah'); ?></div>
 </body>
 </html>
 [/code]

to something like

[code=php]?>
 <!DOCTYPE html>
 <head>
 <title>PageTitle</title>
 </head>
 <body>
 <div id="header">
 <a href="someUrl/">
 <?php echo spacious_header_image_markup('Blah','Blah','Blah'); ?>
 <a>
 </div>
 </body>
 </html>[/code]

So you find in the main script that outputs the index page where the function is called and I am betting it is being used something like what I have demonstrated. Easy to write the HTML code around the function so that the image data is then click able.

@stevemtnoauthorApr 01.2018 — #Ideally, I would like to make this change in a child theme. But I can't get it to work in the source file either.

Here's my latest attempt:

<i>
 </i>// Filter the get_header_image_tag() for supporting the older way of displaying the header image
 function spacious_header_image_markup( $html, $header, $attr ) {
 $output = '';
 $header_image = get_header_image();
 
 <i>	</i>if( ! empty( $header_image ) ) {
 <i>	</i>	$output .= '&lt;a href="http://www.google.com"&gt;' . '&lt;img src="' . esc_url( $header_image ) . '" class="header-image" width="' . get_custom_header()-&gt;width . '" height="' . get_custom_header()-&gt;height . '" alt="' . esc_attr( get_bloginfo( 'name', 'display' ) ) . '"&gt;' . '&lt;/a&gt;';
 <i>	</i>}
 
 <i>	</i>return $output;
 }
 
 function spacious_header_image_markup_filter() {
 add_filter( 'get_header_image_tag', 'spacious_header_image_markup', 10, 3 );
 }
 
 add_action( 'spacious_header_image_markup_render','spacious_header_image_markup_filter' );
 
 /****************************************************************************************/
 
 if ( ! function_exists( 'spacious_render_header_image' ) ) :
 /**
 * Shows the small info text on top header part
 */
 function spacious_render_header_image() {
 if ( function_exists( 'the_custom_header_markup' ) ) {
 do_action( 'spacious_header_image_markup_render' );
 the_custom_header_markup();
 } else {
 $header_image = get_header_image();
 if ( ! empty( $header_image ) ) { ?&gt;
 &lt;a href="http://www.google.com"&gt;
 &lt;img src="&lt;?php echo esc_url( $header_image ); ?&gt;" class="header-image" width="&lt;?php echo get_custom_header()-&gt;width; ?&gt;" height="&lt;?php echo get_custom_header()-&gt;height; ?&gt;" alt="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;"&gt;
 &lt;/a&gt;
 &lt;?php
 }
 }
 }
 endif;

@rootApr 01.2018 — #You keep posting the functions, that is not where the function triggers.

You need to find the point in the index.php page where the function IS CALLED ... AND post the code around that call so I and others can see what the problem is, it no good posting the functions themselves as that does not help get your problem resolved.

There are calls to other functions and without getting in too deep, its much simpler to look at an insert point in the main page than trawl countless scripts and functions to work out why something isn't doing something that you want, etc..

@stevemtnoauthorApr 02.2018 — #OK, here's the latest....

I sent a msg to the the support team for the WP theme. They told me "Currently the option to link the header image to any url is only available in our Pro version". To which I thought "really??"

Then I went back and reread what you had written above. index.php wasn't really an option - all that is is several calls to other php files.

You mentioned "find the point in the index.php page where the function IS CALLED ... AND post the code around that call". I did that, added the <a> tag around the call and it worked. Now I just needed to make it work with the child theme. I restored the file I just modified in the parent theme, then reapplied the changes and copied the file to the child theme and it still worked.

Consider this issue resolved. Thanks for all your help!

stevemtno

@rootApr 03.2018 — #I sent a msg to the the support team for the WP theme. They told me "Currently the option to link the header image to any url is only available in our Pro version". To which I thought "really??"[/QUOTE]
Really? Anything for an extra buck or three...

As for the calls to other scripts, you may find the answer buried in one of those files.

Do you have an editor with a search facility (like Notepad++) where you can put in the name of the fuinction and then the editor searched the directory for files containing that reference.

You would typically look for <!DOCTYPE string and see if that takes you directly to the part where you modify the script.

If that doesn't work, then search the function name, it should only appear twice, once where it is initiated and where it is used...

Thats the only wahy that I think you are going to find that part.

Now... if its been a Zend encoded type of routine, meaning you are not able to read the code, then there still may be a way of making the header click-able,,,

So starting with the list of included files, does one leap out as sounding like it may contain the part that writes the HTML header out?

Another consideration is that the webcode may be partially hidden in the database as I have found with a couple of web forums, storing some routines in the database itself.

Also in #PHP _↴

php/jquery/ajax file upload Is it posible to connect two databases in one program?IE7 Drupal Flash Problem

Success!

Help @stevemtno spread the word by sharing this article on Twitter...

Tweet This

trying to make the header image clickable on my WP theme

8 Comments(s) _↴

Also in #PHP _↴

Success!

Social

Version

trying to make the header image clickable on my WP theme

8 Comments(s) ↴

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #PHP _↴