[Resolved] customize header

[Mika]

Hello

I am using GP Premium plugin and child_theme.

I am looking for way to load extra classes inside-header class.

<header id="masthead" class="site-header" itemtype="https://schema.org/WPHeader" itemscope="">
	<div class = "inside-header">
	  <div class=""header-widget"> ... </div>
	  <div class="site-branding"> ... </div>
	  <div class="extra-class-from-child-theme"> ... </div>
	  <div class="extra-class-from-child-theme-2"> ... </div>

– in main theme, in folder inc/structure/header.php
– There is function called generate_header_items();

Q1: is there way to inject new item to function generate_header_items() array
from child-theme?

Q2: or is there way to make it via elements and hooks ?

function generate_construct_header() {
		?>
		<header id="masthead" <?php generate_do_element_classes( 'header' ); ?> <?php        
                generate_do_microdata( 'header' ); ?>>
			<div <?php generate_do_element_classes( 'inside_header' ); ?>>
				<?php
				/**
				 * generate_before_header_content hook.
				 *
				 * @since 0.1
				 */
				do_action( 'generate_before_header_content' );

				// Add our main header items.
				generate_header_items();

if ( ! function_exists( 'generate_header_items' ) ) {
	/**
	 * Build the header contents.
	 * Wrapping this into a function allows us to customize the order.
	 *
	 * @since 1.2.9.7
	 */
	function generate_header_items() {
		$order = apply_filters( 'generate_header_items_order',
			array(
				'header-widget',
				'site-branding',
				'logo'

-->                 <strong>'class-from-child-theme',
-->                 'class-from-child-theme-2',</strong>

			)
		);

Thanks Mika.

[David]

Hi there,

you can use the Hook Element ( or add_action ) to insert content into the header.
You can see the main hooks here:

https://docs.generatepress.com/article/hooks-visual-guide/

[Mika]

ok, created new element:
hook is setup “after_header_content”
execute php enabled.
priority 10.

— it should be before navbar —-

add_action( 'bottom_extra_element','bottom_extra_element' );  
function bottom_extra_element() { ?> 
    <div class="before-nav">
			<p>
				Before navigation
			</p>
</div>
<?php }

now it killed totally my test page

no content, no footer any more ;-(

http://tuotantopalvelu.fi/testing-frontpage/

[David]

You don’t need to create the hook and function. Just ouput the HTML e.g

<div class="before-nav">
<!--- HTML -->
</div>

[Mika]

Good.

Now I am having next problem, my custom css is not loading.

 <div class="before-nav-bottom-header">
			<p>
		     <!--- HTML -->
                       huhuuu
			</p>
</div>

.site-header .before-nav-bottom-header {
background-color: #0072ce;

}

[David]

How are you adding the CSS?
It should go in child theme style sheet or customizer > Additional CSS.

If you must add it to the Hook then it needs to be wrapped in <style> tags:

<style>
/* CSS styles here */
</style>

And you should add it before the HTML to stop flash of unstyled content.

[Mika]

css comes from child style.css.

I have created two elements;

Hook – which gives me location
Header which contain content.

I am half a way.

Q: how to get my header content element to hook element location ?
http://tuotantopalvelu.fi/testing-frontpage/

[Leo]

Like to move the navigation below the page hero?

If so give this PHP snippet a shot:
https://generatepress.com/forums/topic/page-header-image-above-menu/#post-288568

Adding PHP: https://docs.generatepress.com/article/adding-php/

Let me know 🙂

[Mika]

Thanks.

I managed to fix page by creating hook and placed it “after_header_content”.
reloaded “cache dynamic CSS” from customize -> general.

Main problem was “how to put element correct position”

Now text is in place.

[Leo]

Sorry I’m a little bit confused.

Which element are you referring to?

Is it on the home page?

Where are you trying to place it?

[Author]

Posts