GeneratePress: Customize Content Area using CSS and PHP

GeneratePress is a lightweight and highly customizable WordPress theme that provides a solid foundation for building various types of websites, and it comes with a range of customization options, allowing users to tailor the appearance and functionality of their sites according to their needs.

In this post, you will find the CSS snippets the content area of the GeneratePress Theme

---

---

GeneratePress: CSS Snippet to Style H2’S

You can use this CSS snippet to restyle the background of H2s on posts

.single .content-area .post h2 {
    background-color: #ebedf0;
    text-align: center;
    padding: 15px 10px 15px 10px;
}

CSS snippet to underline H2s

.single .content-area .post h2 {
    text-decoration: underline;
    text-decoration-color: #263b5e;
    text-decoration-thickness: 6px; 
    text-underline-offset: 12px; 
}

A CSS snippet to remove underlining from buttons when you mouse over them. This only applies to buttons created with GenerateBlocks

.gb-button:hover  {
    text-decoration: none;
}

---

GeneratePress: Remove Post Navigation from all Posts

If you are using GP-Premium, you will find an option to disable the post navigation from all posts via the customizer, but if you want to do it manually via code, there is a PHP snippet for that.

This is the simple code that removes the post navigation from all posts.

//Code to Remove Post Navigation
add_filter( 'generate_show_post_navigation', '__return_false' );

You just have to paste the code from above using:

1. The functions.php file.
2. A custom mu-plugin.
3. A Code Snippets Plugins.

---

GeneratePress: Remove Featured Images from All Posts

If you need to remove the featured images from all posts and pages, this is what you have to try

//Remove Featured Images from Posts and Pages

add_action( 'after_setup_theme', function() {
    remove_action( 'generate_before_content', 'generate_featured_page_header_inside_single', 10 );
	remove_action( 'generate_after_header', 'generate_featured_page_header', 10 );
} );

---

GeneratePress: Remove Page and Post Titles

If you create custom hero sections in some other way rather than using GeneratePress elements, you can remove page and post titles with this code snippet

//remove post and Page Titles
add_action( 'wp', function() {
	if(is_single() || is_page()){
	remove_action( 'generate_after_entry_title', 'generate_post_meta' );
	add_filter( 'generate_show_title', '__return_false' );
	}
} );

---

GeneratePress: Number Headings Automatically

This CSS establishes a hierarchical structure for the headings and uses counters to generate numbered prefixes for each heading level.

.single-post .inside-article .entry-content {
    counter-reset: section-counter sub-section-counter sub-sub-section-counter sub-sub-sub-section-counter;
}

.single-post .inside-article h2::before {
    content: counter(section-counter) ". ";
    counter-increment: section-counter;
}

.single-post .inside-article h3::before {
    content: counter(section-counter) "." counter(sub-section-counter) ". ";
    counter-increment: sub-section-counter;
}

.single-post .inside-article h4::before {
    content: counter(section-counter) "." counter(sub-section-counter) "." counter(sub-sub-section-counter) ". ";
    counter-increment: sub-sub-section-counter;
}


/* Reset sub-section-counter for h2 elements */
.single-post .inside-article h2 {
    counter-reset: sub-section-counter sub-sub-section-counter sub-sub-sub-section-counter sub-sub-sub-sub-section-counter;
}

.single-post .inside-article h3 {
    counter-reset: sub-sub-section-counter sub-sub-sub-section-counter sub-sub-sub-sub-section-counter;
}

.single-post .inside-article h4 {
    counter-reset: sub-sub-sub-section-counter sub-sub-sub-sub-section-counter;
}

You just have to add the CSS snippet to your child theme Stylesheet

---