wordpress tweaks for twenty twenty one template

For those using WordPress.com, not .org.

Custom CSS mods for headers, fonts, styles, and more via allaboutbasic.com.

Hiding page titles and other things via Hostinger Tutorials.

Hiding featured images in posts via Build That Website.

Hiding featured images only on portfolio posts via WordPress.

This is all the custom CSS I’ve added.

This one removes the extra padding that appears under the header and before any kind of page content:

.site-header {
	padding-bottom: 0;
}

These further reduce padding between the page headers and any subsequent page content:

header#masthead {
	padding-bottom: 3px !important;
}

header.entry-header {
	padding-bottom: 7px !important;
}

This one allows for modifications in the top-level menu. The only thing I’ve adjusted is the font size. Everything else is unchanged:

@media only screen and (min-width: 482px) {
	.primary-navigation .primary-menu-container > ul > .menu-item > a {
		font-size: 13px !important;
	}
}

This reduces extra space between the header and the page body:

.singular .entry-header {
    margin-bottom: 0
}

This reduces extra space between the page body and the footer:

footer#colophon {
	padding-top: 0 !important;
}

footer.entry-footer {
	padding-bottom: 0 !important;
}

This gets rid of the widget area in the footer, which I wasn’t using, but it was still adding extra empty space at the end of the page:

.widget-area, .no-widgets .site-footer {
	margin-top: 0;
}

This hides the author bio, description, and link that appears on the bottom of each post, portfolio project, etc.:

.author-bio .author-bio-content .author-title {
	display: none;
}

.author-description {
	display: none;
}

.author-link {
	display: none;
}

This one makes all page and post content full-width sitewide. I didn’t change anything in this, but it works:

.post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), [class*=inner-container] > :not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width {
	max-width: var(--responsive--alignwide-width) !important;
}

These code lines hide page titles from selected pages. You need to find the page ID via the WordPress Admin area:

.page-id-2133 .entry-title {
	display: none;
}

.page-id-254 .entry-title {
	display: none;
}

This hides page titles from “Category” pages, such as blog pages:

.archive .page-header {
	display: none;
}

This hides featured images only from “Projects” created in the portfolio section:

.jetpack-portfolio-template-default .post-thumbnail {
	display: none;
}
Published
Categorized as blog, news

By Ben van Loon

Writer, Researcher, Chicagoan