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

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#222222
contrast-2#575760
contrast-3#b2b2be
base#f0f0f0
base-2#f7f8f9
base-3#ffffff
accent#7a003c
highlight#614385

Custom CSS Code

#site-navigation {
	border-top: 2px solid var(--highlight);
	border-bottom: 2px solid var(--highlight);
}
.main-navigation .main-nav ul li a {
  line-height: 45px;
}
.inside-top-bar {
  padding: 5px 40px 0px 40px;
}
.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 {
	font-size: 14px !important;
	text-decoration: none;
	border: 1px solid var(--highlight);
	padding: 5px 12px;
	margin-bottom: 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:hover {
	background: var(--highlight);
	color: var(--base-3);
}
.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, .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: center;
}
.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 {
	background: var(--highlight);
  color: #fff;
  padding: 5px 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}
.recent-post-widget a {
	font-size: 16px;
}
.recent-post-widget li { 
	border-bottom: 1px dotted var(--contrast);
  padding-bottom: 15px;
}
.main-navigation .menu-bar-item > a {
  line-height: 45px;
}
@media (max-width: 768px) {
    .top-bar {
        display: none;
        }
}

PHP Code Snippets

Site Customization Code

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="button" 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 );
	}
}

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!