How to Create Blog Website Using WordPress: Part 1

Dipankar Biswas
9y
9k
0
0

100

Article

wordpress.rar

Introduction

Today I'll show to you how to create a blog web site using Wordpress.

Part 1

Install Wordpress.
Convert HTML theme to Wordpress.

Step 1

At first download Wordpress. You can also get it from my attached file.

Copy and paste here:

Now you need a database for your site.

So create your database as in the following:

Database Name= mytest
User=root
Password=no

Step 2

Now open your Wordpress site from your wampserver.

Click Next >.

Click to Continue.

Click Go.

Now input your database name, username and password.

Then submit.

Run the install.

Click "Next >" then input website name, admin username, admin password and email.

Then install Wordpress.

Now your database and your website are ready for work.

Click here to login:

http://localhost/wordpress/wp-admin/

Now you'll see your Admin panel as in the following:

Next click "Appearance" : "Themes".

You can use these themes by clicking Active. And you can also install Add New wrodpressTheme. But we'll use a simple HTML theme to convert Wordpress.

Step 3

Download Theme: copy and paste here:

My Theme

Next, after refreshing your Browser:

Your Stylesheet is missing

There is no Stylesheet. No Problem. Open your folder and add some pages as in the following:

Add:

404.php.
Index.php.
Functions.php.
Header.php.
Footer.php.
Page.php.
Single.php.
Style.css.

Now copy this code.

Style.css

/*
Theme Name: my theme
Theme URI: http://mytheme.com
Author: DipankarBiswas
Author URI: http://wordpress.org/
*/

Now refresh your admin page from:

No error found.

Now open your index.html page. Take a screenshot. And save this image here (rename screenshot).

Now your theme is ready to work.

Click on Active.

Header.php

Open the index.html source code and select header or footer.

<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Arise Infotech</title>
<link href="
<?phpbloginfo('template_directory'); ?>/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="
<?phpbloginfo('template_directory'); ?>/css/stylesc619.css?v=1.0">
<link rel="stylesheet" href="
<?phpbloginfo('template_directory'); ?>/css/queries.css">
<link href="
<?phpbloginfo('template_directory'); ?>/css/font-awesome.css" rel="stylesheet">
<link href='
<?phpbloginfo('template_directory'); ?>/http://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'>
<link href='
<?phpbloginfo('template_directory'); ?>/http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header class="clearfix">
<div class="logo col-md-3">
<h2 class="logo-text">Arise Infotech</h2>
</div>
<nav class="clearfix">
<?php
$defaults = array(
'theme_location' => '',
'menu' => '',
'container' => '',
'container_class' => '',
'container_id' => '',
'menu_class' => 'clearfix',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',/* menu class here */
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '
<ul id="%1$s" class="%2$s">%3$s</ul>','depth' => 0,'walker' => ''
);wp_nav_menu( $defaults );?>
</nav>
<div class="pullcontainer">
<a href="#" id="pull">
<i class="fafa-bars fa-2x"></i></a>
</div>
</header>

Footer.php

<footer>
<div class="container">
<div class="row">
<div class="col-md-2">
<h2>INFUSION</h2>
</div>
<div class="col-md-5">
<p>Nam mi enim, auctor non ultricies a, fringillaeurisus.Praesent vitae loremetelittinciduntaccumsansuscipiteulibero. Maecenas diamest, venenatis vitae dui in, vestibulummollisarcu. Doneceunibhtincidunt, dapibussemeu, aliquam dolor. Cum sociisnatoquepenatibusetmagnis dis parturient montes, nasceturridiculus mus. Vestibulumconsecteturcommodoeros, vitae laoreetlectusaliq</p>
</div>
<div class="col-md-3">
<p>aliquam dolor. Cum sociisnatoquepenatibusetmagnis dis parturient montes, nasceturridiculus mus. Vestibulumconsecteturcommodoeros, vitae laoreetlectusaliq</p>
</div>
<div class="col-md-2">
<ul class="footer-links">
<li><a href="#">List One</a></li>
<li><a href="#">Page Two</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script src="
<?phpbloginfo('template_directory'); ?>/js/jquery.min.js">
</script>
<script src="
<?phpbloginfo('template_directory'); ?>/js/bootstrap.min.js">
</script>
<script src="
<?phpbloginfo('template_directory'); ?>/js/scripts.js">
</script>
<script src="
<?phpbloginfo('template_directory'); ?>/js/unslider.min.js">
</script>undefined</body>undefinedundefined</html>

Index.php

<?phpget_header(); ?>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<?php
if(have_posts()):
while(have_posts()):
the_post();
?>
<div class="post-preview">
<a href="<?phpthe_permalink();?>">
<h2 class="post-title"><?phpthe_title();?></h2>
<h3 class="post-subtitle"><?phpthe_excerpt();?></h3>
</a>
</div>
<hr>
<?php
endwhile;
endif;
?>
<!-- Pager
<ul class="pager"><li class="next"><a href="#">Older Posts →</a></li></ul> -->
</div>
</div>
</div>
<hr>
<?phpget_footer(); ?>

Functions.php

<?php
register_nav_menus( array(
'primary' => __( 'Top Menu', $themename ),
'secondary' => __( 'Bottom Menu', $themename ),
));
functionarphabet_widgets_init()
{
register_sidebar( array(
'name' => 'Blog right sidebar',
'id' => 'blog_right_sidebar',
'before_widget' => '
<div class="row_1">',
'after_widget' => '</div>',
'before_title' => '
<h5>','after_title' => '</h5>',
) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>

Page.php

<?phpget_header(); ?>
<div id="content">
<?php
if (have_posts()):
while(have_posts()):
the_post();
?>
<div class="row">
<?phpthe_content();?>
</div>
<?php
endwhile;
endif;
?>
</div>
<?phpget_footer();?>

Single.php

<?php
get_header();
?>
<div class="main">
<div class="content_2">
<h1>
<?phpthe_title();?>
</h1>
<div class="blog_panel_left">
<?php
if(have_posts()):
while(have_posts()): the_post();
?>
<div class="single_post">
<h2>
<a href="<?phpthe_permalink();?>"><?phpthe_title(); ?></a>
</h2>
<h3>Posted on
<span><?phpthe_date('F m, Y'); ?></span>
</h3>
<?phpthe_post_thumbnail('featured-image'); ?>
<h3>Posted in
<?phpthe_category(', '); ?>
<?phpthe_tags('Tagged ', ', '); ?>
</h3>
<?phpthe_content();?>
<h3>
<?php if ( comments_open() || get_comments_number() ) :
comments_template();
endif;?>
</h3>
</div>
<?php
endwhile;
else:
echo "
<h3>No Posts Found</h3>";
endif;
?>
</div>
<div class="blog_panel_rght">
<div class="search">
<form id="searchform" role="search" method="get" action="
<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" value="Search" name="s" id="search" onblur="if(this.value == '') { this.value='Search'}" onfocus="if (this.value == 'Search') {this.value=''}" />
</form>
</div>
<?phpdynamic_sidebar( 'blog_right_sidebar' ); ?>
</div>
</div>
<?php
get_footer();
?>