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

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 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#03c4eb
highlight-color#fde9e5
border#dddddd
banner-bg#f1f1f1

Custom CSS Code

.rpwwt-widget .rpwwt-post-date {
	font-size: 14px;
	border-bottom: 1px solid var(--border);
	padding-bottom: 15px;
}
button.wpforms-submit {
	background-color: var(--accent) !important;
    color: var(--base-3) !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 15px 20px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
	border-width: 0 !important;
}
.sidebar .widget {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
margin-bottom: 40px;
}
.widget-title {
  border-bottom: 2px solid var(--border);
  padding-bottom: 15px;
}
.widget-title::after {
  content: '';
  display: block;
  position: relative;
  width: 50px;
  height: 2px;
  background: #333;
	bottom: -17px
}
.main-navigation .main-nav ul li a::after {
  content: "";
  width: 1px;
  position: absolute;
  top: 18px;
  right: 0;
  height: 23px;
  background: var(--border);
}
.top-bar {
	background-color: var(--base-3);
	color: var(--base-3);
	border-bottom: 1px solid var(--border);
}
.top-bar .widget {
	border-width: 0px;
}
.footer-widgets .widget,
.footer-bar .widget {
	border-width: 0px;
}
.rpwwt-widget a {
	text-decoration: none;
}
.rpwwt-post-date {
	color: var(--contrast-3);
	padding-top: 5px;
}
ul.wp-block-categories li,
ul.wp-block-archives li {
  list-style-type: disc;
  margin-left: 20px;
	border-bottom: 1px solid var(--border);
}
ul.wp-block-categories li a,
ul.wp-block-archives li a {
	display: inline-block;
	width: 80%;
	float: none;
	text-decoration: none;
	padding-bottom: 13px;
	margin-bottom: 13px;
}
.wp-block-tag-cloud a {
	font-size: 14px !important;
	text-decoration: none;
	border: 1px solid var(--border);
	padding: 5px 12px;
	margin-bottom: 10px;
}
#comments {
	border: 1px solid var(--border);
	padding: 20px;
}
.separate-containers .page-header {
	background-color: var(--highlight-color);
}
a.read-more {
	display: block;
	margin-top: 15px;
  text-align: right;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
}
a.read-more::after {
	content: '→';
}
.separate-containers .inside-article {
	padding-top: 0px;
}
.read-more-section {
	text-align: center;
	margin-top: 40px;
}
.gp-post-date-author {
	text-align: center;
}
.gp-post-date-author {
    padding: 7px;
	  letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 14px;
	  margin-top: -10px; 
}
.blog-page-header-wrapper {
	  background: var(--highlight-color);
	  padding: 15px;
}
.blog-page-header {
	padding: 20px 40px;
}
.gp-custom-category-section {
	text-align: center;
	padding-bottom: 10px;
	letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 14px;
}
.single-featured-image {
	margin-top: 15px;
}
.gp-custom-tag-section a {
	padding: 5px 10px;
	margin-right: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	font-size: 13px;
}
.gp-custom-tag-section {
	margin-top: 15px;
}
.separate-containers .page-header {
	padding: 0px;
	margin: 40px;
}
.separate-containers .page-header .page-title {
	padding: 40px 40px 0px 40px;
}
.separate-containers .page-header .taxonomy-description {
	padding: 0px 40px 40px 40px;
}
.highlight {
	background: var(--highlight-color);
	padding: 40px;
  text-align: center;
  font-size: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.highlight-wrapper {
	  max-width: 1300px;
    margin: 0 auto;
}
.archive.author .page-title,
.search .page-title {
	padding: 40px !important;
}
.paging-navigation {
	text-align: center;
}
.site-header {
  box-shadow: 0 0 6px 0 rgba(37, 37, 37, 0.24);
}
.inside-header {
  padding: 10px 40px;
}
header {
	margin-bottom: 25px;
}
.home header {
	margin-bottom: 0px;
}
.cat-links, .comments-link, .tags-links {
  display: inline-block;
	padding-right: 10px;
}
.rpwwt-post-author {
	font-size: 14px;
}
.wp-block-latest-posts a {
	text-decoration: none;
}
.wp-block-latest-posts__list.wp-block-latest-posts li {
	list-style-type: decimal;
	margin-bottom: 15px;
	font-size: 95%;
margin-left: 20px;
}
.sidebar .widget {
	margin-bottom: 40px;
}
.separate-containers .inside-article {
  box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
  margin-bottom: 50px;
}
/** Hero Banner */
.hero-banner-title {
	text-transform: uppercase;
    font-weight: 900;
    padding-top: 25px;
}
.hero-banner-cta {
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 1px;
}
/** Responsive Grid System */
.wpf_column {
  float: left;
  width: 50%;
  padding: 10px;
}
.wpf_row:after {
  content: "";
  display: table;
  clear: both;
}
.wpf-container {
	max-width: 1300px;
	margin: 0 auto;
	padding: 20px;
}
.wpf-container-wrapper {
	background: var(--banner-bg);
	margin-top: 5px;
	margin-bottom: 25px;
  padding-bottom: 25px;
  padding-top: 25px;
}
.wpf_column_wrapper img {
	margin: 0 auto;
}
@media only screen and (max-width: 640px) {
  .wpf_column {
	float: left;
	width: 100%;
	padding: 10px;
	}
}

PHP Code Snippets

GeneratePress Copyright Text

add_filter( 'generate_copyright','gp_custom_copyright_design_2' );
function gp_custom_copyright_design_2() {
    ?>
    © 2022 GeneratePress Site Development• All Rights Reserved!
    <?php
}

Hero Banner HTML

<div class="wpf-container-wrapper">
	<div class="wpf-container">
		<div class="wpf_row">
		  <div class="wpf_column">
			  <div class="wpf_column_wrapper">
			<h1 class="hero-banner-title">Build WordPress Websites Using GeneratePress Theme</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu odio ex. Etiam vulputate auctor tellus, ac condimentum urna tempor ut.</p>
				<p>Vestibulum eu luctus magna, sit amet lacinia ligula. Morbi dictum elementum nisl quis tristique.</p> 
			 	<a class="button hero-banner-cta" href="#">Enroll Now For a Free Seat</a>
			  </div>
		  </div>
		  <div class="wpf_column">
			  <div class="wpf_column_wrapper">
			<img src="https://images2.imgbox.com/32/9f/VlryeUCa_o.png" />
			  </div>
		  </div>
		</div>
	</div>
</div>

Hero Banner Shortcode

add_action( 'generate_after_header','gp_custom_banner_section_2' );  
function gp_custom_banner_section_2() {  
	if(is_home()) {
		echo do_shortcode('[code_snippet id=9]');	
	}
}