Make boxes on header link to other pages

Is it possible to make the boxes on the main page link to other pages ?

Yes.

How?

I am working with the Ravenna theme (jpjansen.com) and would like to link the three header boxes on the home page (vertalingen + tolkdiensten + overig) to the corresponding pages.

Can somebody help me with that?
Thank you!!

Hi, johanna_jansen

I saw your have three different links on your header boxes so you did it!
I am looking for several days to do the same thing too. Can you tell me how you made it?

Thank you!

Hi, yes, the problem is solved, but I got help from the Dutch forum. I can copy their solution here underneath, but since I am really new to it all, be aware that I cannot help you in case you have questions about it.

This was what I received as a solution:

Make a new header.php file in your child theme with the code from the header.php of the original Ravenna theme.

Replace on rule n. 44:

<?php ravenna_header_boxes(); ?>

by the following code:

<div class="header-block"><a href="/vertalingen" target="_self"><span class="header-icon"><i class="fa fa-pencil"></i></span><h3 class="header-title">Vertalingen</h3><div class="header-text">Voor al uw vertalingen vanuit het Italiaans naar het Nederlands en vice versa.</div></a></div>

<div class="header-block"><a href="/tolkdiensten" target="_self"><span class="header-icon"><i class="fa fa-comments"></i></span><h3 class="header-title">Tolkdiensten</h3><div class="header-text">Uw hulp bij ontmoetingen tussen Nederlanders en Italianen.</div></a></div>

<div class="header-block"><a href="/overig" target="_self"><span class="header-icon"><i class="fa fa-asterisk"></i></span><h3 class="header-title">Overig</h3><div class="header-text">Revisie, correctie, lezingen, cursussen.</div></a></div>

Please notice that in the code above you will find my own text, the content of my header boxes. You must of course replace that part with your own text.

The only down side to this solution is that in case you want to change the text in the header boxes, you can only change it in the header.php of your child theme. You cannot use the customizer for it.

Hope this helps. Again, this is not my solution, this is with the much appreciated help of LianneL, member of the Dutch forum. See the original topic (in Dutch):

https://nl.forums.www.ads-software.com/topic/links-van-headers-maken-ravenna-thema?replies=16

Thanks for your help johanna_jansen. I will try that!

It’s work very well! thank you!!

HI all

I used a slightly more complex/complete approach…
I started a child theme, then in child theme functions.php added the following code:

function cs_customize_register( $wp_customize )
{
	for ($pos=1; $pos<=3; $pos++){
   		$wp_customize->add_setting( 'box_link_'.$pos );

		$wp_customize->add_control(
			'box_link_'.$pos,
		        array(
		            'label' => __( 'Box '.$pos.' link', 'ravenna' ),
		            'section' => 'ravenna_header_boxes',
		            'type' => 'text',
		            'priority' => 10
		        )
		);
	}
}

add_action( 'customize_register', 'cs_customize_register' );

function ravenna_header_boxes() {

	for ($pos=1; $pos<=3; $pos++){
		$box_icon = get_theme_mod('box_icon_'.$pos, 'fa-building-o');
		$box_link = get_theme_mod('box_link_'.$pos, '#');
		echo '<div class="header-block" id="header-block-box-'.$pos.'">';
		echo('<a href="'.$box_link.'" target="_self">');
		if ($box_icon) {
		echo 	'<span class="header-icon"><i class="fa ' . esc_html($box_icon) . '"></i></span>';
		}
		echo 	'<h3 class="header-title">' . esc_html(get_theme_mod('box_title_'.$pos, 'Solid construction')) . '</h3>';
		echo 	'<div class="header-text">' . wp_kses_post(get_theme_mod('box_text_'.$pos, 'Try it and see for yourself. You will be amazed.')) . '</div>';
		echo '</a>';
		echo '</div>';

	}
}

That code adds fields for boxes urls in Customizer and the needed ‘a’ tag around boxes, using the links saved in customizer

Just my 2c ??

Cheers

Hi @space0x42,

it worked! Thank you!!!

Cheers