How to Create a Blog On WordPress

Do you want to create a blog website on WordPress? Today I will show you how to create a blog website in a very short time. I will use GeneratePress Premium Theme to create this WordPress blog website.

To create a WordPress Blog website, first, you need to buy a domain name and a good Web Hosting. Then you need to install WordPress on that Web Hosting. I will not go into details here on how to do it. Because I have already made a lot of video tutorials on this topic. If you haven’t seen these videos yet, be sure to watch the videos.

After installing a new WordPress website, follow the instructions given below.

1. Install GeneratePress Theme

First, you need to install GeneratePress Theme. Then install GeneratePress Premium Plugin. If you do not have GeneratePress Premium then you can buy from us. You get it for a very low price. We have Lifetime License key for this theme.

2. Install GeneratePress Premium Plugin

After installing and activating GeneratePress Premium, follow the instructions below.

* GeneratePress Site CSS */ 
.inside-article, .sidebar .widget, .comments-area {
	border-right: 2px solid rgba(0, 0, 0, 0.07);
	border-bottom: 2px solid rgba(0, 0, 0, 0.07);
	box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}
.page-header-image-single .attachment-full {
    box-shadow: rgb(23 43 99 / 20%) 0 5px 25px;
    border-radius: 10px;
}
@media (min-width: 769px) {
    .post-image-aligned-left .post-image img {
    margin-top: -20px;
    border-radius: 10px;
    box-shadow: rgba(23,43,99,.2) 0 5px 25px!important;
    }
}
@media (max-width: 768px) {
    .post-image-aligned-left .post-image img {
    margin-top: -20px;
    border-radius: 10px;
    box-shadow: rgba(23,43,99,.2) 0 5px 25px!important;
    }
}
.sidebar .widget {
    box-shadow: rgb(23 43 99 / 10%) 0 5px 25px;
}

Add Author Details

Do you need an author box on your blog website? In this tutorial, I will teach you how to add an author box to your WordPress website. To add an author box, watch this tutorial on wplogout.com

Add This HTML Code

<div class="author-box">
    <div class="avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </div>
    <div class="author-info">
        <h5 class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        </h5>
        <div class="author-summary">
            <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div>
<div class="author-links">
            <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>" title="Read more">...</a>
       </div>
    </div>
</div>

Add this CSS Code

/* Author Box CSS */
.author-box {
	padding: 3%;
	padding-bottom: 10px;
	margin-top: 30px;
	font-size: 0.9em;
	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.author-box .avatar {
	width: 250px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
h5.author-title {
	margin-bottom: 0.1em;
	font-weight: 600;
}
.author-description {
	line-height: 1.6em
}
.author-links a {
	margin-top: -1.5em;
	font-size: 2em;
	line-height: 2em;
	float: left;
}
@media (max-width: 768px) {
	.author-box {
		padding: 20px;
		padding-bottom: 25px;
		margin-top: 60px;
		flex-direction: column;
		text-align: center;
	}
	.author-box .avatar {
		margin-right: 0;
		width: 100%;
		margin-top: -25px;
	}
	.author-box .avatar img {
		max-width: 100px;
	}
	.author-links a {
		float: none;
		align-self: center;
	}
	.author-description {
		margin-bottom: -0.1em;
	}
}

Add Related Posts

Related posts are a very important feature of a blog website. Many WordPress themes have related post features available. But, you will not find related post features in GeneratePress Premium. So in this tutorial, I will teach you how to add related post features to your website through a plugin.

Related Posts HTML Code

<div>
<h2 class="wpsp-related-title">Related Posts</h2>
<?php if ( function_exists( 'wpsp_display' ) ) wpsp_display( 1634 ); ?>
</div>

Related Posts CSS

/* Related Post CSS */
.wpsp-related-title {
	padding-top: 20px;
}
.wp-show-posts-image img {
	border-radius: 10px;
  box-shadow: rgba(23,43,99,.2) 0 5px 25px!important;
}

We are using wp related post plugin for these related post features.

Table Of Contents

/*toc-container*/
#ez-toc-container {
display: table;
font-size: 100%;
margin-bottom: 1em;
padding: 15px;
width: 100%;
}

Download Elementar Home Page Template

Click here to download