Archived topic
customize header
9 replies · Started by Mika on September 11, 2019
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.
Hi there,
you can use the Hook Element ( or add_action ) to insert content into the header.
You can see the main hooks here:
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 ;-(
You don't need to create the hook and function. Just ouput the HTML e.g
<div class="before-nav">
<!--- HTML -->
</div>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;
}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.
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/
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 :)
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.
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?
