HomePage Full Width Widget

Hi there,

I'm not quite sure what you mean by full width widget but I'm going to guess you are looking for the page header add-on: https://docs.generatepress.com/article/page-header-overview/

If not can you provide an example of what you want to achieve?

Hi..
Page header content is not working properly.
I think it is because I made fixed header & menu by adding following codes

In GP Hooks
Before Header
<div class="custom-fixed-header">

After Header
</div>

In CSS

.custom-fixed-header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 2000;
}

.custom-fixed-header + * {
      padding-top: 120px;
}

The page header content will come inside the fixed header. Now if I add page header content & if page header content is long, then it will causes many problems like overlapping contents or comments. So I think it is giving problems like loading comments inside or back of page header content.

Can you tell me how to solve this problem?
If this is impossible, since page header content come inside fixed header, Then give me the code to create full width widget just beneath the header & menu without space in between them.

In my previous theme (genesis theme) I added this code.

genesis_register_sidebar( array(
    'id' => 'welcome-text',
    'name' => __( 'Welcome Text', 'genesis' ),
    'description' => __( 'This is the welcome text widget.', 'genesis sample' ),
) );
add_action( 'genesis_before_content_sidebar_wrap', 'custom_welcome_text' );
function custom_welcome_text() {
genesis_widget_area( 'welcome-text', array(
        'before' => '<div class="welcome-text widget-area">',
	'after'  => '</div>',
) );
}

It worked pefectly.
But I don't know how to do it in Generatepress.
I searched GP hooks. But I failed to make full width widget just below header & menu without any space.
Please help me.

Thank you

Hi there,

To register a widget area, do this: https://codex.wordpress.org/Function_Reference/register_sidebar#Example

Then you can add it to GP like this:

add_action( 'generate_after_header', 'tu_add_full_width_widget_area', 100 );
function tu_add_full_width_widget_area() {
    if ( is_active_sidebar( 'YOUR_WIDGET_ID' ) ) : ?>
	<div class="grid-container">
		<?php dynamic_sidebar( 'YOUR_WIDGET_ID' ); ?>
	</div>
    <?php endif;
}

Let me know if this helps or not :)

I am not a programmer. I don't understand the reference. Can you send the entire code?

I added this code

register_sidebar( array(
    'id' => 'welcome-text',
    'name' => __( 'Welcome Text', 'GeneratePress' ),
    'description' => __( 'This is the welcome text widget.', 'GeneratePress' ),

add_action( 'generate_after_header', 'tu_add_full_width_widget_area', 100 );
function tu_add_full_width_widget_area() {
    if ( is_active_sidebar( 'Welcome Text' ) ) : ?>
	<div class="grid-container">
		<?php dynamic_sidebar( 'Welcome Text' ); ?>
	</div>
    <?php endif;
}

But add action line showing this error message
"Your PHP code changes were rolled back due to an error on line 103 of file wp-content/themes/generatepress/functions.php. Please fix and try saving again.

syntax error, unexpected ';', expecting ')'"

You should only need this part of the code: https://generatepress.com/forums/topic/homepage-full-width-widget/#post-492703

..

Neo, you know that your credentials are visible for everyone?

Yeah.! But it is just a test website. So I don't care. But how to send message privately?

I don't know. :-)
But i would do that via Email.

Hii.. Full width widget still not appeared.

Do I need to send this message to your email?

Yup.. I deleted my credential message here & sent to generatepress support email.

Didn't get any e-mail.

Can you edit the original topic and use the private URL field?

nvm we did the get the e-mail :)

First you need to create the widget area:

add_action( 'widgets_init', 'tu_full_width_widget' );
function tu_full_width_widget() {
    register_sidebar( array(
        'name' => __( 'Full Width', 'theme-slug' ),
        'id' => 'full-width',
        'description' => __( 'Widgets in this area will be shown on all posts and pages.', 'theme-slug' ),
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
	'after_widget'  => '</li>',
	'before_title'  => '<h2 class="widgettitle">',
	'after_title'   => '</h2>',
    ) );
}

Then add the widget area after the header:

add_action( 'generate_after_header', 'tu_add_full_width_widget_area', 100 );
function tu_add_full_width_widget_area() {
    if ( is_active_sidebar( 'full-width' ) ) : ?>
	<div class="grid-container">
		<?php dynamic_sidebar( 'full-width' ); ?>
	</div>
    <?php endif;
}

That should be all there is to it. However, you will need to add any necessary CSS etc..