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
- 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 | #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]');
}
}