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
- GeneratePress (Free Version)
Required Plugins
Color Palette
CSS Variable Name | Hexa Code | Actual 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 →</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
}
}