#PHP
add_action('blocktype_append_header_layer','my_blocktype_append_header_layer');
function my_blocktype_append_header_layer(){
echo '<div class="custom-layer"><a href="#" class="skin-button">Link added to header</a></div>';
}
<header class="header-layer no-header-media header-is-dark template-part-header-custom"> | |
<div class="header-text"> | |
<h1 class="site-title" id="site-title"> | |
<a href="https://www.example.com/" rel="home" class="site-title-link"> | |
<span class="site-title-text">Blog Title</span> | |
</a> | |
</h1> | |
<p class="site-description">Blog description</p> | |
</div> | |
<div class="custom-layer"><a href="#" class="skin-button">Link added to header</a></div> | |
</header> |
/* css for custom-layer start */ | |
.custom-layer{ | |
position:absolute; | |
width:100%; | |
height:100%; | |
top:0; | |
left:0; | |
right:0; | |
margin:auto; | |
.skin-button{ | |
position:absolute; | |
right:1rem; | |
bottom:0; | |
} | |
} | |
/* css for custom-layer end */ | |
/* Theme style */ | |
:root{ | |
--common_font_size:16px; | |
--content_gap:24px; | |
} | |
header{ | |
position:relative; | |
background:#ecf0f1; | |
overflow:hidden; | |
} | |
a{ | |
text-decoration:none; | |
&.skin-button { | |
clear: both; | |
float: none; | |
overflow: hidden; | |
display: inline-block; | |
text-align: center; | |
width: -moz-fit-content; | |
width: fit-content; | |
padding: 0 1rem; | |
font-size:var(--common_font_size); | |
line-height: calc(var(--common_font_size) * 3); | |
margin-top: 1.5rem; | |
margin-bottom: 0.75rem; | |
margin-left: var(--content_gap, 24px); | |
margin-right: var(--content_gap, 24px); | |
color:#fff; | |
background:tomato; | |
} | |
} | |
.site-title{ | |
margin-bottom:0; | |
margin-left: var(--content_gap, 24px); | |
margin-right: var(--content_gap, 24px); | |
} | |
.site-description{ | |
margin-top:0; | |
margin-left: var(--content_gap, 24px); | |
margin-right: var(--content_gap, 24px); | |
} |