Thanks for importing Rumour 🙂
Rumour is constructed primarily using GP’s awesome built-in features with some CSS to provide custom styles.
The sections below provides a quick overview on how the site was built and some potential modifications. All the CSS mentioned below can be found in the Additional CSS field in the customizer.
Header/Navigation
The header/navigation is using one of GP’s newest options Use navigation as Header. You can use a site title or upload a logo in Site Identity.
Here is the CSS added for the header/navigation area:
/* Header navigation styling */
.main-navigation, .sticky-enabled .main-navigation.is_stuck {
-webkit-box-shadow: 0px 1px 0px 0px rgba(51,51,51,1);
-moz-box-shadow: 0px 1px 0px 0px rgba(51,51,51,1);
box-shadow: 0px 1px 0px 0px rgba(51,51,51,1);
}
Home Page Header Element/Page Hero
The first section after the header/navigation is built using GP Premium’s Block Element module and WP Show Posts plugin. To modify it, head to Dashboard > Appearance > Elements and edit the “Home Hero” header element.
The WP Show Posts shortcode/list can be modified in Dashboard > WP Show Posts > Home Hero.
Container Width
The container width of 900px is used through out the site with the exception of the home page.
The home page has a Content/Sidebar layout so this CSS below is used to set the width to 1100px:
/* Container size for home page */
body.home .grid-container:not(.inside-navigation) {
max-width: 1100px;
}
Posts List
You will notice that the 2 recent posts displayed in the header element/page hero are also duplicated in the posts list. The PHP snippet below can be used to remove the duplication:
add_filter( 'pre_get_posts', function( $query ) {
if ( $query->is_home() && $query->is_main_query() ) {
$offset = 2;
$ppp = get_option('posts_per_page');
if ( $query->is_paged ) {
$page_offset = $offset + ( ($query->query_vars['paged']-1) * $ppp );
$query->set('offset', $page_offset );
} else {
$query->set('offset',$offset);
}
} else {
return $query;
}
} );
Adding PHP: https://docs.generatepress.com/article/adding-php/
Footer Widgets
The plugin Recent Posts Widget With Thumbnails is used in the footer widgets area to show recent posts throughout the site.
The footer widgets area is removed from the home page using the Layout Element.