Skip to content

Instantly share code, notes, and snippets.

@deeman
Last active June 2, 2019 10:59
Show Gist options
  • Select an option

  • Save deeman/493711764ad4d2580789cfd258680ed4 to your computer and use it in GitHub Desktop.

Select an option

Save deeman/493711764ad4d2580789cfd258680ed4 to your computer and use it in GitHub Desktop.
Genesis framework - Add a page header widget area
//Add a page header widget area in Genesis. Version 1
//Code will add a site-wide “Page Header” widget area below the header and inside the wrap.
//* Register Page Header
genesis_register_sidebar( array(
'id' => 'page-header',
'name' => __( 'Page Header', 'genesis' ),
'description' => __( 'This is the Page Header area.', 'Genesis' ),
) );
//* Add the Page Header
add_action( 'genesis_after_header', 'genesis_page_header' );
function genesis_page_header() {
genesis_widget_area( 'page-header', array(
'before' => '<div class="page-header"><div class="wrap">',
'after' => '</div></div>',
) );
}
//Add a page header widget area in Genesis. Version 2
//Code will add a “Page Header” widget area below the header and outside the wrap.
//* Register Page Header
genesis_register_sidebar( array(
'id' => 'page-header',
'name' => __( 'Page Header', 'genesis' ),
'description' => __( 'This is the Page Header area.', 'Genesis' ),
) );
//* Add the Page Header
add_action( 'genesis_after_header', 'genesis_page_header' );
function genesis_page_header() {
genesis_widget_area( 'page-header', array(
'before' => '<div class="page-header">',
'after' => '</div>',
) );
}
/* # Page Header */
.page-header {
text-align: center;
}
.page-header .widget {
padding: 7% 14%;
}
.page-header .wrap:after,
.page-header .wrap:before {
content: "";
height: 1px;
background-color: #d6d6d6;
background: linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(147,147,147,0.4) 50%,rgba(0,0,0,0) 100%);
display: block;
margin-top: -1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment