How to add a video widget in News-pro theme

[chikamiku]

I am using News-pro theme to develop a news website. I wanted to add a video widget right after Home-Bottom widget. This widget could display 5 or 6 videos in a horizontal row in scrolling format. Is there any way to do that, please?

Thanks and regards

https://ummahaffairs.com/

[Brad Dalton]

1. Add a new widget area using PHP code

genesis_register_sidebar( array(
    'id' => 'css-grid-widget',
    'name' => __( 'Grid Widget', 'genesis' ),
) );

add_action( 'genesis_after_header', 'front_page_grid_widget' );
function front_page_grid_widget() {

    genesis_widget_area( 'css-grid-widget', array(
        'before' => '<div class="grid-container">',
        'after'  => '</div>',
    ) );
    
}

2. And the use CSS to display each widget in columns

.grid-container .widget {
        display: inline-block;
        width: 23.5%;
        margin: 0.5%;
}

@media only screen and (max-width: 960px) {

    .grid-container .widget {
        display: block;
        width: 100%;
    }

}

@supports (display: grid) {

    .grid-container {
        margin: 50px;
        display: -ms-grid;        
        display: grid;
        -ms-grid-columns: 1fr 1fr 1fr 1fr;        
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-gap: 20px;
    }

}

@supports (display: grid) {
@media only screen and (max-width: 1100px) {

   .grid-container {
        -ms-grid-columns: 1fr 1fr;          
        grid-template-columns: 1fr 1fr;
    }
    
  }

}

@supports (display: grid) {
@media only screen and (max-width: 680px) {

    .grid-container {
        -ms-grid-columns: 1fr 1fr;          
        grid-template-columns: 1fr; 
    }
   
  }

}

---

Tutorials for StudioPress Themes.

[Author]

Posts