Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Add widget area

Home Forums Support [Resolved] Add widget area

Home Forums Support Add widget area

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #593996
    Maksim

    Hello. How to add this widget area only home page?
    Widget-area
    My site: https://lan1.marchenkov.by.

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #594043
    David
    Staff
    Customer Support

    Hi, you would need to register a widget area which is covered here:

    https://codex.wordpress.org/Widgetizing_Themes

    And the code for displaying the area could be added to the GP Hooks > After Header and you could add one of these conditionals to limit it to the home page:

    https://docs.generatepress.com/article/using-hooks-conditional-tags/

    Let me know

    #594827
    Maksim

    I can register the widget in the file theme “inc/general.php”? If there is a theme update, then my changes will be deleted?

    What css-class and css-code can I use to make a new widget area in the same style, for example, with a sidebar?

    #594962
    David
    Staff
    Customer Support

    Hi there, before we get into the detail, can i ask what the content will be?
    Their may be a simpler workaround such as Widget Shortcodes:

    https://wordpress.org/plugins/widget-shortcode/

    Considering it is just for the home page, it may be the simplest solution. I can help with making it conditional to the home page and adding some styling.

    #595010
    Maksim

    There will be max 3 widgets. All widgets are standard. Widget with last comments, widget with last articles and widget with text.

    #595067
    David
    Staff
    Customer Support

    OK, how about we use the Left Side Bar? Then you can control the styles in the Customsier. Just activate the side bar and try this CSS:

    @media (min-width: 360px) {
    	.site-content {
    		display: -webkit-box;
    		display: -ms-flexbox;
    		display: flex;
    		-webkit-box-orient: horizontal;
    		-webkit-box-direction: normal;
    		-ms-flex-flow: row wrap;
    		flex-flow: row wrap;
    	 }
    	    
    	#left-sidebar {
    		-webkit-box-ordinal-group: 2;
    		-ms-flex-order: 1;
    		order: 1;
    		width: 100%;
    		left: 0;
    		margin-left: 20px;
    	}
    	.inside-left-sidebar {
    		display: -webkit-box;
    		display: -ms-flexbox;
    		display: flex;
    		-webkit-box-orient: horizontal;
    		-webkit-box-direction: normal;
    		-ms-flex-direction: row;
    		flex-direction: row;
    		-webkit-box-pack: justify;
    		-ms-flex-pack: justify;
    		justify-content: space-between;
    	}
    	.inside-left-sidebar .widget {
    		width: 30%;
    	}
    	.content-area {
    		-webkit-box-ordinal-group: 3;
    		-ms-flex-order: 2;
    		order: 2;
    		flex: 1 0 75%;
    		left: 0
    	}
    	#right-sidebar {
    		-webkit-box-ordinal-group: 4;
    		-ms-flex-order: 3;
    		order: 3;
    		flex: 1 0 25%;
    	}
    }

    Then we can hide it on all but the home page. Is your home page Recent Posts or Static page?

    #595111
    Maksim

    Home page Recent posts.

    Ok. I checked. And how to make a maximum of 2 widgets?

    #595130
    David
    Staff
    Customer Support

    Ok, so you can set in the Customiser > Layout > Sidebars > Blog Sidebar Layout only. Leave the others as Content / Sidebar.

    For 2 widgets change this part of the code:

    	.inside-left-sidebar .widget {
    		width: 30%;
    	}

    Increase the width to say 46%.

    #595832
    Maksim


    Why does the second widget have a lower margin?

    #596081
    Tom
    Lead Developer
    Lead Developer

    Try adding this CSS:

    .separate-containers .inside-left-sidebar .widget {
        margin-bottom: 0;
    }
    #597422
    Maksim

    Thank you!

    #597430
    David
    Staff
    Customer Support

    Glad we could be of help!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.