👉 Subscribe to My YouTube Channel

GeneratePress Free Tutorial – Build a Simple Blog [Design 10]

In this video tutorial, I will show you, how to build a simple blog using GeneratePress free theme. You can download the latest version of GeneratePress free theme from WordPress repository or from the GeneratePress website directly.

It’s a quick and short video, so please watch the video without skipping.

Table of Contents

Recommended Hosting

Required Theme

Required Plugins

Color Palette

CSS Variable NameHexa CodeActual Color
contrast#55585B
contrast-2#575760
contrast-3#A0A2A4
base#f0f0f0
base-2#f7f8f9
base-3#ffffff
accent#678E61
highlight#678E61
widget-border#dddddd
banner-bg#F7EDE2

Custom CSS Code

.single #nav-below {
  display: flex;
  flex-wrap: wrap;
}
.nav-previous {
  flex: 49%;
	border: 1px solid var(--widget-border);
  padding: 15px;
	margin-right: 10px;
}
.nav-next {
  flex: 49%;
	border: 1px solid var(--widget-border);
  padding: 15px;
}
@media (max-width: 800px) {
  .nav-previous, .nav-next {
    flex: 100%;
  }
}
.welcome-header-wrapper {
	background: var(--banner-bg);
  color: var(--contrast);
}
.welcome-header-wrapper-inner {
	padding: 40px 20px;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.page-header {
	padding: 20px;
	background: var(--banner-bg);
}
.site-header {
	background: var(--highlight);
}
#right-sidebar .widget,
#left-sidebar .widget {
	border: 1px solid var(--widget-border);
}
.contact-form-wrapper {
    padding: 30px;
    margin-top: -50px;
    background: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 5px;
    margin-bottom: 50px;
}
.main-navigation .main-nav ul li a {
  line-height: 35px;
	border-radius: 5px;
	margin-right: 2px;
}
.wp-block-social-links li:last-child {
	margin-bottom: 0.5em !important;
}
ul.wp-block-categories li a,
ul.wp-block-archives li a {
	display: inline-block;
	width: 80%;
	float: none;
	text-decoration: none;
	padding-bottom: 5px;
	margin-bottom: 5px;
}
.wp-block-tag-cloud a, a.wpf-tags {
	font-size: 14px !important;
	text-decoration: none;
	border: 1px solid var(--highlight);
	padding: 5px 12px;
	margin-bottom: 10px;
}
.gp-custom-tag-section {
	margin-top: 20px;
}
a.wpf-tags {
	margin-right: 10px;
}
.inside-right-sidebar .widget {
	padding: 10px 20px 30px 20px;
}
.page-numbers {
	background: var(--accent);
  color: var(--base-3);
  padding: 7px 14px !important;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.page-numbers.current {
	background: var(--base);
  color: inherit;
}
.next.page-numbers, .prev.page-numbers {
	background: none;
	color: inherit;
}
.custom-readmore-button {
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 2px solid var(--accent);
	padding-bottom: 5px;
	font-weight: bold;
}
.custom-readmore-button:hover {
	border-bottom: 2px solid var(--contrast);
}
.read-more-section {
	text-align: left;
}
.paging-navigation {
	text-align: center;
}
.entry-header .gp-custom-category-section, .entry-header .entry-title, .entry-header .entry-meta {
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: left;
}
.entry-header .entry-title {
	margin-top: 15px;
	margin-bottom: 5px;
}
.single-featured-image {
	margin-top: 20px;
}
.entry-header .gp-custom-category-section {
	font-weight: bold;
	font-size: 14px;
}
.widget-title {
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px;
}
.recent-post-widget a {
	font-size: 16px;
}
.recent-post-widget li { 
	border-bottom: 1px dotted var(--contrast);
  padding-bottom: 15px;
}

PHP Code Snippets

Site Customization Code – Design 10

add_action( 'generate_after_content','wpf_gp_custom_display_tags' );  
if( !function_exists('wpf_gp_custom_display_tags')) { 
	function wpf_gp_custom_display_tags() {  
		if(is_single()) {
			$post_tags = get_the_tags( get_the_ID() );
			$tags_content = '<div class="gp-custom-tag-section">';
			if( $post_tags ) { 
				foreach($post_tags as $tag) {
					$tag_link = get_tag_link( $tag->term_id );
					$tags_content = $tags_content . '<a class="wpf-tags" href="'. $tag_link .'">' . $tag->name . '</a>';
				}
			}
			$tags_content = $tags_content . '</div>';
		echo $tags_content;
		}
	}
}
add_action( 'generate_after_entry_header','wpf_gp_custom_thumbnail_image' );
if( !function_exists('wpf_gp_custom_thumbnail_image')) {
	function wpf_gp_custom_thumbnail_image() {  
		if(is_single()) {
			$feat_image = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) );
			echo '<img class="single-featured-image" src="'.$feat_image.'"></img>';	
		}
	}
}
add_action( 'generate_before_entry_title','wpf_gp_custom_before_title' );
if( !function_exists('wpf_gp_custom_before_title')) {
	function wpf_gp_custom_before_title() {  
		$post_categories = wp_get_post_categories(get_the_ID(), [ 'fields' => 'all' ]);
		$category_content = '<div class="gp-custom-category-section">';
		if( $post_categories ) { 
			foreach($post_categories as $c) {
				$category_link = get_category_link( $c->term_id );
				$category_content = $category_content . '<a href="'. $category_link .'">' . $c->name . '</a>' . ' / ';
			}
			$category_content = rtrim($category_content, ' / ');
		}
		$category_content = $category_content . '</div>';
		echo $category_content;
	}
}

add_filter( 'generate_post_date_output','wpf_gp_custom_add_to_post_date' );
if( !function_exists('wpf_gp_custom_add_to_post_date')) {
	function wpf_gp_custom_add_to_post_date( $output ) {
		return '<div class="gp-post-date-author">' . $output;
	}
}
add_filter( 'generate_post_author_output','wpf_gp_custom_add_to_post_author' );
if( !function_exists('wpf_gp_custom_add_to_post_author')) {
	function wpf_gp_custom_add_to_post_author( $output ) {
		return $output . '</div>';
	}
}
add_filter( 'generate_leave_comment','wpf_gp_custom_remove_comment_link' );
if( !function_exists('wpf_gp_custom_remove_comment_link')) {
	function wpf_gp_custom_remove_comment_link() {
		return false;
	}
}

add_filter( 'generate_show_comments', '__return_false' );
add_filter( 'generate_show_tags', '__return_false' ); 
add_filter( 'generate_show_categories', '__return_false' );

add_filter( 'generate_excerpt_more_output', 'wpf_gp_custom_read_more' );
if( !function_exists('wpf_gp_custom_read_more')) {
	function wpf_gp_custom_read_more() { 
		return '<div class="read-more-section"><a class="custom-readmore-button" href="'.get_permalink(get_the_ID()).'">Continue Reading &rarr;</a></div>';
	}
}
add_action( 'after_setup_theme','wpf_gp_remove_featured_image' );
if( !function_exists('wpf_gp_remove_featured_image')) {
	function wpf_gp_remove_featured_image() { 
		remove_action( 'generate_before_content', 'generate_featured_page_header_inside_single', 10 );
	}
}

Welcome Banner Code

function wpf_custom_homepage_content_t019() {
    if (is_front_page()) {
        echo '<div class="welcome-header-wrapper"><div class="welcome-header-wrapper-inner"><h2>Welcome to My Blog</h2><p>I share useful tips and tricks about website development. Follow and subscribe for helpful content.</p></div></div>';
    }
}
add_action('generate_after_header', 'wpf_custom_homepage_content_t019');

GeneratePress Custom Copyright Text

add_filter( 'generate_copyright','wpframer_gp_custom_copyright' );
if (!function_exists('wpframer_gp_custom_copyright')) {
	function wpframer_gp_custom_copyright() {
		$year = date("Y");
		?>
		© <?php echo $year ?> WordPress Site Development• All Rights Reserved!
		<?php
	}
}
I regularly post videos about building WordPress Websites from scratch using free and premium themes. If you like to watch more similar contents, please subscribe to my YouTube channel!