Are you ready to start your blogging journey with a sleek and professional design? In this tutorial, I’ll guide you through the process of building a blog using the GeneratePress theme—a lightweight, highly customizable WordPress theme perfect for bloggers of all levels.
From setting up your blog to customizing the look and feel with [Design 1], this step-by-step guide will help you create a beautiful and functional blog that stands out. Let’s dive in and transform your blogging ideas into a stunning online presence with GeneratePress!
Recommended Hosting
Choosing the right hosting is crucial for your blog’s performance, speed, and reliability. For beginners and seasoned bloggers alike, we recommend using Hostinger due to its affordability, excellent customer support, and easy WordPress integration.
To get an extra 10% discount on Hostinger, click on the above☝️link and use this coupon code -
YOURTECHNICAL
Required Theme
- GeneratePress (Free Version)
Required Plugins
- Code Snippets
- Recent Posts Widget With Thumbnails
- WPForms Lite
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() {
?>
© 2024 Rajdeep Mishra • 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]');
}
}